优化Hugo Next主题的过程2

发表于： 分类于：
字数： 1860 阅读：≈ 4分钟 浏览： 评论：

背景

自上次优化NexT主题并分享到Github仓库中 hugo-theme-next 后，也是受到了不少NexT主题喜爱者的使用和邮件反馈。于是决定还是要花点心思来维护它，便把自己之前一些想法也重新加入到NexT主题中，同时对部分插件的功能做了更新。

此次优化后发布的版本代号为3.x，原因是整体结构和之前的变化较为大（主要是在配置方面的体现），为此也重写主题的相关介绍等信息，目前正在申请加入官方的主题列表中( 点击预览 )，欢迎大家的使用和反馈。

中英文切换

或许大家觉得这个功能有点软肋，原因就是个人博客的流量并不会很大。但流量小并不是意味着没有流量，所以我们还是可以增加个中英切换的功能，来助力我们推广自己的博客空间。而且Hugo引擎在多语言化这块的开发也比较简单，不过现在是手动模式，也就意味着你在发表文章写两份。增加中英文切换功能后的效果参考如下：（就是在左上角添加了切换入口）

Translate Function

后续考虑是否可能引入自动翻译的模式来加载，可以减少写文章耗费的时间。

重构配置

结合上面的中英双语切换功能，对于主题的配置内容管理来说就会变的比较混乱，个人不喜欢在一个文件中写满太多的配置参数。而这块的想法正好Hugo引擎的设计不谋而合，它天然就支持按分类的管理方式来独立配置不同的参数。

Setting Files

同时也对本主题中使用的各服务组件配置做了分类，这样显示更加清楚明了，也便于后续参数的调整及优化。

Setting Parameters

Addthis分享

主题中原来使用的BShare插件，但在某一天突然就发现其无法正常引用。真是感叹在继百度分享插件后，又一国内分享插件的落幕。所以后来就找到了国外一款比较流行的插件addthis，通过一番倒腾研究终于成功集成，用于替换原来的BShare插件。

在主题中启用也比较简单，分如下2步：

  • 到addthis官方网站上去注册个账号（ 点击注册 ），然后获取到个人的ID号，类似这样的：ra-6049e46e9ee54287；
  • 在配置文件中找到Share配置项，设置Enable = true和AddthisId = "Your AddthisPubid"两个参数；

实现的效果如下：

Add this Share

本地搜索优化

之前本地搜索生成的索引文件是覆写到robots.txt，但在中英双语的情况下便无法支持两种不同中英文索引，所以需要改造原来的生成索引方式。而这也是再一次感受到Hugo引擎的强大之处，它完全可以支持自定输出文件，只需要如下的几行配置：

1
2
3
4
5
6
7
8
9

[outputFormats]
  [outputFormats.SearchIndex]
    mediaType = "application/xml"
    baseName = "searchindex"
    isPlainText = true
    notAlternative = true

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

6.支持数学公式

有网友反馈本主题无法支持数学公式的渲染，后来分析了下发现是之前优化文件引用中把MathJax文件给移除所造成的。于是重新修复了此功能，使用时只需要在文章的页面参数中加入math: true配置即可，效果如下：

Math Function

Waline评论

原来主题中使用一款Valine的评论插件，但网上关于此未评论插件的安全问题也是讨论的“血雨腥风”，但过多的讨论咱就不参合啦。在此背景下便有人衍生出Waline插件，通过服务端的部署来解决安全隐患。个人还是比较喜欢它的评论管理功能（可以有效屏蔽一此恶意灌水），于是又展开了一番研究，成功在Vercel上面部署自己的评论后台服务，也在博客中升级并引用此评论插件功能。

这款评论插件的部署相对来说还是要有些“成本”，不过官方的文档很完善，社区回答也很活跃，大家可以放心快速使用。具体参考： 指南

然后在配置参数中找到Comment配置项，填写如下的信息，就可以在博客页面看到评论框。

1
2
3
4

[Comment]
  Enable = true
  Module = "Waline"
  WalineSerURL = "Your WalineSerURL"

Gitee图床

写博客中或多或少都是会使用到图片的，以前那些可免费使用的服务，随着岁月的流逝“薅羊毛”的福利也不再有啦。中间也倒腾过不同的服务商，现在还是选择放弃啦，把图片都统一上传到仓库吧。考虑到访问用户都在国内居多，于是就是使用了Gitee的Pages服务作为图床。

还好当初写博客时对图片的分类管理比较清晰，更换图床也没有太痛苦，只是一键更换个访问域名。论架构设计的得要性呀！！！

其它优化

剩下就是有关于显示样式，不同设备间适配的问题。虽然看起来似乎很简单，但真的切入进去才发现调试真的很痛苦。修复过程中还特地到Hexo引擎版本的NexT主题上去“偷师”几把，在移动设备上显示上增加了些效果动画，增强操作的体验。

总结

个人就是比较喜欢NexT的简单清爽，所做的这些改造和优化工作，是为了主题更加完善和好用，并不会去改变NexT主题的设计初心，希望NexT主题能在Hugo引擎下继续发光发热。

后续会逐步优化使用手册和主题的其他问题，也欢迎更多爱好NexT的网友一起参与进来，共同建设，期待。

my-hugo-blog