惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

V
V2EX
Y
Y Combinator Blog
博客园_首页
V
Visual Studio Blog
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
阮一峰的网络日志
阮一峰的网络日志
Hugging Face - Blog
Hugging Face - Blog
宝玉的分享
宝玉的分享
B
Blog
博客园 - 三生石上(FineUI控件)
小众软件
小众软件
WordPress大学
WordPress大学
L
LangChain Blog
爱范儿
爱范儿
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
P
Proofpoint News Feed
Blog — PlanetScale
Blog — PlanetScale
C
Check Point Blog
博客园 - 聂微东
云风的 BLOG
云风的 BLOG
Microsoft Security Blog
Microsoft Security Blog
博客园 - 叶小钗
酷 壳 – CoolShell
酷 壳 – CoolShell
H
Help Net Security

热爱生活与梦想

迁移LeanCloud的Waline评论数据到TiDB/Neon 25年江浙地区暑假自驾游之感慨 使用阿里云灵码继续完成构建 SSL 证书管理器 亲手给儿子做的棒棒糖摩天轮六一礼物 使用腾讯云 CodeBuddy 构建 SSL 证书管理器 修复代码块默认高度相关缺陷 HugoNexT4.7.2 新功能和升级提示 改善代码块折叠和选中功能 支持Github风格的警告样式 新增音乐短代码功能支持 给文章添加摘要和过期提示功能 回顾24年的过去总结 修复Mathjax行内显示公式的问题 给Hugo文章增加阅读更多跳转的锚点定位功能 Win10隐匿的VPN设置和L2TP连接常见错误 Go语言中“糟糕”的日期时间格式化设计 DaoCloud道客提供的免费Docker镜像代理服务 感谢万能淘宝让自己吃到喜欢的美食 WSL运行时遇到未知异常错误无法使用 隐藏的换行符导致Base64加密解密失败 MySQL自带客户端直接免密登录操作 Linux系统中删除目录软链接的注意项 Java程序调用外网API时CA问题 如何不关机重启WSL2恢复虚拟服务 在Windows上安装Podman容器平台做虚拟化 记一次无法弹出移动硬盘的记录 为友情链接添加自动检测脚本 重新激活Github的2FA认证 Linux中使用tar压缩命令排除文件 继续小米手环的健康生活之旅
优化Hugo Next主题的过程2
凡梦星尘 · 2021-07-09 · via 热爱生活与梦想

背景

自上次优化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 = trueAddthisId = "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