Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Staticman nested comment #36

merged 1 commit into from Aug 14, 2019


Copy link

commented Aug 14, 2019


To provide nested comment support

Demo site:

Screenshot from 2019-08-14 05-26-23

This is a port of Huginn's Staticman Integration, which is a port of halogenica/beautifulhugo#222. I hope this is the first repo where this functionality gets merged officially.


Refer to and halogenica/beautifulhugo#222.

Working principle

Modified the form and comment display templates using Staticman's author's suggestion in eduardoboucas/staticman#35 to achieve a logic-error free 2-level deep nested comments. Here's my "OO-diagram" for the problem as a non-developer.

nested comment object diagram

When the "reply to this comment" button is clicked, reply* fields will be recorded into the form fields as hidden values, so that Staticman (API server & integration in this theme) can process them and render them as a comemnt_reply. When it's submitted, the form data will be converted into a condensed JSON string by handleForm() and sent to the endpoint specified in site config file config.toml. Staticman API server will conver the JSON string received according to the format specified in the repo config file staticman.yml and push to the GitHub/GitLab repo for your site either directly or as a pull/merge request.

When this theme reads the comment data folder data/comments, the Hugo $comments is taken to be the comments read from the relevant subfolder data/comments/{options.slug}. We use a double-loop over $comments for rendering comments. The outer loop is for "main comments", comments having no parent. The replyThread of a comment reply matches the _id of a main comment. The replyID and replyName is for back-referencing the reply target

In addition, to enhance the user experience, I've added a reply notice on top of the form, displaying the avatar and the name of the intended reply target, so that the commenter knows who (s)he is replying to while writing the post. To reset things, two reset buttons are added. "Reset" resets every input fields and the reply target, while the "" on the right-hand side of the reply notice only resets the reply target. When a reply button is clicked, the reply target is reset.

During form submission, the submit button text changes to "Submitted" until the popup modal is closed. After closing the modal for successful submission, everything is reset, and the form closes.


  1. My use of the elem() method on the top doesn't follow a consistent style, due to the changing file. After a day of testing and a weekend of developping, I'm torn. You may refactor them if you like.
  2. The creation of the JSON object for the POST request is manual. I don't know fancy JS stuff. You might improve it if you like, but be careful about the double hierarchy of fields like <input name="options[reCaptcha][siteKey]">. A simple data[] = element.key won't give the correct JSON structure needed for Staticman.
  3. I've never tested the display on mobile devices.

@VincentTam VincentTam requested a review from onweru Aug 14, 2019

@VincentTam VincentTam self-assigned this Aug 14, 2019

@onweru onweru merged commit 19ab08a into onweru:master Aug 14, 2019

Copy link

left a comment

@VincentTam, I will go through the js file and scss files when I'm settled later. While testing, I will refactor accordingly, if need be. Thanks for the good work; there are tonnes (exaggerating 😄 , a little) of changes here.


This comment has been minimized.

Copy link
Collaborator Author

commented Aug 14, 2019

@VincentTam, I will go through the js file and scss files when I'm settled later. While testing, I will refactor accordingly, if need be. Thanks for the good work; there are tonnes (exaggerating , a little) of changes here.

Thanks for being the first repo owner to merge my nested comment integration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.