分享

博客 | hugo 博客添加 disqus 评论系统

 文炳春秋 2020-10-16

打开 diqus 官网:http://,点击 "GET STARTED" 进入注册页面:

image.png

选择 "I want to install Disqus on my site",进入"Create" 创建页面:

image.png

在创建页面填写网站信息:

image.png

在 "Choose a plan" 页面,拉到最下面,选择免费的 "Basic" 版本,点击 "Subscribe Now":

image.png

在 "Choose a platform" 选择博客的平台类型,对于 hugo 我们选择页面最下面的 "Universal Code":

image.png

把 "Install instructions for Universal Code - Disqus Admin" 页面的代码拷贝到 hugo 博客的 layouts/partials/disqus.html 文件:

image.png

<div id="disqus_thread"></div><script>/***  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https:///admin/universalcode/#configuration-variables*//*var disqus_config = function () {this.page.url = "{{ .Permalink }}";  // Replace PAGE_URL with your page's canonical URL variablethis.page.identifier = "{{ .Permalink }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable};*/(function() { // DON'T EDIT BELOW THIS LINEvar d = document, s = d.createElement('script');s.src = 'https://shen-hugo-blog./embed.js';s.setAttribute('data-timestamp', +new Date());(d.head || d.body).appendChild(s);})();</script><noscript>Please enable JavaScript to view the <a href="https:///?ref_noscript">comments powered by Disqus.</a></noscript>

最后,在 "Install instructions for Universal Code - Disqus Admin" 页面拉到最下面,点击 "Configure":

image.png

在 "Configure" 页面填写完善网站的相关信息,点击 "Complete Setup" 完成设置。

image.png

在 hugo 博客的 config.toml 配置文件中增加 disqusShortname 参数:

image.png

在 hugo 博客 layouts 目录下的模板中引入 disqus.html 模板:

{{ partial "disqus.html" . }}

最后,执行 hugo,重新渲染生成所有的静态博客文件,push 到 github pages,完成所有操作。

image.png

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多