在Hugo上配置giscus评论

  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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值