配置评论功能

缘起

在浏览其他博客时，发现有很多过时的信息，由于没有评论系统，博主也收不到反馈，导致垃圾信息长期挂在那里，不断误导后来人。

最近也一直在做信息的收集。这种工作最注重时效性。故开一个评论功能也是十分必要的。

Hugo本身不支持评论，需要通过插件支持。我使用的stack主题，可以直接配置waline（？）。~~二者都有非常详细的文档。所以这里也只是稍稍提及。~~

~~淦我按照官方文档的指引配置居然不显示，弄了一上午最后手动添加的。。。~~

淦我晓得为什么不显示了！！！！！作者我***

配置waline

虽然步骤有点多，好在全过程都有详细文档。

参照快速上手 | Waline一路配置过来就可以了，只需要完成配置数据库和服务端的部分。

第一步注册leancloud的链接已经失效，需要手动注册

自动添加到Hugo中（未成功）

理论上说只要如下修改config.yaml即可：

    #开启comments功能，设置为waline
    comments:
        enabled: true
        provider: waline

        # 以及配置waline
        waline:
            serverURL: https://waline-pc25lo4ye-yw2667899.vercel.app/ #这里填上一步生成的站点
            lang: zh-CN
            visitor: false
            avatar: 
            emoji:
                - https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo
            requiredMeta:
                - name
                - email
                - url
            placeholder:
            locale:
                admin: Kerm

就可以了。

但是我配置完成之后却并没有显示，这是为什么呢？

这是为什么呢?!——解决方案

通过我一个上午的仔细的研究，大致了解了Hugo的渲染方式。凭借着我孜孜不倦的分析，终于找到了在themes\hugo-theme-stack\layouts_default\single.html这个文件里的这样一段代码：

{{ if not (eq .Params.comments false) }}
    {{ partial "comments/include" . }}
{{ end }}

以及类似的一段代码：

on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}

大家发现了什么吗。。。

第一段的意思就是如果.Params.comment这个参数不等于false，就调用comment部件进行渲染。

第二段，类似的做法，但是这里采用的参数是.Site.Params.widgets.enabled。

后者有一个.Site的前缀，前者没有。通过分析，我发现带前缀的参数最后是读取的根目录下，我们之前修改的那个文件。而不带前缀的，我至今不知道它在读取什么玩意儿。

此时，你只需要稍微修改一下：

{{ if not (eq .Site.Params.comments false) }}
    {{ partial "comments/include" . }}
{{ end }}

就**的可以显示了！！！！！！！！

啊啊啊啊！！！！作者我***！！！！

推送到云端

由于这里我们对hugo的主题代码进行修改了，如果你是用submodule进行配置的话，需要单独对主题仓库进行同步才能在云端显示。具体可以参考：

在Hugo中插入Adsense代码 (kermsite.com)

第3、4部分。

手动添加（已废弃）

~~只能手动添加了。~~实际上也还是比较方便的。

我还是写一下吧。

直接转到\themes\hugo-theme-stack\layouts\partials\comments\provider\waline.html，全部复制，然后转到themes\hugo-theme-stack\layouts_default\single.html，用刚刚复制的代码替代掉上一部分提及的有问题的代码块即可。

修改后的效果：

{{ define "body-class" }}
    {{ $TOCEnabled := default (default false .Site.Params.article.toc) .Params.toc }}
    {{- .Scratch.Set "hasTOC" (and (ge (len .TableOfContents) 100) $TOCEnabled) -}}
    article-page {{ if (.Scratch.Get "hasTOC") }}has-toc{{ end }}
{{ end }}

{{ define "container-class" }}
    {{ if (.Scratch.Get "hasTOC") }}
        extended
    {{ else }}
        on-phone--column {{ if .Site.Params.widgets.enabled }}extended{{ else }}compact{{ end }}
    {{ end }}
{{ end }}

{{ define "main" }}
    {{ partial "article/article.html" . }}

    {{ partial "article/components/related-contents" . }}

    <!-- 修改从这里开始 -->

    <script src='//cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js'></script>
    <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-container .vcount {
            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" "avatarcdn" "avatarCDN" "avatarforce" "avatarForce" -}}

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

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

    <script>
        new Waline({{ $config | jsonify | safeJS }});
    </script>
    {{- end -}}

    <!-- 到这里结束 -->

    {{ partialCached "footer/footer" . }}

    {{ partialCached "article/components/photoswipe" . }}
{{ end }}

{{ define "left-sidebar" }}
    {{ if (.Scratch.Get "hasTOC") }}
        <div id="article-toolbar">
            <a href="{{ .Site.BaseURL | relLangURL }}" class="back-home">
                {{ (resources.Get "icons/back.svg").Content | safeHTML }}
                <span>{{ T "article.back" }}</span>
            </a>
        </div>
    {{ else }}
        {{ partial "sidebar/left.html" . }}
    {{ end }}
{{ end }}

{{ define "right-sidebar" }}
    {{ if (.Scratch.Get "hasTOC") }}
        <aside class="sidebar right-sidebar sticky">
            <section class="widget archives">
                <div class="widget-icon">
                    {{ partial "helper/icon" "hash" }}
                </div>
                <h2 class="widget-title section-title">{{ T "article.tableOfContents" }}</h2>

                <div class="widget--toc">
                    {{ .TableOfContents }}
                </div>
            </section>
        </aside>
    {{ end }}
{{ end }}

配置评论功能

缘起

配置waline

自动添加到Hugo中（未成功）

这是为什么呢?!——解决方案

推送到云端

手动添加（已废弃）

效果演示

添加评论推送

附录

参考文献

版权信息

评论