From 3bf7f894d308ed69acae4e0fd46e674ae53b902b Mon Sep 17 00:00:00 2001
From: xaoxuu <xaoxuu@gmail.com>
Date: Tue, 23 Feb 2021 21:09:49 +0800
Subject: [PATCH] update

---
 _config.yml                                   |  3 ++
 layout/_partial/main/navbar/breadcrumb.ejs    | 28 +++++++---
 layout/_partial/main/navbar/list_post.ejs     |  2 +-
 layout/_partial/main/navbar/list_wiki.ejs     |  2 +-
 layout/_partial/main/post_list/post_card.ejs  |  9 ++--
 layout/_partial/main/post_list/wiki_card.ejs  | 20 +++++---
 .../plugins/comments/utterances/layout.ejs    |  3 ++
 scripts/helpers/category_color.js             |  9 ++++
 scripts/helpers/doc_tree.js                   | 51 +++++++++++++++++++
 source/css/_layout/base.styl                  |  4 --
 source/css/_layout/main.styl                  |  4 +-
 source/css/_layout/navbar.styl                | 18 ++++---
 source/css/_layout/partial/comments.styl      |  8 +--
 source/css/_plugins/comments/utterances.styl  |  3 ++
 source/css/_plugins/common/loading.styl       | 14 +++++
 source/css/_plugins/index.styl                |  7 +++
 16 files changed, 150 insertions(+), 35 deletions(-)
 create mode 100644 scripts/helpers/category_color.js
 create mode 100644 scripts/helpers/doc_tree.js
 create mode 100644 source/css/_plugins/comments/utterances.styl
 create mode 100644 source/css/_plugins/common/loading.styl

diff --git a/_config.yml b/_config.yml
index 6c0203c..c17a2f1 100755
--- a/_config.yml
+++ b/_config.yml
@@ -59,6 +59,9 @@ sidebar:
 article:
   # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？
   auto_excerpt: 200
+  # 分类颜色
+  category_color:
+    '新闻稿': '#DA0F47'
   # 相关文章，需要安装插件 (for layout: post)
   # npm i hexo-related-popular-posts
   related_posts:
