From fec88430bd12bdf1fca10bd9ed8747d474a38e10 Mon Sep 17 00:00:00 2001
From: liuyx <1517482303@qq.com>
Date: Sat, 12 Nov 2022 16:19:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E7=9B=AE=E5=BD=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 blog/src/App.vue                     |  1 +
 blog/src/assets/scss/element.scss    |  1 +
 blog/src/components/BlogList.vue     |  4 +-
 blog/src/components/Header.vue       |  3 +
 blog/src/router/index.js             |  2 +-
 blog/src/views/archive/Archive.vue   |  2 +-
 blog/src/views/article/Article.vue   | 83 ++++++++++++++++++++++++++--
 blog/src/views/category/Category.vue |  2 +-
 blog/src/views/tag/Tag.vue           |  2 +-
 9 files changed, 91 insertions(+), 9 deletions(-)

diff --git a/blog/src/App.vue b/blog/src/App.vue
index e276e86..7664874 100644
--- a/blog/src/App.vue
+++ b/blog/src/App.vue
@@ -22,6 +22,7 @@ import Footer from '@/components/Footer.vue'
   margin: 10px 0;
   .content {
     width: 65%;
+    // margin-top: 50px;
   }
 }
 </style>
diff --git a/blog/src/assets/scss/element.scss b/blog/src/assets/scss/element.scss
index 744b4fe..ff55135 100644
--- a/blog/src/assets/scss/element.scss
+++ b/blog/src/assets/scss/element.scss
@@ -8,4 +8,5 @@
 
 .el-card {
   border-radius: 10px;
+  margin: 20px 0;
 }
\ No newline at end of file
diff --git a/blog/src/components/BlogList.vue b/blog/src/components/BlogList.vue
index fc664a9..c54d02d 100644
--- a/blog/src/components/BlogList.vue
+++ b/blog/src/components/BlogList.vue
@@ -11,7 +11,9 @@
         <!-- 文章标题和简述 -->
         <el-col :span="14">
           <div class="blog-container">
-            <h3>{{ item.title }}</h3>
+            <router-link :to="'/articles/' + item.id">
+              <h3>{{ item.title }}</h3>
+            </router-link>
             <div class="description">{{ item.description }}</div>
           </div>
         </el-col>
diff --git a/blog/src/components/Header.vue b/blog/src/components/Header.vue
index 33a3a1d..894234e 100644
--- a/blog/src/components/Header.vue
+++ b/blog/src/components/Header.vue
@@ -48,6 +48,9 @@ watch(router.currentRoute, () => {
   background-color: #fff;
   padding: 0 30px;
   box-sizing: border-box;
+  // position: fixed;
+  // top: 0;
+  // z-index: 999;
 }
 .right-header {
   display: flex;
diff --git a/blog/src/router/index.js b/blog/src/router/index.js
index 977562b..e94944b 100644
--- a/blog/src/router/index.js
+++ b/blog/src/router/index.js
@@ -22,7 +22,7 @@ const routes = [
     component: () => import('@/views/about/About.vue')
   },
   {
-    path: '/articles/:id',
+    path: '/articles/:articleId',
     component: () => import('@/views/article/Article.vue')
   }
 ]
diff --git a/blog/src/views/archive/Archive.vue b/blog/src/views/archive/Archive.vue
index bd1b19f..ff61318 100644
--- a/blog/src/views/archive/Archive.vue
+++ b/blog/src/views/archive/Archive.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>Archive</div>
+  <el-card shadow="hover">Archives</el-card>
 </template>
 
 <script setup></script>
diff --git a/blog/src/views/article/Article.vue b/blog/src/views/article/Article.vue
index 469106e..3fd5476 100644
--- a/blog/src/views/article/Article.vue
+++ b/blog/src/views/article/Article.vue
@@ -1,12 +1,30 @@
 <template>
-  <el-card shadow="hover" class="article">
-    <v-md-preview :text="blog"></v-md-preview>
-  </el-card>
+  <el-row :gutter="20">
+    <el-col :span="18">
+      <el-card shadow="hover" class="article">
+        <v-md-preview :text="blog" ref="preview"></v-md-preview>
+      </el-card>
+    </el-col>
+    <el-col :span="6">
+      <el-card shadow="hover" class="directory">
+        <h3>目录</h3>
+        <div
+          v-for="anchor in directory"
+          :key="anchor"
+          :style="{ padding: `10px 0 10px ${anchor.indent * 20}px` }"
+          @click="handleAnchorClick(anchor)"
+        >
+          <a style="cursor: pointer">{{ anchor.title }}</a>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
 const blog = `
-## 测试
+## 二级标题
 
 这是一篇测试文章~
 这是一篇测试文章~
@@ -14,14 +32,71 @@ const blog = `
 这是一篇测试文章~
 这是一篇测试文章~
 
+### 三级标题
+
+1. a
+2. b
+3. c
+
+#### 四级标题
+
 ~~~js
 console.log('这是一篇测试文章~')
 ~~~
+
+## 实现目录功能
+
+> 喔！v-md-editor可太好用了！完美！
+
+::: tip 
+  居然还有tip功能！Amazing！
+:::
 `
+
+const preview = ref()
+const directory = ref([])
+
+onMounted(() => {
+  console.log(preview.value.$el)
+  const anchors = preview.value.$el.querySelectorAll('h1,h2,h3,h4,h5,h6')
+  const titles = Array.from(anchors).filter((title) => !!title.innerText.trim())
+  if (!titles.length) {
+    directory.value = []
+    return
+  }
+
+  const hTags = Array.from(new Set(titles.map((title) => title.tagName))).sort()
+
+  directory.value = titles.map((el) => ({
+    title: el.innerText,
+    lineIndex: el.getAttribute('data-v-md-line'),
+    indent: hTags.indexOf(el.tagName)
+  }))
+
+  console.log(directory.value)
+})
+
+const handleAnchorClick = (anchor) => {
+  const { lineIndex } = anchor
+
+  const heading = preview.value.$el.querySelector(`[data-v-md-line="${lineIndex}"]`)
+
+  if (heading) {
+    preview.value.scrollToTarget({
+      target: heading,
+      scrollContainer: window,
+      top: 60
+    })
+  }
+}
 </script>
 
 <style lang="scss" scoped>
 .article {
   margin: 20px 0;
 }
+.directory {
+  position: sticky;
+  top: 10px;
+}
 </style>
diff --git a/blog/src/views/category/Category.vue b/blog/src/views/category/Category.vue
index 9b8294f..26f9de9 100644
--- a/blog/src/views/category/Category.vue
+++ b/blog/src/views/category/Category.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>Categories</div>
+  <el-card shadow="hover">Categories</el-card>
 </template>
 
 <script setup></script>
diff --git a/blog/src/views/tag/Tag.vue b/blog/src/views/tag/Tag.vue
index 0c555ac..254672c 100644
--- a/blog/src/views/tag/Tag.vue
+++ b/blog/src/views/tag/Tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>Tags</div>
+  <el-card shadow="hover">Tags</el-card>
 </template>
 
 <script setup></script>