在Hugo上配置giscus评论

最新推荐文章于 2024-08-22 08:57:02 发布

医学影像处理

最新推荐文章于 2024-08-22 08:57:02 发布

阅读量538

点赞数

文章标签： go

本文链接：https://blog.csdn.net/reallocing1/article/details/128577992

版权

在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>

在hugo项目下themes/<你的主题文件夹>/layouts/partials/目录下新建 comments.html文件，填入上述script脚本内容。
在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" . }}

在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/