staticman.html

{{ with .Site.Params.staticman.api }}
<aside aria-label="note" class="note">
    <section id="comment-thankyou" style="display: none; margin-left: 5px"> 
        Thank you for your comment, it will be displayed once it has been approved!
    </section>
</aside>
<script type="application/javascript">
    if (/comment-thankyou/.test(window.location.href)) {
        document.getElementById('comment-thankyou').style.display = 'block';
    }else{
        document.getElementById('comment-thankyou').style.display = 'none';
    }
</script>

<button id="staticman-button" onclick="showComments()">Show comments</button>

<section id="staticman-comments" class="js-comments staticman-comments">
    <script type="application/javascript">
          {{ partial "staticman-js-common.js" . | safeJS }}
      </script>
      <noscript>Enable JavaScript to view comments.</noscript>

    {{ $slug := replace $.RelPermalink "/" "" }}
  
    {{ if $.Site.Data.comments }}
      {{ $comments := index $.Site.Data.comments $slug }}
      {{ if $comments }}
        {{ if gt (len $comments) 1  }}
          <h3>{{ len $comments  }} comments</h3>
        {{ else }}
          <h3>{{ len $comments  }} comment</h3>
        {{ end }}
      {{ else }}
        <h3>No comments</h3>
      {{ end }}
  
  
      {{ $.Scratch.Set "hasComments" 0 }}
      {{ range $index, $comments := (index $.Site.Data.comments $slug ) }}
        {{ if not .parent }}
          {{ $.Scratch.Add "hasComments" 1 }}
          <article id="comment-{{ $.Scratch.Get "hasComments" }}" class="static-comment">
            <div class="comment-author">
                <strong>{{ .name }}</strong>
            </div>
            <div class="comment-timestamp">
                <a href="#comment-{{ $.Scratch.Get "hasComments" }}" title="Permalink to this comment">
                    <time datetime="{{ .date }}">{{ dateFormat (default "2 Jan 2006 15:04" .Site.Params.dateformat) .date}}</time>
                </a>
            </div>
            <div class="comment-content"><p>{{ .comment | markdownify }}</p></div>
          </article>
        {{ end }}
      {{ end }}
    {{ end }}
  
  
  
  <form class="js-form form" method="post" action="{{ $.Site.Params.staticman.api }}" onsubmit="return checkForm(this);">
    <fieldset>
        <input type="hidden" name="options[redirect]" value="{{ $.RelPermalink | absURL }}#comment-thankyou">
        <input type="hidden" name="options[slug]" value="{{ replace $.RelPermalink "/" "" }}">
        <input type="hidden" name="options[parent]" value="">
    
        {{ if $.Site.Params.staticman.recaptcha }}
        <input type="hidden" name="options[reCaptcha][siteKey]" value="{{ $.Site.Params.staticman.recaptcha.sitekey }}">
        <input type="hidden" name="options[reCaptcha][secret]"  value="{{ $.Site.Params.staticman.recaptcha.secret }}">
        {{ end }}
        <label for="fields[name]">Name:</label>
        <input name="fields[name]" id="yourname" type="text" placeholder="Your name"/>
        <label for="fields[comment]">Comment:</label>
        <textarea name="fields[comment]" id="yourcomment" placeholder="What are you thinking?"></textarea>
        {{ if $.Site.Params.staticman.recaptcha }}
            <div class="g-recaptcha" id="div-recaptcha" data-sitekey="{{ $.Site.Params.staticman.recaptcha.sitekey }}"></div>
        {{ end }}
        <output id="warningComment"></output>
        <button class="button" id="submitButton">Submit</button>
    </fieldset>
  </form>
</section>
{{ end }}