feat: add article.headingAnchor parameter and use CSS pseudo-element to display # symbol of heading anchor (#1016)

* feat: add `article.headingAnchor` parameter

* feat: use CSS pseudo-element to display `#` symbol of heading anchor

This prevents RSS feed readers and screen readers from seeing an extra `#`.

* Deactivate `article.headingAnchor` by default

Author: CaiJimmy

assets/scss/partials/layout/article.scss

@@ -232,6 +232,10 @@
             width: var(--card-padding);
             text-align: center;
             color: var(--accent-color);
+
+            &:before {
+                content: "#";
+            }
         }
 
         &:hover,

config.yaml

@@ -28,6 +28,7 @@ params:
             src: img/avatar.png
 
     article:
+        headingAnchor: false
         math: false
         toc: true
         readingTime: true

layouts/_default/_markup/render-heading.html

@@ -1,4 +1,6 @@
 <h{{ .Level }} id="{{ .Anchor }}">
-    <a href="#{{ .Anchor }}" class="header-anchor">#</a>
+    {{- if site.Params.Article.HeadingAnchor -}}
+        <a href="#{{ .Anchor }}" class="header-anchor"></a>
+    {{- end -}}
     {{ .Text | safeHTML }}
 </h{{ .Level }}>