diff --git a/layout/_partial/main/navbar/breadcrumb.ejs b/layout/_partial/main/navbar/breadcrumb.ejs
index 7a2d105..8df196a 100644
--- a/layout/_partial/main/navbar/breadcrumb.ejs
+++ b/layout/_partial/main/navbar/breadcrumb.ejs
@@ -1,14 +1,20 @@
 <% if (page.breadcrumb != false) { %>
   <div class='breadcrumb-navigation'>
   <% if (page.layout == 'post') { %>
-    <div id='breadcrumb'>
+    <%
+    var firstCat = '';
+    if (page.categories && page.categories.length > 0) {
+      firstCat = page.categories.data[0].name;
+    }
+    %>
+    <div id='breadcrumb'<%- category_color(firstCat) %>>
       <a class='cap breadcrumb' href='/'><%- __('btn.home') %></a>
       <span class="sep"></span>
       <a class='cap breadcrumb' href='/'><%- __('btn.blog') %></a>
       <% if (page.layout == 'post' && page.categories && page.categories.length > 0) { %>
         <span class="sep"></span>
         <%- list_categories(page.categories, {
-            class: 'cap breadcrumb cat',
+            class: 'cap breadcrumb',
             show_count: false,
             separator: ' <span class="sep"></span> ',
             style: 'none'
@@ -19,7 +25,15 @@
       <%- __('meta.created') %>&nbsp;<time datetime='<%- date_xml(page.date) %>'><%- date(page.date, config.date_format) %></time>
     </div>
   <% } else if (page.layout == 'wiki') { %>
-    <div id='breadcrumb'>
+    <%
+    var catPage = '';
+    site.pages.filter(function (p) {
+      return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(page.wiki)
+    }).limit(1).each(function(p) {
+      catPage = p;
+    });
+    %>
+    <div id='breadcrumb'<%- category_color(catPage.title) %>>
       <a class='cap breadcrumb' href='/'><%- __('btn.home') %></a>
       <span class="sep"></span>
       <% if (page.menu_id && theme.sidebar.menu[page.menu_id] && theme.sidebar.menu[page.menu_id].url) { %>
@@ -27,12 +41,10 @@
       <% } else { %>
         <a class='cap breadcrumb' href='<%- url_for(config.wiki_dir || "/wiki/") %>'><%- __('btn.wiki') %></a>
       <% } %>
-      <% site.pages.filter(function (p) { %>
-        <% return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(page.wiki) %>
-      <% }).limit(1).each(function(p) { %>
+      <% if (catPage && catPage.title && catPage.path) { %>
         <span class="sep"></span>
-        <a class='cap breadcrumb' href='<%- url_for(p.path) %>'><%- p.title %></a>
-      <% }); %>
+        <a class='cap breadcrumb' href='<%- url_for(catPage.path) %>'><%- catPage.title %></a>
+      <% } %>
       <% site.pages.filter(function (p) { %>
         <% return p.layout == 'wiki' && p.wiki == page.wiki && p.description %>
       <% }).limit(1).each(function(p) { %>
diff --git a/layout/_partial/main/navbar/list_post.ejs b/layout/_partial/main/navbar/list_post.ejs
index 311605a..f26f5fe 100644
--- a/layout/_partial/main/navbar/list_post.ejs
+++ b/layout/_partial/main/navbar/list_post.ejs
@@ -1,5 +1,5 @@
 <div class='nav-wrap'>
-  <nav class='sub post cap green'>
+  <nav class='sub post cap'>
     <% if (is_home()) { %>
       <a class='active' href='/'><%- __('btn.recent_publish') %></a>
     <% } else { %>
diff --git a/layout/_partial/main/navbar/list_wiki.ejs b/layout/_partial/main/navbar/list_wiki.ejs
index 132bd39..fd617ff 100644
--- a/layout/_partial/main/navbar/list_wiki.ejs
+++ b/layout/_partial/main/navbar/list_wiki.ejs
@@ -1,5 +1,5 @@
 <div class='nav-wrap'>
-  <nav class='sub wiki cap green'>
+  <nav class='sub wiki cap'>
     <% if (page.layout == 'index' && page.title && page.wiki) { %>
       <a href='<%- url_for(config.wiki_dir || "/wiki/") %>'><%- __('btn.all_wiki') %></a>
     <% } else { %>
diff --git a/layout/_partial/main/post_list/post_card.ejs b/layout/_partial/main/post_list/post_card.ejs
index 37642ac..cdbd6dc 100755
--- a/layout/_partial/main/post_list/post_card.ejs
+++ b/layout/_partial/main/post_list/post_card.ejs
@@ -44,10 +44,11 @@ if (post.categories && post.categories.length > 0) {
       }
       function layoutCats() {
         if (cats.length > 0) {
-          var ret = '<span class="cap breadcrumb">';
-          ret += cats.shift()
-          ret += '</span>';
-          return ret;
+          let cat = cats.shift();
+          var el = '<span class="cap breadcrumb"' + category_color(cat) + '>';
+          el += cat;
+          el += '</span>';
+          return el;
         } else {
           return '';
         }
diff --git a/layout/_partial/main/post_list/wiki_card.ejs b/layout/_partial/main/post_list/wiki_card.ejs
index d95be53..7c47c8e 100644
--- a/layout/_partial/main/post_list/wiki_card.ejs
+++ b/layout/_partial/main/post_list/wiki_card.ejs
@@ -22,13 +22,19 @@
   </div>
 <% } %>
 <div class='excerpt'>
-  <div class='cap breadcrumb'>
-    <% site.pages.filter(function (p) { %>
-      <% return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(post.wiki) %>
-    <% }).limit(1).each(function(p) { %>
-      <span><%- p.title %></span>
-    <% }); %>
-  </div>
+  <%
+  var cat = '';
+  site.pages.filter(function (p) {
+    return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(post.wiki)
+  }).limit(1).each(function(p) {
+    cat = p.title;
+  });
+  %>
+  <% if (cat) { %>
+    <div class='cap breadcrumb'<%- category_color(cat) %>>
+      <span><%- cat %></span>
+    </div>
+  <% } %>
   <h2 class='post-title'><%- post.wiki || post.title %></h2>
   <% if (post.description) { %>
     <p><%- post.description %></p>
diff --git a/layout/_partial/plugins/comments/utterances/layout.ejs b/layout/_partial/plugins/comments/utterances/layout.ejs
index 9152395..cefa5be 100644
--- a/layout/_partial/plugins/comments/utterances/layout.ejs
+++ b/layout/_partial/plugins/comments/utterances/layout.ejs
@@ -23,4 +23,7 @@ function layoutDiv() {
   return el;
 }
 %>
+
+<svg class="loading" style="vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2709"><path d="M832 512c0-176-144-320-320-320V128c211.2 0 384 172.8 384 384h-64zM192 512c0 176 144 320 320 320v64C300.8 896 128 723.2 128 512h64z" p-id="2710"></path></svg>
+
 <%- layoutDiv() %>
diff --git a/scripts/helpers/category_color.js b/scripts/helpers/category_color.js
new file mode 100644
index 0000000..f16fe19
--- /dev/null
+++ b/scripts/helpers/category_color.js
@@ -0,0 +1,9 @@
+'use strict';
+
+hexo.extend.helper.register('category_color', function(cat){
+  const cfg = hexo.theme.config;
+  if (cfg.article.category_color && cfg.article.category_color[cat]) {
+    return ' style="color:' + cfg.article.category_color[cat] + '"';
+  }
+  return '';
+});
diff --git a/scripts/helpers/doc_tree.js b/scripts/helpers/doc_tree.js
new file mode 100644
index 0000000..56f7918
--- /dev/null
+++ b/scripts/helpers/doc_tree.js
@@ -0,0 +1,51 @@
+/**
+ * doc_tree(page, {toc: false})
+ */
+
+'use strict';
+
+var util = require('hexo-util');
+
+hexo.extend.helper.register('doc_tree', function(page, args){
+  if (page.layout != 'wiki') {
+    return '';
+  }
+  const pages = hexo.locals.get('pages').filter(function (p) {
+    if (p.layout == 'wiki' && p.wiki && p.wiki == page.wiki && (p.title || p.seo_title)) {
+      if (p.order == undefined) {
+        p.order = 0;
+      }
+      return true;
+    } else {
+      return false;
+    }
+  }).sort('order');
+  if (pages.length == 0) {
+    return '';
+  }
+  var el = '';
+  el += '<div class="doc-tree">';
+  function doc_node(p) {
+    if ((p.title || p.seo_title) && p.permalink) {
+      var node = '<div class="doc-node">';
+      node += '<a class="doc-tree-link';
+      if (p.permalink == page.permalink) {
+        node += ' active';
+      }
+      node += '" href="' + p.permalink + '">';
+      node += '<span class="toc-text">';
+      node += p.title || p.seo_title;
+      node += '</span>';
+      node += '</a>';
+      node += '</div>';
+      return node;
+    } else {
+      return '';
+    }
+  }
+  pages.forEach((p, i) => {
+    el += doc_node(p);
+  });
+  el += '</div>';
+  return el;
+});
diff --git a/source/css/_layout/base.styl b/source/css/_layout/base.styl
index caf0b20..ea97f9f 100644
--- a/source/css/_layout/base.styl
+++ b/source/css/_layout/base.styl
@@ -49,14 +49,10 @@ a.button
   font-weight: 600
   font-size: $fs12
   color: var(--text-p3)
-  &.breadcrumb
-    color: $color-cat
   &.blue
     color: darken($color-md-blue, 6)
   &.cyan
     color: darken($color-mac-cyan, 6)
-  &.green
-    color: darken($color-mac-green, 4)
 
 
 span.dot,span.sep
diff --git a/source/css/_layout/main.styl b/source/css/_layout/main.styl
index 90de1d2..0e7e713 100644
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@@ -15,7 +15,9 @@
       .title
         font-size: 1.5rem
   nav.menu
-    margin: -2px
+    margin: -3px
+    a.nav-item
+      margin: 2px
 
 // pc上右边顶部留白
 @media screen and (min-width: $device-tablet)
diff --git a/source/css/_layout/navbar.styl b/source/css/_layout/navbar.styl
index 27a1676..e4b83e2 100644
--- a/source/css/_layout/navbar.styl
+++ b/source/css/_layout/navbar.styl
@@ -19,12 +19,11 @@ nav.cap
     font-weight: 600
     white-space: nowrap
     trans1 background
-    &:hover
+    &.active,&:hover
       background: var(--hover-block)
       color: var(--text-p1)
-    &.active
-      font-weight: 700
-      color: inherit
+  a+a
+    margin-left: 4px
 
 .md .tag-plugin.navbar
   nav.cap
@@ -51,8 +50,15 @@ nav.cap
     display: flex
     align-items: center
     flex-direction: row
-    a.cap:hover
-      color: $color-cat-hover
+    &:not([style]) a
+      color: var(--text-p1)
+    &[style] a
+      color: inherit
+    span.sep
+      color: var(--text-p3)
+    // a.cap:hover
+    //   color: $color-cat-hover
+    //   text-decoration: underline
   div#post-meta
     margin-top: 2px
 
diff --git a/source/css/_layout/partial/comments.styl b/source/css/_layout/partial/comments.styl
index 02cb7e2..0b5d075 100644
--- a/source/css/_layout/partial/comments.styl
+++ b/source/css/_layout/partial/comments.styl
@@ -1,8 +1,10 @@
 .comments-wrap
   padding: $gap * 2 $gap
-  div.cmt-body.utterances
-    margin: 0 -4px
-
+  div.cmt-body
+    min-height: 150px
+    position: relative
+    svg.loading
+      top: 60px
   a.avatar
     border-radius: 120px !important
     overflow: hidden !important
diff --git a/source/css/_plugins/comments/utterances.styl b/source/css/_plugins/comments/utterances.styl
new file mode 100644
index 0000000..68f4123
--- /dev/null
+++ b/source/css/_plugins/comments/utterances.styl
@@ -0,0 +1,3 @@
+.cmt-body.utterances
+  margin: 0 -4px
+  
diff --git a/source/css/_plugins/common/loading.styl b/source/css/_plugins/common/loading.styl
new file mode 100644
index 0000000..74e819a
--- /dev/null
+++ b/source/css/_plugins/common/loading.styl
@@ -0,0 +1,14 @@
+svg.loading
+  display: block
+  position: absolute
+  z-index: -1
+  width: 100%
+  height: 2rem
+  margin: auto
+  animation: spin infinite 2s
+  animation-timing-function: linear
+  @keyframes spin
+    from
+      transform:rotate(0deg)
+    to
+      transform:rotate(360deg)
diff --git a/source/css/_plugins/index.styl b/source/css/_plugins/index.styl
index 1628e6f..3d6c905 100644
--- a/source/css/_plugins/index.styl
+++ b/source/css/_plugins/index.styl
@@ -1,5 +1,12 @@
+// 通用插件
+@import "common/*"
+
 // 根据主题配置加载
 if hexo-config('plugins.swiper.enable')
   @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
+
+// 评论
+if hexo-config('comments.service') == 'utterances'
+  @import 'comments/utterances'