Hugo Theme Engine: `{{ .render }} ` vs `{{ partial }}`

support
1

I am wondering what the real difference is, between including reusable html snippets in a hugo page tempate when using something like

{{ .Render "single-item" }}

vs using something like

{{ partial "pagination.html" $paginator }}

As far as I can tell, the single-item is a file that goes by the name ofsingle-item.html and that resides in the \_default folder, whereas pagination.html is a file that goes by the name of pagination.html and that resides in the \partial folder.

I am seeing this code pattern in many themes and would like to know what the difference is, and when you would choose 1 pattern over the other etc.

2 Likes
2
  • Render is for content pages only – and it renders a view with a template selected like https://gohugo.io/templates/views#which-template-will-be-rendered
  • partial is a workhorse that can be used everywhere to render a specific template – typically used for footers, headers, menus etc. Stuff that is the same for every (or most) pages.

The template selection in .Render makes it extremely flexible – you can have a summary.html template in _default used for most pages, but overridden for a specific content type and similar.

1 Like
3

I have the same conundrum.

Using the OP’s example, wouldn’t {{ partial "single-item" . }} work the same way in place of Render?

I have also seen that using the .html in partial “calls” is optional.

To put the question the other way, what would be a use case where you have to use Render, as partial will not work.

4