关于最新版与Waline评论冲突问题

[hengxin007]

What happened?

Waline 评论报错

版本与配置

版本：

• hugo：hugo v0.131.0-extended
• 主题：v3.26.0

配置：hugo.yaml

baseurl: https://example.com
languageCode: zh-cn
theme: stack
paginate: 5
title: 你好
copyright: 1

# Theme i18n support
# Available values: ar, bn, ca, de, el, en, es, fr, hu, id, it, ja, ko, nl, pt-br, th, uk, zh-cn, zh-hk, zh-tw
DefaultContentLanguage: zh-cn

# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

# 最后修改时间
frontmatter:
    lastmod: ['lastmod', ':git', ':fileModTime', 'date', 'publishDate']

languages:
    # en:
    #     languageName: English
    #     title: Example Site
    #     weight: 1
    #     params:
    #         description: Example description
    zh-cn:
        languageName: 中文
        title: 123
        weight: 2
        params:
            description: 123
    # ar:
    #     languageName: عربي
    #     languagedirection: rtl
    #     title: موقع تجريبي
    #     weight: 3
    #     params:
    #         description: وصف تجريبي

services:
    # Change it to your Disqus shortname before using
    disqus:
        shortname: "stack"
    # GA Tracking ID
    googleAnalytics:
        id:

permalinks:
    post: /p/:slug/
    page: /:slug/

params:
    mainSections:
        - posts
    featuredImageField: image
    rssFullContent: true
    favicon: /favicon.ico

    footer:
        since: 2024
        customText:

    dateFormat:
        published: 2006-01-02
        lastUpdated: 2006-01-02

    # 首页个人信息
    sidebar:
        emoji: 
        subtitle: hello~
        avatar:
            enabled: true
            local: true
            src: img/avatar.jpg
    
    article:
        # BUG 点！
        math: false
        toc: true
        readingTime: false
        license:
            enabled: true
            default: Licensed under CC BY-NC-SA 4.0

    comments:
        enabled: true
        provider: waline

        disqusjs:
            shortname:
            apiUrl:
            apiKey:
            admin:
            adminLabel:

        utterances:
            repo:
            issueTerm: pathname
            label:

        beaudar:
            repo:
            issueTerm: pathname
            label:
            theme:        

        remark42:
            host:
            site:
            locale:

        vssue:
            platform:
            owner:
            repo:
            clientId:
            clientSecret:
            autoCreateIssue: false

        # Waline client configuration see: https://waline.js.org/en/reference/component.html
        waline:
            serverURL: https://comment.544688.xyz/
            lang: zh-CN
            # 开启统计
            pageview: true
            emoji:
            # 回复时必填的内容
            requiredMeta:
                # - name
                # - email
                # - url
            # 自定义语言设置，参考https://waline.js.org/cookbook/customize/locale.html#locale-%E9%80%89%E9%A1%B9
            locale:
                admin: 站长
                # 评论框的默认的文字
                placeholder: 欢迎留下宝贵的评论！

        twikoo:
            envId:
            region:
            path:
            lang:

        # See https://cactus.chat/docs/reference/web-client/#configuration for description of the various options
        cactus:
            defaultHomeserverUrl: "https://matrix.cactus.chat:8448"
            serverName: "cactus.chat"
            siteName: "" # You must insert a unique identifier here matching the one you registered (See https://cactus.chat/docs/getting-started/quick-start/#register-your-site)

        giscus:
            repo:
            repoID:
            category:
            categoryID:
            mapping:
            lightTheme:
            darkTheme:
            reactionsEnabled: 1
            emitMetadata: 0

        gitalk:
            owner:
            admin:
            repo:
            clientID:
            clientSecret:

        cusdis:
            host:
            id:
    widgets:
        homepage:
            - type: search
            - type: archives
              params:
                  limit: 5
            - type: categories
              params:
                  limit: 10
            - type: tag-cloud
              params:
                  limit: 10
        page:
            - type: search
            - type: toc


    opengraph:
        twitter:
            # Your Twitter username
            site: 

            # Available values: summary, summary_large_image
            card: summary_large_image

    defaultImage:
        opengraph:
            enabled: false
            local: false
            src:

    colorScheme:
        # Display toggle
        toggle: true

        # Available values: auto, light, dark
        default: auto

    imageProcessing:
        cover:
            enabled: true
        content:
            enabled: true

### Custom menu
### See https://stack.jimmycai.com/config/menu
### To remove about, archive and search page menu item, remove `menu` field from their FrontMatter
menu:
    main: []

    social:
        - identifier: github
          name: GitHub
          url: https://github.com/hengxin007
          params:
              icon: brand-github

        - identifier: twitter
          name: Twitter
          url: https://twitter.com
          params:
              icon: brand-twitter

related:
    includeNewer: true
    threshold: 60
    toLower: false
    indices:
        - name: tags
          weight: 100

        - name: categories
          weight: 200

