Merge pull request #74 from terwer/v4.x

Add menu
terwer · Mar 25, 2019 · 6576cd3 · 6576cd3
2 parents a95ce8f + 054e6ec
commit 6576cd3
Show file tree

Hide file tree

Showing 9 changed files with 1,298 additions and 73 deletions.
diff --git a/jvue-front/components/themes/dark/Body.vue b/jvue-front/components/themes/dark/Body.vue
@@ -24,6 +24,10 @@ export default {
   name: "Body",
   components: { Aside, PostList },
   props: {
+    type: {
+      type: String,
+      default: "post"
+    },
     postList: {
       type: Array,
       default: () => []
@@ -44,6 +48,7 @@ export default {
       this.showNores = false;
       this.loadText = "加载中...";
       const postsResult = await this.$axios.$post("/blog/post/list", {
+        postType: this.type,
         postStatus: "publish",
         pageNum: ++this.currentPage,
         pageSize: this.pageSize

diff --git a/jvue-front/package-lock.json b/jvue-front/package-lock.json
diff --git a/jvue-front/package.json b/jvue-front/package.json
@@ -18,6 +18,7 @@
     "express": "^4.16.4",
     "font-awesome": "^4.7.0",
     "nuxt": "^2.4.0",
+    "progress-catalog": "^1.0.7",
     "vue-hljs": "^1.1.2",
     "vue-uweb": "^0.2.1"
   },

diff --git a/jvue-front/pages/dark.css b/jvue-front/pages/dark.css
@@ -58,7 +58,6 @@
   border: solid 1px #f3f3f3;
   border-radius: 4px;
   padding: 10px;
-  margin: 15px;
 }
 .post-dark .el-breadcrumb__inner a,
 .post-dark .el-breadcrumb__inner.is-link {

diff --git a/jvue-front/pages/note-dark.vue b/jvue-front/pages/note-dark.vue
@@ -15,7 +15,7 @@
                     <Header />
                   </el-header>
                   <el-main class="el-main-dark">
-                    <Body :post-list="postListArray" />
+                    <Body type="note" :post-list="postListArray" />
                   </el-main>
                 </el-container>
               </el-main>

diff --git a/jvue-front/pages/post-dark/_id.vue b/jvue-front/pages/post-dark/_id.vue
@@ -15,52 +15,69 @@
                     <Header />
                   </el-header>
                   <el-main class="el-main-dark">
-                    <div id="post" class="post-dark">
-                      <!-- 导航 -->
-                      <el-breadcrumb separator="/">
-                        <el-breadcrumb-item
-                          v-for="item in items"
-                          :key="item.text"
-                          :to="item.to"
-                        >
-                          {{ item.text }}
-                        </el-breadcrumb-item>
-                      </el-breadcrumb>
+                    <el-row>
+                      <el-col :xs="24" :xl="18">
+                        <div id="post" class="post-dark">
+                          <!-- 导航 -->
+                          <el-breadcrumb separator="/">
+                            <el-breadcrumb-item
+                              v-for="item in items"
+                              :key="item.text"
+                              :to="item.to"
+                            >
+                              {{ item.text }}
+                            </el-breadcrumb-item>
+                          </el-breadcrumb>
 
-                      <!-- 文章标题 -->
-                      <div id="postTitle">
-                        <nuxt-link
-                          :to="
-                            postObj.name === ''
-                              ? '/post-dark/' + postObj.id + '.html'
-                              : '/post-dark/' + postObj.name + '.html'
-                          "
-                        >
-                          <h1>
-                            {{ postObj.title }}
-                          </h1>
-                        </nuxt-link>
-                      </div>
+                          <!-- 文章标题 -->
+                          <div id="postTitle">
+                            <nuxt-link
+                              :to="
+                                postObj.name === ''
+                                  ? '/post-dark/' + postObj.id + '.html'
+                                  : '/post-dark/' + postObj.name + '.html'
+                              "
+                            >
+                              <h1>
+                                {{ postObj.title }}
+                              </h1>
+                            </nuxt-link>
+                          </div>
 
-                      <!-- 文章详情 -->
-                      <div
-                        id="postContent"
-                        v-highlight
-                        v-html="postObj.content"
-                      ></div>
+                          <!-- 文章详情 -->
+                          <div
+                            id="postContent"
+                            v-highlight
+                            v-html="postObj.content"
+                          ></div>
 
-                      <h1 v-if="errorMessage !== ''" class="error-message-dark">
-                        {{ errorMessage }}
-                      </h1>
+                          <h1
+                            v-if="errorMessage !== ''"
+                            class="error-message-dark"
+                          >
+                            {{ errorMessage }}
+                          </h1>
 
-                      <div class="copy">
-                        <p>作者：Terwer</p>
-                        <p>首发：远方的灯塔</p>
-                        <p>
-                          原创内容，转载请注明出处！
-                        </p>
-                      </div>
-                    </div>
+                          <div class="copy">
+                            <p>作者：Terwer</p>
+                            <p>首发：远方的灯塔</p>
+                            <p>
+                              原创内容，转载请注明出处！
+                            </p>
+                          </div>
+                        </div>
+                      </el-col>
+                      <el-col :xs="0" :xl="6">
+                        <div id="postMenu">
+                          <div>
+                            <p>文章目录</p>
+                          </div>
+                          <div id="postMenuWapper">
+                            <p>目录加载中...</p>
+                          </div>
+                        </div>
+                      </el-col>
+                    </el-row>
                   </el-main>
                 </el-container>
               </el-main>
@@ -86,12 +103,15 @@
 /* eslint nuxt/no-globals-in-created: 0 */ // --> OFF
 /* eslint vue/no-v-html: 0 */ // --> OFF
 /* eslint no-useless-escape: 0 */ // --> OFF
+/* eslint no-new: 0 */ // --> OFF
+import Catalog from "progress-catalog";
 import { getLogger } from "../../util/logger";
 import HeaderTime from "../../components/themes/dark/HeaderTime";
 import Header from "../../components/themes/dark/Header";
 import Footer from "../../components/themes/dark/Footer";
 import FriendLink from "../../components/themes/dark/FriendLink";
 import { inBrowser } from "../../util/dom";
+// 引入
 
 const logger = getLogger("pages/post");
 
@@ -166,6 +186,14 @@ export default {
       postId: this.postObj.id,
       hits: ++this.postObj.hits
     });
+
+    // 文章目录
+    new Catalog({
+      contentEl: "postContent",
+      catalogEl: "postMenuWapper",
+      selector: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      cool: true
+    });
   },
   created() {
     if (inBrowser && window.MathJax) {
@@ -189,6 +217,24 @@ export default {
 @import "../common.css";
 @import "../dark.css";
 @import "../../plugins/lib/vue-hljs/vs2015.css";
+@import "../../node_modules/progress-catalog/src/progress-catalog.css";
+
+#postMenu {
+  margin-top: 20px;
+  position: fixed;
+  p {
+    color: #f3f3f3;
+  }
+  .cl-wrapper li > .cl-link {
+    max-width: 350px;
+    padding: 0 10px;
+  }
+  .cl-wrapper li > .cl-link:hover {
+    color: #ffcb6b;
+    background-color: #181818;
+  }
+}
+
 .post-dark {
   margin: 20px;
   a {