最近对网站进行了一些改动和优化，都是基于hugo-theme-stack的主题进行的修改。
主要更新内容如下：
-
优化语言切换按钮
-
优化评论访问速度
-
增加评论邮件通知功能
-
修改评论组件参数
优化语言切换
首先是觉得之前的切换语言比较麻烦，首先要点击切换语言的下拉框，然后选择想要的语言。然而我的网站只有中英两种语言，只是切换语言就要点两下非常麻烦，于是我就改成了一个互斥的按钮，当前是中文时显示"English"，英文时显示"中文"。修改设计到了两部分的代码，最终效果已经如你所见。
// layouts/partials/sidebar/left.html
<li class="menu-bottom-section">
<ol class="menu">
{{- $currentLanguageCode := .Language.Lang -}}
{{- $otherLanguage := "" -}}
{{ if (compare.Gt .Site.Home.AllTranslations.Len 1) }}
{{ with .Site.Home.AllTranslations }}
{{ range . }}
{{ if ne .Language.Lang $currentLanguageCode }}
{{- $otherLanguage = . -}}
{{ end }}
{{ end }}
<li id="i18n-switch">
{{ partial "helper/icon" "language" }}
<a href="{{ $otherLanguage.Permalink }}">
{{ $otherLanguage.Language.LanguageName }}
</a>
</li>
{{ end }}
{{ end }}
{{ if (default false .Site.Params.colorScheme.toggle) }}
<li id="dark-mode-toggle">
{{ partial "helper/icon" "toggle-left" }}
{{ partial "helper/icon" "toggle-right" }}
<span>{{ T "darkMode" }}</span>
</li>
{{ end }}
</ol>
</li>
// assets/scss/partials/sidebar.scss
#i18n-switch {
color: var(--body-text-color);
display: flex;
align-items: center;
gap: var(--menu-icon-separation);
}
优化评论访问速度
我用的评论组件是 waline，之前部署在vercel，然后通过cloudflare代理，其实已经挺不错了，但是我访问起来速度实在是比较慢，经常要加载1秒以上。所以我就把评论系统部署在了自己的服务器上，还是通过cloudflare代理，最后的访问地址其实没变。部署也非常简单，使用docker-compose.yaml:
# docker-compose.yml
version: '3'
services:
waline:
container_name: waline
restart: always
image: lizheming/waline:latest
network_mode: bridge
ports:
- 8360:8360
volumes:
- ./data:/app/data
environment:
TZ: 'Asia/Shanghai'
SQLITE_PATH: '/app/data'
JWT_TOKEN: ''
配置项里其实只需要配置sqlite和jwt_token即可，一个是数据库存储一个是登录token，记得把数据库文件映射出来，方便备份和迁移。
增加评论邮件通知
之前一直有评论功能但其实没什么人留言，而最近网站可能看的人多了慢慢就有了一些评论，但之前没有加评论通知所以导致我过了很久才发现原来某篇博客下有人提问。于是我就决定给waline加上通知邮件，被回复的人会收到一封邮件，而任何人评论我都会收到通知。
这个功能也只需要配置waline的服务端，不需要对hugo进行任何修改。相比上一步我们增加了几个配置。
# docker-compose.yml
version: '3'
services:
waline:
container_name: waline
restart: always
image: lizheming/waline:latest
network_mode: bridge
ports:
- 8360:8360
volumes:
- ./data:/app/data
environment:
TZ: 'Asia/Shanghai'
SQLITE_PATH: '/app/data'
JWT_TOKEN: ''
// SMTP服务商
SMTP_SERVICE: 'SendinBlue'
// 如果没有服务商需要配置HOST和PORT
SMTP_HOST: ''
SMTP_PORT: ''
// 接受邮件的邮箱
AUTHOR_EMAIL: ''
SITE_URL: 'https://www.liuhouliang.com'
SITE_NAME: 'Liu Houliang Blog'
// 重要的必填项，用户名和密码
SMTP_USER: '@smtp-brevo.com'
SMTP_PASS: ''
// 发送邮件的邮箱和昵称
SENDER_EMAIL: 'admin@liuhouliang.com'
SENDER_NAME: 'Liu Houliang'
至于SMTP服务商我选择了brevo ，也可以选择自己的日常邮件但是比较容易限制数量以及被归类为垃圾邮件，至于brevo的注册和使用这里就不详细介绍了。
最终效果如下：
修改评论参数
这个直接修改config.yaml下的评论参数即可，可以修改默认语言、可以填写的信息以及必须要填写的信息，和预留信息等。我设置的只需要填写昵称，但如果填写了email的话别人回复了可以收到邮件通知。
params:
comments:
enabled: true
provider: waline
waline:
serverURL: https://yourdomain.com/
lang: en-US
# pageview: true
# reaction: true
meta:
["nick", "mail"]
requiredMeta:
- nick
# - email
# - url
locale:
admin: Admin
placeholder: Leave a comment and get notified by email when someone replies.