staticman.html

{{/* $entryId stores the transformed current path for sorting Staticman data file */}}
{{- $entryId := .File.UniqueID -}}
{{/* Additional div wrapper for proper consistent margin */}}
<div>
  <h2>{{ i18n "say_sth" }}</h2>
    <form id="post-js-form" class="post-new-comment" method="POST">
      {{/* Display reply target */}}
      <h5 class='post-reply-notice hidden'>
        <span class='post-reply-arrow'></span><span class='post-reply-name'></span>
      </h5>

      {{/* Hidden fields */}}
      <input type="hidden" name="options[entryId]" value="{{ $entryId }}">
      <input type='hidden' name='fields[replyThread]' value=''>
      <input type='hidden' name='fields[replyID]' value=''>
      <input type='hidden' name='fields[replyName]' value=''>

      {{/* User input fields */}}
      <input required name='fields[name]' type='text' placeholder='{{ i18n "name" }}'>
      <input name='fields[website]' type='text' placeholder='{{ i18n "website" }}'>
      <input required name='fields[email]' type='email' placeholder='{{ i18n "email" }}'>
      <textarea required name='fields[body]' placeholder='{{ i18n "body" }}' rows='10'></textarea>

      {{/* reCAPTHCA v2 */}}
      {{ if and .Site.Params.staticman.recaptcha.siteKey .Site.Params.staticman.recaptcha.encryptedKey }}
      {{ with .Site.Params.staticman.recaptcha }}
        <input hidden name="options[reCaptcha][siteKey]" value="{{ .sitekey }}">
        <input hidden name="options[reCaptcha][secret]" value="{{ .encryptedkey }}">
        <div class="g-recaptcha" data-sitekey="{{ .sitekey }}"></div>
      {{ end }}
      {{ end }}

      {{/* Start comment form alert messaging */}}
      <p class='post-submit-notice'>
        <strong class='post-submit-notice-text submit-success hidden'>{{ i18n "success_msg" }}</strong>
        <strong class='post-submit-notice-text submit-failed hidden'>{{ i18n "error_msg" }}</strong>
      </p>

      {{/* Form buttons */}}
      <input type='submit' value='{{ i18n "btn_sumbit" }}' class='button'>
      <input type='submit' value='{{ i18n "btn_submitted" }}' class='hidden button' disabled>
      <input type='reset' value='{{ i18n "btn_reset" }}' class='button'>
    </form>
</div>

{{/* Additional div wrapper for proper consistent margin */}}
<div>
  <h2>{{ i18n "comments" }}</h2>

  {{ if .Site.Data.comments }}
    {{/* $comments collects comment files for the current blog entry */}}
    {{- $comments := index $.Site.Data.comments $entryId -}}
    {{ if not $comments }}
      <p>{{ i18n "no_comment" }}</p>
    {{ else }}
      {{/* Loop through "main comments" only if "data/comments exists" */}}
      {{ range $comments }}
        {{ if not .replyThread }}
          {{ $.Scratch.Set "threadID" ._id }}
          {{/* Comment template for a "main comment" */}}
          <article id="{{ ._id }}" class="post-comment">
            <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=100" alt="{{ .name }}'s Gravatar">
            <h3 class="post-comment-author-container">
              <span class='post-comment-author'>
                {{- if .website -}}
                  <a rel="external nofollow" href="{{ .website }}">{{ .name }}</a>
                {{- else -}}
                  {{- .name -}}
                {{- end -}}
              </span>
            </h3>
            <div class="post-comment-timestamp">
              <a href="#{{ ._id }}" title="Permalink to this comment">
                <time datetime="{{ .date }}">{{ dateFormat "02/01/2006" .date }}</time>
              </a>
            </div>
            <div class="post-comment-content">
              {{ .body | markdownify }}
            </div>
            <div class='post-comment-reply-btn-container'>
              <span class='post-comment-threadID hidden'>{{ ._id }}</span>
              <a class='post-comment-reply-btn button' href='#post-js-form'>{{ i18n "reply" }}</a>
            </div>
          </article>
          {{/* Loop through "comment replies" */}}
          {{ range $comments }}
            {{ if eq .replyThread ($.Scratch.Get "threadID") }}
            {{/* Comment template for a "comment reply" */}}
            <article id="{{ ._id }}" class="post-comment post-comment-reply">
              <img class="post-comment-avatar" src="https://www.gravatar.com/avatar/{{ .email }}?s=100" alt="{{ .name }}'s Gravatar">
              <h3 class="post-comment-author-container">
                <span class='post-comment-author'>
                  {{- if .website -}}
                  <a rel="external nofollow" href="{{ .website }}">{{ .name }}</a>
                  {{- else -}}
                    {{- .name -}}
                  {{- end -}}
                </span><a href='#{{ .replyID }}' class='post-reply-target'>{{ .replyName }}</a>
              </h3>
              <div class="post-comment-timestamp">
                <a href="#{{ ._id }}" title="Permalink to this comment">
                  <time datetime="{{ .date }}">{{ dateFormat "02/01/2006" .date }}</time>
                </a>
              </div>
              <div class="post-comment-content">
                {{ .body | markdownify }}
              </div>
              <div class='post-comment-reply-btn-container'>
                <span class = 'post-comment-threadID hidden'>{{ .replyThread }}</span>
                <a class='post-comment-reply-btn button' href='#post-js-form'>{{ i18n "reply" }}</a>
              </div>
            </article>
            {{ end }}
          {{ end }}
        {{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
</div>