我之前搭建的 个人笔记 使用的是 HonKit 的默认主题,界面难免有些简陋。某次在 GitHub 冲浪时偶然发现了这个主题:Lotus Docs,第一眼就被它吸引住了——颜值非常高,而且基于 Hugo 构建,demo 页面直接让我心动:
于是,我决定对笔记站进行一次重构。
安装 Hugo + Golang + Lotus Docs
首先使用 winget
安装 Hugo:
winget install Hugo.Hugo.Extended
然后创建一个新站点:
hugo new site mysite
cd mysite
这将在 mysite
文件夹中生成 Hugo 项目的基础目录结构。
根据 GitHub 上的 README,这个主题依赖 Golang,因此需要先从 Golang 官网 下载并安装 Go。
此外,Lotus Docs 使用了 Hugo 的 Bootstrap 模块,需要将项目初始化为 Hugo 模块:
hugo mod init github.com/linmoh/note
然后在项目根目录执行以下命令以添加主题:
git init
git submodule add https://github.com/colinwilson/lotusdocs themes/lotusdocs
接着,替换配置文件为以下内容(config.toml
):
baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'Mohan 的笔记本'
contentDir = 'content'
enableEmoji = true
[module]
[[module.imports]]
path = "github.com/colinwilson/lotusdocs"
disable = false
[[module.imports]]
path = "github.com/gohugoio/hugo-mod-bootstrap-scss/v5"
disable = false
[markup]
[markup.tableOfContents]
startLevel = 1
endLevel = 3
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
[markup.goldmark.parser]
[markup.goldmark.parser.attribute]
block = true
然后启动本地服务:
hugo server
浏览器打开 http://127.0.0.1:1313/
即可看到本地预览效果:
修改默认首页(登录页)
但我并不想保留主题默认的首页(官方称其为“登录页”),在官方文档中也没有找到禁用的设置项。
于是我采用了最直接的方法,将 layouts/index.html
修改为以下内容,实现自动跳转:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="refresh" content="0; url=/docs" />
</head>
<body>
</body>
</html>
虽然有点暴力,但确实能用。不过我总觉得这样不太优雅。
偶然间在 Issues 区发现了 这个:
思路和我不谋而合,关键是已经有人提交了 Pull Request:
看起来非常理想,完美契合我的需求。
可惜一看版本计划,该功能预计将在 3.0 版本中上线:
而目前 release 页面中,最新版还是 0.2:
也就是说,这个功能暂时还不能直接使用。
回头看看那个 Pull Request,发现其实实现也挺简单粗暴的:
他也是通过修改 layouts/index.html
来实现跳转,和我的做法大同小异。所以我就直接参考他的代码,拷贝过来了。
经过测试,完美运行:
部署到 GitHub 并配置好 GitHub Pages 后,现在你就可以通过这个地址访问我的网站了:
如果你还想添加评论系统、深色模式切换等功能,也可以继续拓展 Hugo 模块。我后续可能会写一篇进阶版教程,敬请期待。
如有问题,欢迎交流!