markup:
    goldmark:
        renderer:
            ## Set to true if you have HTML content inside Markdown
            unsafe: true
    tableOfContents:
        endLevel: 4
        ordered: true
        startLevel: 2
    highlight:
        # style: average
        noClasses: false
        codeFences: true
        guessSyntax: true
        lineNoStart: 1
        lineNos: true
        lineNumbersInTable: true
        tabWidth: 4

Bug 复现

当 hugo.yaml 配置文件中的：params.article.math 为 true 时，Waline 的评论就会显示不出来，一直转圈并且报错：

如果将 params.article.math 改为 true 则正常显示，无报错。

Hugo version

hugo v0.131.0-bfbee17932ff24009008aa94cdd75c0c41f59279+extended windows/amd64 BuildDate=2024-08-02T09:03:48Z VendorInfo=gohugoio

Theme version

v3.26.0

What browsers are you seeing the problem on?

Chrome

More information about the browser

Windows10，Chrome v127.0.6533.89

Relevant log output

No response

Link to Minimal Reproducible Example

https://github.com/hengxin007

[CaiJimmy]

抱歉，图片无法显示，我也没有 Waline 服务器可以在本地复现这个问题。

Sorry, the images cannot be displayed and I don’t have a Waline server to reproduce this problem locally.

[yisusen]

我这也出现这个问题，会显示评论数，不显示评论内容。 如果参数 article: math: false 改后就可以显示

[CaiJimmy]

@yisusen 抱歉，你的图片也显示不出来，似乎没有成功上传。

[hengxin007]

纠正一下，是 params.article.math 为 true 时，评论显示不出来，为 false 就可以正常显示，各位博主可以用这个先缓解一下。

[hengxin007]

@yisusen 抱歉，你的图片也显示不出来，似乎没有成功上传。

[Whale-Dolphin]

I have exactly the same problem, my hugo version is v0.134.3 theme version v3.26.

[FOTH0626]

My Hugo version is 0.138.0, and the theme version is 3.29. I used the starter template and cloned the theme repository into the ./theme folder. I then modified the go.mod file as follows:

module github.com/CaiJimmy/hugo-theme-stack-starter
go 1.17
require github.com/CaiJimmy/hugo-theme-stack/v3 v3.29.0 // indirect
replace github.com/CaiJimmy/hugo-theme-stack/v3 => ./theme/hugo-theme-stack

This allows me to modify local files and see the changes. Since I have no experience in web development, I used ChatGPT to make modifications. After about two hours of asking questions, I achieved the following result: modifying the waline.html file from

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

to

<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(() => {
            const walineContainer = document.querySelector('#waline');
            if (walineContainer) {
                Waline.init({{ $config | jsonify | safeJS }});
            } else {
                console.error("Waline container not found. Make sure the element with ID 'waline' exists.");
            }
        }, 500);  // Delay 500ms to load waline comments.
    });
</script>
{{- end -}}

This may be full of errors and non-standard code, but now my blog can display comments with math formula rendering enabled on my machine. Hope this helps you!

---

我的hugo版本是 0.138.0 ，主题版本为3.29 ，我使用starter 模板并在./theme文件夹下clone了主题仓库，并把go.mod文件更改为

module github.com/CaiJimmy/hugo-theme-stack-starter
go 1.17
require github.com/CaiJimmy/hugo-theme-stack/v3 v3.29.0 // indirect
replace github.com/CaiJimmy/hugo-theme-stack/v3 => ./theme/hugo-theme-stack

这样我可以更改本地文件查看效果。 因为我对web开发完全没有经验，所以使用了chatgpt，在经过约两小时的提问后获得如下结果：修改 waline.html 文件。 从

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

修改为

<script>
    document.addEventListener("DOMContentLoaded", function() {
        setTimeout(() => {
            const walineContainer = document.querySelector('#waline');
            if (walineContainer) {
                Waline.init({{ $config | jsonify | safeJS }});
            } else {
                console.error("Waline container not found. Make sure the element with ID 'waline' exists.");
            }
        }, 500);  // 延迟 500 毫秒加载 Waline 评论区
    });
</script>
{{- end -}}

这可能充满了错误和不规范的代码，但是现在在我的机器上，我的博客可以在开启数学公式渲染的情况下显示评论了。
希望对你有帮助！

[ethan-enhe]

This should be easy to fix. Just modify layouts/partials/article/components/math.html to add 'waline-container' to the ignored classes.

{{- partial "helper/external" (dict "Context" . "Namespace" "KaTeX") -}}
<script>
    window.addEventListener("DOMContentLoaded", () => {
        renderMathInElement(document.body, {
            delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "$", right: "$", display: false },
                { left: "\\(", right: "\\)", display: false },
                { left: "\\[", right: "\\]", display: true }
            ],
            ignoredClasses: ["gist", "waline-container"]
        });})
</script>

[fsj2009yx]

@ethan-enhe It works.I think that‘s because Katex renders before the waline compoments mounted,then #waline probably was changed so it couldn't insertbefore the current position. Both ignore and delay mounts should work.

[CaiJimmy]

fixed in #1103