新增：网站侧边栏

src/styles/article.scss

@@ -3,6 +3,7 @@
   backdrop-filter: saturate(180%) blur(1px);
   background-color: rgba(255,255,255,0.5);
   color: #272936;
+  z-index: 999;
 }
 .article-header {
   height: 70vh;
@@ -80,18 +81,27 @@
   }
 }
 
-@media screen and (max-width: 759px) {
+@media screen and (max-width: 768px) {
   .blog-title {
     font-size: 1.75rem;
     font-weight: 400;
     margin-bottom: .5rem;
   }
+
+  .cover-wrapper .cover .cover-body {
+    padding-bottom: 68px;
+    .title {
+      font-size: 2rem;
+      font-weight: 400;
+    }
+  }
+
+  .article-header .inner {
+    padding-bottom: 80px;
+  }
 }
 
 @media (min-width: 768px){
-  .article-header .inner {
-    padding-top: 3.75rem;
-  }
   .navbar>.container-fluid {
     max-width: 720px;
   }

src/styles/markdown.scss

@@ -28,6 +28,11 @@
   background: -webkit-linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
   background: linear-gradient(to right, #0052d4, #0ed2f7, #b2fefa) !important;
 }
+
+.nav-link-label {
+  margin-left: 0.25rem;
+}
+
 /deep/ #top {
   padding: .75rem 1rem;
   line-height: 2;
@@ -36,7 +41,6 @@
   position: fixed;
   top: 0;
   z-index: 891;
-  display: none;
   /* border-bottom: 1px solid #201c29; */
   -webkit-transition: all 350ms ease-in-out;
   transition: all 350ms ease-in-out;
@@ -87,9 +91,6 @@
         flex-wrap: wrap;
         .nav-item {
           margin: 0 10px;
-          .nav-link-label {
-            margin-left: 0.25rem;
-          }
         }
       }
       .side-toolbar-list {
@@ -660,9 +661,92 @@
 .pre-numbering {
 }
 
+#toggle-nav {
+  display: none;
+  position: fixed;
+  top: .625rem;
+  left: .625rem;
+  z-index: 891;
+  -webkit-transition: 0.5s ease all;
+  -moz-transition: 0.5s ease all;
+  -ms-transition: 0.5s ease all;
+  -o-transition: 0.5s ease all;
+  transition: 0.5s ease all;
+}
+
+#sidebar-nav {
+  width: 20rem;
+  height: 100%;
+  position: absolute;
+  left: -20rem;
+  top: 0;
+  bottom: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 6.25rem;
+  -webkit-overflow-scrolling: touch;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-transition: 0.5s ease all;
+  -moz-transition: 0.5s ease all;
+  -ms-transition: 0.5s ease all;
+  -o-transition: 0.5s ease all;
+  transition: 0.5s ease all;
+  .author {
+    text-align: center;
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
+    min-width: 12.5rem;
+    img {
+      border-radius: 7rem;
+      width: 7rem;
+      height: 7rem;
+    }
+  }
+  .menu {
+    margin-top: 1.875rem;
+    li a {
+      color: #333;
+      padding: 0.375rem 1.75rem;
+      position: relative;
+      line-height: 2.25rem;
+      display: block;
+      font-size: 1.25rem;
+      text-align: center;
+      font-weight: 300;
+      -webkit-transition: color 0.2s linear;
+      -moz-transition: color 0.2s linear;
+      -ms-transition: color 0.2s linear;
+      -o-transition: color 0.2s linear;
+      transition: color 0.2s linear;
+    }
+    li a:hover{
+      background: #efefef;
+      color: #333;
+    }
+  }
+}
+
+#body {
+  overflow: hidden;
+  -webkit-transition: 0.5s ease all;
+  -moz-transition: 0.5s ease all;
+  -ms-transition: 0.5s ease all;
+  -o-transition: 0.5s ease all;
+  transition: 0.5s ease all;
+}
+
+
 @media screen and (max-width: 425px){
   .pre-numbering {
     display: none;
   }
 }
 
+@media (max-width: 767.98px) {
+  .animateIn {
+    transform: translateY(-100%);
+  }
+  #toggle-nav {
+    display: block;
+  }
+}

src/views/public/article/ArticleTop.vue

@@ -4,7 +4,6 @@
       <a class="navbar-brand text-brand" href="/articles">{{setting.siteName}}</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="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
           </li>
