更换个人博客主题

更换个人博客主题

想换一个更加简洁的博客主题,也是觉得原来的 Zzo主题两侧的留白过于浪费空间,且配色,有些腻了。

不过,这主题用了很久了,且hugo版本也更新得不像样子了,新主题与旧版本的hugo并不兼容,故一并更新了hugo和主题的版本,这一顿折腾,应该又能撑2年吧。

更新hugo至最新版 #

1brew upgrade hugo

如果并没有更新hugo到最新版本,试试brew update先更新homebrew。

开始前先给zzo来个照片作为留恋吧⏳

img

版本更新之后,有些东西,必定要被丢弃的。

新主题的组织形式不同于前者,配置简化许多,目录格式的需求也不一致,因此,不可能是两者兼容的了。

引入新选定的主题 #

此次选中的主题是 hugo-book,琢磨一阵子这个主题后,发现它更加合适用作文档页😂。不过没关系,足够简洁就行了。

值得诟病的一点是,这个主题没有对原生 mermaid的支持,必须使用它指定的格式(称作feature),这样一来,后续如果要换主题的话,又是一顿改改改。

不过话说回来,如果这次闹腾完后,博客不怎么更新的话,这主题就随着一起入土吧❗️

依旧把主题作为新的Git子模块引入:

git submodule add https://github.com/alex-shpak/hugo-book themes/hugo-book

接下来就是配置了,主要是文件目录组织结构。hugo.yaml配置有现成的,没什么可说的。目录结构参考 exampleSite琢磨琢磨也差不多了。

使用这个主题的话,页面的front matter可以简洁一点:

title: " "
date: 2019-08-31
author: "wangy325"
weight: 5
draft:
description: ""
bookHidden: 
bookToC:
bookComments:

一般使用前4个标签就行了,weight用来控制列表顺序,越小越靠前。后面的标签根据喜好添加。

其次需要自己捣鼓的就是每个“标签”下的_index.md文件。

总体使用是非常简单的。

使用到的一些小技巧 #

主页的元素 #

主页的元素使用了 spotify-github-profile这个项目提供的API,直接引入的代码。

指定页面隐藏页脚 #

主页不同于其他页面,不需要展示gitInfo,但是全局开启了这个功能,且主题并没有提供单独的开关来控制是否加载partial代码片段。 不过,可以自定义一个参数,来实现这个功能。复制主题的layouts/_default目录到博客目录下,然后修改baseof.html文件,在里面加载 页脚的代码里添加自定义参数即可。

1    {{ if default true (default .Site.Params.BookFooter  .Params.BookFooter)}}
2    <footer class="book-footer">
3    {{ template "footer" . }} <!-- Footer under page content -->
4    {{ partial "docs/inject/footer" . }}
5    </footer>
6    {{ end }}

如上,添加了一个参数BookFooter来控制是否加载页脚。

参考 #

  1. Hugo: remove footer and header