现在版本的博客是三年前搭建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,让我能够在很多地方从容的实现想要的功能。

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