修改：文章界面样式

src/styles/article.scss

@@ -74,45 +74,9 @@
   }
 }
 
-/deep/ .navigation {
+@media (min-width: 576px) {
-  padding: .75rem 1rem;
+  .navbar>.container-fluid {
-  position: fixed;
+    max-width: 540px;
-  display: flex;
-  color: rgba(0,0,0,0.9);
-  font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif;
-  .container-fluid {
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -ms-flex-align: center;
-    align-items: center;
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-    width: 100%;
-    padding-right: 1rem;
-    padding-left: 1rem;
-    margin-right: auto;
-    margin-left: auto;
-  }
-  .navbar-brand {
-    display: inline-block;
-    padding: 0;
-    margin-right: 1rem;
-    font-size: 1.25rem;
-    font-weight: 700;
-    line-height: 1.5;
-    white-space: nowrap;
-    max-width: 180px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .navbar-brand.text-brand {
-    padding-top: 0.3125rem;
-    padding-bottom: 0.3125rem;
-  }
-  a {
-    color: rgba(0,0,0,0.9);
   }
 }
 
@@ -128,7 +92,20 @@
   .article-header .inner {
     padding-top: 3.75rem;
   }
-  .container-fluid {
+  .navbar>.container-fluid {
     max-width: 720px;
   }
 }
+
+@media (min-width: 992px) {
+  .navbar>.container-fluid {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1210px) {
+  .navbar>.container-fluid {
+    max-width: 1170px;
+  }
+}
+

src/styles/markdown.scss

@@ -12,10 +12,11 @@
   --maxwidth: 1284px;
 }
 .scrollbar {
+  margin-top: .75rem;
+  margin-left: -1rem;
   position: fixed;
   height: 3px;
   width: 10px;
-  top: 50px;
   background-color: #50bcb6;
   -webkit-transition: width 0.5s ease;
   -moz-transition: width 0.5s ease;
@@ -28,8 +29,8 @@
   background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
 }
 /deep/ #top {
+  padding: .75rem 1rem;
   line-height: 2;
-  height: 50px;
   text-align: center;
   width: 100%;
   position: fixed;
@@ -44,6 +45,99 @@
   -webkit-backdrop-filter: saturate(180%) blur(20px);
   backdrop-filter: saturate(180%) blur(20px);
   background-color: rgba(255,255,255,0.72);
+
+  .navbar {
+    display: flex;
+    color: rgba(0,0,0,0.9);
+    font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif;
+    .container-fluid {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-pack: justify;
+      justify-content: space-between;
+      width: 100%;
+      padding-right: 1rem;
+      padding-left: 1rem;
+      margin-right: auto;
+      margin-left: auto;
+
+      .mr-auto {
+        margin-right: auto !important;
+      }
+
+      .navbar-nav {
+        display: -ms-flexbox;
+        display: flex !important;
+        flex-direction: row;
+        padding-left: 0;
+        margin-bottom: 0;
+        list-style: none;
+        -webkit-flex-wrap: wrap;
+        -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
+        .nav-item {
+          margin: 0 10px;
+        }
+        .side-toolbar-list {
+          text-align: center;
+          -webkit-flex-wrap: nowrap;
+          -ms-flex-wrap: nowrap;
+          flex-wrap: nowrap;
+          li a {
+            display: inline-block;
+            height: 2.5rem;
+            width: 2.5rem;
+            line-height: 2.5rem;
+            border-radius: 100%;
+            font-size: .75rem;
+            background: #2c2a2a;
+            color: #ccc;
+            vertical-align: middle;
+            -webkit-transition: 0.3s ease all;
+            -moz-transition: 0.3s ease all;
+            -ms-transition: 0.3s ease all;
+            -o-transition: 0.3s ease all;
+            transition: 0.3s ease all;
+          }
+        }
+      }
+
+      .navbar-collapse {
+        display: flex !important;
+        flex-basis: auto;
+        -ms-flex-positive: 1;
+        flex-grow: 1;
+        -ms-flex-align: center;
+        align-items: center;
+        line-height: 2;
+      }
+
+    }
+    .navbar-brand {
+      display: inline-block;
+      padding: 0;
+      margin-right: 1rem;
+      font-size: 1.25rem;
+      font-weight: 700;
+      line-height: 1.5;
+      white-space: nowrap;
+      max-width: 180px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .navbar-brand.text-brand {
+      padding-top: 0.3125rem;
+      padding-bottom: 0.3125rem;
+    }
+    a {
+      color: rgba(0,0,0,0.9);
+    }
+  }
+
   .bar {
     position: absolute;
     height: 100%;
@@ -123,6 +217,14 @@
   .v-note-panel {
     border-radius: 1rem;
   }
+  .note-update-date {
+    padding: 0.75rem;
+    border-left: 0.35rem solid;
+    border-radius: 0.25rem;
+    margin: 1.5rem 0;
+    border-color: #0052d4;
+    background: linear-gradient(to right, #5d9eea, #afcafd);
+  }
 }
 
 
@@ -348,8 +450,32 @@
 /deep/ .right-menu > div.titleList li:hover a {
   color: #13C2C2;
 }
-/deep/ .right-menu > div.titleList .pl {
+/deep/ .right-menu > div.titleList {
-  padding-left: 35px;
+  .h-1 {
+    padding-left: 10px;
+    font-size: 1.3rem;
+  }
+  .h-2 {
+    padding-left: 20px;
+    font-size: 1.25rem;
+  }
+  .h-3 {
+    padding-left: 30px;
+    font-size: 1.125rem;
+  }
+  .h-4 {
+    padding-left: 40px;
+    font-size: 0.95rem;
+  }
+  .h-5 {
+    padding-left: 50px;
+    font-size: 0.875rem;
+  }
+  .h-6 {
+    padding-left: 60px;
+    font-size: .85em;
+    color: #6a737d;
+  }
 }
 /deep/ .right-menu > div.titleList .pl a {
   font-size: 13px;

src/views/public/article/index.vue

@@ -6,13 +6,30 @@
     <al-back-top></al-back-top>
 
     <div id="top" style="display: block;" class="animateIn">
-      <div class="navigation animated fadeIn fast delay-1s">
+      <div class="navbar animated fadeIn fast delay-1s">
         <div class="container-fluid">
           <a class="navbar-brand text-brand">JMAL'S</a>
+          <div class="collapse navbar-collapse">
+            <ul class="navbar-nav mr-auto">
+              <li class="nav-item dropdown"></li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档">归档</a>
+              </li>
+            </ul>
+
+            <ul class="navbar-nav side-toolbar-list">
+              <li class="nav-item">
+                <a id="nav-side-toolbar-github" href="https://github.com/jamebal" title="Github" target="_blank">fff<i class="fa fa-github"></i></a>
+              </li>
+            </ul>
+          </div>
         </div>
-<!--        <a href="/public/articles"><svg-icon id="home-icon" class="icon-home" icon-class="home" ></svg-icon></a>-->
-<!--        <div id="play-icon" title="Play/Pause" class="iconfont icon-play"></div>-->
-<!--        <h3 class="subtitle" style="display: block;">{{pageTitle}}</h3>-->
       </div>
       <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
     </div>
@@ -27,7 +44,7 @@
       </div>
     </div>
     <div class="body-wrapper">
-          <el-main class="l_main">
+          <el-main id="main_body" class="l_main">
             <mavon-editor
               ref="md"
               v-if="!showList"
@@ -124,6 +141,19 @@
           this.content = res.data.contentText
           this.$nextTick(()=>{  // DOM更新之后获取子元素
 
+            let main = document.querySelector('.v-show-content.scroll-style.scroll-style-border-radius')
+            let p = document.createElement("p")
+            // let p = "<p class=\"note note-info\">\n" +
+            //   "                \n" +
+            //   "                  本文最后更新于：2020年9月16日 上午\n" +
+            //   "                \n" +
+            //   "              </p>"
+            p.className = "note-update-date"
+            p.innerText = `本文最后更新于：${this.file.updateDate}`
+            // main.insertAdjacentHTML('beforebegin', '<b>复制代码</b>');
+            // main.childNodes[0].insertAdjacentHTML('beforebegin', '<p class="note note-info"></p>')
+            main.insertBefore(p , main.childNodes[0])
+
             // 动态打字效果
             this.dynamicTyping()
 
@@ -132,15 +162,23 @@
               this.pageTitle = hTag.innerText
             }
 
-            let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>/g);
+            let a = $('.el-main').html().match(/<h1.*?<\/h1>|<h2.*?<\/h2>|<h3.*?<\/h3>|<h4.*?<\/h4>|<h5.*?<\/h5>|<h6.*?<\/h6>/g);
             if(a && a.length >0 ){
               a = a.splice(a.length/2,a.length)
               for (let i = 0; i < a.length; i++) {
                 a[i] = a[i].replace(/id="/g, 'href="#')
                 if (i ===0 && a[i].indexOf('h1') !== -1) {
-                  a[i] = '<li first>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
+                  a[i] = '<li first class="h-1">' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
                 }else if (a[i].indexOf('h2') !== -1) {
-                  a[i] = '<li class="pl">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
+                  a[i] = '<li class="pl h-2">' + a[i].replace(/<h2>|<\/h2>/g, '') + '</li>'
+                }else if (a[i].indexOf('h3') !== -1) {
+                  a[i] = '<li class="pl h-3">' + a[i].replace(/<h3>|<\/h3>/g, '') + '</li>'
+                }else if (a[i].indexOf('h4') !== -1) {
+                  a[i] = '<li class="pl h-4">' + a[i].replace(/<h4>|<\/h4>/g, '') + '</li>'
+                }else if (a[i].indexOf('h5') !== -1) {
+                  a[i] = '<li class="pl h-5">' + a[i].replace(/<h5>|<\/h5>/g, '') + '</li>'
+                }else if (a[i].indexOf('h6') !== -1) {
+                  a[i] = '<li class="pl h-6">' + a[i].replace(/<h6>|<\/h6>/g, '') + '</li>'
                 } else {
                   a[i] = '<li>' + a[i].replace(/<h1>|<\/h1>/g, '') + '</li>'
                 }

src/views/public/articles/index.vue

@@ -35,7 +35,7 @@
                 <section class="meta">
                   <div class="meta" id="header-meta">
                     <h2 class="title">
-                      <a :href="$route.path+'/article?mark='+article.id" @click="clearCooike">{{article.name}}</a>
+                      <a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
                     </h2>
                     <div class="new-meta-box">
                       <div class="new-meta-item author">
@@ -222,17 +222,6 @@
       }
     },
     methods: {
-      clearCooike() {
-        // let name = "scrollTop"
-        // var exp = new Date();
-        // exp.setTime(exp.getTime() - 1);
-        // var cval=getCookie(name);
-        // if(cval!=null){
-        //   document.cookie= name + "="+cval+";expires="+exp.toGMTString();
-        // }
-        document.cookie = "scrollTop=" + scrollPos
-        alert(document.cookie)
-      },
       getCookie (name){
         var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
         if(arr=document.cookie.match(reg))
@@ -245,6 +234,7 @@
       getMarkDown() {
         markdownApi.getMarkdown().then((res) => {
           this.articleList = res.data
+          console.log(this.articleList)
           this.$nextTick(() => {
             this.isLoading = false
           })