Tidy Hugo build code

support
1

I am working on a template from scratch, It relies on partials.
I have stumbled across an error and want to see the built index.html in its entierety to make sure that hugo is putting things in the right place.

However, the formatting is all over the place within index.html, making it a pain to read.

Is there anything that hugo doesn’t like when building sites? Or anyone have any ideas of quickly formmating code afterwards.

I am viewing code in chrome and firefox and its the same.

2

Could you explain in more detail what you mean with formatting?

Do you see empty lines and indentations where you didn’t expect them?

3

Yes, after running hugo build, I have noticed in the index.html file that there are a lot of unexpected indentations, making it quite hard to read.

4

The template code to include partials get replaced with the partial’s content. Sometimes we indent template code to make it more readable but this could add the unexpected spaces/tabs.

If this doesn’t help it would help to post a small excerpt of your code that procudes unwanted indentations.

5

You can see the code in the public directory on this git repo - https://github.com/hdcdstr8fwd/hugo-foundation
particularly the index.html.

Having looked at it now, it seems that when the template partials are imported they do not adhere to the formatting provided in the index.html in the themes directory, but take upon their own indivdual formmating as if they were a new file.

6

The “problem” is that the partials are inserted as they are. Let’s pretend you include the partial nav.html

<div>
    {{ partial "nav.html" . }}
</div>

with the following content:

<a href="#">Foo</a>
<a href="#">Bar</a>
<a href="#">Buzz</a>

When the (indented) partial call in replaced you get

<div>
    <a href="#">Foo</a>
<a href="#">Bar</a>
<a href="#">Buzz</a>
</div>

The Foo link is indented as expected because there was already a tab in front off the partial call. But the template engine doesn not prepend this tab in front of the other lines (the Bar/Buzz link).

7

Ah yes, thanks. What would be the standard practice to keep code clean?

I was looking into running a gulp task to clean up html after a build.

8

I’m not aware of a way that automatically formats the code as you like. The only options I see is to indent the lines for the Bar/Buzz link in the nav.html partial. But this would “uglify” the format of your source code.

As you already mentioned your best option is to use a tool like Gulp to post-process the generated HTML.

9

Great thanks for your help! :+1: