update

_config.yml

@@ -23,7 +23,7 @@ widgets:
     title: "博文分类"
   # 文章标签的默认配置
   tagcloud:
-    icon: fas fa-tags
+    icon: fas fa-fire
     title: "热门话题"
   # 文章目录的默认配置
   toc:

layout/_partial/article.ejs

@@ -92,7 +92,7 @@
 
 <br>
 
-<%- partial('comments') %>
+<%- partial('../_third-party/comments') %>
 
 <script>
     window.subData = {

layout/_partial/meta.ejs

@@ -5,15 +5,10 @@
 } %>
 <section class='meta'>
   <% if((!isPostList && post.music && post.music.enable) || (isPostList && post.music && post.music.enable == true)){ %>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
+    <%- partial('../_third-party/aplayer',
-    <div class="aplayer" data-mini=true
+    {aplayer_theme: '', aplayer_mini: true, aplayer_mode: 'circulation',
-      data-mode="circulation" data-volume="0.7"
+    aplayer_server: post.music.server, aplayer_type: post.music.type, aplayer_id: post.music.id,
-      data-server="<%= post.music.server %>"
+    aplayer_volume: '0.7', aplayer_autoplay: false }) %>
-      data-type="<%= post.music.type %>"
-      data-id="<%= post.music.id %>">
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
   <% } %>
   <div class="meta" id="header-meta">
     <% if(isPostList){ %>

layout/_partial/scripts.ejs

@@ -74,7 +74,6 @@
             <% } else { %>
               <%- js('js/volantis.js') %>
             <% } %>
-
             <script>
             var GUEST_INFO = ['nick','mail','link'];
             var guest_info = '<%= config.valine.guest_info %>'.split(',').filter(function(item){

layout/_partial/side.ejs

@@ -1,43 +1,12 @@
 <% if (config.widgets){ %>
+  <%
+  let supportWidgets = ['author', 'category', 'list', 'music', 'tagcloud', 'toc', 'plain'];
+  %>
   <% (config.widgets||[]).forEach(function(item){ %>
     <% if (item.enable != false){ %>
-      <%
+      <% let widget_name = item.widget ? item.widget : 'plain'; %>
-      let widget_name = item.widget ? item.widget : 'plain';
+      <% if (supportWidgets.indexOf(widget_name) > -1){ %>
-      var needDisplay = true;
+        <%- partial('../_widget/' + item.widget, {item: item}) %>
-      if (needDisplay == true && widget_name == 'toc') {
-        if (page.layout != 'post' || !page.content || page.toc == false || toc(page.content).length == 0) {
-          needDisplay = false;
-        }
-      }
-      if (needDisplay == true && widget_name == 'music') {
-        if (page.layout != 'post' || !page.content || page.toc == false || toc(page.content).length == 0) {
-          needDisplay = false;
-        }
-      }
-      if (needDisplay) {
-        needDisplay = ((widget_name != 'toc') || (page.layout == 'post' && page.content && page.toc!==false && toc(page.content).length > 0));
-      }
-      %>
-      <% if (needDisplay){ %>
-        <section class='<%- widget_name == 'toc' ? 'toc-wrapper' : widget_name %>'>
-          <% if (widget_name != 'author'){ %>
-            <header class='<%= theme.style %>'>
-              <div><i class="<%- item.icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%- item.title %></div>
-              <% if (widget_name == 'toc') { %>
-                <div class='wrapper'><a class="s-toc rightBtn" title="固定到顶部" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div>
-              <% } else if(item.more && item.more.url) { %>
-                <a class="rightBtn<%- item.more.animate ? ' ' + item.more.animate : '' %>" target="_blank"
-                rel="external nofollow noopener noreferrer"
-                href="<%- url_for(item.more.url) %>"
-                title="<%- item.more.url %>">
-                <i class="<%- item.more.icon?item.more.icon:'fas fa-question-circle' %> fa-fw"></i></a>
-              <% } %>
-            </header>
-          <% } %>
-          <div class='content <%= theme.style %>'>
-            <%- partial('../_widget/' + widget_name, {item: item}) %>
-          </div>
-        </section>
       <% } %>
     <% } %>
   <% }) %>

layout/_third-party/aplayer.ejs

@@ -0,0 +1,13 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
+<div class="aplayer"
+  data-theme="<%- aplayer_theme %>"
+  <%if(aplayer_mini){%>data-mini=true <%}%>
+  <%if(aplayer_autoplay){%>data-autoplay=true <%}%>
+  data-mode="<%- aplayer_mode %>"
+  data-server="<%= aplayer_server %>"
+  data-type="<%= aplayer_type %>"
+  data-id="<%= aplayer_id %>"
+  data-volume="<%= aplayer_volume %>">
+</div>
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>

layout/_third-party/comments.ejs

@@ -39,7 +39,6 @@
                     <% } %>
                 <% } %>
             <% } %>
-
         </section>
     </article>
 <% } %>

