1.8.22

minivaline v6

.gitignore

@@ -7,3 +7,4 @@ package-lock.json
 node_modules/
 .cache
 .history
+_bak.yml

.npmignore

@@ -1,3 +1,4 @@
 .cache/
 .history/
 .github/
+_bak.yml

_config.yml

@@ -157,6 +157,12 @@ katex:
   allpost: true
   copy_tex: false
 
+# mermaid流程图 三个选项缺一不可(https://mermaid-js.github.io/mermaid/)
+mermaid:
+  enable: false
+  cdn: https://cdn.jsdelivr.net/npm/mermaid@8.9.2/dist/mermaid.min.js
+  theme: forest
+
 # 网站成立年份(默认为 2019，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
 since: 2015
 
@@ -227,12 +233,10 @@ twikoo:
 # See: https://github.com/MiniValine/MiniValine
 minivaline:
   enable: false
-  md: true
   # 更多选项 https://minivaline.js.org/docs/cn/#/Options 按照yml格式继续填写即可 （除了 [el] 选项）
   # emoticonUrl 等列表选项 可参考 https://github.com/MiniValine/hexo-next-minivaline
   # 下面是一个例子：
-  backend: waline
+  serverURL: https://minivaline.your-domain.com
-  serverURL: https://waline.vercel.app
 
 # 首页广告配置
 # 可以根据需要自行增加ad_3，ad_4...，留空则不显示，建议图片和url不要带ad等关键词，否则可能会被adblock等插件屏蔽

layout/_partial/after-footer.ejs

@@ -1,66 +1,57 @@
-<%- js('/js/jquery-2.0.3.min') %>
+<%- js('/js/jquery-2.0.3.min') %> <%- js('/js/lazyload.min') %>
-<%- js('/js/lazyload.min') %>
 <!-- Tocbot -->
-<% if (theme.toc && is_post() && !page.no_toc){ %>
+<% if (theme.toc && is_post() && !page.no_toc){ %> <%- js('/js/tocbot.min') %>
-<%- js('/js/tocbot.min') %>
 <script>
   tocbot.init({
-    tocSelector: '.tocbot',
+    tocSelector: ".tocbot",
-    contentSelector: '.article-entry',
+    contentSelector: ".article-entry",
-    headingSelector: 'h1, h2, h3, h4, h5, h6',
+    headingSelector: "h1, h2, h3, h4, h5, h6",
     hasInnerContainers: true,
     scrollSmooth: true,
-    scrollContainer: 'main',
+    scrollContainer: "main",
-    positionFixedSelector: '.tocbot',
+    positionFixedSelector: ".tocbot",
-    positionFixedClass: 'is-position-fixed',
+    positionFixedClass: "is-position-fixed",
-    fixedSidebarOffset: 'auto'
+    fixedSidebarOffset: "auto",
   });
 </script>
 <% } %>
 <script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css"
+/>
 <script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>
 <%- js('dist/main') %>
 <!-- ImageViewer -->
-<% if (theme.image_viewer){ %>
+<% if (theme.image_viewer){ %> <%- partial('viewer') %> <% } %>
-<%- partial('viewer') %>
-<% } %>
 <!-- MathJax -->
-<% if (theme.mathjax){ %>
+<% if (theme.mathjax){ %> <%- partial('mathjax') %>
-<%- partial('mathjax') %>
 <script>
   var ayerConfig = {
-    mathjax: true
+    mathjax: true,
-  }
+  };
 </script>
 <% } %>
 <!-- Katex -->
-<% if (theme.katex.enable){ %>
+<% if (theme.katex.enable){ %> <%- partial('katex') %> <% } %>
-<%- partial('katex') %>
-<% } %>
 <!-- busuanzi  -->
-<% if (theme.busuanzi && theme.busuanzi.enable){ %>
+<% if (theme.busuanzi && theme.busuanzi.enable){ %> <%-
-<%- js('/js/busuanzi-2.3.pure.min') %>
+js('/js/busuanzi-2.3.pure.min') %> <% } %>
-<% } %>
 <!-- ClickLove -->
-<% if (theme.click_effect===1){ %>
+<% if (theme.click_effect===1){ %> <%- js('/js/clickLove') %> <% } %>
-<%- js('/js/clickLove') %>
-<% } %>
 <!-- ClickBoom1 -->
 <% if (theme.click_effect===2){ %>
 <script src="https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js"></script>
-<%- js('/js/clickBoom1') %>
+<%- js('/js/clickBoom1') %> <% } %>
-<% } %>
 <!-- ClickBoom2 -->
-<% if (theme.click_effect===3){ %>
+<% if (theme.click_effect===3){ %> <%- js('/js/clickBoom2') %> <% } %>
-<%- js('/js/clickBoom2') %>
-<% } %>
 <!-- CodeCopy -->
-<% if (theme.copy_btn == true) { %>
+<% if (theme.copy_btn == true) { %> <%- css('/css/clipboard') %> <%-
-<%- css('/css/clipboard') %>
+partial('post/clipboard') %> <% } %>
-<%- partial('post/clipboard') %>
-<% } %>
 <!-- CanvasBackground -->
-<% if (theme.canvas_bg == 1) { %>
+<% if (theme.canvas_bg == 1) { %> <%- js('/js/dz') %> <% } %>
-<%- js('/js/dz') %>
+<script>
-<% } %>
+  if (window.mermaid) {
+    mermaid.initialize({ theme: "<%= theme.mermaid.theme %>" });
+  }
+</script>

layout/_partial/article.ejs

@@ -9,6 +9,7 @@
     <% if (post.link || post.title){ %>
     <header class="article-header">
       <%- partial('post/title', {class_name: 'article-title'}) %>
+      <%- partial('post/author', {class_name: 'article-author'}) %>
     </header>
     <% } %> <% if (index || is_post()) { %>
     <div class="article-meta">

layout/_partial/head.ejs

@@ -2,18 +2,21 @@
 
 <% if (config.language){ %>
 <html lang="<%= config.language %>">
-<% } else { %>
+  <% } else { %>
-<html lang="en">
+  <html lang="en">
-<% }%>
+    <% }%>
 
