Added support 'Table of Content' [Toc]

cl-theme/static/css/style.css

@@ -503,20 +503,57 @@ h4 > a:hover {
 
 /* aplaylist */
 .play-menu {
-  height: 200px;
-  overflow-y: auto;
+    height: 200px;
+    overflow-y: auto;
 }
 
 .play-menu a {
-  color: white;
+    color: white;
 }
 
 .play-menu a:hover {
-  background-color: #484848;
-  color: #fff;
+    background-color: #484848;
+    color: #fff;
 }
 
 .is-active-play {
-  color: #dd7325;
-  background-color: #dd7325;
+    color: #dd7325;
+    background-color: #dd7325;
+}
+
+/* table of contents */
+.toc {
+    font-size: 0.85rem;
+}
+
+.toctitle {
+    display: block;
+    text-align: center;
+    font-size: 1rem;
+    color: white;
+    text-decoration: underline;
+}
+
+nav.toc {
+    background-color: #0c0f0f;
+    border: 1px solid #dd7325;
+    margin: 1rem 0px;
+}
+
+div.toc {
+    margin: 1rem;
+}
+
+a.headerlink {
+    color: grey;
+    padding-left: .5em;
+    visibility: hidden;
+}
+
+h1:hover > a.headerlink, h2:hover > a.headerlink,
+h3:hover > a.headerlink, h4:hover > a.headerlink,
+h5:hover > a.headerlink, h6:hover > a.headerlink,
+dt:hover > a.headerlink {
+    text-decoration: none;
+    visibility: visible;
 }

cl-theme/templates/article.html

@@ -77,6 +77,12 @@
                             <div class="card-inner-wrapper">
                                 <!-- post text -->
                                 <div class="card-content-text has-text-justified">
+                                    {% if article.toc %}
+                                        <nav class="toc">
+                                            {{ article.toc }}
+                                        </nav>
+                                    {% endif %}
+
                                     {{ article.content }}
                                 </div>
                                 <!-- end of post text -->