Baseof template issue


#1

I’m getting the following behaviour which I can’t rectify.

The body of my baseof.html:

<body>
  Top of baseof
  <hr>
  {{ block "main" . }}

  {{end}}
  <br>
  {{ block "footer" . }}
    This is the default baseof Footer
  {{end}}
  <hr>
  Bottom of baseof
</body>

My single.html file:

{{ define "main" }}
  This is the single template
{{end}}
{{ define "footer" }}
  This is the Single footer
{{end}}

Is appearing like this

Why does the text “Top of baseof” appear at the bottom of the page in this way?


#2

I can’t open your link but I would wager it happens because of the stylesheet you are using.


#3

Ah I thought that might happen sorry. On imgur. (screenshot from list.html but same issue)

I’m new to Hugo but as far as I can tell I have no CSS file. See here. I’m following a YouTube tutorial and it appears fine on the tutor’s screen.

(please let me know if links aren’t working!)


#4

The link is working and I am pretty sure this is not related to hugo. It’s about the markup you are using. Can you share the github repository of your code?


#5

My git. (the push didn’t push empty folders like ‘data’ and ‘static’)

Thanks so much


#6

I just cloned your repo and ran hugo server with the latest version and it seems in order:

maybe try running with --disableFastRender or clearing your local cache?


#7

I tried those solutions but they didn’t work unfortunately. But I just checked in FireFox and it’s working fine there (sorry I didn’t think to do this before). So I guess it’s to do with Chrome and maybe something in mine specifically. It’s not a big deal but hopefully it can get solved.


#8

Caching.

Whenever you get an unexpected result in the browser, one of the early things to try is ctrl-F5 to force the browser to invalidate the cache and reload everything from scratch.

If you are interested, you can see the difference using the network tab of the developer tools (F11).

Browsers generally try to aggressively cache CSS files to improve performance. Sometimes you have to give them a nudge in order to get the newer layout.


#9

I’ve found that Chrome is so aggressive with caching. You really have to run it in incognito or with dev tools open (and cache disabled set when it’s open). Alternatively, I do my dev work in Chrome Canary with the cache turned off completely.


#10

To prevent this, I’m using cash busting with trick described here: Cache busting of CSS/JS See for example