更新

  • 2021/06/20 增加升级主题文章链接
  • 2019/10/07 更新 Hugo 旧版本安装方法
  • 2019/03/17 初次发布

介绍

原来使用的是 Hugo Lithium Theme | Hugo Themes，但是存在一些问题：

  • 对中文支持不好，并未指定中文字体，导致不同系统上显示不一致
  • 手机上显示时文章列表是居中的，不符合中文左对齐显示规则
  • 没有文章目录支持，当文章结构复杂时不易查看层次结构
  • 皮肤颜色配置有问题，强调内容的颜色与正文一致，无法分辨

使用关键词 hugo 主题 site:github.com 搜索 GitHub 上可用的中文主题。

最终选定用 olOwOlo/hugo-theme-even 来作模板，主要是自带文章目录。

升级

如果需要使用新版本的 Hugo 与 Even 主题，可以阅读 博客升级 Hugo 与主题 Even - 狂飙。

环境

  • macOS 10.14.3
  • Hugo 0.54.0

注意：even 主题要求最少是 Hugo 0.50 以上。

安装

Hugo

建议使用 Hugo 0.54.0，主题未适配最新版本的 Hugo 0.58.3，因此在显示时主页或错误地显示为 Posts，具体情况如果有需要建议实践测试。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# 如果之前安装了 Hugo 可以先取消链接
brew unlink hugo
# 安装 Hugo 0.54.0
brew install https://raw.githubusercontent.com/Homebrew/homebrew-core/6c0c7919de42ee5d629d3a9786fb111f4498dab3/Formula/hugo.rb
# 如果之前安装了 Hugo 则需要切换版本
brew switch hugo 0.54.0
# 锁定版本，防止误升级
brew pin hugo
# 查看版本，确认降级成功
hugo version

Even 主题

1
2
3
4

cd site-root
git clone https://github.com/olOwOlo/hugo-theme-even themes/even
git add theme/even
git commit

这里采用直接提交到仓库中的做法，比较方便管理，不用多克隆一份子模块。

构建工具

如果需要修改主题，那么需要安装 node 与 yarn 构建

1
2
3
4
5
6
7
8

brew install node
brew install yarn

cd ./themes/even/
# install dependencies
yarn install
# build
yarn build

定制

首页

首页默认只显示几篇有摘要的文章，需要改为存档页面的样式，因此直接拷贝 themes/even/layouts/_default/section.html 中内容到 themes/even/layouts/index.html 中。

另外需要删除第一行的 {{- define "title" }}{{ T "archive" }} - {{ .Site.Title }}{{ end -}} 修改标题代码，首页需要显示默认标题。

日期格式

日期格式需要按照 Go 语言要求填写，在这里定义为显示年月日与星期：

themes/even/layouts/index.html

1
2
3

    <span class="archive-post-time">
      {{ $element.Date.Format "2006-01-02 Mon" }}
    </span>

日期字体

日期的字体默认并未使用等宽字体，在修改模板增加英文星期缩写显示后，会导致标题不一致，改成等宽字体就会正常。

在 src/css/_partial/_archive.scss 文件中找到 .archive-post-time 并增加 font-family: $archive-post-time-font-family;。

然后在 themes/even/src/css/_variables.scss 增加以下变量定义：

1
2

// Font family of the archive post time.
$archive-post-time-font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace !default;

颜色

修改 themes/even/src/css/_variables.scss 中 theme-color-config 变量为需要的颜色，注释中列出了可选值：

$theme-color-config: 'Mint Green';

阻止百度爬虫

在 themes/even/layouts/robots.txt 增加以下内容：

1
2
3
4
5

User-agent: Baiduspider
Disallow: /

User-agent: baiduspider
Disallow: /

构建

1
2

cd themes/even/
yarn build

由于 css 文件名每次都不一样，因此需要刷新浏览器才能看到正确效果。

结果

已经将修改结果提交到 Fork 后的仓库 networm.me 默认分支中：