Add link anchor to every title in markdown document

site/static/style.css

@@ -610,6 +610,22 @@ footer ul li > a {
   margin: 0;
 }
 
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
 #api ~ ul > li > p > strong ~ code {
   background: #fff;
   color: #CC7300;

site/templates/component.html

@@ -12,7 +12,7 @@
       </a>
       {%- endif %}
     </h1>
-    {{ post.html }}
+    {{ post.html|add_anchor }}
   </article>
   {%- if post.meta.template === 'component' %}
   {%- include "demos.html" %}

site/templates/page.html

@@ -18,7 +18,7 @@
 <section class="main-container">
   <article class="markdown">
     <h1>{{ post.title }} {{ post.meta.chinese }}</h1>
-    {{ post.html }}
+    {{ post.html|add_anchor }}
   </article>
 </section>
 {% endblock %}

site/theme.js

@@ -172,6 +172,13 @@ module.exports = function(nico) {
         result.push(p);
       });
       return result;
+    },
+    add_anchor: function(content) {
+      for (var i = 1; i <= 6; i++) {
+        var reg = new RegExp('(<h' + i + '\\sid="(.*?)">.*?)(<\/h' + i + '>)', 'g');
+        content = content.replace(reg, '$1<a href="#$2" class="anchor">#</a> $3');
+      }
+      return content;
     }
   };