Home About Me

Hugo Theme Snippets Worth Keeping Close

2026-10-31

Hugo themes are mostly a set of template decisions: which values to pull from the site, how to loop through menus and taxonomies, when to show a summary or a “read more” link, and how to handle pagination and single pages. The snippets below are the ones that come up again and again when building or adapting a theme.

Site-wide values and navigation

Site URL: .Site.BaseURL

Title: .Site.Title. For example:

<a href="{{ $.Site.BaseURL }}">{{ $.Site.Title }}</a>

Description: .Site.Params.description

Keywords: .Site.Params.keywords

Main menu:

{{ range $.Site.Menus.main }}
    <li><a href="{{ .URL }}">{{ .Name }}</a></li>
{{ end }}

A config.toml example:

baseURL  =  "https://immmmm.com"
title  =  "木木木木木"
[params]
    description = "不问明天，悠然浪费"
    keywords = "博客、主题、折腾、生活"
[menu]
    [[menu.main]]
        name="首页"
        url="/"
        weight="1"
    [[menu.main]]
        name="关于"
        url="/about"
        weight="2"

A full tag list with post counts:

{{- range $name, $taxonomy := .Site.Taxonomies.tags -}}
    <a href="/tags/{{ $name | urlize }}">#{{ $name }}<small>({{ .Count }})</small></a>
{{- end -}}

Total tag count:

{{ len .Site.Taxonomies.tags.ByCount }}

Total post count:

共 {{ len (where .Site.RegularPages "Section" "posts") }} 篇日志

Last change time for the site:

{{ time.Format "2006-01-02 03:04:05" .Site.LastChange }}

Post lists, summaries, and pagination

A post summary is available as .Summary. In a list, Hugo shows the content before <!--more--> or automatically truncates it.

{{ .Summary | plainify }}

The truncation length is controlled in config.toml; the default is 70 characters, and this example raises it to 140:

summaryLength = 140

.Truncated tells you whether a post has more content than the summary. If a more tag exists, it is true, which is a good time to show a “read the full post” link.

To paginate only pages under content/posts and use automatic summaries:

{{  $paginator := .Paginate (where .Site.RegularPages "Type" "posts") }}
{{ range $paginator.Pages }}
<article class="post">
  <h1 class="post-title"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
  <time class="post-date">{{ .Date.Format "2006-01-02T15:04:05" }}</time>
  <div class="post-content">
     {{ .Summary }}
   </div>
  {{ if .Truncated }}
  <div class="read-more">
    <a href="{{ .Permalink }}">阅读全文…</a>
  </div>
  {{ end }}
</article>
{{- end }}

Hugo’s date formatting uses a reference layout: 2006-01-02 15:04:05 means year, month, day, hour, minute, and second.

Pagination controls:

<div class="pagination">
  {{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">上一页</a>
  {{ end }}
  {{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">下一页</a>
  {{ end }}
</div>

Single posts

Title, permalink, and date work the same way as in lists. The full content is .Content.

Word count: .WordCount. For Chinese text, enable CJK-aware counting in config.toml:

hasCJKLanguage = true

Reading time: .ReadingTime. For example:

约{{ .ReadingTime }}分钟读完

Categories are available at .Params.categories; tags at .Params.tags. Example for tags:

{{ if .Params.tags }}
    <span class="post-tags">
    {{ range .Params.tags }}
        #<a href="{{ (urlize (printf "tags/%s" . )) | absURL }}/">{{ . }}</a>
    {{ end }}
    </span>
{{ end }}

Links to the previous and next posts in the same section:

<div class="pagination">
    {{ if .NextInSection }}
        <a href="{{ .NextInSection.Permalink }}">{{ .NextInSection.Title }}</a>
    {{ end }}
    {{ if .PrevInSection }}
        <a href="{{ .PrevInSection.Permalink }}">{{ .PrevInSection.Title }}</a>
    {{ end }}
</div>

Small utilities that show up often

Current year: {{ now.Year }}

Page section: {{ .Section }}

Homepage check:

{{ if .IsHome }}
    ……
{{ end }}

{{ if not .IsHome }}……{{ end }}

Defining a variable:

{{ $address := "123 Main St." }}
{{ $address }}

Defining a block, for example in layouts/_default/baseof.html:

{{ block "main" . }}
{{ end }}

And in layouts/_default/list.html:

{{ define "main" }}
  ……
{{ end }}

Shortcodes

The LoveIt theme includes dozens of built-in shortcodes, documented at https://hugoloveit.com/zh-cn/theme-documentation-shortcodes/.

That is a practical base to build from: site values at the top, lists and pagination for index pages, single-page metadata for article templates, and a handful of small template helpers for the rest.

Related Posts