博客主题装修更新记录

Tue, 06 Aug 2024 21:20:53 +0800

现在版本的博客是三年前搭建hugo程序的时候选择的hello-friends主题，用着没啥问题，但是一直想要做点改变，最近就动手干起来了。新主题基于PaperMod，更多更新如下。

首先换了个主题，主要是因为之前的主题用到了yarn编译，每次换电脑都要重新装一下node，npm，主题好久没有修改了，新装npm的时候居然给我报错，索性就直接换一个theme。挑选了一下PaperMod比较符合我的胃口，这个theme比较简洁，没有使用第三方的js，css预编译工具，使用了hugo去做js和css的预编译。

为了与众不同，这次为我这个修改版本的主题起了个名字“Zen“。主题的基础框架来自PaperMode，但是文章列表格式仍然复用了之前主题的格式，并且对于css进行了修改。之前的博客主题色是一个比较鲜艳的红色，这次换成了低调的黑色。另外页面的亮色主题参考了好多的网友的颜色，挑了一个接近书本的米黄色。

博客原有的friends，bilbil shortcodes是之前的时候从林木木博客那里学来的,这次仍旧拿过来改改css继续用。

paperMode是支持在首页添加一个个人简洁的，就顺手给加上了。除此之外，还把关于我的页面进行更新，对我自己进行了更加详细的介绍，欢迎阅读。

之前看到过很多博主都有做过足迹地图的功能，看起来很炫酷，我也一直想要做，一是老是犯懒，二是不知道从何下手。正好最近看到水八口首页的地图功能，去看了一下她的代码，使用的leaflet还不算复杂，就趁着这次博客大翻修，把足迹功能加上了。翻阅了hugo的文档实现了指定页面加载足迹地图，现在首页和行摄页面都把足迹地图给加上了。

地图底图使用的是cartocdn，跟水口八一样的简洁地图，同时把地图标记点放在了js文件中，页面上通过js去读取标记点添加到地图上，通过在自己的css中做修改来改动标记popup的样式并对其适配了夜间模式。对这个感兴趣的可以到github看我的源码。现在功能可以使用，唯独就是地点标记需要手动添加，后面有空可以再研究一下能够通过文章中添加属性，从而自动生成。

之前的代码渲染使用的是prism.js,这次修改博客，还是换成了使用hugo自己的代码渲染，希望能够提高博客的性能。

PaperMode内置了使用fuse实现的搜索功能，这次也给小站加上了。主要做的如下，config设置中要生成文章的json文件，修改如下：

1
2


[outputs]
 home = ["HTML","RSS","JSON"]

content中添加search文件夹，其中添加一个index.md文件。

1
2
3
4
5
6
7
8
9


---

title: "搜索"

url: [search]

layout: search

---

一定要添加这个layout：search,不然加载js的判断会读取不到layout属性，从而无法加载js，使得整个功能无法使用。

博客的RSS目前是全文输出的，这次给输出的RSS底部添加了博客的链接，能够点击直达博文评论去，欢迎大家评论。

因为本人不是前端开发，CSS的了解也只是一知半解，在主题定制过程中，多亏了GPT，让我能够在很多地方从容的实现想要的功能。

最后要说一下，我觉得博客的内容是最重要的，主题样式是次要的，后面还要继续努力好好写文章，也欢迎网友交流讨论。

码农明明桑

博客主题装修更新记录

看完评论一下吧