DisqusUtterancesGiscus 評論小部件都是開箱即用的。本文將展示如何配置它們,甚至自定義你自己的評論小部件。


Disqus 評論小部件由 Hugo 支持。

1disqusShortname = "yourdiscussshortname"

請注意:disqusShortname 是站點配置,而非參數。將其放在 params 是行不通的。


Utterances 是一個基於 GitHub issue 的輕量級評論小部件。

2  repo = "user/repo"
3  #issueTerm = "pathname" # pathname, url, title, og:title.
4  #label = "comment" # Optional.
5  #theme = ""

不同於 Disqus,Utterances 是一個參數。請將其放置在 params


名稱 類型 默認值 描述
utterances.repo String - GitHub 倉庫。
utterances.issueTerm String pathname 文章和 issue 之間的映射: pathname
utterances.label String - 此標籤會分配給 Utterances 創建的 issue。
utterances.theme String - 如果未設置任何主題,亮色和暗色模式會分別使用 github-lightgithub-dark。 可選值: github-light, github-dark, preferred-color-scheme, github-dark-orange, icy-dark, dark-bluephoton-dark


  • 確保倉庫是公開的,否則讀者無法查看評論。
  • 確保倉庫已經安裝了 utterances app,否則用戶無法發表評論。
  • 如果你的倉庫是尅隆的,請在設定中確保已經啟用了 issues 功能。


Giscus is a lightweight comments widget built on GitHub discussions.

2  repo = "user/repo"
3  repoId = ""
4  category = ""
5  categoryId = ""


Name Type Default Description
giscus.repo String - GitHub repository. Required.
giscus.repoId String - GitHub repository ID. Required.
giscus.category String - Discussions category. Required.
giscus.categoryId String - Discussions category ID. Required.
giscus.theme String - Left it empty if you want to follow the theme mode.
giscus.mapping String pathname The mapping between blog posts and GitHub discussions: pathname, url, title and og:title.
giscus.inputPosition String top The input position: top or bottom.
giscus.reactions Boolean true Turn on/off the reactions.
giscus.metadata Boolean false Emit discussion metadata.
giscus.lang String - Specify language, default to site language.
giscus.lazyLoading Boolean true Enable lazy loading.


Staticman is also supported out of box, but it may be too complex to set it up.


  • The comments files are stored inside your repository, that is, the comments are rendered during the site build. It maybe useful for SEO, since it doesn’t rely JS to load data dynamically, it’s truly static.
  • Handling spam: approve or reject comment via Git provider pull request, Google reCaptcha.
  • Native theme style.


  • The user information are untrusted, such as email.
  • User unable to delete their comments directly, it’s able to do that via Pull Request.


Staticman instance

Firstly, we should set up a Staticman instance for handling comments requests.

Self-Hosted Staticman instance

Please see https://staticman.net/docs/getting-started.html#step-2-deploy-staticman for details.

Public Staticman instance

I set up a public staticman instance for testing, it should works with GitHub repositories only.

You’ll need to install the GitHub App for your repo, so that the instance has access to write comments files to your repo.

  • Endpoint: https://hbs-staticman.herokuapp.com

Staticman Configuration

Secondary, we need to create the staticman.yml under your site/repository root, so that Staticman instance can read the configuration and process comments requests.

 1# Name of the property. You can have multiple properties with completely
 2# different config blocks for different sections of your site.
 3# For example, you can have one property to handle comment submission and
 4# another one to handle posts.
 6  # (*) REQUIRED
 7  #
 8  # Names of the fields the form is allowed to submit. If a field that is
 9  # not here is part of the request, an error will be thrown.
10  allowedFields: ["name", "email", "url", "message", "reply_to", "root_id"]
12  # (*) REQUIRED
13  #
14  # Name of the branch being used. Must match the one sent in the URL of the
15  # request.
16  branch: "main"
18  # Text to use as the commit message or pull request title. Accepts placeholders.
19  commitMessage: "Add Staticman comment"
21  # (*) REQUIRED
22  #
23  # Destination path (filename) for the data files. Accepts placeholders.
24  filename: "{@id}" # DO NOT MODIFY
26  # The format of the generated data files. Accepted values are "json", "yaml"
27  # or "frontmatter"
28  format: "yaml"
30  # List of fields to be populated automatically by Staticman and included in
31  # the data file. Keys are the name of the field. The value can be an object
32  # with a `type` property, which configures the generated field, or any value
33  # to be used directly (e.g. a string, number or array)
34  generatedFields:
35    date:
36      type: date
37      options:
38        format: "timestamp-seconds"
40  # Whether entries need to be appproved before they are published to the main
41  # branch. If set to `true`, a pull request will be created for your approval.
42  # Otherwise, entries will be published to the main branch automatically.
43  moderation: false
45  # Name of the site. Used in notification emails.
46  name: "hbs.razonyang.com"
48  # Notification settings. When enabled, users can choose to receive notifications
49  # via email when someone adds a reply or a new comment. This requires an account
50  # with Mailgun, which you can get for free at http://mailgun.com.
51  #notifications:
52    # Enable notifications
53    #enabled: true
55    # (!) ENCRYPTED
56    #
57    # Mailgun API key
58    #apiKey: "1q2w3e4r"
60    # (!) ENCRYPTED
61    #
62    # Mailgun domain (encrypted)
63    #domain: "4r3e2w1q"
65  # (*) REQUIRED
66  #
67  # Destination path (directory) for the data files. Accepts placeholders.
68  path: "data/{options.slug}" # DO NOT MODIFY
70  # Names of required fields. If any of these isn't in the request or is empty,
71  # an error will be thrown.
72  requiredFields: ["name", "message"]
74  # List of transformations to apply to any of the fields supplied. Keys are
75  # the name of the field and values are possible transformation types.
76  transforms:
79  reCaptcha:
80    enabled: false
81    siteKey: ""
82    secret: 

Site Parameters

Finally, tweak the following staticman parameters in params.toml.

Name Type Default Description
staticman Object
staticman.endpoint String - THe Staticman instance endpoint. Required.
staticman.repo String - Repository that with form user/repo. Required.
staticman.service String github
staticman.branch String master Repository branch.
staticman.property String comments
staticman.sorting String asc Sorting comments, available options: desc.
staticman.reCaptchaKey String - The reCaptcha site key.
staticman.reCaptchaSecret String - The reCaptcha encrypted secret. You’ll need to encrypt plain secret via https://yourstaticmaninstance/v3/encrypt/plainsecret.
staticman.extraFields Array - Extra fields. Available fields: url.
staticman.requiredFields Array - Extra required fields. Available fields: email and the extra fields. name and message are always required.
staticman.paginate Integer 10 The number of comments per page.
staticman.moderation Boolean true Same as Staticman’s moderation.


The reCaptcha secret is not the plain text version, you’ll need to encrypt it via your Staticman instance https://yourstaticmaninstance/v3/encrypt/PLAINSECRET.




1mkdir -p layouts/partials/post/comments
2echo "MY COMMENTS WIDGET" > layouts/partials/post/comments/custom.html

期間,你很可能需要引入協力廠商資源,不過這可以通過 自定義資源鉤子 輕鬆解决。