ouuan
弄了四个小时,看到这句话的时候,我还觉得搞笑了,怎么可能这么久?最后一看时间:三个小时。
算是二零二二年开年的第一篇稿子,要搞的东西不复杂,就和标题说的一模一样(此时的我还很年轻),以为照抄 作业 就行,放到收藏夹里面,拖拖拉拉等了一个多月,终于想起来这个事情。
迁移到hugo
的时候一直觉得插件太少了,不能复制代码,导致很多笔记从印象笔记迁移到博客,复制代码的代码的操作就变得繁琐了,严重耽误我水博客的动力。
序章
先仔细看看原作者的稿子,通读一遍然后翻翻作者介绍,我靠,碰到个大佬了,清华在读本科生,很早就接触到了计算机,诶,就是皮,先翻翻这个博客再说,完全不记得自己要做什么事情。顺带翻翻作者的Github
仓库,这个修改后的even
主题比现在的好看多了,新功能也多,搞起来,先把相关代码合并到过来。
新功能:查看文章历史、关联递交记录
效果还是不错的,拖到文章末尾就能体验。
动手前也没太细看作者原仓库的历史记录,以为简单的合并下就好了,最后合并了一堆代码,中间还冲突和N次,无脑覆盖,都是前端和渲染的模板代码,以我要的为准。
仓库地址:https://github.com/TianlongXiang/hugo-theme-even
中文的一个坑,git
不调整这个参数,会导致生成的获取不到当前文章的commit hash
,导致历史链接生成失败;生成文章完整历史的时候也需要改改自动集成脚本,记得拉取当前仓库全部的历史记录。
name: Build Github
run: git config --global core.quotePath false && hugo -b "https://www.xiangtianlong.com/" -d "github_public" && ls
样式调整
- 调整站点内容宽度,之前的设计适合移动端和电脑端,实际上也没人手机上看,我自己都是电脑上看
- 目录栏支持自动伸缩
正文
参考ouuan
的代码记录看了半个多小时,愣是没太看懂怎么增加的复制按钮。
时光穿梭,一月之后,又想到这事
既然这个作业没看懂,换个作业抄,总归能抄明白。搜索出来的结果,还挺让人意外,hugo
官方的论坛里面就有个帖子提到了如何增加复制按钮,跑过去一看,逻辑清晰。懵逼的事情来了,回到的站点一看even
渲染生成的代码块样式和资料中的描述不同,这块就比较啰嗦了,简单记录下。
由于基本不懂前端开发,不懂的地方就开着浏览器审查元素
,对着代码分析、靠着右边的样式器信息,慢慢也分析懂了逻辑;JavaScript
没看懂,控制台来点日志。不懂的时候很多,静下心,慢慢梳理拆分逻辑,总归能找到思路。
pre
节点有多个,这里指的是单个代码块,主题自己渲染了一行号出来,导致复制按钮出来两个- 想要关点主题自带的代码高亮渲染,奈何这个主题设置不熟悉
hugo
官网看资料,看了个半懂,知道有markup
设置能控制代码高亮- 调整配置文件,一直不对劲,渲染出来和预期不同
- 发现这堆设置
pygmentsOptions
,又继续翻资料,调整设置,先去掉行号 - 配置自定义的
css
样式表,配置自定义的js
脚本 - 既然都搞了这么多事情,脑子突然想到最近看到一个配色图不错,改改按钮的样式:中国风天青色走起


ouuan 弄了四个小时,看到这句话的时候,我还觉得搞笑了,怎么可能这么久?最后一看时间:三个小时。