@@ -12,7 +11,7 @@
             <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="https://www.jmal.top/archives.html" title="关于我"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于我</span></a>
+            <a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
           </li>
         </ul>
 

src/views/public/article/SidebarNav.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div id="toggle-nav">
+      <el-button round @click="toggle">MENU</el-button>
+    </div>
+    <div id="sidebar-nav">
+      <div class="author navbar-header">
+        <a href="/articles">
+          <img src="https://www.jmal.top/avatar.jpg" alt="Avatar" width="100" height="100">
+        </a>
+      </div>
+      <ul id="menu-menu-1" class="menu navbar-nav">
+        <li class="menu-item">
+          <a href="/articles">首页</a>
+        </li>
+        <li class="menu-item">
+          <a class="nav-link" href="https://www.jmal.top/archives.html" title="归档"><svg-icon icon-class="guidang"></svg-icon><span class="nav-link-label">归档</span></a>
+        </li>
+        <li class="menu-item">
+          <a class="nav-link" href="https://www.jmal.top/archives.html" title="分类"><svg-icon icon-class="leimupinleifenleileibie"></svg-icon><span class="nav-link-label">分类</span></a>
+        </li>
+        <li class="menu-item">
+          <a class="nav-link" href="https://www.jmal.top/archives.html" title="关于"><svg-icon icon-class="myself"></svg-icon><span class="nav-link-label">关于</span></a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import '../../../assets/fontawesome-free-5.11.2-web/css/all.min.css'
+import Icon from '@/components/Icon/Icon.vue'
+export default {
+  name: 'SidebarNav',
+  components: {
+    Icon
+  },
+  props: {
+  },
+  methods: {
+    toggle() {
+      let body = document.getElementById("body")
+      let toggleNav = document.getElementById("toggle-nav")
+      let sidebarNav = document.getElementById("sidebar-nav")
+      if(body.style.transform.length > 0){
+        body.style.transform = ''
+        toggleNav.style.transform = ''
+        sidebarNav.style.transform = ''
+      } else {
+        body.style.transform = 'translateX(20rem)'
+        toggleNav.style.transform = 'translateX(17.5rem)'
+        sidebarNav.style.transform = 'translateX(20rem)'
+      }
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "src/styles/markdown";
+</style>

src/views/public/article/index.vue

@@ -5,51 +5,56 @@
     </transition>
     <al-back-top></al-back-top>
 
-    <div id="top" style="display: block;" class="animateIn">
-      <ArticleTop :setting="userSetting"/>
-      <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
-    </div>
-    <div class="article-header">
-      <div class="article-background" :style="{backgroundImage: `url(${file.cover})`}"></div>
-      <div class="inner">
-        <div class="blog-title"><span id="article-title">{{pageTitle}}</span><span class="typed-cursor">_</span></div>
-        <div class="blog-description font-mono">
-          <a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
-          · {{file.uploadDate}}
+    <!--SideBar menu-->
+    <SidebarNav/>
+
+    <div id="body">
+      <div id="top" class="animateIn">
+        <ArticleTop :setting="userSetting"/>
+        <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
+      </div>
+      <div class="article-header">
+        <div class="article-background" :style="{backgroundImage: `url(${file.cover})`}"></div>
+        <div class="inner">
+          <div class="blog-title"><span id="article-title">{{pageTitle}}</span><span class="typed-cursor">_</span></div>
+          <div class="blog-description font-mono">
+            <a itemprop="name" href="https://www.jmal.top/author/1/" rel="author">{{file.username}}</a>
+            · {{file.uploadDate}}
+          </div>
         </div>
       </div>
-    </div>
-    <div class="body-wrapper">
-          <el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
-            <mavon-editor
-              ref="md"
-              v-if="!showList"
-              v-model="content"
-              :subfield="false"
-              :boxShadow="true"
-              :toolbarsFlag="false"
-              codeStyle="atom-one-dark"
-              defaultOpen="preview"
-            />
-          </el-main>
-          <div v-show="titleList.length > 0" class="right-bj">
-            <a-affix>
-              <div class="slimScrollDiv">
-                <div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
-                  <div class="toc-content">
-                    <header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
-                  </div>
-                  <div class="j-titleList titleList">
-                    <div class="j-bj" style="height: 30px; top: 0;"></div>
-                  </div>
+      <div class="body-wrapper">
+        <el-main id="main_body" :content="titleList.length > 0?'show':'hide'" class="l_main article_l_main">
+          <mavon-editor
+            ref="md"
+            v-if="!showList"
+            v-model="content"
+            :subfield="false"
+            :boxShadow="true"
+            :toolbarsFlag="false"
+            codeStyle="atom-one-dark"
+            defaultOpen="preview"
+          />
+        </el-main>
+        <div v-show="titleList.length > 0" class="right-bj">
+          <a-affix>
+            <div class="slimScrollDiv">
+              <div class="right-menu" :style="{maxHeight:maxMenuHeight+'px'}">
+                <div class="toc-content">
+                  <header class="toc-header"><svg-icon icon-class="contents"></svg-icon><span>目录</span></header>
+                </div>
+                <div class="j-titleList titleList">
+                  <div class="j-bj" style="height: 30px; top: 0;"></div>
                 </div>
               </div>
-            </a-affix>
-          </div>
+            </div>
+          </a-affix>
+        </div>
+      </div>
+      <footer class="clearfix">
+        <div class="copyright"><p><a href="/articles">Copyright © 2020 jmal</a></p></div>
+      </footer>
     </div>
-    <footer class="clearfix">
-      <div class="copyright"><p><a href="/articles">Copyright © 2020 jmal</a></p></div>
-    </footer>
   </div>
 </template>
 
@@ -60,10 +65,11 @@ import markdownApi from '@/api/markdown-api'
 import {addCodeBtn} from '@/assets/js/mavon-line'
 import $ from 'jquery'
 import ArticleTop from "@/views/public/article/ArticleTop";
-import { getSetting } from '@/api/user'
+import {getSetting} from '@/api/user'
+import SidebarNav from "@/views/public/article/SidebarNav";
 
 export default {
-    components: {ArticleTop, AlBackTop, AlLoading },
+    components: {SidebarNav, ArticleTop, AlBackTop, AlLoading },
     data() {
       return {
         file: {},
@@ -242,8 +248,6 @@ export default {
               _this.isLoading = false
             },150)
           })
-          // const doc = document.querySelector(".v-show-content");
-
         })
       }
     },
