How deep can you go in customizing Hugo?

support
1

Hello there!

I’m hosting a small website that’s currently written in PHP but as it’s static content, I figured I could move it to GitHub pages and make it a really static website. While talking with some people, I’ve been directed toward using Hugo and it might indeed to the job based on what I have started to read in the documentation.

However, before going deeper in the documentation and “losing” time (Using brackets here because it’s never really lost time) reading about something and finally figuring it won’t work for my use case, I thought I could come here and ask expert if what I’d like to achieve can be done with Hugo.

The website itself is mainly a picture gallery. Below is an example of the things I display. There’s also a page with many tables. The tables don’t seem to be an issue as I have already found that with Goldmark, I should be able to use the colspan attribute.

But for the picture gallery, I’m using custom data-* attributes and I have been unable to find information about support for them with Hugo. So my main question is: “Does Hugo support the addition of custom data-$ attributes in HTML tags?” That would end with something like that for each pictures. Note the data-srcand data-clipboardattributes on the ìmg`tag.

<div class="item_evt">
    <img class="evt_img" src="pictures/GFX_evt_acquire_asset.png" data-src="pictures/GFX_evt_acquire_asset.png" data-clipboard-text="GFX_evt_acquire_asset">
    <span>GFX_evt_acquire_asset</span>
</div>

image
image1920×922 175 KB

2

Hugo makes no constraints on how you write your html, you can write whatever you want.

3

Your template code determines the structure of the html, using a data-src for something like lazy loading is not uncommon. The current code doesn’t look responsive.

4

Oh! That’s cool then. I was under the impression that Hugo was limited because of the use of markdown and that you could not go with more complex structure.
I will read the documentation deeper now that I know that.

@andrewd72: yeah, the code is not fully responsible and I will try to change that while switching to a fully static website (Whether I use Hugo or not) even though mobile traffic is like less than 5% of the total traffic. :slight_smile:

Thanks to both of you for your answers.

Edit: not sure if I can select two posts as the accepted Solution so I will keep the last one.

1 Like
5

You don’t have to use Markdown, your templates can be entirely html if you want. If you intend to put html directly inside .md files you will just need to enable the unsafe html option in the markdown renderer (Configure Markup | Hugo), but in the example you gave you could just modify a render hook for images to include the additional markup you need: Markdown Render Hooks | Hugo

6

Likely because your site is not responsive! I’d expect that mobile usage would be >50% otherwise, it is on the web in general. If your site is unusable on mobile that would explain the stats you are seeing.

7

Nah. Because it’s targeted at a really specific audience which is working from computers (devs) so they have no use of the website from mobile.
That said, that’s no excuse to not make it responsive in that new iteration. :slight_smile:

You don’t have to use Markdown, your templates can be entirely html if you want. If you intend to put html directly inside .md files you will just need to enable the unsafe html option in the markdown renderer (Configure Markup | Hugo), but in the example you gave you could just modify a render hook for images to include the additional markup you need: Markdown Render Hooks | Hugo

Thanks for pointing to the right direction. I will the doc and see if I really need something like Hugo or if writing HTML from scratch won’t be enough. ^^

8

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.