fix[article,bookNote]:添加contentFormat字段

Author: llldddbbb

dbblog-backend/dbblog-core/src/main/java/cn/dblearn/blog/entity/article/Article.java

@@ -79,4 +79,7 @@ public class Article implements Serializable {
     @ApiModelProperty(value = "是否置顶")
     private Boolean top;
 
+    @ApiModelProperty(value = "格式化后的内容")
+    private String contentFormat;
+
 }

dbblog-backend/dbblog-core/src/main/java/cn/dblearn/blog/entity/book/BookNote.java

@@ -85,6 +85,7 @@ public class BookNote implements Serializable {
     @ApiModelProperty(value = "是否置顶")
     private Boolean top;
 
-
+    @ApiModelProperty(value = "格式化后的内容")
+    private String contentFormat;
 
 }

dbblog-frontend/package-lock.json

@@ -17,7 +17,6 @@
     "axios": "0.17.1",
     "highlight.js": "^9.12.0",
     "iview": "^2.14.2",
-    "marked": "^0.5.2",
     "mavon-editor": "^2.4.16",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",

dbblog-frontend/package.json

@@ -240,24 +240,24 @@ article#article-main-page
     padding 4px 5px 4px 12px
     margin 15px 0
     word-wrap break-word
-    border-left 5px solid $default-desc-hover-color
+    border-left .25em solid $default-info-color
     background $default-border-color
     @media only screen and (max-width: $responsive-sm)
       padding-left 5px
       margin 8px 0
-      border-left 2px solid $default-desc-hover-color
+      border-left .25em solid $default-desc-hover-color
     @media screen and (min-width: $responsive-sm)
       padding-left 8px
       margin 10px 0
-      border-left 3px solid $default-desc-hover-color
+      border-left .25em solid $default-info-color
     @media screen and (min-width: $responsive-md)
       padding-left 10px
       margin 12px 0
-      border-left 4px solid $default-desc-hover-color
+      border-left .25em solid $default-info-color
     @media screen and (min-width: $responsive-lg)
       padding-left 12px
       margin 15px 0
-      border-left 5px solid $default-desc-hover-color
+      border-left .25em solid $default-info-color
     > p
       font-weight 300
       color $default-info-color

dbblog-frontend/src/common/stylus/article.styl

@@ -5,7 +5,7 @@
         <div class="layout-left">
           <article-page-header :article="article"></article-page-header>
           <article-page-content>
-            <article id="article-main-page" class="typo container" slot="content" ref="article" v-html="article.content">
+            <article id="article-main-page" class="typo container" slot="content" ref="article" v-html="article.contentFormat">
             </article>
           </article-page-content>
           <article-page-footer :likeNum="article.likeNum" :commentList="article.commentList"></article-page-footer>
@@ -31,7 +31,6 @@ import FriendLinks from '@/components/views/FriendLinks'
 import SideToc from '@/components/views/SideToc'
 import Recommend from '@/components/views/Recommend'
 import TOC from '@/common/js/MarkdownToc'
-import marked from 'marked'
 // highlight.js引入
 import hljs from 'highlight.js'
 // 样式文件
