Hugo Module自定义修改主题:思路讲解

翻看历史提交记录,站点切换过很多次主题,每次切换主题都会有一些自定义的修改,这里记录一下自定义修改主题的思路。笔者的Github也有个仓库,短暂的维护过even主题,后来由于强迫症,非想要升级hugo编译器到最新版本,导致even主题不兼容,所以又切换到了stack主题。

Hugo的模块化

提到模块化,大家可能会想到的是Nginx模块,IDEA插件等等。 通常是我可以通过上传一些模块,来满足我的差异化需求。 之所以大家都喜欢这种模块,主要是因为足够灵活,不用费太大的劲就可以满足自身的需求。 因为很多时候,虽然大体上差不多,但总有一些细节上的差异。 这也正说明软件的复杂度,除了技术上的复杂度,还有业务上的复杂度。 大多数情况下,我们面对的主要是业务复杂度。 这也正是在软件领域,对”隔行如隔山”这句俗语最好的阐述。 如今,不仅互联网行业,金融行业,就算传统的制造业,都已经使用上了信息化系统,来帮助企业的生产和管理。 同样是请假系统,哪怕在同样的行业,不同的公司,都会有所差异。

Hugo的模块和大家印象中的模块有点不一样,并不是以功能为单位,来满足差异化需求。 而是以目录结构为主,来识别相同的结构。

资料链接:07. Hugo架构 — Hugo的模块

[[imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"

git submodule 方式依旧能用,本文不建议使用,如果引入主题的发生了更新,维护起来会比较麻烦,要单独的 git 仓库管理主题。

主题的修改逻辑

有了前面模块化的基础概念理解,再来理解自定义主题,就简单那很多了,hugo现在的主题,也是多个不同的模块组装起来的,我们想要修改其中一个模块,找到对应的模板文件,修改即可。

摘取自stack官方文档:

Using this method, there won’t be any file under themes directory. In order to modify the theme, you will have to copy the file you want to modify to the same directory under layouts directory.

For example, in order to modify the themes/hugo-theme-stack/layouts/partials/head/custom.html file, you will have to copy it to layouts/partials/head/custom.html and modify it there (copy the code from theme’s repository). The same applies to assets and static directories。

如何找到模板文件

正统思路

翻阅主题的源码文件,理解主题的设计思路,找到对应的模板文件,修改即可。

粗暴思路

笔者并不是很懂前端代码,所以有时候会采用粗暴的方式,比如直接在浏览器中打开对应的页面,找到想要修改的地方,通过审查元素的方式,定位到css name,主题源码中搜索,找到对应的文件,复制一份到站点目录,修改即可。

小技巧

官方默认就提供了一个文件,用于自定义样式,我们需要改造的地方地方,可以通过拆分多个文件,custom.scss 文件引入我们其他的文件,这样可以更好的管理样式文件。

alt text

汇总修改内容(6h)

现在已经是AI编码的元年,详细的内容,这里就不详细贴出来了,只是简单的列举一下,本站点的一些修改内容,比如调整复制按钮的样式,重新设置代码的块的样式,ChatGPT都是能轻松搞定的。

  • 整体:全局文字样式,沿用以前 even 融合 info cn 的显示风格,中文友好
  • 首页:右侧导航增加鼠标交互动画
  • 首页:文章新增摘要预览(耗时颇多,用了取巧的办法实现)
  • 滚动栏:美化了一下滚动栏的样式
  • 代码块:引入了 highlight.js 代码高亮插件,美化代码块样式
  • 文章详情:部分内容属于转载,新增原作者信息展示,原链接展示
  • 归档页面:顶部的分类图片,移除主题自带的颜色蒙版,显示原图
  • 归档页面:新增了按照年份的分类的统计展示面板
  • 归档页面:两栏显示布局

stack 主题的组件复用率很高,也导致首页文章新增摘要预览耗时颇多,改了对应的组件,文章的详情页面也随之发生了变动,导致正文重复展示内容,golang 模板的语法也不是很熟悉,所以花费了不少时间,组件之间的参数传递一直没搞定,最后通过取巧的办法,主页单独引入JavaScript脚本,通过自定义特殊变量,来实现摘要预览。

有时候代码复用率太高也是个问题,会导致修改一个地方,其他地方也会受到影响,所以在修改主题的时候,一定要注意,不要破坏原有的逻辑。

评论区

这哥们的修改更加完善:https://blog.reincarnatey.net/2024/0719-better-waline/

本站点简单的启用了 Waline 评论系统,stack 主题默认支持 Waline,只需要在 config.toml 中配置即可。

推荐首页邮箱联系、本站点不开放评论区

Licensed under CC BY-NC-SA 4.0
最后更新于 2024年11月20日 20:54
金融IT程序员的瞎折腾、日常生活的碎碎念
使用 Hugo 构建
主题 StackJimmy 设计