-<head>
+    <head>
       <meta charset="utf-8" />
       <% var title = page.title; if (is_archive()) { title = __('archive_a'); if
       (is_month()) { title += ': ' + page.year + '/' + page.month; } else if
-    (is_year()) { title += ': ' + page.year; } } else if (is_category()) { title
+      (is_year()) { title += ': ' + page.year; } } else if (is_category()) {
-    = page.category; } else if (is_tag()) {
+      title = page.category; } else if (is_tag()) { title = __('tag') + ': ' +
-    title = __('tag') + ': ' + page.tag; } %> <% if (page.keywords){ %>
+      page.tag; } %> <% if (page.keywords){ %>
-  <meta name="keywords" content="<%= page.keywords %>,<%= config.keywords %>" />
+      <meta
+        name="keywords"
+        content="<%= page.keywords %>,<%= config.keywords %>"
+      />
       <% } else if (config.keywords){ %>
       <meta name="keywords" content="<%= config.keywords %>" />
       <% } %> <% if (page.description){ %>
@@ -21,21 +24,26 @@
       <% } else if (config.description){ %>
       <meta name="description" content="<%= config.description %>" />
       <% } %>
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+      <meta
-  <title>
+        name="viewport"
-    <% if (title){ %><%= title %> | <% } %> <%= config.title %>
+        content="width=device-width, initial-scale=1, maximum-scale=1"
-  </title>
+      />
+      <title><% if (title){ %><%= title %> | <% } %> <%= config.title %></title>
       <% if (theme.favicon){ %>
       <link rel="shortcut icon" href="<%- theme.favicon %>" />
-  <% } %>
+      <% } %> <%- css('dist/main') %>
-  <%- css('dist/main') %>
+      <link
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">
+        rel="stylesheet"
-  <%- css('css/custom') %>
+        href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css"
-  <% if (theme.progressBar){ %>
+      />
+      <%- css('css/custom') %> <% if (theme.progressBar){ %>
       <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
+      <% } %> <%- partial('google-analytics') %> <%- partial('baidu-analytics')
+      %>
+      <!-- mermaid -->
+      <% if (theme.mermaid.enable) { %>
+      <script src="<%= theme.mermaid.cdn %>"></script>
       <% } %>
-  <%- partial('google-analytics') %>
+    </head>
-  <%- partial('baidu-analytics') %>
+  </html>
-</head>
-
 </html>

layout/_partial/post/author.ejs

@@ -0,0 +1,8 @@
+<% if (post.authors && post.authors.length){ %>
+    <div class="<%= class_name %>" <% if (!index){ %> style="text-align: center" <% }%>>
+        作者：<% for (var i = 0; i < post.authors.length - 1; i++) { %>
+            <%= post.authors[i]%> ,
+        <% }%> <%= post.authors[post.authors.length - 1] %>
+    </div>
+
+<% } %>

layout/_partial/post/busuanzi.ejs

@@ -1,5 +1,5 @@
 <span>
-  <span><i class="ri-user-3-fill"></i><%- __('site_visitors') %>:<span id="busuanzi_value_site_uv"></span></s>
+  <span><i class="ri-user-3-fill"></i><%- __('site_visitors') %>:<span id="busuanzi_value_site_uv"></span></span>
   <span class="division">|</span>
   <span><i class="ri-eye-fill"></i><%- __('page_views') %>:<span id="busuanzi_value_page_pv"></span></span>
 </span>

layout/_partial/post/gitalk.ejs

@@ -1,7 +1,7 @@
 <% if (theme.gitalk.enable && post.comments) { %>
 <div class="gitalk" id="gitalk-container"></div>
-<%- css('https://cdn.jsdelivr.net/npm/gitalk@1.6.2/dist/gitalk.css') %>
+<%- css('https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css') %>
-<%- js('https://cdn.jsdelivr.net/npm/gitalk@1.6.2/dist/gitalk.min.js') %>
+<%- js('https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js') %>
 <%- js('https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js') %>
 <script type="text/javascript">
   var gitalk = new Gitalk({

layout/_partial/post/minivaline.ejs

@@ -3,7 +3,7 @@
 <div id="mvcomments-box">
   <div id="mvcomments"></div>
 </div>
-<script src="https://cdn.jsdelivr.net/npm/minivaline@latest"></script>
+<script src="https://cdn.jsdelivr.net/npm/minivaline@6"></script>
 <script>
   new MiniValine(Object.assign(<%- JSON.stringify(theme.minivaline) %>, {
     el: '#mvcomments',
@@ -24,54 +24,24 @@
       padding: 5px 0px;
     }
   }
-	.darkmode .MiniValine *{
+  :root .darkmode {
-		color: #f1f1f1!important;
+    --ohhho-color-p: #bbb;
+    --ohhho-color-text: #fff;
+    --ohhho-color-card: #252d38;
+    --ohhho-color-block: rgba(68, 68, 68, 0.65);
+    --ohhho-expand-before-background: linear-gradient(
+      180deg,
+      rgba(246, 246, 246, 0),
+      rgba(0, 0, 0, 0.9)
+    );
+    --ohhho-expand-after-background: rgba(0, 0, 0, 0.9);
   }
-	.darkmode .commentTrigger{
+  .darkmode .ohhho pre {
-		background-color: #403e3e !important;
+    background: #888;
+    border: 1px solid var(--ohhho-color-block);
   }
-	.darkmode .MiniValine .vpage .more{
+  .darkmode .ohhho .vlist .vcard .vcomment-body .vhead {
-		background: #21232F
+    filter: brightness(85%);
-	}
-	.darkmode img{
-		filter: brightness(30%)
-	}
-	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:before{
-		background: linear-gradient(180deg, rgba(246,246,246,0), rgba(0,0,0,0.9))
-	}
-	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment.expand:after{
-		background: rgba(0,0,0,0.9)
-	}
-	.darkmode .MiniValine .vlist .vcard .vcomment-body .text-wrapper .vcomment pre{
-		background: #282c34
-		border: 1px solid #282c34
-	}
-	.darkmode .MiniValine .vinputs-area .textarea-wrapper textarea{
-		color: #000;
-	}
-	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper input{
-		color: #000;
-	}
-	.darkmode .MiniValine .vinputs-area .vextra-area .vsmile-icons{
-		background: transparent;
-	}
-	.darkmode .MiniValine .vinputs-wrap{
-		border-color: #b2b2b5;
-	}
-	.darkmode .MiniValine .vinputs-wrap:hover{
-		border: 1px dashed #2196f3;
-	}
-	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper{
-		border-bottom: 1px dashed #b2b2b5;
-	}
-	.darkmode .MiniValine .vinputs-area .auth-section .input-wrapper:hover{
-		border-bottom: 1px dashed #2196f3;
-	}
-	.darkmode .MiniValine .vbtn{
-		background-color: transparent!important;
-	}
-	.darkmode .MiniValine .vbtn:hover{
-		border: 1px dashed #2196f3;
   }
 </style>
 <% } %>

layout/layout.ejs

@@ -28,12 +28,6 @@
     <aside class="sidebar on">
       <%- partial('_partial/sidebar') %>
     </aside>
-    <script>
-      if (window.matchMedia("(max-width: 768px)").matches) {
-        document.querySelector('.content').classList.remove('on');
-        document.querySelector('.sidebar').classList.remove('on');
-      }
-    </script>
     <%- partial('_partial/modal') %>
     <%- partial('_partial/after-footer') %>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-ayer",
-  "version": "1.8.17",
+  "version": "1.8.22",
   "description": "a clean and elegant theme for hexo.",
   "scripts": {
     "dev": "parcel serve source-src/main.js -d source/dist",

source-src/css/_partial/article.styl

@@ -106,6 +106,13 @@
     color body-color
     padding-left 2rem
     border-left 4px solid body-color 
+  .article-author
+    display block
+    font-size 20px
+    margin-bottom 3rem
+    text-decoration none
+    color body-color
+    padding-left 2rem
 
 .article-footer
   clearfix()

source-src/css/_partial/ayer.styl

@@ -56,12 +56,14 @@
       color sea
 
 .float_btns
-  position fixed
+  position sticky
   bottom 10rem
   right 50px
   z-index 9996
   text-align center
   transform scale(1.2)
+  width: 50px
+  float: right
 
 #mask
   position fixed

source-src/css/_partial/navbar.styl

@@ -14,6 +14,13 @@
         opacity .8
         background-color body-color
     &.nav-main
+      height 60vh
+      overflow-y scroll
+      scrollbar-width none
+      -ms-overflow-style none
+      &::-webkit-scrollbar
+        width 0px
+        height 0px
       .nav-item-link
         i
           font-size 1rem

source/404.html

@@ -1,12 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-
+  <head>
-<head>
+    <meta charset="UTF-8" />
-	<meta charset="UTF-8">
     <title>404</title>
-	<meta name="keywords" content="Hexo,Ayer,404,Design">
+    <meta name="keywords" content="Hexo,Ayer,404,Design" />
-	<meta name="description" content="hexo theme ayer page 404.">
+    <meta name="description" content="hexo theme ayer page 404." />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
     <style>
       html,
       figure {
@@ -36,7 +38,7 @@
         margin-left: 50%;
         transform: translateX(-50%);
         border-radius: 5%;
-			opacity: .8;
+        opacity: 0.8;
       }
 
       @media screen and (max-width: 768px) {
@@ -45,24 +47,33 @@
         }
       }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="notfound">
       <a class="notfound-link" href="/">
-			<img width="40"
+        <img
-				src="data:image/png;base64,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">
+          width="40"
+          src="data:image/png;base64,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"
+        />
       </a>
       <figure class="forrestgump">
         <figcaption>
-				<h1>404<br>Not Found!</h1>
+          <h1>404<br />Not Found!</h1>
-				<h3>Life was like a journey on the sea, you never know what you're going to get.</h3>
+          <h3>
-				<h3>亲，获取不到该路径的页面呢，请检查一下哦，可能你还需要仔细阅读 <a href="https://hexo.io/docs/">Hexo</a> 和 <a
+            Please check it, Maybe you should read
-						href="https://shen-yu.gitee.io/2019/ayer/">Ayer</a> 的说明文档~</h3>
+            <a href="https://hexo.io/docs/">Hexo</a> and
+            <a href="https://shen-yu.gitee.io/2019/ayer/">Ayer</a> Docs
+            carefully.
+          </h3>
+          <h3>
+            亲，获取不到该路径的页面呢，请检查一下哦，可能你还需要仔细阅读
+            <a href="https://hexo.io/docs/">Hexo</a> 和
+            <a href="https://shen-yu.gitee.io/2019/ayer/">Ayer</a> 的说明文档~
+          </h3>
         </figcaption>
-			<img src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/404.jpg">
+        <img src="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/img/404.jpg" />
       </figure>
     </div>
-</body>
+  </body>
-
 </html>

source/css/custom.styl

@@ -25,7 +25,12 @@ if hexo-config('mouse.enable')
 @media(max-width: 768px)
     .tocbot
         display none !important
-    .content
+    .sidebar
+        left 0
         &.on
+            left - $aside-width
+    .content
         transform translateX($aside-width)
+        &.on
+            transform translateX(0)