详情页采用 markdown-it 渲染

Author: fxss5201

package-lock.json

@@ -15,6 +15,7 @@
     "highlight.js": "^9.16.2",
     "js-cookie": "^2.2.1",
     "markdown-it": "^10.0.0",
+    "markdown-it-toc-and-anchor": "^4.2.0",
     "mavon-editor": "^2.7.6",
     "moment": "^2.24.0",
     "node-sass": "^4.13.0",

package.json

@@ -7,7 +7,7 @@
     <div v-for="o in 4" :key="o" class="box-card_item">
       <router-link
         class="box-card_item-link clearfix"
-        to="/about">
+        to="/list">
           <span class="sub-title fr">100 {{ subTitle }}</span>
           <span class="title ellipsis">{{'列表内容 ' + o }}</span>
         </router-link>

src/components/AsideCard.vue

@@ -1,18 +1,18 @@
 <template>
   <div class="item-box">
-    <router-link class="header" to="">
+    <router-link class="header" to="/detail">
       <el-tag class="header-icon">原创</el-tag>
       <h2>Express4 环境变量配置</h2>
     </router-link>
-    <router-link class="content" to="">在进项项目开发中经常会遇到不同环境切换的问题，比如说开发环境和正式环境对应不同服务器的 mysql ，总不能每次切换不同环境的时候修改代码，这样既容易出错，也不利于代码维护，所以这个时候就需要用到环境变量来进行配置了。开发环境在开发环境中，我们一般链接的是本地服务器的 mysql ，这个时候我...</router-link>
+    <router-link class="content" to="/detail">在进项项目开发中经常会遇到不同环境切换的问题，比如说开发环境和正式环境对应不同服务器的 mysql ，总不能每次切换不同环境的时候修改代码，这样既容易出错，也不利于代码维护，所以这个时候就需要用到环境变量来进行配置了。开发环境在开发环境中，我们一般链接的是本地服务器的 mysql ，这个时候我...</router-link>
     <div class="footer clearfix">
       <div class="footer-item">2019-10-17 08:35:58</div>
       <div class="footer-line"></div>
       <div class="footer-item">views <span>9</span></div>
       <div class="footer-line"></div>
       <div class="footer-item">stars <span>1</span></div>
       <div class="footer-editor fr">
-        <div class="footer-item">编辑</div>
+        <router-link class="footer-item" to="/editor">编辑</router-link>
         <div class="footer-line"></div>
         <div class="footer-item">删除</div>
       </div>

src/components/listArticle.vue

@@ -73,6 +73,7 @@ const routes = [
 ]
 
 const router = new VueRouter({
+  // mode: 'history',
   routes
 })
 

src/router/index.js

@@ -16,6 +16,8 @@ body {
 $page-width: 1150px !default;
 $header-height: 60px !default;
 $logo-size: 34px !default;
+$theme-color: #333 !default;
+$theme-light-color: #666 !default;
 $border-color:#e6e6e6 !default;
 $split-line-color:#ddd !default;
 

src/style/common.scss

@@ -6,11 +6,10 @@
     .box-card_item-link {
       display: block;
       height: 26px;
-      color: $--color-info;
+      color: $theme-light-color;
       text-decoration: none;
       &:hover {
         color: $--color-primary;
-        text-decoration: underline;
       }
       .sub-title {
         font-size: 12px;

src/style/components/aside-card.scss

@@ -13,7 +13,7 @@
   }
   .header {
     line-height: 32px;
-    color: $--color-info;
+    color: $theme-color;
     text-decoration: none;
     &:hover {
       color: $--color-primary;
@@ -31,7 +31,7 @@
     display: block;
     margin: 8px 0;
     line-height: 20px;
-    color: $--color-info;
+    color: $theme-color;
     text-decoration: none;
     &:hover {
       color: $--color-primary;
@@ -40,7 +40,7 @@
   .footer {
     height: 32px;
     line-height: 32px;
-    color: $--color-info;
+    color: $theme-color;
     .footer-editor {
       display: none;
       .footer-item:hover {
@@ -50,6 +50,11 @@
     }
     .footer-item {
       display: inline-block;
+      color: $theme-color;
+      text-decoration: none;
+      &:hover {
+        color: $--color-primary;
+      }
       span {
         color: $--color-primary;
       }

src/style/components/list-article.scss

@@ -45,8 +45,12 @@ import 'highlight.js/styles/vs2015.css'
 import hljs from 'highlight.js/lib/highlight'
 import javascript from 'highlight.js/lib/languages/javascript'
 import MarkdownIt from 'markdown-it'
+import markdownItTocAndAnchor from 'markdown-it-toc-and-anchor'
 hljs.registerLanguage('javascript', javascript)
 let md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
   highlight: function (str, lang) {
     if (lang && hljs.getLanguage(lang)) {
       try {
@@ -64,10 +68,18 @@ export default {
   name: 'detail',
   data () {
     return {
-      content: `在进项项目开发中经常会遇到不同环境切换的问题，比如说开发环境和正式环境对应不同服务器的 mysql ，总不能每次切换不同环境的时候修改代码，这样既容易出错，也不利于代码维护，所以这个时候就需要用到环境变量来进行配置了。
+      content: `@[toc]在进项项目开发中经常会遇到不同环境切换的问题，比如说开发环境和正式环境对应不同服务器的 mysql ，总不能每次切换不同环境的时候修改代码，这样既容易出错，也不利于代码维护，所以这个时候就需要用到环境变量来进行配置了。
 
 ## 开发环境
-在开发环境中，我们一般链接的是本地服务器的 mysql ，这个时候我们可以通过以下设置来进行变量控制`
+在开发环境中，我们一般链接的是本地服务器的 mysql ，这个时候我们可以通过以下设置来进行变量控制
+
+### 环境变量配置
+环境变量配置环境变量配置环境变量配置环境变量配置环境变量配置环境变量配置环境变量配置
+
+## 生产环境
+生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境生产环境
+
+`
     }
   },
   components: {
@@ -76,7 +88,11 @@ export default {
   },
   computed: {
     markdownHtml () {
-      return this.content && md.render(this.content)
+      return this.content && md.use(markdownItTocAndAnchor, {
+        tocCallback: function (tocMarkdown, tocArray, tocHtml) {
+          console.log(tocArray)
+        }
+      }).render(this.content)
     }
   }
 }
@@ -86,3 +102,40 @@ export default {
 @import './../style/views/home.scss';
 @import './../style/views/detail.scss';
 </style>
+
+<style lang="scss">
+.markdownIt-TOC {
+  padding: 0;
+  margin: 0 0 15px 15px;
+  float: right;
+  list-style: none;
+  &::before {
+    content: '目录：';
+    font-weight: 700;
+    color: currentColor;
+    margin-left: 18px;
+    line-height: 26px;
+  }
+  a {
+    text-decoration: none;
+    color: #666;
+    &:hover {
+      color: #409EFF;
+    }
+  }
+}
+.article-content {
+  font-size: 14px;
+  color: #333;
+  line-height: 1.5;
+  h1, h2, h3, h4, h5, h6 {
+    a {
+      color: #409EFF;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+</style>

src/views/Detail.vue

@@ -87,7 +87,7 @@ export default {
     submitForm (formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          alert('submit!')
+          console.log(this.articleInfo.desc)
         } else {
           console.log('error submit!!')
           return false