总结摘要
此次发布的Hugo NexT版本改动的内容稍为有点多,借助本站的升级历程做些记录,并分享给众多的用户,希望大家能够喜欢它 🥰。
真是人算不如天算呀,原来是计划在大年夜前发Hugo NexT v4.7.2
这个大版本的,可谁曾料想到身体遭受到一场突如其来的病毒感染,就连春节的气氛也是全被搅混无啦。由于此次版本发布发动的内容稍为有些多,在此写个升级的小提示分享下。这不趁着假期的小尾巴,赶紧是把剩余的工作给做完吧,为众多的Hugo NexT
粉丝送上一份迟到的新年“贺礼” 🎁。
此次发布的Hugo NexT v4.7.2
除修复发现的🐛之外,还新增了不少新特性,参考如下:
- 支持不同国家的多语言切换
- 支持显示文章的总结摘要与过期信息提示
- 支持对长的代码块进行折叠显示
- 支持Bilibili视频与音乐播放嵌入显示
- 支持在
Gemini
和Pisces
模式下显示二级导航菜单 - 支持类似Github风格的告警效果
- 支持阅读更多按钮时跳转时锚定后续内容的效果
- 支持Waline3的评论系统
- ……
接下来就一起看看如何从旧版本升级这个新版本吧,大家可以参考下面的操作记录调整自己的站点:
重要
注意: 升级前一定要把Hugo
软件版本到最新的版本,不然很多功能特性无法支持,也会导致升级失败。
配置更新
参考最新的hugo
软件版本变化,将配置文件的名称由原来的config.yaml
改为hugo.yaml
,这个是可选的操作,大家按自己的喜好决定是否要调整。然后根据不同的功能启用,可以在原来旧的配置文件增加相应的配置项进行启用,具体参考下面的各项功能使用说明。
多国语言切换
开启了多国语言切换功能后,在站点的工具按钮会显示出一个地球的图标,点击后会直接定位到网页底部,有个下拉的菜单会显示国旗和语言名称,选择对应的语言即可进行切换。
配置文件更新
在配置文件中找到languageCode
的配置项,在其下面增加多语言的参数配置,参考如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| languages:
zh-cn:
languageCode: zh-CN
languageDirection: ltr
languageName: "简体中文"
weight: 1
en-us:
languageCode: en-US
languageDirection: ltr
languageName: English
weight: 2
## 如果有其他要调整的参数,可在该语言下覆盖,比如:
params:
yearFormat: "2006"
monthFormat: "01/02"
dateFormat: "2006/01/02"
timeFormat: "2006/01/02 15:04:05 -07:00"
|
警告
注意: 这里的zh-cn
和en-us
是要和i18n
下面的语言配置文件名称保持一致,才能让页面中的各项翻译生效。
文章发布
写文章时,需要按照不同的语言创建不同的文章,支持如下两种不同的风格进行文章存储:
1
2
3
4
5
6
7
8
9
10
11
12
| # 文件夹管理(推荐)
content/post
└── helloworld
├── index.en-us.md
├── index.fr-fr.md
└── index.md
# 文件管理
content/post
├── helloworld.en-us.md
├── helloworld.fr-fr.md
└── helloworld.md
|
信息
提示: 上面没有指定语言的文章,会使用defaultContentLanguage
配置项作为默认语言。
总结摘要与过期提示
配置文件更新
在配置文件中找到postMeta
的配置项,在其下面增加summary
和expired
的参数配置,参考如下:
1
2
3
4
5
| postMeta:
# 是否开启过期提示
expired: true
# 是否开启摘要显示
summary: true
|
信息
提示: 这两个参数也是支持在文章头部的front matter
中进行配置。
i18n文件更新(可选)
在站点的i18n
目录下创建对应的语言配置文件,在PostMeta
的配置项有个expired
的参数,可按自己的需求进行调整,参考如下:
1
2
3
4
5
| PostMeta:
expired:
title: "温馨提醒"
info: "🕰️ 嗨,这篇文章已是#前的陈年佳酿,信息可能需要更新,阅读前请检查最佳赏味期限。"
warn: "🚀 注意啦!这篇文章来自#以前,可能已跟不上时代的步伐。阅读时请自备时光机,小心穿越哦!"
|
信息
提示: 这里的#
符号是用来占位的,最终会被替换为实际的过期时间长度。
代码块折叠
只需要更新下配置文件即可,在配置文件中找到highlight
的配置项,把原来的参数替换为如下的配置:
1
2
3
4
5
6
7
| highlight:
anchorLineNos: true
codeFences: true
guessSyntax: true
lineNos: true
lineNumbersInTable: true
noClasses: false
|
Bilibili视频与音乐
不需要做任何的配置,只要在文章中需要使用的位置中插入bilibili
或music
短代码即可,参考如下:
1
2
3
4
5
6
7
8
| # Bilibili视频
{{< bilibili BV1Sx411T7QQ >}}
或者
{{< bilibili id=BV1Sx411T7QQ >}}
# 音乐播放
{{< music server="netease" type="playlist" id="7273286178" autoplay="true" list-max-height="140" >}}
|
二级导航菜单
支持在Gemini
和Pisces
模式中使用二级导航菜单显示更多,只需要在配置文件中进行菜单的配置即可,参考如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| menu:
main:
- identifier: example
name: Example
pre: angles-down
weight: 4
- identifier: syntax
name: Syntax Highlighting
pageRef: /post/09-syntax-highlighting
weight: 1
parent: example
- identifier: math
name: Math Formula
pageRef: /post/10-math-formula
weight: 2
parent: example
parent: example
- identifier: flow-charts
name: Flow Charts
pageRef: /post/11-mermaid-charts
weight: 3
parent: example
|
信息
提示: 这里的pageRef
是用来指定本站点文章的目录相对链接,如果是外部链接,直接使用url
参数即可。
最后实际的效果可以参考:
二级菜单
Github风格警告
配置文件更新
需要在配置文件中增加postAlerts
的配置项,可以根据自己的需求调整颜色和图标,参考如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| postAlerts:
info:
icon: "circle-info"
color: "#4A90E2"
note:
icon: "bell"
color: "#17A2B8"
help:
icon: "circle-question"
color: "#967ADC"
error:
icon: "circle-xmark"
color: "#DC3545"
warning:
icon: "triangle-exclamation"
color: "#F39C12"
success:
icon: "circle-check"
color: "#32CD32"
important:
icon: "circle-plus"
color: "#007BFF"
|
i18n文件更新(可选)
在站点的i18n
目录下创建对应的语言配置文件,增加PostAlert
的配置项,可按自己的需求调整说明描述,参考如下:
1
2
3
4
5
6
7
8
| PostAlert:
info : "信息"
note : "注意"
help : "帮助"
error : "错误"
warning : "警告"
success : "成功"
important: "重要"
|
使用方式
在写文章时直接使用Markdown
语法即可,参考如下:
1
2
3
|
> [!INFO]
> `HugoNexT` 主题支持自定义样式设计,你可实现属于自己站点的个性化设计。
|
实际的渲染效果可以参考此文中的各种警告信息输出。
阅读更多按钮
无须做任何的配置,根据文章内容中的阅读更多按钮跳转时,会自动定位到后续内容的位置,具体的效果在访问此文时可以看到。
Waline3
由于Waline2
和Waline3
无法直接升级,所以在把他们两个都保留了,在使用时建议选择其中一个使用即可。比如需要使用Waline3
,那就把配置文件中的Waline
参数配置项关闭,然后增加如下的配置项:
1
2
3
4
5
6
7
8
9
10
11
12
| waline3:
placeholder: "请文明发言哟 ヾ(≧▽≦*)o"
sofa: "快来发表你的意见吧 (≧∀≦)ゞ"
emoji: false
search: true
imgUploader: false
wordLimit: 200
requiredMeta: ['nick', 'mail']
reaction: true
reactionText: [ '点赞', '踩一下', '得意', '不屑', '尴尬', '睡觉']
reactionTitle: "你认为这篇文章怎么样?"
serverURL: #<your waline server url>
|
警告
注意: 其他位置有引用应对的Waline功能配置,也是需要更新为waline3
,比如文章访问统计和评论统计。
文章分享
在配置文件中找到share
配置项,删除掉旧的addthis
配置项,然后增加如下的配置项:
1
2
3
4
5
6
7
| # 有数据统计功能,更多信息与配置,请参考:https://sharethis.com
# sharethis:
# id: #<sharethis_id>
# 简单的在线分享,没有统计数据功能,更多信息可参考:https://www.addtoany.com/
addtoany:
locale: zh-CN
num_services: 8
|
后续在文章的底部会显示出分享的图标,用户可以选择自己喜欢的分享方式进行分享。
总结
时隔将近半年多的时间,总算是完成了Hugo NexT
的大版本发布,个人的时间精力有限,能够坚持把这个主题持续开发下去,也需要感谢各位的支持和关注。在此非常感谢各位的反馈和建议,也希望大家能够喜欢和使用Hugo NexT
主题。🍺