hexo-theme-fluid 1.9.0 → 1.9.1

package/_config.yml

@@ -727,7 +727,7 @@ post:
     enable: false
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
-    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
+    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
     type: disqus
 
 
@@ -864,6 +864,23 @@ cusdis:
   app_id:
   lang: zh-cn
 
+# Giscus
+# 基于 GitHub Discussions，类似于 Utterances
+# Based on GitHub Discussions, similar to Utterances
+# See: https://giscus.app/
+giscus:
+  repo:
+  repo-id:
+  category:
+  category-id:
+  theme-light: light
+  theme-dark: dark
+  mapping: pathname
+  reactions-enabled: 1
+  emit-metadata: 0
+  input-position: top
+  lang: zh-CN
+
 #---------------------------
 # 归档页
 # Archive Page
@@ -1014,13 +1031,13 @@ links:
     enable: false
     # 指定的插件，需要同时设置对应插件的必要参数
     # The specified plugin needs to set the necessary parameters at the same time
-    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis
+    # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
     type: disqus
 
 
 #---------------------------
 # 以下是配置 JS CSS 等静态资源的 URL 前缀，可以自定义成 CDN 地址，
-# 默认的 jsDelivr CDN 可能在部分地区无法访问，如果需要修改，最好使用与默认配置相同的版本，以避免潜在的问题，
+# 如果需要修改，最好使用与默认配置相同的版本，以避免潜在的问题，
 # ** 如果你不知道如何设置，请不要做任何改动 **
 #
 # Here is the url prefix to configure the static assets. Set CDN addresses you want to customize.
@@ -1043,9 +1060,9 @@ static_prefix:
 
   bootstrap: https://lib.baomitu.com/twitter-bootstrap/4.6.1/
 
-  prismjs: https://lib.baomitu.com/prism/1.26.0/
+  prismjs: https://lib.baomitu.com/prism/1.27.0/
 
-  tocbot: https://lib.baomitu.com/tocbot/4.18.0/
+  tocbot: https://lib.baomitu.com/tocbot/4.18.2/
 
   typed: https://lib.baomitu.com/typed.js/2.0.12/
 
@@ -1053,24 +1070,24 @@ static_prefix:
 
   nprogress: https://lib.baomitu.com/nprogress/0.2.0/
 
-  mathjax: https://lib.baomitu.com/mathjax/3.2.0/
+  mathjax: https://lib.baomitu.com/mathjax/3.2.1/
 
-  katex: https://lib.baomitu.com/KaTeX/0.15.2/
+  katex: https://lib.baomitu.com/KaTeX/0.15.6/
 
   busuanzi: https://busuanzi.ibruce.info/busuanzi/2.3/
 
   clipboard: https://lib.baomitu.com/clipboard.js/2.0.10/
 
-  mermaid: https://lib.baomitu.com/mermaid/8.13.10/
+  mermaid: https://lib.baomitu.com/mermaid/8.14.0/
 
-  valine: https://lib.baomitu.com/valine/1.4.16/
+  valine: https://lib.baomitu.com/valine/1.4.18/
 
-  waline: https://lib.baomitu.com/waline/2.3.2/
+  waline: https://lib.baomitu.com/waline/2.5.1/
 
   gitalk: https://lib.baomitu.com/gitalk/1.7.2/
 
   disqusjs: https://lib.baomitu.com/disqusjs/1.3.0/
 
-  twikoo: https://lib.baomitu.com/twikoo/1.4.17/
+  twikoo: https://lib.baomitu.com/twikoo/1.5.11/
 
   hint: https://lib.baomitu.com/hint.css/2.7.0/

package/layout/_partials/comments/giscus.ejs

@@ -0,0 +1,36 @@
+<% if (theme.giscus && theme.giscus['repo'] && theme.giscus['repo-id']) { %>
+    <div id="giscus" class="giscus"></div>
+    <script type="text/javascript">
+      Fluid.utils.loadComments('#giscus', function() {
+        var options = <%- JSON.stringify(theme.giscus || {}) %>;
+        var attributes = {};
+        for (let option in options) {
+          if (!option.startsWith('theme-')) {
+            var key = option.startsWith('data-') ? option : 'data-' + option;
+            attributes[key] = options[option];
+          }
+        }
+        var light = '<%= theme.giscus['theme-light'] || 'light' %>';
+        var dark = '<%= theme.giscus['theme-dark'] || 'dark' %>';
+        window.GiscusThemeLight = light;
+        window.GiscusThemeDark = dark;
+        attributes['data-theme'] = document.documentElement.getAttribute('data-user-color-scheme') === 'dark' ? dark : light;
+        for (let attribute in attributes) {
+          var value = attributes[attribute];
+          if (value === undefined || value === null || value === '') {
+            delete attributes[attribute];
+          }
+        }
+        var s = document.createElement('script');
+        s.setAttribute('src', 'https://giscus.app/client.js');
+        s.setAttribute('crossorigin', 'anonymous');
+        for (let attribute in attributes) {
+          s.setAttribute(attribute, attributes[attribute]);
+        }
+        var ss = document.getElementsByTagName('script');
+        var e = ss.length > 0 ? ss[ss.length - 1] : document.head || document.documentElement;
+        e.parentNode.insertBefore(s, e.nextSibling);
+      });
+    </script>
+    <noscript>Please enable JavaScript to view the comments</noscript>
+<% } %>

