我之前搭建的 个人笔记 使用的是 HonKit 的默认主题,界面难免有些简陋。某次在 GitHub 冲浪时偶然发现了这个主题:Lotus Docs,第一眼就被它吸引住了——颜值非常高,而且基于 Hugo 构建,demo 页面直接让我心动:

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:

image

看起来非常理想,完美契合我的需求。

可惜一看版本计划,该功能预计将在 3.0 版本中上线:

image

而目前 release 页面中,最新版还是 0.2:

image

也就是说,这个功能暂时还不能直接使用。

回头看看那个 Pull Request,发现其实实现也挺简单粗暴的:

image

他也是通过修改 layouts/index.html 来实现跳转,和我的做法大同小异。所以我就直接参考他的代码,拷贝过来了。

经过测试,完美运行:

image


部署到 GitHub 并配置好 GitHub Pages 后,现在你就可以通过这个地址访问我的网站了:

👉 https://taten.xyz/


如果你还想添加评论系统、深色模式切换等功能,也可以继续拓展 Hugo 模块。我后续可能会写一篇进阶版教程,敬请期待。

如有问题,欢迎交流!