配置waline多语言支持,保持和博客语言一致

【更新日志】waline评论系统也支持多语言,这下看懂了

本身该网站已经支持了多语言,其实只支持了中文和英文,在之前的博客中我们也修改了语言切换方式,从下拉框切换改成了单一切换按钮Hugo Stack主题优化语言切换 ,但是评论系统一直设置的是英文,虽然我相信各位观众都看得懂,但还是希望评论区也能随着网站的语言切换而切换。

waline官方文档做的比较好,一查就发现是支持多语言的,waline多语言支持。配置其实也很简单:

Waline.init({
  lang: 'en',
});

但是我想要的是在网站是中文时评论显示中文,在网站是英文时显示英文,该怎么做到呢?

首先我们找到waline的代码,直接全局搜索 Waline.init ,我们会发现一个名叫waline.html的文件在themes\hugo-theme-stack\layouts\partials\comments\provider目录下,我们首先把这个文件复制到ayouts\partials\comments\provider

<script src='//unpkg.com/@waline/client@v2/dist/waline.js'></script>
<link href='//unpkg.com/@waline/client@v2/dist/waline.css' rel='stylesheet'/>
<div id="waline" class="waline-container"></div>
<style>
    .waline-container {
        background-color: var(--card-background);
        border-radius: var(--card-border-radius);
        box-shadow: var(--shadow-l1);
        padding: var(--card-padding);
        --waline-font-size: var(--article-font-size);
    }
    .waline-container .wl-count {
        color: var(--card-text-color-main);
    }
</style>

{{- with .Site.Params.comments.waline -}}
{{- $config := dict "el" "#waline" "dark" `html[data-scheme="dark"]` -}}
{{- $replaceKeys := dict "serverurl" "serverURL" "requiredmeta" "requiredMeta" "wordlimit" "wordLimit" "pagesize" "pageSize" "imageuploader" "imageUploader" "texrenderer" "texRenderer" -}}

{{- range $key, $val := . -}}
    {{- if ne $val nil -}}  
        {{- $replaceKey := index $replaceKeys $key -}}
        {{- $k := default $key $replaceKey -}}

        {{- $config = merge $config (dict $k $val) -}}
    {{- end -}}
{{- end -}}

<script>
    /// Waline client configuration see: https://waline.js.org/en/reference/client.html
    Waline.init({{ $config | jsonify | safeJS }});
</script>
{{- end -}}

我的做法很简单,如果链接中包含en链接就说明是英文页面,其他就是中文页面,于是我把代码改成了这样

<script>
    // 根据 URL 判断语言
    const currentLanguage = window.location.href.includes('/en/') ? 'en' : 'zh-CN';
    console.log('Current Language:', currentLanguage);

    // 初始化 Waline
    Waline.init({
        ...{{ $config | jsonify | safeJS }},
        lang: currentLanguage,
        locale: {}
    });
</script>

然后就如你所见,现在已经实现了waline评论区的多语言切换,核心思路其实就是获取到当前页面的语言,然后初始化waline组件的时候传入正确的语言,也可以根据全局的语言变量{{ .Lang }}来进行判断。

Licensed under CC BY-NC-SA 4.0
加载中...
感谢Jimmy 隐私政策