deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-10 23:38:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1
tabi/blog/comments/index.html
GitHub Actions bf8da8a99d Deploy welpo/tabi to welpo/tabi:gh-pages
2025-10-04 11:14:46 +00:00

55 lines
No EOL
40 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html lang=en><head><meta charset=UTF-8><meta content="default-src 'self';font-src 'self' data:;img-src 'self' https://* data:;media-src 'self' https://cdn.jsdelivr.net/;style-src 'self';frame-src player.vimeo.com https://www.youtube-nocookie.com giscus.app;connect-src 'self' https://tabi-stats.osc.garden vhiweeypifbwacashxjz.supabase.co;script-src 'self' https://tabi-stats.osc.garden giscus.app cdn.jsdelivr.net 'self'" http-equiv=Content-Security-Policy><meta content="width=device-width,initial-scale=1.0" name=viewport><meta content=https://welpo.github.io/tabi name=base><title>
~/tabi • Add comments to your posts with these 4 comment systems</title><link href=https://welpo.github.io/tabi/img/seedling.png rel=icon type=image/png><link href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y="50%" x="50%" dominant-baseline="central" text-anchor="middle" font-size="88">🌱</text></svg>' rel=icon><link title="~/tabi - Atom Feed" href=https://welpo.github.io/tabi/atom.xml rel=alternate type=application/atom+xml><link href="https://welpo.github.io/tabi/custom_subset.css?h=0b9535a28bc3d5bf2321" rel=stylesheet><link href="https://welpo.github.io/tabi/main.css?h=3716ab3457d2dd050b3c" rel=stylesheet><meta content="light dark" name=color-scheme><meta content=#087e96 name=theme-color><meta content="Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback." name=description><meta content="Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback." property=og:description><meta content="Add comments to your posts with these 4 comment systems" property=og:title><meta content=article property=og:type><meta content="https://welpo.github.io/tabi/blog/comments/social_cards/blog_comments.jpg?h=74bdc18ca3abec1435cf" property=og:image><meta content=1400 property=og:image:width><meta content=800 property=og:image:height><meta content="https://welpo.github.io/tabi/blog/comments/social_cards/blog_comments.jpg?h=74bdc18ca3abec1435cf" name=twitter:image><meta content=summary_large_image name=twitter:card><meta content=es_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/es/blog/comments/ hreflang=es rel=alternate><meta content=ca_ES property=og:locale:alternate><link href=https://welpo.github.io/tabi/ca/blog/comments/ hreflang=ca rel=alternate><meta content=en_GB property=og:locale:alternate><link href=https://welpo.github.io/tabi/blog/comments/ hreflang=en rel=alternate><meta content=https://welpo.github.io/tabi/blog/comments/ property=og:url><meta content=~/tabi property=og:site_name><noscript><link href=https://welpo.github.io/tabi/no_js.css rel=stylesheet></noscript><script src=https://welpo.github.io/tabi/js/initializeTheme.min.js></script><script defer src=https://welpo.github.io/tabi/js/themeSwitcher.min.js></script><script async data-goatcounter=https://tabi-stats.osc.garden/count src=https://tabi-stats.osc.garden/count.js></script><script src="https://welpo.github.io/tabi/js/searchElasticlunr.min.js?h=3626c0ef99daa745b31e" defer></script><body><a href=#main-content id=skip-link>Skip to content</a><header><nav class=navbar><div class=nav-title><a class=home-title href=https://welpo.github.io/tabi/>~/tabi</a></div><div class=nav-navs><ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/blog/>blog </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/archive/>archive </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/tags/>tags </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/projects/>projects </a><li class=menu-icons-container><ul class=menu-icons-group><li class="js menu-icon"><div aria-label="Click or press $SHORTCUT to open search" class="search-icon interactive-icon" title="Click or press $SHORTCUT to open search" id=search-button role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><li class=language-switcher><details class=dropdown><summary aria-label="Language selection" title="Language selection" aria-haspopup=true role=button><div class=language-switcher-icon></div></summary> <div class=dropdown-content role=menu>English<a aria-label=العربية href=https://welpo.github.io/tabi/ar/blog/comments/ lang=ar role=menuitem>العربية</a><a aria-label=Español href=https://welpo.github.io/tabi/es/blog/comments/ lang=es role=menuitem>Español</a><a aria-label=Català href=https://welpo.github.io/tabi/ca/blog/comments/ lang=ca role=menuitem>Català</a></div></details><li class="theme-switcher-wrapper js"><div aria-label="Toggle dark mode" title="Toggle dark/light mode" aria-pressed=false class=theme-switcher role=button tabindex=0></div><div aria-label="Reset mode to default" class="theme-resetter arrow" title="Reset mode to default" aria-hidden=true role=button tabindex=0></div></ul></ul></div></nav></header><div class=content id=main-content><main><article class=h-entry><h1 class="p-name article-title">Add comments to your posts with these 4 comment systems</h1><a class="u-url u-uid" href=https://welpo.github.io/tabi/blog/comments/></a><ul class=meta><li><time class=dt-published datetime=2023-07-14>14th Jul 2023</time><li title="552 words"><span aria-hidden=true class=separator>•</span>3 min read<li class=tag><span aria-hidden=true class=separator>•</span>Tags: <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/showcase/>showcase</a>, <li class=tag><a class=p-category href=https://welpo.github.io/tabi/tags/tutorial/>tutorial</a></ul><ul class="meta last-updated"><li><time class=dt-updated datetime=2023-07-26>Updated on 26th Jul 2023</time><li><span aria-hidden=true class=separator>•</span><a class=external href=https://github.com/welpo/tabi/commits/main/content/blog/comments/index.md>See changes</a></ul><div class=toc-container><h3>Table of Contents</h3><ul><li><a href=https://welpo.github.io/tabi/blog/comments/#setup>Setup</a> <ul><li><a href=https://welpo.github.io/tabi/blog/comments/#github-based-systems>GitHub based systems</a> <ul><li><a href=https://welpo.github.io/tabi/blog/comments/#giscus>giscus</a><li><a href=https://welpo.github.io/tabi/blog/comments/#utterances>utterances</a></ul><li><a href=https://welpo.github.io/tabi/blog/comments/#hyvor-talk>Hyvor Talk</a><li><a href=https://welpo.github.io/tabi/blog/comments/#isso>Isso</a><li><a href=https://welpo.github.io/tabi/blog/comments/#common-settings>Common settings</a></ul><li><a href=https://welpo.github.io/tabi/blog/comments/#live-example>Live example</a></ul></div><p class=p-summary hidden>Discover how to enable a comments section on your posts using giscus, utterances, Hyvor Talk, or Isso, enabling reader interaction and feedback.<section class="e-content body"><p>tabi currently supports four comment systems: <a class=external href=https://giscus.app/>giscus</a>, <a class=external href=https://utteranc.es/>utterances</a>, <a class=external href=https://talk.hyvor.com/>Hyvor Talk</a>, and <a class=external href=https://isso-comments.de/>Isso</a>.<p>giscus and utterances are open-source projects that let you add a comments section to your website using GitHub issues (utterances) or discussions (giscus). They are perfect for static site generators like Zola, since they enable your readers to interact and leave comments on your posts without requiring a traditional backend or database.<p>As they are based on GitHub, giscus and utterances require users to have a GitHub account and authorize the respective app. Alternatively, visitors can also comment directly on the corresponding GitHub discussion or issue.<p>Both are great tools for adding comments to your blog, but giscus has a few advantages:<ul><li>More themes.<li>Support for reactions.<li>Comment replies and conversation view.<li>Safer: utterances requires enabling unsafe inline styles to set the height of the frame; giscus doesn’t.<li>Multilanguage support: utterances is only available in English; giscus supports over 20 languages.<li>More active development: giscus’ last commit, as of this post, was a two days ago. utterances’ last commit was over a year ago.</ul><p>Hyvor Talk is a paid privacy-focused commenting platform. It offers all of the giscus’ advantages, and a few more, like moderation and spam detection.<p>Isso is an open-source self-hosted commenting system that stores comments in its own database. One of its main advantages is privacy; it does not share user data with third parties. It also has a lightweight and clean interface, making it easy for your visitors to leave comments. Isso also allows anonymous comments, potentially increasing user engagement on your website.<h2 id=setup><a aria-label="Anchor link for: setup" class="header-anchor no-hover-padding" href=#setup><span aria-hidden=true class=link-icon></span></a> Setup</h2><h3 id=github-based-systems><a aria-label="Anchor link for: github-based-systems" class="header-anchor no-hover-padding" href=#github-based-systems><span aria-hidden=true class=link-icon></span></a> GitHub based systems</h3><p>The configuration of both giscus and utterances is quite similar. First, visit the website of the system you want to enable: <a class=external href=https://giscus.app/>giscus.app</a> or <a class=external href=https://utteranc.es/>utteranc.es</a>.<p>Follow the instructions on the <strong>Configuration</strong> section of the website, and set it up it to your liking. Then, set the values shown on the <strong>Enable giscus/utterances</strong> section (the <code>script</code> codeblock) on the proper section of your <code>config.toml</code>: <code>[extra.giscus]</code> or <code>[extra.utterances]</code>.<h4 id=giscus><a aria-label="Anchor link for: giscus" class="header-anchor no-hover-padding" href=#giscus><span aria-hidden=true class=link-icon></span></a> giscus</h4><p>giscus has a few more settings than utterances:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">giscus</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enabled_for_all_posts</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">automatic_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">repo</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>yourGithubUsername/yourRepo<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">repo_id</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>YourRepoID<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">category</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Announcements<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">category_id</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>YourCategoryID<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">mapping</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>slug<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">strict_title_matching</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">1</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> 1 to enable, 0 to disable.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enable_reactions</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-numeric z-integer z-toml">1</span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> 1 to enable, 0 to disable.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">comment_box_above_comments</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">light_theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>noborder_light<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">dark_theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>noborder_dark<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lang</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Leave blank to match the page's language.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lazy_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><h4 id=utterances><a aria-label="Anchor link for: utterances" class="header-anchor no-hover-padding" href=#utterances><span aria-hidden=true class=link-icon></span></a> utterances</h4><pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">utterances</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enabled_for_all_posts</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">automatic_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">repo</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>yourgithubuser/yourrepo<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">issue_term</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>slug<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">label</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>💬<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">light_theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>github-light<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">dark_theme</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>photon-dark<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lazy_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><h3 id=hyvor-talk><a aria-label="Anchor link for: hyvor-talk" class="header-anchor no-hover-padding" href=#hyvor-talk><span aria-hidden=true class=link-icon></span></a> Hyvor Talk</h3><p>Set up your website from the <a class=external href=https://talk.hyvor.com/console>Hyvor Talk console</a> and fill in the settings in <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">hyvortalk</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enabled_for_all_posts</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">automatic_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">website_id</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>1234<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">page_id_is_slug</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lang</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">page_author</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> Email (or base64 encoded email) of the author.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lazy_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><h3 id=isso><a aria-label="Anchor link for: isso" class="header-anchor no-hover-padding" href=#isso><span aria-hidden=true class=link-icon></span></a> Isso</h3><p>To enable Isso, you’ll first need to install and run an Isso server (<a class=external href=https://blog.phusion.nl/2018/08/16/isso-simple-self-hosted-commenting-system/#1installingisso>here’s a useful guide</a>). Then, complete these settings in <code>config.toml</code>:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span><span class="z-punctuation z-separator z-table z-toml">.</span><span class="z-entity z-name z-table z-toml">isso</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">enabled_for_all_posts</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">false</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">automatic_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">endpoint_url</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>https://example.com/comments/<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span> <span class="z-comment z-line z-number-sign z-toml"><span class="z-punctuation z-definition z-comment z-toml">#</span> URL to Isso host.</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">page_id_is_slug</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lang</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">max_comments_top</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>inf<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">max_comments_nested</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>5<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">avatar</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">voting</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">page_author_hashes</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span><span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">lazy_loading</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></code></pre><h3 id=common-settings><a aria-label="Anchor link for: common-settings" class="header-anchor no-hover-padding" href=#common-settings><span aria-hidden=true class=link-icon></span></a> Common settings</h3><p>Setting <code>enabled_for_all_posts = true</code> for a comment system will enable it globally.<p>Alternatively, enable comments on an individual post’s front matter by adding the name of the system (<code>utterances</code>, <code>giscus</code>, <code>hyvortalk</code>, or <code>isso</code>) <code>= true</code>. For example, this is how you would enable giscus:<pre class="language-toml z-code" data-lang=toml><code class=language-toml data-lang=toml><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">title</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Bears, Beets, Battlestar Galactica: The Dwight Schrute Guide to Life<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">date</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-other z-datetime z-toml">2007-04-26</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">description</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>Lessons learned from beet farming and paper sales.<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">taxonomies</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">tags</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-punctuation z-definition z-array z-begin z-toml">[</span><span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>personal<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-separator z-array z-toml">,</span> <span class="z-string z-quoted z-double z-basic z-toml"><span class="z-punctuation z-definition z-string z-begin z-toml">"</span>beets<span class="z-punctuation z-definition z-string z-end z-toml">"</span></span><span class="z-punctuation z-definition z-array z-end z-toml">]</span>
</span><span class="z-source z-toml">
</span><span class="z-source z-toml"><span class="z-punctuation z-definition z-table z-begin z-toml">[</span><span class="z-meta z-tag z-table z-toml"><span class="z-entity z-name z-table z-toml">extra</span></span><span class="z-punctuation z-definition z-table z-end z-toml">]</span>
</span><mark><span class="z-source z-toml"><span class="z-meta z-tag z-key z-toml"><span class="z-entity z-name z-tag z-toml">giscus</span></span> <span class="z-punctuation z-definition z-key-value z-toml">=</span> <span class="z-constant z-language z-toml">true</span>
</span></mark></code></pre><p>If you accidentally enable more than one system, your site will fail to build with an error.<p>If your site has multiple languages with matching posts (like this demo), and you’d like to share comments between languages, you must use <code>issue_term = "slug"</code> (for giscus and utterances) or <code>page_id_is_slug = true</code> (for Hyvor Talk or Isso). This will use the name of the Markdown file (sans the language tag) as the identifier. All other options will create different comment sections for each language.<h2 id=live-example><a aria-label="Anchor link for: live-example" class="header-anchor no-hover-padding" href=#live-example><span aria-hidden=true class=link-icon></span></a> Live example</h2><p>Below you’ll find the giscus widget using the settings shown <a href=https://welpo.github.io/tabi/blog/comments/#giscus>above</a>.</section><form action="https://vhiweeypifbwacashxjz.supabase.co/rest/v1/rpc/increment_hits?apikey=sb_publishable_EoB7MFJhCmb6PiAk-GPJ4w_PGhQ44Ru" class=iine-form method=post><input name=page_slug type=hidden value=/blog/comments/><button aria-label="Like this post" title="Like this post" class=iine-button data-icon=thumbs_up data-slug=/blog/comments/>👍</button></form><nav class="full-width article-navigation"><div><a aria-describedby=left_title aria-label=Next href=https://welpo.github.io/tabi/blog/customise-tabi/><span class=arrow>←</span> Next</a><p aria-hidden=true id=left_title>Customise tabi with skins and a default theme</div><div><a aria-describedby=right_title aria-label=Prev href=https://welpo.github.io/tabi/blog/custom-font-subset/>Prev <span class=arrow>→</span></a><p aria-hidden=true id=right_title>Optimise loading times with a custom font subset</div></nav><div class=comments data-category=Announcements data-category-id=DIC_kwDOJ59Ur84CX0QG data-dark-theme=noborder_dark data-input-position=bottom data-lang=en data-lazy-loading=true data-light-theme=noborder_light data-mapping=specific data-reactions-enabled=1 data-repo=welpo/tabi-comments data-repo-id=R_kgDOJ59Urw data-strict=1 data-term=comments id=comments><script async src=https://welpo.github.io/tabi/js/giscus.min.js></script><noscript>You need JavaScript to view the comments.</noscript></div></article></main><div id=button-container><div id=toc-floating-container><input class=toggle id=toc-toggle type=checkbox><label class=overlay for=toc-toggle></label><label title="Toggle Table of Contents" class=button for=toc-toggle id=toc-button><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M414.82-193.094q-18.044 0-30.497-12.32-12.453-12.319-12.453-30.036t12.453-30.086q12.453-12.37 30.497-12.37h392.767q17.237 0 29.927 12.487 12.69 12.486 12.69 30.203 0 17.716-12.69 29.919t-29.927 12.203H414.82Zm0-244.833q-18.044 0-30.497-12.487Q371.87-462.9 371.87-480.45t12.453-29.92q12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.511 12.69 12.512 12.69 29.845 0 17.716-12.69 30.086-12.69 12.37-29.927 12.37H414.82Zm0-245.167q-18.044 0-30.497-12.32t-12.453-30.037q0-17.716 12.453-30.086 12.453-12.369 30.497-12.369h392.767q17.237 0 29.927 12.486 12.69 12.487 12.69 30.203 0 17.717-12.69 29.92-12.69 12.203-29.927 12.203H414.82ZM189.379-156.681q-32.652 0-55.878-22.829t-23.226-55.731q0-32.549 23.15-55.647 23.151-23.097 55.95-23.097 32.799 0 55.313 23.484 22.515 23.484 22.515 56.246 0 32.212-22.861 54.893-22.861 22.681-54.963 22.681Zm0-245.167q-32.652 0-55.878-23.134-23.226-23.135-23.226-55.623 0-32.487 23.467-55.517t56.12-23.03q32.102 0 54.721 23.288 22.62 23.288 22.62 55.775 0 32.488-22.861 55.364-22.861 22.877-54.963 22.877Zm-.82-244.833q-32.224 0-55.254-23.288-23.03-23.289-23.03-55.623 0-32.333 23.271-55.364 23.272-23.03 55.495-23.03 32.224 0 55.193 23.288 22.969 23.289 22.969 55.622 0 32.334-23.21 55.364-23.21 23.031-55.434 23.031Z"/></svg></label><div class=toc-content><div class=toc-container><ul><li><a href=https://welpo.github.io/tabi/blog/comments/#setup>Setup</a> <ul><li><a href=https://welpo.github.io/tabi/blog/comments/#github-based-systems>GitHub based systems</a> <ul><li><a href=https://welpo.github.io/tabi/blog/comments/#giscus>giscus</a><li><a href=https://welpo.github.io/tabi/blog/comments/#utterances>utterances</a></ul><li><a href=https://welpo.github.io/tabi/blog/comments/#hyvor-talk>Hyvor Talk</a><li><a href=https://welpo.github.io/tabi/blog/comments/#isso>Isso</a><li><a href=https://welpo.github.io/tabi/blog/comments/#common-settings>Common settings</a></ul><li><a href=https://welpo.github.io/tabi/blog/comments/#live-example>Live example</a></ul></div></div></div><a title="Go to the comments section" class=no-hover-padding href=#comments id=comments-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule=evenodd fill-rule=evenodd /></svg> </a><a title="Go to the top of the page" class=no-hover-padding href=# id=top-button> <svg viewbox="0 0 20 20" fill=currentColor><path d="M3.293 9.707a1 1 0 010-1.414l6-6a1 1 0 011.414 0l6 6a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L4.707 9.707a1 1 0 01-1.414 0z"/></svg> </a></div><span class=hidden id=copy-success> Copied! </span><span class=hidden id=copy-init> Copy code to clipboard </span><script defer src=https://welpo.github.io/tabi/js/copyCodeToClipboard.min.js></script><script defer src=https://cdn.jsdelivr.net/gh/welpo/iine@main/iine.mini.js></script></div><footer><section><nav class="socials nav-navs"><ul><li><a class="nav-links no-hover-padding social" href=https://welpo.github.io/tabi/atom.xml> <img alt=feed loading=lazy src=https://welpo.github.io/tabi/social_icons/rss.svg title=feed> </a><li class=js><a class="nav-links no-hover-padding social" data-encoded-email=dGFiaUBvc2MuZ2FyZGVu href=#><img alt=email loading=lazy src=https://welpo.github.io/tabi/social_icons/email.svg title=email> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://github.com/welpo/> <img alt=github loading=lazy src=https://welpo.github.io/tabi/social_icons/github.svg title=github> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://soundcloud.com/oskerwyld> <img alt=soundcloud loading=lazy src=https://welpo.github.io/tabi/social_icons/soundcloud.svg title=soundcloud> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://instagram.com/oskerwyld> <img alt=instagram loading=lazy src=https://welpo.github.io/tabi/social_icons/instagram.svg title=instagram> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://youtube.com/@oskerwyld> <img alt=youtube loading=lazy src=https://welpo.github.io/tabi/social_icons/youtube.svg title=youtube> </a><li><a class="nav-links no-hover-padding social" rel=" me" href=https://open.spotify.com/artist/5Hv2bYBhMp1lUHFri06xkE> <img alt=spotify loading=lazy src=https://welpo.github.io/tabi/social_icons/spotify.svg title=spotify> </a></ul></nav><nav class=nav-navs><small> <ul><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/about/> about </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/privacy/> privacy policy </a><li><a class="nav-links no-hover-padding" href=https://tabi-stats.osc.garden/> site statistics </a><li><a class="nav-links no-hover-padding" href=https://welpo.github.io/tabi/sitemap.xml> sitemap </a></ul> </small></nav><div class=credits><small> Powered by <a href=https://www.getzola.org>Zola</a> & <a href=https://github.com/welpo/tabi>tabi</a> • <a href=https://github.com/welpo/tabi> Site source </a></small></div></section><script async src=https://welpo.github.io/tabi/js/decodeMail.min.js></script><div class="search-modal js" aria-labelledby=modalTitle id=searchModal role=dialog><h1 class=visually-hidden id=modalTitle>Search</h1><div id=modal-content><div id=searchBar><div aria-hidden=true class=search-icon><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></div><input aria-controls=results-container aria-expanded=false autocomplete=off id=searchInput placeholder=Search… role=combobox spellcheck=false><div class="close-icon interactive-icon" title="Clear search" id=clear-search role=button tabindex=0><svg viewbox="0 -960 960 960" xmlns=http://www.w3.org/2000/svg><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></div></div><div id=results-container><div id=results-info><span id=zero_results> No results</span><span id=one_results> $NUMBER result</span><span id=many_results> $NUMBER results</span><span id=two_results> $NUMBER results</span><span id=few_results> $NUMBER results</span></div><div id=results role=listbox></div></div></div></div></footer>
Reference in a new issue View git blame Copy permalink