layout/_widget/author.ejs

@@ -1,24 +1,29 @@
-<% if(item.avatar) { %>
+<section class='<%- item.widget %>'>
-  <div class='avatar'>
+  <div class='content <%= theme.style %>'>
-    <img class='avatar' src='<%- url_for(item.avatar) %>'/>
+    <% if(item.avatar) { %>
-  </div>
+      <div class='avatar'>
-<%} %>
+        <img class='avatar' src='<%- url_for(item.avatar) %>'/>
-<% if (item.title || item.body) { %>
+      </div>
-  <div class='text'>
+    <%} %>
-    <% if (item.title){ %>
+    <% if (item.title || item.body) { %>
-      <h2><%- item.title %></h2>
+      <div class='text'>
+        <% if (item.title){ %>
+          <h2><%- item.title %></h2>
+        <% } %>
+        <% if (item.body){ %>
+          <%- markdown(item.body) %>
+        <% } %>
+      </div>
     <% } %>
-    <% if (item.body){ %>
+    <% if (item.social == true && config.social) { %>
-      <%- markdown(item.body) %>
+      <div class="social-wrapper">
+        <% (config.social||[]).forEach(function(value){ %>
+          <% if (value.url && value.icon) { %>
+            <a href="<%- url_for(value.url) %>" class="social flat-btn" target="_blank" rel="external"><i class="social <%- value.icon %>" aria-hidden="true"></i></a>
+          <%}%>
+        <%})%>
+      </div>
     <% } %>
   </div>
-<% } %>
+
-<% if (item.social == true && config.social) { %>
+</section>
-  <div class="social-wrapper">
-    <% (config.social||[]).forEach(function(value){ %>
-      <% if (value.url && value.icon) { %>
-        <a href="<%- url_for(value.url) %>" class="social flat-btn" target="_blank" rel="external"><i class="social <%- value.icon %>" aria-hidden="true"></i></a>
-      <%}%>
-    <%})%>
-  </div>
-<% } %>

layout/_widget/category.ejs

@@ -1,7 +1,12 @@
 <% if (site.categories.length){ %>
-  <ul class="entry">
+  <section class='<%- item.widget %>'>
-    <% site.categories.sort('name').each(function(category){ %>
+    <%- partial('header', {item: item, defIcon: theme.widgets.category.icon, defTitle: theme.widgets.category.title}) %>
-      <li><a class="flat-box" title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"><div class='name'><%- category.name %></div><div class='badge'>(共<%- category.posts.length %>篇)</div></a></li>
+    <div class='content <%= theme.style %>'>
-    <% }) %>
+      <ul class="entry">
-  </ul>
+        <% site.categories.sort('name').each(function(category){ %>
+          <li><a class="flat-box" title="<%- url_for(category.path) %>" href="<%- url_for(category.path) %>"><div class='name'><%- category.name %></div><div class='badge'>(共<%- category.posts.length %>篇)</div></a></li>
+        <% }) %>
+      </ul>
+    </div>
+  </section>
 <% } %>

layout/_widget/header.ejs

@@ -0,0 +1,16 @@
+<%
+  let icon = item.icon ? item.icon : defIcon;
+  let title = item.title ? item.title : defTitle;
+%>
+<header class='<%= theme.style %>'>
+  <div><i class="<%- icon %> fa-fw" aria-hidden="true"></i>&nbsp;&nbsp;<%- title %></div>
+  <% if (item.widget == 'toc') { %>
+    <div class='wrapper'><a class="s-toc rightBtn" title="固定到顶部" rel="external nofollow noopener noreferrer" href="javascript:void(0)"><i class="fas fa-thumbtack fa-fw"></i></a></div>
+  <% } else if(item.more && item.more.url) { %>
+    <a class="rightBtn<%- item.more.animate ? ' ' + item.more.animate : '' %>" target="_blank"
+    rel="external nofollow noopener noreferrer"
+    href="<%- url_for(item.more.url) %>"
+    title="<%- item.more.url %>">
+    <i class="<%- item.more.icon?item.more.icon:'fas fa-question-circle' %> fa-fw"></i></a>
+  <% } %>
+</header>

layout/_widget/list.ejs

@@ -1,19 +1,24 @@
-<ul class="entry">
+<section class='<%- item.widget %>'>
-  <% (item.rows||[]).forEach(function(row){ %>
+  <%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
-    <li><a class="flat-box" title="<%- row.url %>" href="<%= url_for(row.url) %>">
+  <div class='content <%= theme.style %>'>
-      <div class='name'>
+    <ul class="entry">
-        <% if(row.img) { %>
+      <% (item.rows||[]).forEach(function(row){ %>
-          <img src="<%- row.img %>">
+        <li><a class="flat-box" title="<%- row.url %>" href="<%= url_for(row.url) %>">
-        <% } else if(row.avatar) { %>
+          <div class='name'>
-          <img src="<%- row.avatar %>" id="round">
+            <% if(row.img) { %>
-        <% } else { %>
+              <img src="<%- row.img %>">
-          <i class="<%= row.icon %>" aria-hidden="true"></i>
+            <% } else if(row.avatar) { %>
-        <% } %>
+              <img src="<%- row.avatar %>" id="round">
-        &nbsp;&nbsp;<%- row.name %>
+            <% } else { %>
-      </div>
+              <i class="<%= row.icon %>" aria-hidden="true"></i>
-      <% if(row.desc) { %>
+            <% } %>
-        <div class='badge'>(<%- row.desc %>)</div>
+            &nbsp;&nbsp;<%- row.name %>
-      <% } %>
+          </div>
-    </a></li>
+          <% if(row.desc) { %>
-  <% }) %>
+            <div class='badge'>(<%- row.desc %>)</div>
-</ul>
+          <% } %>
+        </a></li>
+      <% }) %>
+    </ul>
+  </div>
+</section>

layout/_widget/music.ejs

@@ -39,14 +39,13 @@ if (theme.widgets.music && theme.widgets.music.display) {
 %>
 
 <% if (needDisplay == true) { %>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.css">
+  <section class='<%- item.widget %>'>
-  <div class="aplayer" data-theme="<%= item.color %>"
+    <%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
-    data-mode="<%= item.mode %>"
+    <div class='content <%= theme.style %>'>
-    data-server="<%= item.server %>"
+      <%- partial('../_third-party/aplayer',
-    data-type="<%= item.type %>"
+      {aplayer_theme: item.color, aplayer_mini: false, aplayer_mode: item.mode,
-    data-id="<%= item.id %>"
+      aplayer_server: item.server, aplayer_type: item.type, aplayer_id: item.id,
-    data-volume="<%= item.volume %>">
+      aplayer_volume: item.volume, aplayer_autoplay: item.autoplay?item.autoplay:false }) %>
-  </div>
+    </div>
-  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.7.0/dist/APlayer.min.js"></script>
+  </section>
-  <script src="https://cdn.jsdelivr.net/npm/meting@1.1.0/dist/Meting.min.js"></script>
 <% } %>

layout/_widget/plain.ejs

@@ -1 +1,6 @@
-<%- markdown(item.body) %>
+<section class='<%- item.widget?item.widget:'plain' %>'>
+  <%- partial('header', {item: item, defIcon: '', defTitle: ''}) %>
+  <div class='content <%= theme.style %>'>
+    <%- markdown(item.body) %>
+  </div>
+</section>

layout/_widget/tagcloud.ejs

@@ -1,7 +1,14 @@
-<%- tagcloud(site.tags, {
+<% if (site.tags.length){ %>
-    min_font: 14,
+  <section class='<%- item.widget %>'>
-    max_font: 24,
+    <%- partial('header', {item: item, defIcon: theme.widgets.tagcloud.icon, defTitle: theme.widgets.tagcloud.title}) %>
-    color: true,
+    <div class='content <%= theme.style %>'>
-    start_color: '#999',
+      <%- tagcloud(site.tags, {
-    end_color: '#555',
+          min_font: 14,
-}) %>
+          max_font: 24,
+          color: true,
+          start_color: '#999',
+          end_color: '#555',
+      }) %>
+    </div>
+  </section>
+<% } %>

layout/_widget/toc.ejs

@@ -1,5 +1,8 @@
 <% if(page.layout == 'post' && page.content && page.toc!==false && toc(page.content).length > 0){ %>
-  <div class='content <%= theme.style %>'>
+  <section class='toc-wrapper'>
-    <%- toc(page.content, {list_number: false}) %>
+    <%- partial('header', {item: item, defIcon: theme.widgets.toc.icon, defTitle: theme.widgets.toc.title}) %>
-  </div>
+    <div class='content <%= theme.style %>'>
+      <%- toc(page.content, {list_number: false}) %>
+    </div>
+  </section>
 <% } %>

layout/links.ejs

@@ -44,4 +44,4 @@
 
 <br>
 
-<%- partial('_partial/comments') %>
+<%- partial('_third-party/comments') %>

source/less/_color.less

@@ -1,11 +1,12 @@
 // 如果你只想简单地换个风格，可以只改这里的几项：
 // 网页背景颜色
-@theme_background: #efefef;   // 暗色主题示例：#454545;
+@theme_background: #EFEFEF;
+// @theme_background: #454545; // 暗色主题
 // 主题色
 @theme_main: #1BC3FB;
 // 卡片背景颜色
-@theme_cardbg: white;         // 暗色主题示例：#555;
+@theme_cardbg: white;
-
+// @theme_cardbg: #555; // 暗色主题
 
 
 
@@ -34,4 +35,5 @@
 // 在主题色中显示的文本（一般为白或深灰）
 @color_text_in_header: white;
 // 正文文字颜色
-@color_text_main: @dark;     // 暗色主题示例：white;
+@color_text_main: @dark;
+// @color_text_main: white; // 暗色主题

source/less/_header.less

@@ -91,12 +91,12 @@
             padding: 0 8px;
             &:hover{
                 color: @color_text_in_header;
-                border-bottom: 4px solid @theme_cardbg;
+                border-bottom: @loading_height solid @theme_cardbg;
                 background: fade(@theme_cardbg, 10%);
             }
             &:active,&.active{
                 color: @color_text_in_header;
-                border-bottom: 4px solid @theme_cardbg;
+                border-bottom: @loading_height solid @theme_cardbg;
             }
         }
         @media(max-width: @on_phone){

source/less/_main.less

@@ -148,10 +148,7 @@
             margin: 8px 8px 0 8px;
             .emoji{
               height: 24px;
-              // &.aru{
+              margin-top: 6px;
-              //   height: 18px;
-              //   margin-top: 3px;
-              // }
             }
           }
         }

source/less/_widget.less

@@ -247,7 +247,7 @@
           text-align: justify;
           padding: @gap/2 @gap;
           &.pure{
-            padding-top: 0; // 适合白色导航栏背景
+            padding: 0 @gap @gap @gap; // 适合白色导航栏背景
           }
           a{
             display:inline-block;