详情页增加目录，评论区增加 id 定位锚点

Author: yangxg

templates/base.html

@@ -71,6 +71,8 @@ <h1><a href="index.html"><b>Black</b> &amp; White</a></h1>
                 {% endblock main %}
             </main>
             <aside class="col-md-4">
+                {% block toc %}
+                {% endblock toc %}
                 <div class="widget widget-recent-posts">
                     <h3 class="widget-title">最新文章</h3>
                     <ul>

templates/blog/detail.html

@@ -17,7 +17,7 @@ <h1 class="entry-title">{{ post.title }}</h1>
             {{ post.body }}
         </div>
     </article>
-    <section class="comment-area">
+    <section class="comment-area" id="comment-area">
         <hr>
         <h3>发表评论</h3>
         <form action="#" method="post" class="comment-form">
@@ -75,4 +75,26 @@ <h3>评论列表，共 <span>4</span> 条评论</h3>
             </ul>
         </div>
     </section>
-{% endblock main %}
+{% endblock main %}
+{% block toc %}
+    <div class="widget widget-content">
+        <h3 class="widget-title">文章目录</h3>
+        <ul>
+            <li>
+                <a href="#">教程特点</a>
+            </li>
+            <li>
+                <a href="#">谁适合这个教程</a>
+            </li>
+            <li>
+                <a href="#">在线预览</a>
+            </li>
+            <li>
+                <a href="#">资源列表</a>
+            </li>
+            <li>
+                <a href="#">获取帮助</a>
+            </li>
+        </ul>
+    </div>
+{% endblock toc %}