@@ -76,8 +75,6 @@ export default {
       }).then(({data}) => {
         if (data && data.code === 200) {
           this.article = data.article
-          // 将markdown语法解析成html
-          this.article.content = marked(data.article.content)
           // 更新目录、高亮代码
           this.$nextTick(function () {
             this.addCodeLineNumber()

dbblog-frontend/src/components/content/ArticleContent.vue

@@ -5,7 +5,7 @@
         <div class="layout-left">
           <bookNote-page-header :bookNote="bookNote"></bookNote-page-header>
           <bookNote-page-content>
-            <article id="bookNote-main-page" class="typo container" slot="content" ref="bookNote" v-html="bookNote.content">
+            <article id="article-main-page" class="typo container" slot="content" ref="article" v-html="bookNote.contentFormat">
             </article>
           </bookNote-page-content>
           <bookNote-page-footer :likeNum="bookNote.likeNum" :commentList="bookNote.commentList"></bookNote-page-footer>
@@ -31,7 +31,6 @@ import FriendLinks from '@/components/views/FriendLinks'
 import SideToc from '@/components/views/SideToc'
 import Recommend from '@/components/views/Recommend'
 import TOC from '@/common/js/MarkdownToc'
-import marked from 'marked'
 // highlight.js引入
 import hljs from 'highlight.js'
 // 样式文件
@@ -62,7 +61,7 @@ export default {
   methods: {
     addCodeLineNumber () {
       // 添加行号
-      let blocks = this.$refs.bookNote.querySelectorAll('pre code')
+      let blocks = this.$refs.article.querySelectorAll('pre code')
       blocks.forEach((block) => {
         HLJS.highlightBlock(block)
         // 去前后空格并添加行号
@@ -76,8 +75,6 @@ export default {
       }).then(({data}) => {
         if (data && data.code === 200) {
           this.bookNote = data.bookNote
-          // 将markdown语法解析成html
-          this.bookNote.content = marked(data.bookNote.content)
           // 更新目录、高亮代码
           this.$nextTick(function () {
             this.addCodeLineNumber()
@@ -89,29 +86,29 @@ export default {
     },
     refreshDiectory () {
       /* eslint-disable*/
-      new TOC('bookNote-main-page', {
+      new TOC('article-main-page', {
         'level': 5,
         'top': 200,
         'class': 'list',
         'targetId': 'side-toc'
       })
       /* eslint-disable */
-      new TocScrollSpy('bookNote-main-page', 'side-toc', {
+      new TocScrollSpy('article-main-page', 'side-toc', {
         'spayLevel': 5,
-        'bookNoteMarginTop': 60
+        'articleMarginTop': 60
       });
     },
     refreshMobileDirectory () {
       /* eslint-disable */
-      new TOC('bookNote-main-page', {
+      new TOC('article-main-page', {
         'level': 5,
         'top': 200,
         'class': 'list',
         'targetId': 'sidebar-toc'
       });
-      new TocScrollSpy('bookNote-main-page', 'sidebar-toc', {
+      new TocScrollSpy('article-main-page', 'sidebar-toc', {
         'spayLevel': 5,
-        'bookNoteMarginTop': 60
+        'articleMarginTop': 60
       });
     }
   }

dbblog-frontend/src/components/content/BookNoteContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="book-reading-cell">
     <h4>正在阅读</h4>
-    <a>
+    <a >
       <div class="img">
         <div class="container">
           <div class="bracket"></div>
@@ -82,16 +82,14 @@ export default {
         flex 0 0 140px
         width 140px
         overflow hidden
+        margin 0 30px 10px 0
         border 1px solid $default-border-hover-color
         box-shadow 1px 1px 1px $default-border-color
         @media only screen and (max-width: $responsive-sm)
-          display block
-          margin 0 15px 5px 0
+          display none
         @media screen and (min-width: $responsive-sm)
-          display block
-          margin 0 20px 7px 0
+          display none
         @media screen and (min-width: $responsive-lg)
-          margin 0 30px 10px 0
           display block
         .container
           width 100%

dbblog-frontend/src/components/views/Book/BookReadingCell.vue

@@ -2,7 +2,7 @@
   <div class="recommend">
     <panel :title="'推荐阅读'">
       <div slot="content" class="content">
-        <div class="top">
+        <div class="top" v-if="topRecommend">
           <a :href="'/' + topRecommend.urlType + '/' + topRecommend.linkId">
             <p class="title">{{topRecommend.title}}</p>
             <div class="tags">

dbblog-frontend/src/components/views/Recommend.vue

@@ -80,7 +80,7 @@
         </el-col>
       </el-form-item>
       <el-form-item label="博文内容">
-        <mavon-editor ref=md v-model="article.content" @imgAdd="imgAdd" ></mavon-editor>
+        <mavon-editor ref=md v-model="article.content" @imgAdd="imgAdd" @change="mavonChangeHandle"></mavon-editor>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="saveArticle()">保存</el-button>
@@ -247,6 +247,9 @@ export default {
       }).then(({data}) => {
         this.$refs.md.$img2Url(pos, data.resource.url)
       })
+    },
+    mavonChangeHandle (context, render) {
+      this.article.contentFormat = render
     }
   }
 }