From 74eceb750fe6734097715674381fa67bfecc561a Mon Sep 17 00:00:00 2001
From: yanyue404 <xiaoyueyue165@gmail.com>
Date: Sat, 8 Jun 2024 17:09:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=9A=E5=AE=A2=E6=96=87=E7=AB=A0?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=AF=BC=E8=88=AA=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md           |   2 +-
 blog.config.js      |   2 +-
 layouts/default.vue |  13 +-
 package-lock.json   |   2 +-
 package.json        |   2 +-
 pages/posts/_id.vue | 343 +++++++++++++++++++++++++++++++++++++++++++-
 styles/reset.css    |   2 +
 7 files changed, 356 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index e5c01fd..686152b 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,10 @@
 - 支持 github 账号评论
 - 支持暗黑主题
 - github action 自动部署
+- markdown 博客文章标题导航栏
 
 ## TODO
 
-- markdown 博客文章标题导航栏
 - markdown 博客文章在线编辑功能
 
 ## Demo
diff --git a/blog.config.js b/blog.config.js
index 45186cd..4237e5a 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -7,6 +7,6 @@ module.exports = {
   seo: {
     title: "闫越的网络日志",
     description: "Just blog and unjust blog",
-    keywords: "基督徒 | 歌者 | F2E",
+    keywords: "基督徒 | F2E",
   },
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index ddc7275..28b3cc9 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -93,10 +93,20 @@ export default {
   box-sizing: border-box;
   margin: 0;
 }
+body {
+  background-color: #f2f3f5;
+}
+.blog-wrap {
+  h2 {
+    font-weight: 600;
+    padding-bottom: .3em;
+    font-size: 1.5em;
+  }
+}
 .markdown-body {
   box-sizing: border-box;
   min-width: 200px;
-  max-width: 980px;
+  max-width: 1146px;
   margin: 0 auto;
   padding: 0 15px;
   // padding: 45px;
@@ -111,6 +121,7 @@ export default {
     color: var(--theme-color);
   }
   img {
+    box-sizing: border-box !important;
     border: 0.3em solid #e0dfcc !important;
     border-radius: 1em;
     &[width="40%"] {
diff --git a/package-lock.json b/package-lock.json
index 08948fa..fca9349 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-boilerplate",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
diff --git a/package.json b/package.json
index c8e9e1f..27764fc 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-boilerplate",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "author": "yanyue404",
   "scripts": {
     "serve": "cross-env PATH_TYPE=development nuxt",
diff --git a/pages/posts/_id.vue b/pages/posts/_id.vue
index 20c585c..ae223bb 100644
--- a/pages/posts/_id.vue
+++ b/pages/posts/_id.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
-    <div v-show="!post.id">
+  <div class="article-block">
+    <!-- 加载中，文章骨架屏 -->
+    <div class="main-area article-area" v-show="!post.id">
       <el-skeleton style="width: 100%" animated>
         <template slot="template">
-          <div class="q-mb-lg">
+          <div class="article-header">
             <div><el-skeleton-item variant="h1" style="width: 50%" /></div>
             <code class="text-italic">
               <el-skeleton-item variant="text" style="width: 25%"
@@ -26,8 +27,9 @@
         </template>
       </el-skeleton>
     </div>
-    <div v-show="post.id" padding>
-      <div class="q-mb-lg">
+    <!-- 加载完毕 -->
+    <div class="main-area article-area" v-show="post.id" padding>
+      <div class="article-header">
         <h1 class="rainbow">{{ post.title }}</h1>
         <code class="text-italic"
           >Updated by {{ userName }} {{ post.updated_at | timeAgo }}</code
@@ -37,6 +39,70 @@
       <el-backtop />
       <Comment></Comment>
     </div>
+    <div class="article-gap"></div>
+    <!-- 目录的骨架屏 -->
+    <div class="article-sideBar" v-show="!post.id">
+      <nav class="article-catalog catalog-block">
+        <el-skeleton style="width: 100%" animated>
+          <template slot="template">
+            <div v-for="item in [1]" :key="item">
+              <el-skeleton-item variant="h2" style="width: 40%; margin-left: 18px;" />
+              <div style="padding: 14px">
+                <el-skeleton  :rows="7" style="margin-left: 5px;" animated />
+              </div>
+            </div>
+          </template>
+        </el-skeleton>
+      </nav>
+    </div>
+    <!-- 侧边栏 -->
+    <div class="article-sideBar" v-show="post.id">
+      <!-- 导航目录 -->
+      <nav class="article-catalog catalog-block">
+        <div class="catalog-title">
+          <div>目录</div>
+        </div>
+        <div class="catalog-body unfold">
+          <ul class="catalog-list" style="margin-top: 0px">
+            <!-- active 给 li 是选中 -->
+            <li
+              class="item d1"
+              v-for="(item, index) in navList"
+              :key="`${item.type}-${index}`"
+            >
+              <div class="a-container">
+                <a
+                  :href="`#${item.id}`"
+                  :title="item.text"
+                  @click.stop.self="toH1"
+                  class="catalog-aTag d1-aTag-title"
+                >
+                  {{ item.text }}
+                </a>
+              </div>
+              <ul v-show="item.children.length > 0" class="sub-list">
+                <li
+                  class="item d3"
+                  v-for="(o, oIndex) in item.children"
+                  :key="`${o.type}-${oIndex}`"
+                >
+                  <div class="a-container">
+                    <a
+                      :href="`#${o.id}`"
+                      :title="o.text"
+                      @click.stop.self="toH1"
+                      class="catalog-aTag d1-aTag-title"
+                    >
+                      {{ o.text }}
+                    </a>
+                  </div>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </div>
   </div>
 </template>
 
@@ -54,6 +120,7 @@ export default {
   data() {
     return {
       post: {},
+      navList: [],
     };
   },
   filters: {
@@ -88,6 +155,33 @@ export default {
         )
         .then((res) => {
           this.post = res.data;
+          let i = -1;
+          let h2Index = -1;
+
+          this.post.body_html = res.data.body_html.replace(
+            /<h([2-3]) (.*?)>(.*?)<\/h[2-3]>/g,
+            (_, hType, style, text) => {
+              i++;
+              let id = `heading-H${hType}-${i}`;
+
+              if (hType === "2") {
+                h2Index++;
+                this.navList.push({
+                  type: "H" + hType,
+                  text: text,
+                  id,
+                  children: [],
+                });
+              } else {
+                this.navList[h2Index].children.push({
+                  type: "H" + hType,
+                  text: text,
+                  id,
+                });
+              }
+              return `<h${hType} id=${id}>${text}</h${hType}>`;
+            }
+          );
           // this.$q.loading.hide();
         })
         .catch((err) => {
@@ -99,15 +193,239 @@ export default {
     chipClickHandler(labelName) {
       this.$router.push(`/labels/?label=${labelName}`);
     },
+    toH1(e) {
+      e.preventDefault();
+      let toElement = document.querySelector(e.target.hash);
+      toElement && toElement.scrollIntoView(true);
+    },
   },
   created() {
     // this.$q.loading.show({ delay: 250 });
     this.getIssue();
   },
+  mounted() {
+    console.log("nav", this.navList);
+  },
 };
 </script>
 
 <style lang="scss" scoped>
+.article-block {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.article-header {
+  margin-bottom: 10px;
+}
+.article-area {
+  position: relative;
+  width: 820px;
+  max-width: 100%;
+  box-sizing: border-box;
+  padding-right: 15px;
+}
+.article-gap {
+  width: 15px;
+  min-height: 100vh;
+  background-color: #f2f3f5;
+}
+.article-sideBar {
+  width: 300px;
+  position: relative;
+  margin-right: -15px;
+  background-color: #f2f3f5;
+}
+.article-catalog {
+  position: sticky;
+  top: 0px;
+  width: 300px;
+  margin-right: -15px;
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  .catalog-title {
+    font-weight: 500;
+    margin: 0 1.667rem;
+    font-size: 16px;
+    line-height: 2rem;
+    color: #252933;
+    border-bottom: 1px solid #e4e6eb;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 56px;
+    .direction {
+      color: #8a919f;
+      display: flex;
+      font-size: 13px;
+      font-weight: 400;
+      align-items: center;
+      cursor: pointer;
+    }
+  }
+}
+.catalog-block {
+  border-radius: 4px;
+  margin-bottom: 20px;
+  min-height: 540px;
+}
+
+.catalog-body.unfold {
+  width: 296px;
+  margin: 12px 4px 0 0;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.catalog-body::-webkit-scrollbar {
+  width: 4px;
+  height: 80px;
+}
+
+.catalog-body::-webkit-scrollbar-track {
+  box-shadow: none;
+  border-radius: 2px;
+}
+
+.catalog-body::-webkit-scrollbar-thumb {
+  background-color: #e4e6eb;
+  outline: none;
+  border-radius: 50px;
+}
+
+.catalog-list {
+  position: relative;
+  padding: 0 0 12px;
+}
+
+.catalog-list .catalog-aTag {
+  color: inherit;
+  display: inline-block;
+  padding: 0 8px 8px;
+  width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.catalog-list .catalog-aTag.d1-aTag-title {
+  padding-top: 4px;
+  line-height: 22px;
+}
+
+.catalog-list .a-container:hover {
+  cursor: pointer;
+}
+
+.catalog-list .a-container:hover .catalog-aTag {
+  color: #1e80ff;
+}
+
+.catalog-list .sub-list {
+  margin: 0;
+  padding: 0;
+}
+
+.catalog-list .item {
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  font-weight: 400;
+  // color: var(--juejin-font-1);
+  list-style: none;
+}
+
+.catalog-list .item .a-container {
+  display: block;
+  position: relative;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.catalog-list .item.d1 {
+  font-weight: 400;
+  // color: var(--juejin-font-1);
+}
+
+.catalog-list .item.d1 .a-container {
+  margin: 0;
+  padding: 0 0 0 11px;
+}
+
+.catalog-list .item.d1 .a-container:before {
+  left: 5px;
+  margin-top: -3px;
+  width: 6px;
+  height: 6px;
+}
+
+.catalog-list .item.d1 .a-container .d1-aTag-title {
+  font-size: 14px;
+}
+
+.catalog-list .item.d1:first-child .a-container {
+  margin-top: 0;
+}
+
+.catalog-list .item.d2 {
+  // color: var(--juejin-font-2);
+}
+
+.catalog-list .item.d2 .a-container {
+  padding-left: 26px;
+}
+
+.catalog-list .item.d2 .a-container:before {
+  left: 24px;
+}
+
+.catalog-list .item.d3 {
+  // color: var(--juejin-font-3);
+}
+
+.catalog-list .item.d3 .a-container {
+  padding-left: 41px;
+}
+
+.catalog-list .item.d3 .a-container:before {
+  left: 39px;
+}
+
+.catalog-list .item.active > .a-container {
+  color: #1e80ff;
+}
+
+.catalog-list .item.active > .a-container:before {
+  content: "";
+  position: absolute;
+  top: -4px;
+  left: 0;
+  margin-top: 7px;
+  width: 3px;
+  height: 14px;
+  background: #1e80ff;
+  border-radius: 2px;
+}
+
+.catalog-list .item.d1.active > .a-container:before {
+  top: 2px;
+}
+
+@-webkit-keyframes skeleton-keyframes {
+  0% {
+    background-position: 0 0;
+  }
+
+  to {
+    background-position: 480px 0;
+  }
+}
+
 ::v-deep {
   .el-skeleton__h1 {
     height: 2.5em;
@@ -125,4 +443,19 @@ export default {
     color: var(--theme-color);
   }
 }
+.markdown-body {
+  background-color: #f2f3f5 !important;
+}
+::v-deep {
+  .wrapper {
+    width: 100%;
+    height: 80vh;
+  }
+  a:hover {
+    text-decoration: none;
+  }
+  a:active {
+    color: #1e80ff;
+  }
+}
 </style>
diff --git a/styles/reset.css b/styles/reset.css
index da34a9d..777171b 100644
--- a/styles/reset.css
+++ b/styles/reset.css
@@ -152,6 +152,8 @@ img {
 }
 a {
   text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
 }
 b,
 em,