@@ -252,10 +256,11 @@ export default {
       $('.j-titleList li').unbind("click");
     }
   }
+
 </script>
 <style lang="scss" scoped>
-   @import "src/styles/index";
-   @import "src/styles/markdown";
-   @import "src/styles/articles";
-   @import "src/styles/article";
+@import "src/styles/index";
+@import "src/styles/markdown";
+@import "src/styles/articles";
+@import "src/styles/article";
 </style>

src/views/public/articles/index.vue

@@ -4,70 +4,73 @@
       <al-loading v-if="isLoading"></al-loading>
     </transition>
     <al-back-top></al-back-top>
-    <div id="top" style="display: block;" class="animateIn">
-      <ArticleTop :setting="userSetting"/>
-      <div class="scrollbar gradient-bg-rev" style="width: 0;"></div>
-    </div>
-    <div class="cover-wrapper">
-      <div class="cover half" style="position: relative; z-index: 0; background-image: none;">
-        <div class="cover-body">
-          <div class="a">
-            <p class="title"><span id="article-title">{{ userSetting.backgroundTextSite }}</span><span class="typed-cursor">_</span></p >
-            <p class="subtitle">{{ userSetting.backgroundDescSite }}</p>
+
+    <SidebarNav/>
+
+    <div id="body">
+      <div id="top" class="animateIn">
+        <ArticleTop :setting="userSetting"/>
+      </div>
+      <div class="cover-wrapper">
+        <div class="cover half" style="position: relative; z-index: 0; background-image: none;">
+          <div class="cover-body">
+            <div class="a">
+              <p class="title"><span id="article-title">{{ userSetting.backgroundTextSite }}</span><span class="typed-cursor">_</span></p >
+              <p class="subtitle">{{ userSetting.backgroundDescSite }}</p>
+            </div>
+          </div>
+          <div class="backstretch">
+            <img class="blog-background" :src="userSetting.backgroundSite"
+                 onerror="this.src='https://images.unsplash.com/photo-1603910062519-69a9616d34c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80'">
           </div>
         </div>
