当前位置: 首页 > 工具软件 > giscus > 使用案例 >

在Hugo上配置giscus评论

萧辰沛
2023-12-01
  1. giscus官网上输入仓库名、配置,生成script脚本;
<script src="https://giscus.app/client.js"
        data-repo="[自动生成]"
        data-repo-id="[自动生成]"
        data-category="[自动生成]"
        data-category-id="[自动生成]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>
  1. 在hugo项目下themes/<你的主题文件夹>/layouts/partials/目录下新建 comments.html文件,填入上述script脚本内容。
  2. 在hugo项目下themes/<你的主题文件夹>/layouts/_default/single.html文件下,加入{{ partial "comments.html" . }}
{{ partial "header.html" . }}

{{ .Content }}

<footer class="footline">
	{{with .Params.LastModifierDisplayName}}
	    <i class='fas fa-user'></i> <a href="mailto:{{ $.Params.LastModifierEmail }}">{{ . }}</a> {{with $.Date}} <i class='fas fa-calendar'></i> {{ .Format "02/01/2006" }}{{end}}
	    </div>
	{{end}}
</footer>

{{ partial "comments.html" . }}
{{ partial "footer.html" . }}

  1. 在hugo项目下的config.toml文件内写入以下内容,即可完成giscus的配置:
    [params.giscus]
        data-repo="[自动生成]"
        data-repo-id="[自动生成]"
        data-category="[自动生成]"
        data-category-id="[自动生成]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"

参考文献: https://drmowinckels.io/blog/2021-12-04-adding-giscus-to-your-blogdown-site/

 类似资料: