Using a short code for repeated html code

I am using a html code to refer to social sharing sites. For example this code:

<a href="" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="images/Facebook.png"></a> 
<a href="" target="_blank" title="Tweet"><img alt="Tweet" src="images/Twitter.png"></a>

I need to place it in all pages (modals, or .md files in my specific case) of my website, which is based on a Hugo sigle page theme. As I have a lot of pages, this repeated code increases the index.html size significantly.

Is there a way to replace all of that code with something that is very short, similar to css tags, or something like that?

If your sharing really have to be in the content files you can simply create a short code and call in the content files. However, it sounds more practical to put this code in a partial. This way you only have to add it to the template for single pages.

If you have to include this snippet in content files and templates I suggest that you create a partial that contains the links from above. Next, you can call the include the partial in the wished templates.

For the content files you could wrap the partial by creating a short code that simply calls the partial.

1 Like

Thank you very much for the answer.
As I am not too familiar with partials, I have this question. Can I use partial for modals (pop-up)? If I want to put my above social links at the bottom of every modal, how shall I do that?

Also, how can I do this using short code? Can you please be more specific as I have never used a short code. Where should I add my code?
Also if I use shortcode, when I build the website and create a single index.html file will that shortcode create the same repeated code in the index.html and hence the size increases as if I had copied the social media share links many times in that file?

Thanks again.

Partials are small, resuable templates that help to keep your code DRY. You can create a partial by simply creating a file in the layouts/partials folder.

They can be called in a template for example as follows:

{{ partial "social.html" . }}

where social.html would be your partial in layouts/partials.

Please refer to the docs for more information.

Short codes are also just templates that can be called within a content file. You can create them by adding a file to layouts/shortcodes.

Since they also templates you can call partial (“social.html”) like above. Let’s say you created a short code called socialsc.html that calls the “social.html” partial.

You can use the short code in the content file as follows:

{{% socialsc %}}{{% /socialsc %}}

Again, please refer to the docs to get a better understand of what short code are and how to use them.

First of all some clarification:

  • shortcodes are used within content files
  • partials are used within templates

At the bottom line I’m not sure were you are heading. Do you want that the homepage (index.html) has a sharing buttons/links for just this page.

Or do you want to list your content files on the homepage with sharing buttons/links right next to the content and title?

Thank you so much for your complete answer.
I used partial and it worked nicely, however, the final index.html size is exactly the same as if I copy the social sharing html code in all the .md files so it does not save any storage. The reason I am looking at the size of index.html only, is that my theme is a single page theme and the final result is just index.html.

In other words, I want all my modals (pages that their address starts with #) have the sharing bottons. I guess as I am using single page theme, there is no other way to save size.

What remains a bit foggy for me is why the addition of two links per content files adds so much such compared to the rest your index file (which will likely take more code).

What you want doesn’t fall inside Hugo’s domain. What you need is some JavaScript magic.