-        <div class="backstretch">
-          <img class="blog-background" :src="userSetting.backgroundSite"
-          onerror="this.src='https://images.unsplash.com/photo-1603910062519-69a9616d34c7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80'">
+      </div>
+      <div class="l_body">
+        <div class="body-wrapper articles_l_main">
+          <el-main class="l_main">
+            <section class="post-list">
+              <div v-for="article in articleList" class="post-wrapper">
+                <article  class="post white-box shadow reveal">
+                  <section class="meta">
+                    <div class="meta" id="header-meta">
+                      <h2 class="title">
+                        <a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
+                      </h2>
+                      <div class="new-meta-box">
+                        <div class="new-meta-item author">
+                          <a href="http://www.jmal.top" rel="nofollow">
+                            <img :src="imageUrl+article.avatar" :data-original="imageUrl+article.avatar">
+                            <p>{{article.username}}</p>
+                          </a>
+                        </div>
+                        <div class="new-meta-item date">
+                          <a class="notlink">
+                            <svg-icon icon-class="release"></svg-icon>
+                            <p>发布于 {{article.uploadTime}}</p>
+                          </a>
+                        </div>
+                      </div>
+                      <hr>
+                    </div>
+                  </section>
+                  <section class="article typo">
+                    <a :href="$route.path+'/article?mark='+article.id">
+                      <div class="article-entry" itemprop="articleBody">
+                        <p><img class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
+                      </div>
+                    </a>
+                  </section>
+                </article>
+              </div>
+            </section>
+          </el-main>
         </div>
       </div>
+      <footer class="clearfix">
+        <br><br><br>
+        <div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 journey magical AL</a></p></div>
+      </footer>
     </div>
-    <div class="l_body">
-      <div class="body-wrapper articles_l_main">
-        <el-main class="l_main">
-          <section class="post-list">
-            <div v-for="article in articleList" class="post-wrapper">
-              <article  class="post white-box shadow reveal">
-                <section class="meta">
-                  <div class="meta" id="header-meta">
-                    <h2 class="title">
-                      <a :href="$route.path+'/article?mark='+article.id">{{article.name}}</a>
-                    </h2>
-                    <div class="new-meta-box">
-                      <div class="new-meta-item author">
-                        <a href="http://www.jmal.top" rel="nofollow">
-                          <img :src="imageUrl+article.avatar" :data-original="imageUrl+article.avatar">
-                          <p>{{article.username}}</p>
-                        </a>
-                      </div>
-                      <div class="new-meta-item date">
-                        <a class="notlink">
-                          <svg-icon icon-class="release"></svg-icon>
-                          <p>发布于 {{article.uploadTime}}</p>
-                        </a>
-                      </div>
-                    </div>
-                    <hr>
-                  </div>
-                </section>
-                <section class="article typo">
-                  <a :href="$route.path+'/article?mark='+article.id">
-                    <div class="article-entry" itemprop="articleBody">
-                      <p><img class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
-                      <!--<div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>-->
-                    </div>
-                  </a>
-                </section>
-              </article>
-            </div>
-          </section>
-        </el-main>
-      </div>
-    </div>
-    <footer class="clearfix">
-      <br><br><br>
-      <div class="copyright"><p><a href="http://blog.jmal.top">Copyright © 2020 journey magical AL</a></p></div>
-    </footer>
   </div>
 </template>
 
@@ -77,9 +80,10 @@ import { getSetting } from '@/api/user'
   import AlLoading from "@/components/loading/AlLoading";
   import markdownApi from '@/api/markdown-api'
   import ArticleTop from "@/views/public/article/ArticleTop";
+  import SidebarNav from "@/views/public/article/SidebarNav"
 
   export default {
-    components: { ArticleTop, AlBackTop, AlLoading },
+    components: { SidebarNav, ArticleTop, AlBackTop, AlLoading },
     data() {
       return {
         imageUrl: process.env.VUE_APP_BASE_API + '/public/s/view/thumbnail?id=',

src/views/setting/articles/blogManager.vue

@@ -28,7 +28,7 @@
 
           <div class="config-itme-label">导航栏操作按钮：</div>
           <el-input  :autosize="{ minRows: 4, maxRows: 6}" type="textarea" width="100%" v-model="form.operatingButtons"></el-input>
-          <span class="instruction">一个操作按钮包含两个部分：<a href="https://fontawesome.com/icons?d=gallery">Font-awesome</a>图标标签和链接，使用'：'隔开。列如：{{example}}:https://github.com/jamebal</span>
+          <span class="instruction">一个操作按钮包含两个部分：<a href="https://fontawesome.com/icons?d=gallery" target="_blank">Font-awesome</a>图标标签和链接，使用'：'隔开。列如：{{example}}:https://github.com/jamebal</span>
         </el-collapse-item>
       </el-collapse>
     </el-card>