Hugo 使用 disqus
Hugo 使用 disqus
Disqus(/dɪsˈkʌs/,與英語「discuss」同音)是一家使用社群網路形式,向網路社區提供網站留言服務的公司。 該公司的平台提供不同的功能,例如與不同社群網路服務連結、社群網路、用戶個人檔案、垃圾宣傳及審核工具、資料分析、電子郵件通知和在行動裝置留言等。
先申請 disqus
取得 disqusShortname
Config.toml
開啟Hugo配置檔 Config.toml,設定 DisqusShortname。
disqusShortname = "yourDisqusShortname"
新增 disqus.html
在根目錄 /layouts/partials/ 裡新增 disqus.html 檔案, 然後把官方提供的 Script 貼到 disqus.html 檔案裡並存檔。 官方提供的 Script 如下:
<div id="disqus_thread"></div>
<script type="text/javascript">
(function () {
// Don't ever inject Disqus on localhost--it creates unwanted
// discussions from 'localhost:1313' on your Disqus account...
if (window.location.hostname == "localhost")
return;
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
var disqus_shortname = '{{ .Site.DisqusShortname }}';
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by
Disqus.</a></noscript>
<a href="http://disqus.com/" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
設定 disqus.html
到 Hugo 主題的目錄下,找到 single.html 檔案, 將 Hugo 主題的目錄下 single.html Copy 至 /layouts/_default/ 下。 開啟 /layouts/_default/single.html 檔案,貼上下方語法
<div class="disqus markdown">
{{ partial "disqus.html" . }}
</div>
解決 localhost 不顯示 的問題
這是因為官方所提供的 Script 裡面其中一段語法的關係 if (window.location.hostname == “localhost”) return; 它的作用是當本地端 Server 運行時,就 return 中止,所以我們才會看不到 Disqus,這是因為當自己在編輯文章並運行 Server 進行預覽時,不需要用到留言的功能,所以才會採用這個判斷式來避免本地端的 Server 模式啟用Disqus功能。若您希望在本地端 Server 模式下,也能看到 Disqus,只要把上述那二行給註解掉並存檔就可以了。 ShowDisqus