feat: add post views counter for GoatCounter

_config.yml

@@ -105,6 +105,10 @@ comments:
     lang: # optional, default to the value of `site.lang`
     reactions_enabled: # optional, default to the value of `1`
 
+views_counter:
+  active: # the option for the post views counter, e.g., 'goatcounter'.
+  # Keep it empty means disable. goatcounter id should be defined in 'goatcounter' section.
+
 # Self-hosted static assets, optional › https://github.com/cotes2020/chirpy-static-assets
 assets:
   self_host:

_includes/views-counter.html

@@ -0,0 +1,11 @@
+<!-- Views counter -->
+
+{% if site.views_counter and site.views_counter.active %}
+  <span>
+    <em id="views-counter"> 0 </em>
+    {{ site.data.locales[lang].post.pageview_measure }}
+  </span>
+
+  {% capture path %}views-counters/{{ site.views_counter.active }}.html{% endcapture %}
+  {% include {{ path }} %}
+{% endif %}

_includes/views-counters/goatcounter.html

@@ -0,0 +1,10 @@
+<script>
+  const uri = location.pathname.replace(/\/$/, '');
+  const fetchPromise = fetch(`https://{{site.goatcounter.id}}.goatcounter.com/counter/${encodeURIComponent(uri)}.json`);
+
+  fetchPromise
+    .then((response) => response.json())
+    .then((data) => {
+      document.getElementById('views-counter').innerText = data.count;
+    });
+</script>

_layouts/post.html

@@ -8,7 +8,6 @@
   - post-nav
   - comments
 ---
-
 {% include lang.html %}
 
 <article class="px-1">
@@ -47,6 +46,9 @@ <h1 data-toc-skip>{{ page.title }}</h1>
         </div>
       {% endif %}
 
+      <!-- Views counter -->
+      {% include views-counter.html %}
+
       <div class="d-flex justify-content-between">
         <!-- author(s) -->
         <span>