更新

  • 2019/10/07 更新 Hugo 旧版本安装方法
  • 2019/03/17 初次发布

介绍

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

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

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

最终选定用 olOwOlo/hugo-theme-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

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

构建工具

如果需要修改主题,那么需要安装 nodeyarn 构建

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.scsstheme-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 默认分支中: