https://knightli.com/en/tags/blog-comment-system/ Recent content in Blog-Comment-System on KnightLi Blog Hugo -- gohugo.io en Fri, 25 Mar 2022 00:00:00 +0000 https://knightli.com/en/2022/03/25/hugo-utterances-comments/ Fri, 25 Mar 2022 00:00:00 +0000 https://knightli.com/en/2022/03/25/hugo-utterances-comments/ <h2 id="why-utterances">Why Utterances </h2><p>Utterances is a comment system based on GitHub Issues. Compared with similar tools (such as Gitment/Gitalk/Disqus), common advantages are:</p> <ul> <li>lightweight and fast</li> <li>simple setup</li> <li>comments are stored in GitHub Issues, easy to manage in open projects</li> </ul> <h2 id="installation-steps">Installation Steps </h2><ol> <li>Prepare a GitHub account and repository. Comments will be stored as issues in that repository.</li> </ol> <p><img src="https://knightli.com/2022/03/25/hugo-utterances/1.png" width="1357" height="816" srcset="https://knightli.com/2022/03/25/hugo-utterances/1_hu_48206989f5aec7e1.png 480w, https://knightli.com/2022/03/25/hugo-utterances/1_hu_607d45b0fffe8fad.png 1024w" loading="lazy" class="gallery-image" data-flex-grow="166" data-flex-basis="399px" ></p> <ol start="2"> <li>Install the Utterances GitHub App: <a class="link" href="https://github.com/apps/utterances" target="_blank" rel="noopener" >https://github.com/apps/utterances</a></li> </ol> <p>Install the app and grant access to the target repository.</p> <p><img src="https://knightli.com/2022/03/25/hugo-utterances/2.png" width="1359" height="914" srcset="https://knightli.com/2022/03/25/hugo-utterances/2_hu_db1353451b80d2f9.png 480w, https://knightli.com/2022/03/25/hugo-utterances/2_hu_9a6f2c4be8447a9f.png 1024w" loading="lazy" class="gallery-image" data-flex-grow="148" data-flex-basis="356px" ></p> <ol start="3"> <li>Add config in Hugo <code>config.toml</code>:</li> </ol> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span><span class="lnt">3 </span><span class="lnt">4 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">utteranc</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">enable</span> <span class="p">=</span> <span class="kc">true</span> </span></span><span class="line"><span class="cl"> <span class="nx">repo</span> <span class="p">=</span> <span class="s2">&#34;github_user/repository&#34;</span> </span></span><span class="line"><span class="cl"> <span class="nx">issueTerm</span> <span class="p">=</span> <span class="s2">&#34;pathname&#34;</span> </span></span></code></pre></td></tr></table> </div> </div>