偶然发现 Hugo 的主题定制非常灵活自由，不同类别的文章可以套完全不同的模板，学下查找规则就能尽情乱来，就很快乐，临阵磨枪把毛坯房搭起来。

图片

缩略图归档页

  1. 须将图片和文章放在同一文件夹。

  2. 在content/<section>目录下创建archive.md文件，填入以下信息（指定模板并从列表中隐去该页）。

---
title: "Archive"
layout: archive
hidden: true
_build:
  list: false
---
  1. 在主题的layouts/<section>目录下创建archive.html文件，用以下代码列出所有文章中的图片文件。（Fill函数：将图片压缩为宽高相等的小图。）
{{ range (where .Pages "Type" $type) }}
  {{ if (ne .Params.hidden true) }}
    <a href="{{.Permalink}}"><img
      {{ range .Resources.ByType "image" }}
        {{ $img := .Fill "200x200" }}
          {{ with $img }}
            src='{{ .Permalink }}'  
          {{ end }}
      {{ end }}
    </a>
  {{ end }}
{{ end }}

在首页显示以相对路径引用的图片

参考了本站引用图片的“顺滑”流程，将配置文件中的Host项改为根目录。

点击全屏放大

绝赞 JS 库 Intense Images !

音乐

  1. 引入 Aplayer 及其插件 Metingjs。

  2. 在主题的layouts/shortcodes目录下创建wyy.html，填入：

{{ if .Get "a" }}
  <p><a href="//music.163.com/#/song?id={{ .Get "id" }}">{{ .Get "a" }}</a>
    {{ if .Get "b" }} | {{ .Get "b" }}{{ end }}
  </p>
{{ end }}
<meting-js server="netease" type="song" id="{{ .Get "id" }}" lrc-type="1"></meting-js>
  1. 在 md 文件里用短码 {{< wyy a="title" b="artist" id="123" >}}或{{< wyy a="title" id="123" >}}或{{< wyy id="123" >}}插入音乐。（ 过于方便我永远喜欢 hugo .gif ）。

tag

把所有 tag 列在地址为<section>/tags的页面，点击 tag 链接跳转到该页对应位置。

  1. 在content/<section>目录下创建tags.md文件，指定layout: tags。

  2. 在主题的layouts/<section>目录下创建tags.html文件，用以下代码列出所有 tag 及对应文章，并按文章数量排序。（humanize函数：将 tag 中的横杠转为空格。）

{{ range $taxonomy := .Site.Taxonomies.tags.ByCount }}
    <h2 id="{{ .Name }}">{{ humanize .Name }} ({{ .Count }})</h2>
    <ul>
      {{ range $taxonomy.Pages }}
        <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
      {{ end }}
    </ul>
{{ end }}
  1. 在文章页用以下代码添加 tag 链接。（lower函数：将 tag 转为小写；urlize函数：将 tag 中的空格转为横杠。）
{{ with .Params.tags }}
    {{ range . }}
      <a href="/<section>/tags/#{{ . | lower | urlize }}">{{ . }}</a> 
    {{ end }}
{{ end }}
  1. 添加以下代码以使点击 tag 链接后自动定位。参考了锚点跳转并展开手风琴。
<script>
  var target = window.location.hash.replace(/[#]/g,"");
  document.getElementById(target).click();
</script>

  1. 在主题的taxonomy或tags目录下创建list.html与term.html文件可定制 tag 列表及内页，但路径似乎只能是/tags。

  2. 在config.toml中添加以下配置可禁止生成 RSS 。

[outputs]
  taxonomy     = ["HTML"]
  taxonomyTerm = ["HTML"]

参考

文档

教程

文件

短码