hexo-theme-stellar 1.6.1 → 1.7.0

package/_config.yml

@@ -1,6 +1,6 @@
 ######## Stellar info ########
 stellar:
-  version: '1.6.1'
+  version: '1.7.0'
   homepage: 'https://xaoxuu.com/wiki/stellar/'
   repo: 'https://github.com/xaoxuu/hexo-theme-stellar'
   cdn_css: # Use cdn links instead of /css/main.css
@@ -179,12 +179,23 @@ tag_plugins:
   # {% checkbox %}
   checkbox:
     interactive: false # enable interactive for user
+  # {% quot %}
+  quot:
+    default: # 可以自行配置多种图标方案
+      prefix: https://s2.loli.net/2022/01/04/vsTB5pGrIHfPxSj.png
+      suffix: https://s2.loli.net/2022/01/04/NORdtjlAhifZSns.png
+    hashtag:
+      prefix: https://s2.loli.net/2022/01/04/UvHcsa73jQPnobq.png
+  # {% emoji %}
   emoji:
     default: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif
     twemoji: https://cdn.jsdelivr.net/gh/twitter/twemoji/assets/svg/%s.svg
     qq: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/qq/%s.gif
     aru: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/aru-l/%s.gif
     tieba: https://cdn.jsdelivr.net/gh/volantis-x/cdn-emoji/tieba/%s.png
+  # {% image %}
+  image:
+    fancybox: # true, false
 
 
 ######## JS Plugins ########
@@ -193,14 +204,6 @@ plugins:
   # jquery
   jquery: https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js
 
-  ## lazyload plugins ##
-  # fancybox
-  fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css
-  # swiper
-  swiper:
-    enable: true
-    css: https://unpkg.com/swiper@6/swiper-bundle.min.css
-    js: https://unpkg.com/swiper@6/swiper-bundle.min.js
   # issues api
   sitesjs: /js/plugins/sites.js
   friendsjs: /js/plugins/friends.js
@@ -229,6 +232,32 @@ plugins:
     interval: 100 # ms
     scale: 1 # 0.1~1
 
+  # https://fancyapps.com/docs/ui/fancybox/
+  # available for {% image xxx %}
+  fancybox:
+    enable: true
+    js: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
+    css: https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css
+    # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
+    # 使用valine评论可以写: .vcontent img:not(.vemoji)
+    # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
+    selector: .swiper-slide img # 多个选择器用英文逗号隔开
+
+  # swiper
+  swiper:
+    enable: true
+    css: https://unpkg.com/swiper@6/swiper-bundle.min.css
+    js: https://unpkg.com/swiper@6/swiper-bundle.min.js
+
+
+  # 赫蹏 (Heti) - 专为中文网页内容设计的排版样式增强
+  # https://github.com/sivan/heti
+  heti:
+    enable: false
+    css: https://unpkg.com/heti/umd/heti.min.css
+    js: https://unpkg.com/heti/umd/heti-addon.min.js
+
+
 style:
   darkmode: auto # auto / always / false
   theme:

package/layout/_partial/cover/index.ejs

@@ -0,0 +1,12 @@
+<%
+function layoutCover() {
+  if (page.layout == 'wiki') {
+    return partial('wiki_cover');
+  }
+  if (page.layout == 'post') {
+    return partial('post_cover');
+  }
+  return '';
+}
+%>
+<%- layoutCover() %>

package/layout/_partial/cover/post_cover.ejs

@@ -0,0 +1,19 @@
+<%
+function div() {
+  var el = '';
+  if (page.banner == undefined || page.banner == false) {
+    return el;
+  }
+  el += '<div class="l_cover post' + scrollreveal() + '">';
+  el += '<div class="cover">';
+  if (theme.plugins.lazyload && theme.plugins.lazyload.enable) {
+    el += '<div class="lazy img bg" data-bg="' + page.banner + '"></div>';
+  } else {
+    el += '<div class="lazy img bg" style="background-image:url(&quot;' + page.banner + '&quot;)"></div>';
+  }
+  el += '</div>';
+  el += '</div>';
+  return el;
+}
+%>
+<%- div() %>

package/layout/_partial/{main/article → cover}/wiki_cover.ejs

@@ -1,9 +1,6 @@
 <%
 function layoutWikiCover() {
   var el = '';
-  if (page.layout !== 'wiki') {
-    return el;
-  }
   let proj = theme.wiki.projects[page.wiki];
   if (proj == undefined) {
     return el;
@@ -21,7 +18,7 @@ function layoutWikiCover() {
   if (cover === true) {
     cover = ['logo', 'title', 'description'];
   }
-  el += '<div class="l_cover' + scrollreveal() + '">';
+  el += '<div class="l_cover wiki' + scrollreveal() + '">';
   el += '<article class="cover-wrap md">';
 
   if (logo && logo.src && cover.includes('logo')) {

package/layout/_partial/head.ejs

@@ -51,6 +51,7 @@ function og_args() {
   <meta http-equiv='x-dns-prefetch-control' content='on' />
   <link rel='dns-prefetch' href='https://cdn.jsdelivr.net'>
   <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
+  <link rel='dns-prefetch' href='//unpkg.com'>
 
   <meta name="renderer" content="webkit">
   <meta name="force-rendering" content="webkit">
@@ -61,6 +62,15 @@ function og_args() {
   <meta name="theme-color" content="#f8f8f8">
   <title><%- generate_title() %></title>
 
+  <% if (theme.heti) { %>
+    <link rel="stylesheet" href="//unpkg.com/heti/umd/heti.min.css">
+    <script src="//unpkg.com/heti/umd/heti-addon.min.js"></script>
+    <script defer>
+      const heti = new Heti('.heti');
+      heti.autoSpacing(); // 自动进行中西文混排美化和标点挤压
+    </script>
+  <% } %>
+
   <% if (theme.open_graph && theme.open_graph.enable) { %>
     <%- open_graph(og_args()) %>
   <% } %>

package/layout/_partial/main/post_list/post_card.ejs

@@ -1,6 +1,8 @@
 <%
-function layoutDiv() {
+function div_default() {
   var el = '';
+  el += '<article class="md">';
+
   // 封面
   if (post.cover || theme.article.auto_cover) {
     var cover_url;
@@ -38,7 +40,11 @@ function layoutDiv() {
   el += '</h2>';
 
   // 摘要
-  el += '<div class="excerpt">';
+  el += '<div class="excerpt';
+  if (theme.plugins.heti && theme.plugins.heti.enable) {
+    el += ' heti';
+  }
+  el += '">';
   el += '<p>';
   if (post.excerpt) {
     el += strip_html(post.excerpt);
@@ -76,9 +82,41 @@ function layoutDiv() {
   if (post.pin) {
     el += '<span class="pin"><img src="https://cdn.jsdelivr.net/gh/cdn-x/placeholder@1.0.1/badge/3279dd441df8b.svg"/></span>';
   }
-  el += '<div>';
+  el += '</div>';
+  el += '</article>';
+  return el;
+}
+function div_photo() {
+  var el = '';
+  el += '<div class="cover">';
+  el += '<img src="' + post.cover + '"/>';
+  if (post.cover_info) {
+    el += '<div class="cover-info"';
+    if (post.cover_info.meta) {
+      el += 'position="top">';
+    } else {
+      el += 'position="bottom">';
+    }
+    if (post.cover_info.meta) {
+      el += '<div class="cap">' + post.cover_info.meta + '</div>';
+    }
+    if (post.cover_info.title) {
+      el += '<div class="title">' + post.cover_info.title + '</div>';
+    }
+    if (post.cover_info.subtitle) {
+      el += '<div class="cap">' + post.cover_info.subtitle + '</div>';
+    }
+    el += '</div>';
 
+  }
+  el += '</div>';
   return el;
 }
+function div() {
+  if (post.cover && post.cover.length > 0 && post.cover_info != undefined) {
+    return div_photo();
+  }
+  return div_default();
+}
 %>
-<%- layoutDiv() %>
+<%- div() %>

package/layout/_partial/main/post_list/wiki_card.ejs

@@ -1,6 +1,7 @@
 <%
 function layoutDiv() {
   var el = '';
+  el += '<article class="md">';
   if (proj.logo && proj.logo.src) {
     el += '<div class="preview">';
     el += '<img src="' + proj.logo.src + '" alt="logo"';
@@ -20,6 +21,7 @@ function layoutDiv() {
     el += '<p>' + proj.description + '</p>';
   }
   el += '</div>';
+  el += '</article>';
   return el;
 }
 %>

package/layout/_partial/scripts/index.ejs

@@ -121,6 +121,12 @@
   if ('<%- theme.plugins.preload.enable %>' == 'true') {
     stellar.plugins.preload = Object.assign(<%- JSON.stringify(theme.plugins.preload) %>);
   }
+  if ('<%- theme.plugins.fancybox.enable %>' == 'true') {
+    stellar.plugins.fancybox = Object.assign(<%- JSON.stringify(theme.plugins.fancybox) %>);
+  }
+  if ('<%- theme.plugins.heti.enable %>' == 'true') {
+    stellar.plugins.heti = Object.assign(<%- JSON.stringify(theme.plugins.heti) %>);
+  }
 </script>
 
 <!-- required -->

package/layout/_partial/sidebar/widgets/recent.ejs

@@ -27,29 +27,21 @@ function layoutDiv() {
   }
   el += '<div class="widget-body fs14">';
   arr.sort("updated", -1).limit(item.limit).each(function(post) {
-    el += '<div class="line"></div>'
-    el += '<a class="more-item" href="' + url_for(post.link || post.path) + '">';
-    el += '<div class="cap">';
-    el += '<time>' + date(post.updated, config.date_format) + '</time>';
+    el += '<div class="more-item">';
+    el += '<a class="title" href="' + url_for(post.link || post.path) + '">';
     if (post.layout == 'wiki') {
       el += '<span>';
       let proj = theme.wiki.projects[post.wiki];
       if (proj && proj.title) {
-        el += proj.title;
+        el += proj.title + __('symbol.colon');
       } else if (post.wiki) {
-        el += post.wiki;
+        el += post.wiki + __('symbol.colon');
       }
       el += '</span>';
-    } else {
-      post.categories.limit(1).forEach((cat, i) => {
-        el += '<span>' + cat.name + '</span>';
-      });
     }
-    el += '</div>';
-    el += '<span class="title">';
     el += post.title || post.seo_title || post.wiki;
-    el += '</span>';
     el += '</a>';
+    el += '</div>';
     el += '';
   });
   el += '</div>';

package/layout/index.ejs

@@ -12,10 +12,13 @@ if (page.title && page.wiki) {
 
 function layout_post_card(layout, post, content) {
   var el = '';
+  var layout = layout;
+  if (layout == 'post' && post.cover != undefined && post.cover_info != undefined) {
+    layout += ' photo';
+  }
   el += '<a class="post-card ' + layout + ' ' + scrollreveal() + '" href="' + url_for(post.link || post.path) + '">';
-  el += '<article class="md">';
   el += content;
-  el += '</article></a>';
+  el += '</a>';
   return el;
 }
 

package/layout/layout.ejs

@@ -2,7 +2,7 @@
 <html lang='<%- page.lang %>'>
 <%- partial('_partial/head') %>
 <body>
-  <%- partial('_partial/main/article/wiki_cover') %>
+  <%- partial('_partial/cover/index') %>
   <div class='l_body' id='start'>
     <aside class='l_left' layout='<%- page.layout %>'>
     <%- partial('_partial/sidebar/index') %>

package/layout/post.ejs

@@ -13,10 +13,14 @@ function layoutTitle() {
     return '';
   }
 }
+let post = page;
+let heti = '';
+if (theme.plugins.heti && theme.plugins.heti.enable) {
+  heti = ' heti';
+}
 %>
-<% let post = page; %>
 <%- partial('_partial/main/navbar/breadcrumb') %>
-<article class='content md <%- post.layout %><%- scrollreveal() %>'>
+<article class='content<%- heti %> md <%- post.layout %><%- post.indent ? ' indent' : '' %><%- scrollreveal() %>'>
 <%- layoutTitle() %>
 <%- post.content %>
 <%- partial('_partial/main/article/article_footer') %>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-stellar",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Elegant and powerful theme for Hexo.",
   "main": "package.json",
   "scripts": {

package/scripts/events/index.js

@@ -10,11 +10,9 @@ hexo.on('generateBefore', () => {
 });
 
 hexo.on('ready', () => {
-  const { version } = require('../../package.json');
-  hexo.log.info(`
-=======================================================
-  Stellar ${version}
-  Docs: https://xaoxuu.com/wiki/stellar/
-  Repo: https://github.com/xaoxuu/hexo-theme-stellar/
-=======================================================`);
+  const { version, homepage, repository } = require('../../package.json');
+  hexo.log.info(`Welcome to Stellar ${version}
+DOCS  ${homepage}
+REPO  ${repository.url}
+  `);
 });

package/scripts/tags/image.js

@@ -8,7 +8,7 @@
 'use strict';
 
 hexo.extend.tag.register('image', function(args) {
-  args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding'], ['src', 'alt']);
+  args = hexo.args.map(args, ['width', 'height', 'bg', 'download', 'padding', 'fancybox'], ['src', 'alt']);
   var style = '';
   if (args.width) {
     style += 'width:' + args.width + ';';
@@ -16,12 +16,32 @@ hexo.extend.tag.register('image', function(args) {
   if (args.height) {
     style += 'height:' + args.height + ';';
   }
+  // fancybox
+  var fancybox = false;
+  if (hexo.theme.config.plugins.fancybox && hexo.theme.config.plugins.fancybox.enable) {
+    // 主题配置
+    if (hexo.theme.config.tag_plugins.image && hexo.theme.config.tag_plugins.image.fancybox) {
+      fancybox = hexo.theme.config.tag_plugins.image.fancybox;
+    }
+    // 覆盖配置
+    if (args.fancybox && args.fancybox.length > 0) {
+      if (args.fancybox == 'true') {
+        fancybox = true;
+      } else if (args.fancybox == 'false') {
+        fancybox = false;
+      }
+    }
+  }
+
   function img(src, alt, style) {
     let img = '';
     img += '<img src="' + src + '"';
     if (alt) {
       img += ' alt="' + alt + '"';
     }
+    if (fancybox) {
+      img += ' fancybox="true"';
+    }
     if (style.length > 0) {
       img += ' style="' + style + '"';
     }

package/scripts/tags/poetry.js

@@ -0,0 +1,48 @@
+/**
+ * poetry.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * poetry:
+ * {% poetry [align:center] [title] [author:作者] [date:日期] [footer:footer] %}
+ * body
+ * {% endpoetry %}
+ *
+ */
+
+'use strict';
+
+hexo.extend.tag.register('poetry', function(args, content) {
+  var el = '';
+  args = hexo.args.map(args, ['author', 'date', 'align', 'footer'], ['title']);
+
+  el += '<div class="tag-plugin poetry"';
+  if (args.align) {
+    el += ' align="' + args.align + '"';
+  }
+  el += '>';
+  if (args.title) {
+    el += '<div class="title">';
+    el += args.title;
+    el += '</div>';
+  }
+  if (args.author || args.date) {
+    el += '<div class="meta">';
+    if (args.author) {
+      el += '<span>' + args.author + '</span>';
+    }
+    if (args.date) {
+      el += '<span>' + args.date + '</span>';
+    }
+    el += '</div>';
+  }
+  el += '<div class="body">';
+  el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  el += '</div>';
+  if (args.footer) {
+    el += '<div class="footer">';
+    el += args.footer;
+    el += '</div>';
+  }
+  el += '</div>';
+  return el;
+}, {ends: true});

package/scripts/tags/quot.js

@@ -0,0 +1,51 @@
+/**
+ * quot.js v1.1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * quot:
+ * {% quot [el:h1] [icon:default] text %}
+ *
+ */
+
+'use strict';
+
+hexo.extend.tag.register('quot', function(args) {
+  var el = '';
+  args = hexo.args.map(args, ['el', 'icon'], ['text']);
+  if (!args.el) {
+    args.el = 'p';
+  }
+
+  var type = '';
+  if (args.icon && args.icon != 'square' && args.icon != 'quotes') {
+    type = ' type="icon"';
+  } else {
+    type = ' type="text"';
+  }
+  function content() {
+    if (!args.icon) {
+      return args.text;
+    }
+    var el = '';
+    const cfg = hexo.theme.config.tag_plugins.quot[args.icon];
+    if (cfg && cfg.prefix) {
+      el += '<img class="icon prefix" src="' + cfg.prefix + '" />';
+    }
+    el += args.text;
+    if (cfg && cfg.suffix) {
+      el += '<img class="icon suffix" src="' + cfg.suffix + '" />';
+    }
+    return el;
+  }
+  if (args.el.includes('h')) {
+    el += '<' + args.el + ' class="tag-plugin quot"' + type + ' id="' + args.text + '">';
+    el += '<a href="#' + args.text + '" class="headerlink" title="' + args.text + '"></a>';
+    el += content();
+    el += '</' + args.el + '>';
+  } else {
+    el += '<' + args.el + ' class="tag-plugin quot"' + type + '>';
+    el += content();
+    el += '</' + args.el + '>';
+  }
+  return el;
+});

package/source/css/_common/highlight.styl

@@ -10,7 +10,7 @@ code
   border-radius: 4px
 
 article.md .highlight
-  margin: 1rem 0
+  margin: var(--gap-p) 0
   border-radius: $border-block
   overflow: hidden
   background: var(--block)

package/source/css/_custom.styl

@@ -5,6 +5,7 @@ $color-theme = #1BCDFC
 $color-link = #2196f3
 $color-button = #1BCDFC
 $color-hover = #ff5722
+$color-highlight = #ff5722
 $color-inner = #fff
 $color-cat = #FF7844
 $color-cat-hover = darken($color-cat, 20)
@@ -47,7 +48,7 @@ $fs-14 = .875rem
 $fs-13 = .8125rem
 $fs-12 = .75rem
 
-$fs-h1   = 2rem   // 32px
+$fs-h1   = 1.75rem   // 32px
 $fs-h2   = 1.5rem // 24px
 $fs-h3   = 1.375rem  // 22px
 $fs-h4   = 1.125rem  // 18px
@@ -63,14 +64,14 @@ $border-image = 6px
 // 可以动态变化的属性
 :root
   --width-left: 256px
-  --width-main: 680px
+  --width-main: 720px
   --gap-l: 16px
-  --gap-p: 1.25rem // gap for paragraph
+  --gap-p: .75rem // gap for paragraph
   // desktop 2k or larger
   @media screen and (min-width: $device-2k)
     --gap-l: 32px
     --width-left: 320px
-    --width-main: 740px
+    --width-main: 780px
   // desktop 4k or larger
   @media screen and (min-width: $device-4k)
     --width-main: 860px

package/source/css/_layout/list.styl

@@ -11,15 +11,18 @@
   trans1 box-shadow
   overflow: hidden
   background: var(--card)
+  position: relative
   .excerpt
     margin: 1rem 0
     >p
       margin: 1rem 0
+      line-height: 1.5
   .meta.cap
     display: flex
     flex-wrap: wrap
     align-items: center
     margin: .5rem 0
+    line-height: 1.5
     span+span
       margin-left: 0.5rem
     span.pin
@@ -28,49 +31,76 @@
         object-fit: contain
         height: 1.5em
 .post-list .post-card:hover
-  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.08), 0 2px 8px 0px rgba(0, 0, 0, 0.06), 0 4px 16px 0px rgba(0, 0, 0, 0.04)
+  box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 16px 0px rgba(0, 0, 0, 0.1)
 
 
 // common article
-.post-list article
+.post-list article.md
   padding: 1rem
+  p
+    color: var(--text-p2)
+    @media screen and (min-width: $device-mobile)
+      font-size: $fs-14
+
 
 // posts
-.post-list .post-card
-  .post-cover
-    overflow: hidden
-    margin-left: -1rem
-    margin-top: -1rem
-    margin-right: -1rem
+.post-list .post-card .post-cover
+  overflow: hidden
+  width: 'calc(100% + 2 * %s)' % 1rem
+  border-radius: 0
+  margin-left: -1rem
+  margin-top: -1rem
+  margin-right: -1rem
+  &:not(.lazy)
+    trans1: transform 1s
+  img
+    object-fit: cover
+    width: 100%
+    border-radius: 0
+    height: 280px
+    @media screen and (max-width: 900px)
+      height: 240px
+    @media screen and (max-width: $device-tablet)
+      height: 280px
+    @media screen and (max-width: $device-mobile)
+      height: 240px
+    @media screen and (max-width: $device-mobile-425)
+      height: 220px
+    @media screen and (max-width: $device-mobile-375)
+      height: 180px
+
+.post-list .post-card.post.photo
+  .cover
+    position: relative
+    line-height: 0
     img
-      object-fit: cover
       width: 100%
-      border-radius: 0
-      height: 280px
-      @media screen and (max-width: 900px)
-        height: 240px
-      @media screen and (max-width: $device-tablet)
-        height: 280px
-      @media screen and (max-width: $device-mobile)
-        height: 240px
-      @media screen and (max-width: $device-mobile-425)
-        height: 220px
-      @media screen and (max-width: $device-mobile-375)
-        height: 180px
-      &:not(.lazy)
-        trans1: transform 1s
-.post-list .post-card.post.photo .post-cover img
-  height: 400px
-  @media screen and (max-width: 900px)
-    height: 320px
-  @media screen and (max-width: $device-tablet)
-    height: 400px
-  @media screen and (max-width: $device-mobile)
-    height: 320px
-  @media screen and (max-width: $device-mobile-425)
-    height: 280px
-  @media screen and (max-width: $device-mobile-375)
-    height: 240px
+    .cover-info
+      padding: 1rem
+      position: absolute
+      line-height: 1.2
+      width: 'calc(100% - %s * 2)' % 1rem
+      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)
+      color: white
+      &[position=top]
+        top: 0
+        background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3),rgba(0,0,0,0))
+      &[position=bottom]
+        bottom: 0
+        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.3),rgba(0,0,0,0.4))
+      div+div
+        margin-top: 8px
+        @media screen and (max-width: $device-mobile)
+          margin-top: 4px
+      .cap
+        color: white
+        font-size: $fs-13
+      .title
+        font-weight: 500
+        font-size: $fs-h3
+  h2
+    margin: .25rem 0
+    font-size: $fs-h4
 
 
 // wiki

package/source/css/_layout/main.styl

@@ -1,9 +1,9 @@
 .l_main
   position: relative
   padding-bottom: "calc(1 * %s)" % var(--gap-l)
-  @media screen and (min-width: 1200px)
+  @media screen and (min-width: 1280px)
     margin-left: "calc(2 * %s)" % var(--gap-l)
-    margin-right: "calc(0.75 * %s)" % var(--width-left)
+    margin-right: "calc(2 * %s + %s)" % (var(--gap-l) var(--width-left))
   @media screen and (min-width: $device-tablet)
     padding-top: "calc(2 * %s)" % var(--gap-l)
   header

package/source/css/_layout/md.styl

@@ -10,16 +10,29 @@ article.md.excerpt
     font-size: $fs-14
     margin: 1em 0
 
+h1.article-title
+  margin-top: .5em
+  margin-bottom: 1em
+  line-height: 1.2
+  color: var(--text-p0)
+
 article.md.content
   position: relative
   margin-bottom: 2rem
+  display: flex
+  flex-direction: column
+  &.indent
+    >p:not([class])
+      text-indent: 'calc(%s * 2)' % $fs-p
+      text-align: justify
+    h1,h2,h3,h4,h5,h6
+      text-align: center
+    >h2:not([class])
+      align-self: center
+      border-bottom-style: dashed
+      border-bottom-color: $color-highlight
   >:first-child
-    margin-top: 0
-  h1.article-title
-    margin-top: .5em
-    margin-bottom: 1em
-    line-height: 1.2
-    color: var(--text-p0)
+    margin-top: 1rem
   h1:not(:first-child)
     margin-top: 2em
   h2:first-child
@@ -27,12 +40,14 @@ article.md.content
   h2,h3,h4,h5,h6
     color: var(--text-p0)
     padding-top: 1rem
-    margin-bottom: 1em
+    margin-bottom: .5rem
     line-height: 1.8
     &:hover
       a.headerlink:before
         opacity: 1
 
+
+
 .md
   ul:not(:last-child),
   ol:not(:last-child)
@@ -45,11 +60,17 @@ article.md.content
   p,blockquote,.tag-plugin,ul,ol,.highlight,table
     *
       --gap-p: .5rem
-  p,.tag-plugin
+  p,>ul:not(:last-child),>ol:not(:last-child)
+    margin-top: 'calc(%s - 4px)' % var(--gap-p)
+    margin-bottom: 'calc(%s - 4px)' % var(--gap-p)
+  .tag-plugin,iframe
     margin-top: var(--gap-p)
     margin-bottom: var(--gap-p)
+  p,.tag-plugin
     .highlight,table
       --gap-p: 1rem
+  iframe
+    display: block
 
 // titles
 article.md.content
@@ -59,7 +80,7 @@ article.md.content
     position: absolute
     margin-left: -0.75em
   h2
-    margin-top: 3rem
+    margin-top: 2rem
     border-bottom: 1px solid var(--block-border)
     font-weight: 400
   h3
@@ -93,6 +114,10 @@ article.md pre
   -webkit-font-smoothing: auto
   -moz-osx-font-smoothing: auto
 
+article.md
+  .center
+    align-self: center
+
 // div
 article.md>div
   margin: var(--gap-p) 0

package/source/css/_layout/pages/archives.styl

@@ -1,4 +1,5 @@
 .post-list #archive
+  padding: 1rem
   .archive-header
     display: inline-block
     font-family: $ff-code

package/source/css/_layout/partial/cover.styl

@@ -5,9 +5,59 @@
   flex-direction: column
   justify-content: center
   align-items: center
+  position: relative
+  &.post
+    height: inherit
+
 
 .l_cover .cover-wrap
   margin-bottom: 0
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    line-height: 1.2
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: 2rem 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
+
+.l_cover.post
+  .cover
+    z-index: -1
+    width: 100%
+    height: 30vh
+    max-width: $device-2k
+    min-height: 150px
+    max-height: 400px
+    @media screen and (max-width: $device-tablet)
+      height: 25vh
+    @media screen and (max-width: $device-mobile)
+      height: 20vh
+    @media screen and (min-width: $device-2k)
+      margin-top: 4rem
+      .img
+        border-radius: 2rem
+
+
+.l_cover.post .cover-wrap
+  z-index: 1
+  .article-title
+    text-align: center
+    padding: 1rem
+    margin: 1em 0 0 0
+    @media screen and (min-width: $device-2k)
+      font-size: 3rem
+
+
+.l_cover.wiki .cover-wrap
   max-width: $device-mobile
   .preview
     margin-bottom: 2rem
@@ -18,15 +68,5 @@
       @media screen and (max-width: $device-mobile)
         max-width: 60%
   .cover-title
-    font-weight: 700
-    font-size: 1.5rem
-    margin: 1rem 0
     &:first-child
       font-size: 3rem
-  .description
-    margin: 1rem 0
-  .start-wrap
-    margin: 2rem 0
-    flex-shrink: 0
-    a.start
-      display: inline-block

package/source/css/_layout/sidebar/sidebar.styl

@@ -164,7 +164,9 @@ nav.menu
       background: var(--site-bg)
       padding-top: 2px
       z-index 1
-      line-height: 2.4
+      line-height: 2
+      color: var(--text-p4)
+      font-size: $fs-14
       &:empty
         display: none
       .cap-action
@@ -190,7 +192,21 @@ nav.menu
           text-decoration: underline
     .widget-header+.widget-body
       margin-top: 0
-  .widget-wrap#recent .widget-body, .widget-wrap#related .widget-body
+
+  .widget-wrap .widget-body
+    .more-item
+      margin: .5rem 0
+      .cap
+        margin-bottom: .25rem
+  .widget-wrap#recent .widget-body
+    a
+      line-height: 1.2
+      font-weight: 500
+      color: var(--text-p2)
+      font-size: $fs-13
+      &:hover
+        color: $color-hover
+  .widget-wrap#related .widget-body
     >a
       padding 0.5rem
       display: block

package/source/css/_layout/tag-plugins/folding.styl

@@ -57,6 +57,7 @@ details.folding[open]
 details.folding[child=codeblock]>div.body
   padding: 0
   background: transparent
+  overflow: hidden
   .highlight
     border: none
     border-radius: 0

package/source/css/_layout/tag-plugins/image.styl

@@ -2,7 +2,6 @@
   margin-top: 1rem
   margin-bottom: 1rem
   .image-bg
-    line-height: 0
     text-align: center
     border-radius: $border-image
     position: relative
@@ -11,7 +10,7 @@
       .image-download
         opacity: 1 !important
     img
-      display: inline-block
+      display: block
       object-fit: cover
     .image-download
       position: absolute

package/source/css/_layout/tag-plugins/poetry.styl

@@ -0,0 +1,50 @@
+.md .tag-plugin.poetry
+  align-self: center
+  &[align=center]
+    align-items: center
+  >.title
+    font-weight: 500
+    font-size: 1rem
+    margin-top: var(--gap-p)
+  >.meta
+    color: var(--text-p2)
+    font-size: $fs-12
+    font-weight: 500
+    span+span
+      margin-left: 4px
+  >.body
+    margin: var(--gap-p) 0
+    border-top: 1px dashed var(--block-border)
+    border-bottom: 1px dashed var(--block-border)
+    p
+      font-size: $fs-14
+  >.footer
+    font-style: italic
+    color: var(--text-p4)
+    margin: var(--gap-p) 0
+    font-size: $fs-12
+
+// 描边修饰
+.md .tag-plugin.poetry
+  padding-left: 1rem
+  position: relative
+  &:before
+    content: ''
+    position: absolute
+    width: 4px
+    left: -4px
+    top: 4px
+    bottom: 4px
+    border-radius: 4px
+    background: var(--block)
+  >.title
+    position: relative
+    &:before
+      content: ''
+      position: absolute
+      width: 4px
+      left: calc(-1rem - 4px)
+      top: 6px
+      bottom: 6px
+      border-radius: 4px
+      background: $color-highlight

package/source/css/_layout/tag-plugins/quot.styl

@@ -0,0 +1,82 @@
+.md .tag-plugin.quot
+  text-align: center
+  position: relative
+  align-items: center
+.md .tag-plugin.quot:not(span)
+  display: flex
+  align-self: center
+  border-bottom: none
+  font-weight: 700
+  &:first-child
+    margin-top: 1.5rem
+  a.headerlink:before
+    content: ''
+  padding: 16px 24px 8px 24px
+  @media screen and (max-width: $device-mobile)
+    padding: 16px 20px 8px
+  line-height: 1.2
+
+// override
+article.md.content
+  .quot:not(span)
+    color: var(--text-p0)
+  h1.quot
+    font-size: $fs-h1
+    font-weight: 900
+    padding: 20px 32px 12px 32px
+    @media screen and (max-width: $device-mobile)
+      padding: 20px 24px 12px
+  h2.quot,h3.quot,h4.quot,h5.quot,h6.quot
+    font-size: $fs-h3
+  p.quot
+    font-size: $fs-h4
+
+// type=text
+.md .tag-plugin.quot[type=text]:not(span)
+  &:before,&:after
+    content: ""
+    position: absolute
+    width: 8px
+    height: 14px
+  &:before
+    top: 8px
+    left: 0
+    border-top: 6px solid $color-highlight
+    border-left: 6px solid $color-highlight
+  &:after
+    right: 0
+    bottom: 0
+    border-right: 6px solid $color-highlight
+    border-bottom: 6px solid $color-highlight
+article.md.content h1.quot[type=text]
+  &:before,&:after
+    width: 12px
+    height: 20px
+    border-width: 8px
+
+// type=icon
+.md .tag-plugin.quot[type=icon]:not(span)
+  .icon
+    height: 1.5em
+    display: inline-block
+    color: $color-highlight
+    border-radius: 0
+    &.prefix
+      margin-right: .5rem
+    &.suffix
+      margin-left: .5rem
+
+// inline quot
+.md span.tag-plugin.quot
+  font-weight: 500
+  &:before,&:after
+    color: $color-highlight
+    font-weight: 900
+  &:before
+    content: "「"
+    margin-left: -0.125em
+    margin-right: 0.125em
+  &:after
+    content: "」"
+    margin-left: 0.125em
+    margin-right: -0.125em

package/source/css/_plugins/fancybox.styl

@@ -0,0 +1,5 @@
+img[fancybox='true']
+  cursor: zoom-in
+
+.swiper-slide
+  cursor: zoom-in

package/source/css/_plugins/index.styl

@@ -5,6 +5,8 @@ if hexo-config('plugins.swiper.enable')
   @import 'swiper'
 if hexo-config('plugins.scrollreveal.enable')
   @import 'scrollreveal'
+if hexo-config('plugins.fancybox.enable')
+  @import 'fancybox'
 
 // 评论
 if hexo-config('comments.service') == 'beaudar'

package/source/js/main.js

@@ -59,16 +59,16 @@ const util = {
 
 const hud = {
   toast: (msg, duration) => {
-    duration=isNaN(duration)?2000:duration;
+    duration = isNaN(duration) ? 2000 : duration;
     var el = document.createElement('div');
     el.classList.add('toast');
     el.innerHTML = msg;
     document.body.appendChild(el);
-    setTimeout(function() {
+    setTimeout(function () {
       var d = 0.5;
       el.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
       el.style.opacity = '0';
-      setTimeout(function() { document.body.removeChild(el) }, d * 1000);
+      setTimeout(function () { document.body.removeChild(el) }, d * 1000);
     }, duration);
   },
 
@@ -96,7 +96,7 @@ const init = {
         segs.push(node)
       });
       // 滚动
-      $(document, window).scroll(function(e) {
+      $(document, window).scroll(function (e) {
         var scrollTop = $(this).scrollTop();
         var topSeg = null
         for (var idx in segs) {
@@ -124,7 +124,7 @@ const init = {
   },
   sidebar: () => {
     stellar.jQuery(() => {
-      $("#toc a.toc-link").click(function(e) {
+      $("#toc a.toc-link").click(function (e) {
         l_body.classList.remove("sidebar");
       });
     })
@@ -142,7 +142,7 @@ const init = {
   /**
    * Tabs tag listener (without twitter bootstrap).
    */
-  registerTabsTag: function() {
+  registerTabsTag: function () {
     // Binding `nav-tabs` & `tab-content` by real time permalink changing.
     document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
       element.addEventListener('click', event => {
@@ -192,7 +192,7 @@ if (stellar.plugins.scrollreveal) {
 
 // lazyload
 if (stellar.plugins.lazyload) {
-  stellar.loadScript(stellar.plugins.lazyload.js, {defer:true})
+  stellar.loadScript(stellar.plugins.lazyload.js, { defer: true })
   // https://www.npmjs.com/package/vanilla-lazyload
   // Set the options globally
   // to make LazyLoad self-initialize
@@ -217,16 +217,16 @@ if (stellar.plugins.lazyload) {
 if (stellar.plugins.sitesjs) {
   const issues_api = document.getElementById('sites-api');
   if (issues_api != undefined) {
-    stellar.jQuery( () => {
-      stellar.loadScript(stellar.plugins.sitesjs, {defer:true})
+    stellar.jQuery(() => {
+      stellar.loadScript(stellar.plugins.sitesjs, { defer: true })
     })
   }
 }
 if (stellar.plugins.friendsjs) {
   const issues_api = document.getElementById('friends-api');
   if (issues_api != undefined) {
-    stellar.jQuery( () => {
-      stellar.loadScript(stellar.plugins.friendsjs, {defer:true})
+    stellar.jQuery(() => {
+      stellar.loadScript(stellar.plugins.friendsjs, { defer: true })
     })
   }
 }
@@ -236,7 +236,7 @@ if (stellar.plugins.swiper) {
   const swiper_api = document.getElementById('swiper-api');
   if (swiper_api != undefined) {
     stellar.loadCSS(stellar.plugins.swiper.css);
-    stellar.loadScript(stellar.plugins.swiper.js, {defer:true}).then(function () {
+    stellar.loadScript(stellar.plugins.swiper.js, { defer: true }).then(function () {
       var swiper = new Swiper('.swiper-container', {
         slidesPerView: 'auto',
         spaceBetween: 8,
@@ -270,6 +270,39 @@ if (stellar.plugins.preload) {
       maxRPS: 5,
       hoverDelay: 25
     };
-    stellar.loadScript(stellar.plugins.preload.flying_pages, {defer:true})
+    stellar.loadScript(stellar.plugins.preload.flying_pages, { defer: true })
   }
 }
+
+// fancybox
+if (stellar.plugins.fancybox) {
+  let selector = 'img[fancybox]:not(.error)';
+  if (stellar.plugins.fancybox.selector) {
+    selector += `, ${stellar.plugins.fancybox.selector}`
+  }
+  if (document.querySelectorAll(selector).length !== 0) {
+    stellar.loadCSS(stellar.plugins.fancybox.css);
+    stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
+      Fancybox.bind(selector, {
+        groupAll: true,
+        hideScrollbar: false,
+        Thumbs: {
+          autoStart: false,
+        },
+        caption: function (fancybox, carousel, slide) {
+          return slide.$trigger.alt || null
+        }
+      });
+    })
+  }
+}
+
+// heti
+if (stellar.plugins.heti) {
+  stellar.loadCSS(stellar.plugins.heti.css);
+  stellar.loadScript(stellar.plugins.heti.js, { defer: true }).then(function () {
+    const heti = new Heti('.heti p');
+    heti.autoSpacing();
+    stellar.plugins.heti.enable = false;
+  });
+}