ghost-giscus-plugin preview
By default, this plugin placed the comments on this page right after the article body. Change the placement, the padding, and whether a subscriber comments area exists in the left panel, and the real comments move to match.
Getting started
giscus mounts comments into any element on the page that has the giscus class. This plugin only creates that element in the spot you want. The comments themselves are still served by giscus and stored in GitHub Discussions, so nothing is reimplemented.
Installation
On Ghost, paste the two scripts below into Settings, Code injection, Site Footer. The first is this plugin; the second is the official giscus tag.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>
<script src="https://giscus.app/client.js"
data-repo="[YOUR REPO]"
data-repo-id="[REPO ID]"
data-category="[CATEGORY]"
data-category-id="[CATEGORY ID]"
data-mapping="pathname"
data-theme="preferred_color_scheme"
crossorigin="anonymous"
async></script>Order matters
This plugin must appear before the giscus script. giscus decides where to mount the instant it runs, checking for a giscus element, so our script has to create that spot first. Reverse the order and the comments land at the script tag instead.
Options
Everything is set with options on the script tag: which element to anchor to (data-target), where around it to attach (data-place, one of replace, append, prepend, before, after), the class or classes added to the mount wrapper (data-class, space-separated so you can add several to inherit your theme's styling), and the four sides of padding (data-padding-top, data-padding-right, data-padding-bottom, data-padding-left, in px). When the target element is not found, a page guard removes the giscus script so comments never land in the wrong place; turn it off with data-guard="false".
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"Choosing a spot
Two shapes cover most cases: placing the comments right after the article, or replacing an existing comments block. The two are walked through below in turn.
Place it after the article
The recommended default is data-target=".gh-content" data-place="after" data-class="gh-comments gh-canvas" data-padding-bottom="48". It creates the mount point right after the article body (.gh-content) and inherits the theme's gh-comments gh-canvas classes, so the spacing and width look native. This is the safest choice because the article body always exists on every page. Unlike a members-only comments area that can be hidden away, the target never goes missing, so it behaves the same everywhere.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-content"
data-place="after"
data-class="gh-comments gh-canvas"
data-padding-bottom="48"></script>Replace an existing comments block
If your theme already has a comments block, reuse its spot with data-target=".gh-comments" data-place="replace". This reproduces <div class="gh-comments gh-canvas giscus"></div> from code injection alone, without editing the theme, so you inherit the position and styling the theme already set. Reach for it when a matching block exists. The caveat: Ghost's native comments are members-only, so on sites that disable them the .gh-comments element may not exist at all. In that case, use the place-after default above.
<script src="https://cdn.jsdelivr.net/gh/GreedyLabs/ghost-giscus-plugin@1/giscus-mount.min.js"
data-target=".gh-comments"
data-place="replace"></script>giscus setup
The repository link, category, and repo-id come from the official giscus site. Enter your repository there and it builds the giscus tag for you to paste.
FAQ
Comments show up at the script tag, not where I want them.
Your plugin script is after the giscus script. Swap them so this plugin comes first.
I only want comments on certain pages.
Point the anchor at an element that only exists on those pages. When the selector matches nothing the plugin does nothing, so targeting a post-only element keeps comments on posts.
I want my theme's comment spacing.
If the rule is in your theme stylesheet, add its class with data-class to inherit it; otherwise set the value directly with data-padding-bottom.
Wrapping up
It is a thin tool that leaves official giscus untouched and only places it for you. One line and the right order, and it behaves the same on any site.