投奔Hugo和主题的相关修改

写在前面


slug: “14.投奔Hugo和主题的相关修改” 重启博客时选择了 Hexo 这个静态博客生成工具,毕竟容易上手。当时没有选择 Hugo 的原因是没有喜欢的主题,没想到前段时间将 Hexo 换成 Hugo 也是因为主题。

我比较喜欢简约一点的主题,无意中看到 Jane 这个 Hugo 主题就喜欢上了。布局,样式各个方面都很合我口味,所以就毅然的投奔到 Hugo 的怀抱。在此感谢贤民老师把主题分享出来,也在这立个 flag 吧,未来三年不再折腾主题。

相关修改


虽然 Jane 这个主题各方面都已经很完善了,但还是有几个我个人比较不怎么喜欢的点。

  1. LOGO 的字体;

老实说到现在我都还没有完全弄明白 Hugo 的 CSS 样式是怎么打包的,哈哈哈。没学过,没接触过,在百度上也搜不到多少有用的信息。按我的理解就是修改,jane\assets\sass\ _variables.scss

// Font family of the logo.
$logo-font-family: Athelas, STHeiti, Microsoft Yahei, serif !default;

可我发现修改后完全没效果。在网上搜了一下,主题的 CSS 样式打包处理过。这我就完全不明白了,直接懵掉。改一个 LOGO 的字体就把我难倒了,你说知识是多么的重要呢!

又研究了一下,发现 jane\resources_gen\assets\scss\sass\jane.scss_48b060fe05b0a273d182ef83c0605941.content 这个文件应该就是打包后的主题样式了,找到.logo{},修改 font-family。保存,问题又来了,样式直接报错。说什么完整性,我也忘了相关的提示是什么了。难啊!怎么改个字体都这么的难?你说知识是多么的重要呢!没知识太可怕。

又在网上找相关的解决方案,能找到的资料真的很有限,大部分的原因也许是因为我连问题出在哪都不清楚,一次又一次的尝试与摸索。发现相同目录下jane.scss_48b060fe05b0a273d182ef83c0605941.json这个文件里面有个 sha256,难道jane.scss_48b060fe05b0a273d182ef83c0605941.content这个主题样式还加密过的?试着把 Integrity 里面的值删掉,刷新了一下。LOGO 的字体已经改成我要的样子了。具体为什么我也不懂。

  1. 搜索功能;

主题用的是 google 的搜索功能,国内使用不了。自己添加过 algolia,使用起来也挺方便的,但碍于我不会将 algolia 融入到主题里,只是简单的放到 header.html。

太丑,我不喜欢。

  1. 修复错误;

将 public 目录的文档上载到虚拟主机或推到 github 仓库时会出现一个错误提示,造成的原因是操作系统间的换行符,CRLF,LF 导致本地文件与服务器上的文件大小不一样。解决方法:jane\static\目录下新建.gitattributes 文件,里面添加下面代码

*.js -text

再就是关于浏览器检查元素时提示的警告,这个不修复也不影响使用。

为事件侦听器添加一个 passive 标志警告就没了。修改\jane\static\lib\slideout\slideout-1.0.1.min.js,搜索 addEventListener,在每个 addEventListener 后面的括号添加{passive: true}。例如

addEventListener(f.move, this._preventMove);

修改为

addEventListener(f.move, this._preventMove, { passive: true });
  1. 关于页脚

因为我在页脚里填入了相关的备案信息,如果再放入主题的相关链接会显得不怎么好看,所以就修改了页脚,已经在关于页面做了相应的说明。希望贤民老师可以理解。

最后


至此,我对现在的主题已经很满意了。