feat(toc): implement post table of contents and refactor line number component

templates/post.html

@@ -4,7 +4,27 @@
   th:replace="~{modules/layout :: html(title = |${post.spec.title} - ${site.title}|, header = null, content = ~{::content}, footer = null)}"
 >
   <th:block th:fragment="content">
-    <div class="post" x-data="lineNumbers" x-init="init()">
+    <div class="post" x-data="postLineNum" x-init="init()">
+      <!-- 目录组件 -->
+      <div class="post-toc" x-data="postToc" x-init="init()">
+        <div class="toc-header">
+          <span class="toc-header__icon">&lt;&gt;</span>
+          <span class="toc-header__title">Outline</span>
+        </div>
+        <ul class="toc-tree">
+          <template x-for="(item, index) in items" :key="index">
+            <li class="toc-item"
+                :class="{'toc-item--active': activeId === item.id}"
+                :style="`padding-left: ${getIndent(item.level)}`"
+                @click="scrollTo(item.id)">
+              <span class="toc-item__toggle toc-item__toggle--empty">▼</span>
+              <span class="toc-item__icon">&lt;&gt;</span>
+              <span class="toc-item__tag" x-text="item.tagName"></span>
+              <span class="toc-item__title" x-text="item.title"></span>
+            </li>
+          </template>
+        </ul>
+      </div>
       <h1 class="post-title" th:text="'< ' + ${post.spec.title} + ' >'">Post Title</h1>
       <div class="post-meta">
         <span class="post-date" th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"> publishTime </span>
@@ -26,6 +46,7 @@
         >
       </span>
       <div class="post-body">
+        <!-- 行数组件 -->
         <div class="post-line-gutter"></div>
         <div class="post-content">
           <div th:utext="${post.content.content}">Post Content</div>