package/layout/_partials/header/banner.ejs

@@ -1,7 +1,7 @@
 <%
 var banner_img = page.banner_img || theme.index.banner_img
-var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height) || 100
-var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha) || 0.3
+var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
+var banner_mask_alpha = parseFloat(page.banner_mask_alpha || theme.index.banner_mask_alpha)
 var subtitle = page.subtitle || page.title
 %>
 

package/layout/_partials/header.ejs

@@ -1,5 +1,5 @@
 <%
-var banner_img_height = parseInt(page.banner_img_height || theme.index.banner_img_height, 10) || 100
+var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
 %>
 
 <div class="header-inner" style="height: <%= banner_img_height %>vh;">

package/layout/_partials/post/copyright.ejs

@@ -27,7 +27,7 @@
           <div><%= full_date(page.date, theme.post.copyright.post_date.format || 'LL') %></div>
         </div>
       <% } %>
-      <% if (theme.post.copyright.update_date.enable && page.updated) { %>
+      <% if (theme.post.copyright.update_date.enable && page.updated && compare_date(page.date, page.updated)) { %>
         <div class="license-meta-item license-meta-date">
           <div><%- __('post.copyright.updated') %></div>
           <div><%= full_date(page.updated, theme.post.copyright.update_date.format || 'LL') %></div>

package/layout/index.ejs

@@ -10,7 +10,7 @@ page.banner_mask_alpha = theme.index.banner_mask_alpha
 <% page.posts.each(function (post) { %>
   <div class="row mx-auto index-card">
     <% var post_url = url_for(post.path), index_img = post.index_img || theme.post.default_index_img %>
-    <% if(index_img) { %>
+    <% if (index_img) { %>
       <div class="col-12 col-md-4 m-auto index-img">
         <a href="<%= post_url %>" target="<%- theme.index.post_url_target %>">
           <img src="<%= url_for(index_img) %>" alt="<%= post.title %>">
@@ -27,15 +27,15 @@ page.banner_mask_alpha = theme.index.banner_mask_alpha
         </a>
       </h1>
 
-      <a class="index-excerpt" href="<%= post_url %>" target="<%- theme.index.post_url_target %>">
+      <% var excerpt = post.description || post.excerpt || (theme.index.auto_excerpt.enable && post.content) %>
+      <a class="index-excerpt <%= index_img ? '' : 'index-excerpt__noimg' %>" href="<%= post_url %>" target="<%- theme.index.post_url_target %>">
         <div>
-          <% var excerpt = post.description || post.excerpt || (theme.index.auto_excerpt.enable && post.content) %>
           <%- escape_html(strip_html(excerpt).substring(0, 200).trim()).replace(/\n/g, ' ') %>
         </div>
       </a>
 
       <div class="index-btm post-metas">
-        <% if(theme.index.post_meta.date ) { %>
+        <% if (theme.index.post_meta.date) { %>
           <div class="post-meta mr-3">
             <i class="iconfont icon-date"></i>
             <time datetime="<%= full_date(post.date, 'YYYY-MM-DD HH:mm') %>" pubdate>
@@ -43,13 +43,13 @@ page.banner_mask_alpha = theme.index.banner_mask_alpha
             </time>
           </div>
         <% } %>
-        <% if(theme.index.post_meta.category && post.categories.length > 0) { %>
+        <% if (theme.index.post_meta.category && post.categories.length > 0) { %>
           <div class="post-meta mr-3 d-flex align-items-center">
             <i class="iconfont icon-category"></i>
             <%- partial('_partials/category-chains', { categories: post.categories, limit: 1 }) %>
           </div>
         <% } %>
-        <% if(theme.index.post_meta.tag && post.tags.length > 0) { %>
+        <% if (theme.index.post_meta.tag && post.tags.length > 0) { %>
           <div class="post-meta">
             <i class="iconfont icon-tags"></i>
             <% post.tags.each(function(tag){ %>

package/layout/layout.ejs

@@ -1,5 +1,5 @@
 <%
-var banner_img_height = parseInt(page.banner_img_height || theme.index.banner_img_height, 10) || 100
+var banner_img_height = parseFloat(page.banner_img_height || theme.index.banner_img_height)
 var colorSchema = theme.dark_mode && theme.dark_mode.enable && theme.dark_mode.default ? theme.dark_mode.default : ''
 %>
 

package/layout/post.ejs

@@ -16,7 +16,7 @@ page.banner_mask_alpha = page.banner_mask_alpha || theme.post.banner_mask_alpha
           <article class="post-content mx-auto">
             <!-- SEO header -->
             <h1 style="display: none"><%= page.subtitle || page.title %></h1>
-            <% if(theme.post.updated && theme.post.updated.enable) { %>
+            <% if (theme.post.updated.enable && theme.post.updated && compare_date(page.date, page.updated)) { %>
               <p class="note note-<%= theme.post.updated.note_class || 'info' %>">
                 <% if (theme.post.updated.relative) { %>
                   <% if (theme.post.updated.content) { %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-fluid",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "An elegant Material-Design theme for Hexo.",
   "main": "package.json",
   "files": [

package/scripts/events/lib/highlight.js

@@ -134,7 +134,7 @@ module.exports = (hexo) => {
             .replace(/<span[^>]+?>(.+?)<\/span>/gims, '$1');
           return str;
         }
-        return `<div class="code-wrapper">${str}</div>`;
+        return `<figure><div class="code-wrapper">${str}</div></figure>`;
       });
 
       // 适配缩进型代码块

package/scripts/helpers/date.js

@@ -0,0 +1,25 @@
+/* global hexo */
+
+'use strict';
+
+const moment = require('moment');
+const { isMoment } = moment;
+
+hexo.extend.helper.register('compare_date', function(date1, date2) {
+  if (!date1) {
+    return -1;
+  }
+  if (!date2) {
+    return 1;
+  }
+  const m1 = isMoment(date1) ? date1 : moment(date1);
+  const m2 = isMoment(date2) ? date2 : moment(date2);
+  const diff = m1.diff(m2);
+  if (diff < 0) {
+    return -1;
+  } else if (diff > 0) {
+    return 1;
+  } else {
+    return 0;
+  }
+});

package/source/css/_pages/_base/_widget/pagination.styl

@@ -6,7 +6,7 @@
   .space
     align-self flex-end
 
-  a, .current
+  .page-number, .current, .extend
     outline 0
     border 0
     background-color transparent
@@ -14,7 +14,10 @@
     padding .5rem .75rem
     line-height 1.25
     border-radius .125rem
-    transition background-color .2s ease-in-out
 
-  a:hover, .current
+  .page-number
+    margin 0 .05rem
+
+  .page-number:hover, .current
+    transition background-color .2s ease-in-out
     background-color var(--link-hover-bg-color)

package/source/css/_pages/_index/index.styl

@@ -45,7 +45,6 @@
   height calc(1.4rem * 3)
   overflow hidden
   display flex
-  align-items center
 
   & > div
     width 100%
@@ -55,6 +54,10 @@
     -webkit-box-orient vertical
     -webkit-line-clamp 3
 
+.index-excerpt__noimg
+  height auto
+  max-height calc(1.4rem * 3)
+
 @media (max-width: 767px)
   .index-info
     padding-top 1.25rem

package/source/css/_pages/_post/highlight.styl

@@ -9,6 +9,7 @@
     padding-top 1.45rem
     padding-bottom 1.45rem
     padding-right 1rem
+    line-height 1.5
 
   .code-wrapper
     position relative

package/source/js/color-schema.js

@@ -226,16 +226,25 @@
     // 设置 utterances 评论主题
     var utterances = document.querySelector('.utterances-frame');
     if (utterances) {
-      var theme = window.UtterancesThemeLight;
-      if (schema === 'dark') {
-        theme = window.UtterancesThemeDark;
-      }
+      var utterancesTheme = schema === 'dark' ? window.UtterancesThemeDark : window.UtterancesThemeLight;
       const message = {
         type : 'set-theme',
-        theme: theme
+        theme: utterancesTheme
       };
       utterances.contentWindow.postMessage(message, 'https://utteranc.es');
     }
+
+    // 设置 giscus 评论主题
+    var giscus = document.querySelector('iframe.giscus-frame');
+    if (giscus) {
+      var giscusTheme = schema === 'dark' ? window.GiscusThemeDark : window.GiscusThemeLight;
+      const message = {
+        setConfig: {
+          theme: giscusTheme,
+        }
+      };
+      giscus.contentWindow.postMessage({ 'giscus': message }, 'https://giscus.app');
+    }
   }
 
   // 当页面加载时，将显示模式设置为 localStorage 中自定义的值（如果有的话）