Hugo 自定义文章样式

calendar Apr 12, 2020 · 1 min read  ·
Share on: linkedin copy

Overview

之前 WordPress 推出不同文章样式，如轻博客一样，发一句话、链接或视频有不同的显示效果。之后，用 Hexo、Bitcron 时都以文件夹形式进行文章分类，并以此为判断条件。

1content
2├── posts
3│   ├── chat
4│   ├── coding
5│   ├── daily
6│   ├── reading

如 chat 目录内的 md 文件是以一句话的模式（头像+时间）显示，怎么实现呢？利用 Hugo 的 .File.Dir 和 replaceRE 正则。

核心代码如下：

 1{{ $PostCate := .File.Dir | replaceRE "posts/(.*)/" "$1"}}
 2{{ if eq $PostCate "chat"}}
 3    <div class="post-meta">
 4        {{ if .Date }}
 5            <span class="post-date">{{ .Date.Format | default "2006-01-02" }}</span>
 6        {{ end }}
 7    </div>
 8    <div class="post-content">
 9        <a href="{{ .Permalink }}"><img loading="lazy" class="avatar" src=https://sdn.geekzu.org/avatar/{{ md5 "自己的邮箱" }} ></a>
10        {{ .Content }}
11    </div>
12{{ else }}
13    ……正常文章样式
14{{ end }}

一般修改 _default/list.html 和 _default/single.html，其中 list 是放在文章列表的 {{rang ……}} 循环之中。

1{{ range 什么什么 .Pages }}
2    ……这里
3{{ end }}

随意说明

.File.Dir 是获取当前文章的相对路径 posts/coding/ ，replaceRE "posts/(.*)/" "$1" 是正则到 coding 子文件夹名，之后 {{ if eq $PostCate "chat"}} 就是判断咯 🤷‍♂️