init

2021-02-19 23:33:19 +08:00 · 2021-02-19 23:33:19 +08:00 · 98397bfe89
parent 7151431c96
commit 98397bfe89
115 changed files with 5067 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -1,2 +1,40 @@
 # hexo-theme-stellar
+
 Elegant and powerful theme for Hexo.
+
+## Getting Started
+
+Check your environment:
+
+```yaml
+Hexo: 5.3.0
+hexo-cli: 4.2.0
+node.js: 14.15.4 LTS
+npm: 6.14.10 LTS
+```
+
+Edit your `_config.yml`:
+
+```yaml
+theme: stellar
+```
+
+Install Stellar in terminal:
+
+```bash
+npm i hexo-theme-stellar
+```
+
+## Usage
+
+See docs: https://xaoxuu.com/wiki/stellar
+
+## Examples
+
+https://xaoxuu.com
+
+## Feedback
+
+Issues: https://github.com/xaoxuu/hexo-theme-stellar/issues/
+
+Discussions: https://github.com/xaoxuu/hexo-theme-stellar/discussions/
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,164 @@
+######## Stellar info ########
+stellar:
+  version: '1.0.0-rc.1'
+  homepage: https://xaoxuu.com/wiki/stellar/
+  repo: https://github.com/xaoxuu/hexo-theme-stellar
+  # The cdn version needs to be consistent with the stellar version
+  cdn_css: # https://cdn.jsdelivr.net/npm/hexo-theme-stellar@1.0/source/css/main.min.css
+  cdn_js: # https://cdn.jsdelivr.net/npm/hexo-theme-stellar@1.0/source/js/main.min.js
+
+
+######## head tags ########
+head:
+  open_graph: true
+  twitter: false
+
+
+######## Sidebar ########
+sidebar:
+  logo:
+    avatar: # default is config.avatar
+    title: # default is config.title
+  logo_action:
+    avatar: /about/
+    title: /
+  menu:
+    - class: post # post, wiki, about
+      name: btn.blog
+      url: /
+    - class: wiki
+      name: btn.wiki
+      url: /wiki/
+    - class: friends
+      name: 友链
+      url: /friends/
+    - class: about
+      name: 关于
+      url: /about/
+  # Sidebar widgets
+  widgets:
+    # Recent update
+    recent:
+      layout: recent
+      rss: /atom.xml # npm i hexo-generator-feed
+      limit: 5 # Count of posts
+    # TOC (valid only in layout:post/wiki)
+    toc:
+      layout: toc
+      list_number: false
+      min_depth: 2
+      max_depth: 5
+    # welcome
+    welcome:
+      layout: markdown
+      title: 欢迎
+      content:
+        - '欢迎光临小站，[Stellar](https://github.com/xaoxuu/hexo-theme-stellar/) 是一个支持 wiki 的 hexo 主题，适合综合型站点使用。同时也拥有简约而精美的视觉设计和丰富的标签插件，帮助您简单从容地应对各种场合。'
+
+
+
+######## Article ########
+article:
+  # 如果没有指定 excerpt 和 description，将自动取多长的内容作为文章摘要？
+  auto_excerpt: 200
+  # 相关文章，需要安装插件 (for layout: post)
+  # npm i hexo-related-popular-posts
+  related_posts:
+    enable: false
+    title: 您可能感兴趣的文章
+    max_count: 5
+    placeholder_img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-wallpaper-minimalist/2020/046.jpg
+  # 分享文章
+  share:
+    qq: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qq.png
+    qzone: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/qzone.png
+    weibo: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/weibo.png
+    # 需要安装插件  npm i hexo-helper-qrcode
+    wechat: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/128/wechat.png
+
+
+######## Comments ########
+comments:
+  service: utterances # utterances
+  # utterances
+  # https://utteranc.es/
+  utterances:
+    repo: xxx/xxx
+    issue-term: pathname
+    issue-number:
+    theme:
+      light: github-light
+      dark: github-dark
+    label: ✨💬✨
+    crossorigin: anonymous
+
+
+######## Footer ########
+footer:
+  social:
+    - icon: '<img src="https://7.dusays.com/2021/02/14/25678f144c438.svg"/>'
+      url: /atom.xml
+    - icon: '<img src="https://7.dusays.com/2021/02/14/08a41b181ce68.svg"/>'
+      url: https://github.com/xaoxuu
+    - icon: '<img src="https://7.dusays.com/2021/02/14/cf1ae151f9e83.svg"/>'
+      url: https://music.163.com/#/user/home?id=63035382
+    - icon: '<img src="https://7.dusays.com/2021/02/14/942ebbf1a4b91.svg"/>'
+      url: /comments/
+  license: 'CC BY SA 4.0'
+  source:
+    where: GitHub
+    url: https://github.com/xaoxuu/site-source
+
+
+######## Tag Plugins ########
+tag_plugins:
+  # {% note text %}
+  note:
+    default_color: ''
+  # {% checkbox %}
+  checkbox:
+    interactive: false # enable interactive for user
+  # {% link title, url, img %}
+  link:
+    default_img: https://cdn.jsdelivr.net/gh/volantis-x/cdn-org/logo/256/safari.png
+
+
+######## JS Plugins ########
+plugins:
+  ## required 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/swiper-bundle.min.css
+    js: https://unpkg.com/swiper/swiper-bundle.min.js
+  ## optional plugins ##
+  # preload
+  preload:
+    enable: #true
+    service: instant_page # instant_page, flying_pages
+    instant_page: https://cdn.jsdelivr.net/gh/volantis-x/cdn-volantis@2/js/instant_page.js
+    flying_pages: https://cdn.jsdelivr.net/gh/gijo-varghese/flying-pages@2.1.2/flying-pages.min.js
+
+  # image lazyload
+  # https://www.npmjs.com/package/vanilla-lazyload
+  lazyload:
+    enable: true
+    js: https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.3.1/dist/lazyload.min.js
+    onlypost: false
+    loadingImg: # https://7.dusays.com/2021/02/14/e45d2469cdeaf.svg
+    blurIn: true # 模糊加载效果 （loadingImg为空时有效）
+
+  # https://scrollrevealjs.org/api/reveal.html
+  scrollreveal:
+    enable: true
+    js: https://cdn.jsdelivr.net/npm/scrollreveal@4.0.7/dist/scrollreveal.min.js
+    distance: 16px
+    duration: 800 # ms
+    interval: 80 # ms
+    scale: 1 # 0.1~1
--- a/languages/en.yml
+++ b/languages/en.yml
@ -0,0 +1,46 @@
+btn:
+  home: Home
+  blog: Blog
+  wiki: Wiki
+  recent_publish: Recent
+  all_wiki: All
+  category: Category
+  categories: Categories
+  tag: Tag
+  tags: Tags
+  archives: Archives
+  learn_more: Learn more
+  getting_started: Getting Started
+
+meta:
+  recent_update: Recent Update
+  toc: TOC
+  read_prev: PREV
+  read_next: NEXT
+  older: Older
+  newer: Newer
+  references: References
+  comment_title: Join the discussion
+  back_to_top: Back to top
+  more: 'More %s'
+
+footer:
+  license: 'Unless otherwise specified, this site adopts the CC BY SA 4.0 license agreement.'
+  info_not_open_source: 'This site was created by %s, using [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) as the theme.'
+  info_open_source: 'This site was created by %s, using [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) as the theme. You can find the source code of this site in [%s](%s).'
+
+page:
+  error:
+    what: Page Not Found
+    why: The address may be entered incorrectly or the address has been deleted
+    action: Back to Home
+  categories: '%s Categories'
+  tags: '%s Tags'
+  archives: '%s Years, %s Archives'
+
+symbol:
+  comma: ", "
+  period: ". "
+  colon: ": "
+  brackets_l: "("
+  brackets_r: ")"
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@ -0,0 +1,46 @@
+btn:
+  home: 主页
+  blog: 文章
+  wiki: 项目
+  recent_publish: 最新发布
+  all_wiki: 所有项目
+  category: 分类
+  categories: 分类
+  tag: 标签
+  tags: 标签
+  archives: 归档
+  learn_more: 了解详情
+  getting_started: 开始使用
+
+meta:
+  recent_update: 最近更新
+  toc: 本文目录
+  read_prev: 回顾上一篇
+  read_next: 接下来阅读
+  older: 较早文章
+  newer: 较新文章
+  references: 参考资料
+  comment_title: 快来参与讨论吧
+  back_to_top: 回到顶部
+  more: '更多%s'
+
+footer:
+  license: '除非特别说明，本站采用 CC BY SA 4.0 许可协议。'
+  info_not_open_source: '本站由 %s 创建，使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) 作为主题。'
+  info_open_source: '本站由 %s 创建，使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) 作为主题，您可以在 [%s](%s) 找到本站源码。'
+
+page:
+  error:
+    what: 很抱歉，您访问的页面不存在
+    why: 可能是输入地址有误或该地址已被删除
+    action: 返回主页
+  categories: '共%s个分类'
+  tags: '共%s个标签'
+  archives: 'TA在%s年间写了%s篇文章'
+
+symbol:
+  comma: "，"
+  period: "。"
+  colon: "："
+  brackets_l: "（"
+  brackets_r: "）"
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@ -0,0 +1,46 @@
+btn:
+  home: 主頁
+  blog: 博客
+  wiki: 項目
+  recent_publish: 最新發布
+  all_wiki: 所有項目
+  category: 分類
+  categories: 分類
+  tag: 標籤
+  tags: 標籤
+  archives: 歸檔
+  learn_more: 了解詳情
+  getting_started: 開始使用
+
+meta:
+  recent_update: 最近更新
+  toc: 本文目錄
+  read_prev: 回顧上一篇
+  read_next: 接下來閱讀
+  older: 較早文章
+  newer: 較新文章
+  references: 參考資料
+  comment_title: 快來參與討論吧
+  back_to_top: 回到頂部
+  more: '更多%s'
+
+footer:
+  license: '除非特別說明，本站採用 CC BY SA 4.0 許可協議。'
+  info_not_open_source: '本站由 %s 創建，使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) 作為主題。'
+  info_open_source: '本站由 %s 創建，使用 [Stellar](https://github.com/xaoxuu/hexo-theme-stellar) 作為主題，您可以在 [%s](%s) 找到本站源碼。'
+
+page:
+  error:
+    what: 很抱歉，您訪問的頁面不存在
+    why: 可能是輸入地址有誤或該地址已被刪除
+    action: 返回主頁
+  categories: '共%s個分類'
+  tags: '共%s個標籤'
+  archives: 'TA在%s年間寫了%s篇文章'
+
+symbol:
+  comma: "，"
+  period: "。"
+  colon: "："
+  brackets_l: "（"
+  brackets_r: "）"
--- a/layout/404.ejs
+++ b/layout/404.ejs
@ -0,0 +1,19 @@
+<%
+page.class = '404';
+page.layout = '404';
+page.comment_title = '';
+page.comment_id = '1';
+%>
+<article class='md error-page'>
+  <h1><img id='error' src="https://7.dusays.com/2021/02/14/f5b2af33b70c2.svg" alt=""></h1>
+  <p class='what'>
+    <strong>
+      <%- __('page.error.what') %>
+    </strong>
+  </p>
+  <p class='why'>
+    <%- __('page.error.why') %>
+  </p>
+  <a class='button cyan' id='back' href="/"><%- __('page.error.action') %></a>
+</article>
+<%- partial('_partial/plugins/comments/layout') %>
--- a/layout/_partial/article/read_next.ejs
+++ b/layout/_partial/article/read_next.ejs
@ -0,0 +1,89 @@
+<%
+function layoutDiv() {
+  var prev,next;
+  var title = '';
+  var title_prev = '';
+  var title_next = '';
+  if (page.layout == 'post') {
+    prev = page.prev;
+    next = page.next;
+    title = __('meta.read_next');
+    title_prev = __('meta.newer');
+    title_next = __('meta.older');
+  } else if (page.layout == 'wiki' && page.wiki && page.wiki.length > 0) {
+    title = page.wiki;
+    title_prev = __('meta.read_prev');
+    title_next = __('meta.read_next');
+    var wikis = [];
+    wikis = site.pages.filter(function (p) {
+      if (p.layout == 'wiki' && p.wiki && p.wiki == page.wiki) {
+        if (p.order == undefined) {
+          p.order = 0;
+        }
+        return true;
+      } else {
+        return false;
+      }
+    }).sort('order');
+    wikis.forEach((p, i) => {
+      if (p.order < page.order) {
+        if (prev == undefined || p.order > prev.order) {
+          prev = p;
+        }
+      } else if (p.order > page.order) {
+        if (next == undefined || p.order < next.order) {
+          next = p;
+        }
+      }
+    });
+  }
+  let wrapper = '';
+  if (prev || next) {
+    wrapper += '<div class="read-next-wrap">';
+    wrapper += '<section class="header cap cyan">';
+    wrapper += '<span>' + title + '</span>';
+    wrapper += '</section>';
+    wrapper += '<section class="body">';
+    if (page.layout == 'wiki') {
+      if (next) {
+        wrapper += '<div class="post-title unread">';
+        wrapper += '<a href="' + url_for(next.path) + '">';
+        wrapper += title_next + __('symbol.colon');
+        wrapper += next.title || next.seo_title;
+        wrapper += '</a>';
+        wrapper += '</div>';
+      }
+      if (prev) {
+        wrapper += '<div class="post-title read">';
+        wrapper += '<a href="' + url_for(prev.path) + '">';
+        wrapper += title_prev + __('symbol.colon');
+        wrapper += prev.title || prev.seo_title;
+        wrapper += '</a>';
+        wrapper += '</div>';
+      }
+    } else {
+      if (prev) {
+        wrapper += '<div class="post-title">';
+        wrapper += '<a href="' + url_for(prev.path) + '">';
+        wrapper += title_prev + __('symbol.colon');
+        wrapper += prev.title || prev.seo_title;
+        wrapper += '</a>';
+        wrapper += '</div>';
+      }
+      if (next) {
+        wrapper += '<div class="post-title">';
+        wrapper += '<a href="' + url_for(next.path) + '">';
+        wrapper += title_next + __('symbol.colon');
+        wrapper += next.title || next.seo_title;
+        wrapper += '</a>';
+        wrapper += '</div>';
+      }
+    }
+    
+    wrapper += '</section>';
+    wrapper += '</div>';
+  }
+  return wrapper;
+}
+%>
+<%- layoutDiv(); %>
--- a/layout/_partial/article/references.ejs
+++ b/layout/_partial/article/references.ejs
@ -0,0 +1,23 @@
+<%
+function layoutDiv() {
+  if (page.references && page.references.length > 0) {
+    let wrapper = '';
+    wrapper += '<div class="references-wrap">';
+    wrapper += '<section class="header">';
+    wrapper += '<span>' + __('meta.references') + '</span>';
+    wrapper += '</section>';
+    wrapper += '<section class="body"><ul>';
+    page.references.forEach((item, i) => {
+      wrapper += '<li class="post-title">';
+      wrapper += '<a href="' + item.url + '">';
+      wrapper += item.title;
+      wrapper += '</a>';
+      wrapper += '</li>';
+    });
+    wrapper += '</ul></section>';
+    wrapper += '</div>';
+    return wrapper;
+  }
+}
+%>
+<%- layoutDiv(); %>
--- a/layout/_partial/article/related_posts.ejs
+++ b/layout/_partial/article/related_posts.ejs
@ -0,0 +1,5 @@
+<% let post = page; %>
+<div class='related-posts-wrap'><%-
+popular_posts_wrapper(
+  popular_posts_json({ maxCount: 5 , ulClass: 'related-posts' , PPMixingRate: 0.2 , isImage: true , isExcerpt: true} , post )
+) %></div>
--- a/layout/_partial/article/wiki_cover.ejs
+++ b/layout/_partial/article/wiki_cover.ejs
@ -0,0 +1,51 @@
+<%
+function layoutWikiCover() {
+  if (page.layout != 'wiki') {
+    return '';
+  }
+  if (page.cover == undefined || page.cover == false || page.cover == '[]') {
+    return '';
+  }
+  var cover = page.cover;
+  if (page.cover == true) {
+    cover = ['logo', 'title', 'description'];
+  }
+  var el = '';
+  el += '<div class="l_cover reveal">';
+  el += '<article class="cover-wrap md">';
+  if (page.logo && cover.includes('logo')) {
+    el += '<div class="logo">';
+    var height = '';
+    var src = '';
+    page.logo.split(' ').forEach(function(item) {
+      if (item.includes('px')) {
+        height = item;
+      } else {
+        src = item;
+      }
+    });
+    if (height.length > 0) {
+      el += '<img src="' + src + '" height="' + height + '">';
+    } else {
+      el += '<img src="' + src + '">';
+    }
+    el += '</div>';
+  }
+  if (page.title && cover.includes('title')) {
+    el += '<div class="cover-title">';
+    el += '<span>' + (page.wiki || page.title) + '</span>';
+    el += '</div>';
+  }
+  if (page.description && cover.includes('description')) {
+    el += '<div class="description">' + page.description + '</div>';
+  }
+  el += '<div class="start-wrap">';
+  el += '<a class="button cyan start" href="#start">' + __('btn.getting_started') + '</a>';
+  el += '</div>';
+  el += '</article>';
+  el += '</div>';
+  el += '<hr>';
+  return el;
+}
+%>
+<%- layoutWikiCover() %>
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@ -0,0 +1,18 @@
+<%
+function layoutDiv() {
+  var wrapper = '';
+  wrapper += '<div><hr>';
+  if (theme.footer.license) {
+    wrapper += markdown(__('footer.license', theme.footer.license));
+  }
+  const author = '[' + config.author + '](' + config.url + config.root + ')';
+  if (theme.footer.source && theme.footer.source.where && theme.footer.source.url) {
+    wrapper += markdown(__('footer.info_open_source', author, theme.footer.source.where, theme.footer.source.url));
+  } else {
+    wrapper += markdown(__('footer.info_not_open_source', author));
+  }
+  wrapper += '</div>';
+  return wrapper;
+}
+%>
+<%- layoutDiv() %>
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@ -0,0 +1,134 @@
+<%
+function genrateRobots() {
+  var el = '';
+  if (page.robots) {
+    el += '<meta name="robots" content="' + page.robots + '">';
+  } else if (is_home() == false) {
+    if (['post', 'wiki', 'index'].includes(page.layout) == false) {
+      el += '<meta name="robots" content="noindex,nofollow">';
+    }
+  }
+  return el;
+}
+
+function getTitle() {
+  if (page.seo_title || page.title || page.wiki || page.layout) {
+    return (page.seo_title || page.title || page.wiki || page.layout) + ' - ' + config.title;
+  } else if (page.category) {
+    return __('btn.category') + __('symbol.colon') + page.category + ' - ' + config.title;
+  } else if (page.tag) {
+    return __('btn.tag') + __('symbol.colon') + page.tag + ' - ' + config.title;
+  } else {
+    return config.title;
+  }
+  return '';
+}
+function getKeywords() {
+  if (page.keywords) {
+    return page.keywords;
+  } else if (page.tags && page.tags.length > 0) {
+    return page.tags.map(function(t){return t.name}).join(',');
+  }
+  return '';
+}
+function getDescription() {
+  if (page.description) {
+    return page.description;
+  } else {
+    if (['post', 'wiki'].includes(page.layout)) {
+      if (page.excerpt && page.excerpt.length > 0) {
+        return strip_html(page.excerpt);
+      } else if (page.content && page.content.length > 0) {
+        return truncate(strip_html(page.content), {length: 160});
+      }
+    }
+  }
+  return '';
+}
+function genrateKeywords() {
+  const keywords = getKeywords();
+  if (keywords && keywords.length > 0) {
+    return '<meta name="keywords" content="' + keywords + '">';
+  } else {
+    return '';
+  }
+}
+function genrateDescription() {
+  const description = getDescription();
+  if (description && description.length > 0) {
+    return '<meta name="description" content="' + description + '">';
+  } else {
+    return '';
+  }
+}
+function genrateOpenGraph() {
+  if (theme.head.open_graph == false) {
+    return '';
+  }
+  var el = '';
+  el += '<meta property="og:title" content="' + getTitle() + '">';
+  el += '<meta property="og:description" content="' + getDescription() + '">';
+  el += '<meta property="og:locale" content="' + page.lang.replace('-', '_') + '">';
+  el += '<meta property="og:url" content="' + page.permalink + '">';
+  el += '<meta property="og:type" content="website">';
+  el += '<meta property="og:site_name" content="' + config.title + '">';
+  if (page.layout == 'post' && page.cover && page.cover.length > 0) {
+    el += '<meta property="og:image" content="' + page.cover + '">';
+  }
+  return el;
+}
+function genrateTwitter() {
+  if (theme.head.twitter == undefined || theme.head.twitter.length == 0 || theme.head.twitter == false) {
+    return '';
+  }
+  var el = '';
+  if (theme.head.twitter != 'true') {
+    el += '<meta property="twitter:site" content="@' + theme.head.twitter + '">';
+  }
+  if (page.layout == 'post' && page.cover && page.cover.length > 0) {
+    el += '<meta name="twitter:image" content="' + page.cover + '">';
+    el += '<meta name="twitter:card" content="summary_large_image">';
+  }
+  return el;
+}
+%>
+<head hexo-theme='https://github.com/xaoxuu/hexo-theme-stellar/tree/<%- theme.stellar.version %>'>
+  <meta charset="utf-8">
+  <%- genrateRobots() %>
+  <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>
+
+  <meta name="renderer" content="webkit">
+  <meta name="force-rendering" content="webkit">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
+  <meta name="HandheldFriendly" content="True" >
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
+  <title><%- getTitle() %></title>
+  <%- genrateKeywords() %>
+  <%- genrateDescription() %>
+  <%- genrateOpenGraph() %>
+  <%- genrateTwitter() %>
+
+
+  <!-- feed -->
+  <% if (config.feed && config.feed.path) { %>
+    <%- feed_tag(config.feed.path, {title: config.title}) %>
+  <% } %>
+
+  <% if (theme.stellar.cdn_css) { %>
+    <%- css(theme.stellar.cdn_css) %>
+  <% } else { %>
+    <%- css('/css/main.css') %>
+  <% } %>
+
+  <% if (config.inject && config.inject.head){ %>
+    <% (config.inject.head||[]).forEach(function(item){ %>
+      <%- item %>
+    <% }) %>
+  <% } else if (config.favicon) { %>
+    <link rel="shortcut icon" type='image/x-icon' href="<%- url_for(config.favicon) %>">
+  <% } %>
+</head>
--- a/layout/_partial/menubtn.ejs
+++ b/layout/_partial/menubtn.ejs
@ -0,0 +1,5 @@
+<div class='float-panel mobile-only' style='display:none'>
+  <button type='button' class='sidebar-toggle mobile' onclick='toggleSidebar()'>
+    <svg class="icon" viewBox="0 0 1228 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2849"><path d="M0 0m97.390199 0l973.901995 0q97.390199 0 97.390199 97.390199l0 0q0 97.390199-97.390199 97.3902l-973.901995 0q-97.390199 0-97.390199-97.3902l0 0q0-97.390199 97.390199-97.390199Z" p-id="2850"></path><path d="M0 389.560798m97.390199 0l973.901995 0q97.390199 0 97.390199 97.390199l0 0q0 97.390199-97.390199 97.3902l-973.901995 0q-97.390199 0-97.390199-97.3902l0 0q0-97.390199 97.390199-97.390199Z" p-id="2851"></path><path d="M0 779.121596m97.390199 0l973.901995 0q97.390199 0 97.390199 97.390199l0 0q0 97.390199-97.390199 97.390199l-973.901995 0q-97.390199 0-97.390199-97.390199l0 0q0-97.390199 97.390199-97.390199Z" p-id="2852"></path></svg>
+  </button>
+</div>
--- a/layout/_partial/navbar/breadcrumb.ejs
+++ b/layout/_partial/navbar/breadcrumb.ejs
@ -0,0 +1,47 @@
+<% if (page.breadcrumb != false) { %>
+  <div class='breadcrumb-navigation'>
+  <% if (page.layout == 'post') { %>
+    <div class='cap'>
+      <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',
+            show_count: false,
+            separator: ' <span class="sep"></span> ',
+            style: 'none'
+            }) %>
+      <% } %>
+    </div>
+    <div>
+      <time><%- date(page.date, config.date_format) %></time>
+    </div>
+  <% } else if (page.layout == 'wiki') { %>
+    <div>
+      <a class='cap breadcrumb' href='/'><%- __('btn.home') %></a>
+      <span class="sep"></span>
+      <a class='cap breadcrumb' href='/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) { %>
+        <span class="sep"></span>
+        <a class='cap breadcrumb' href='<%- url_for(p.path) %>'><%- p.title %></a>
+      <% }); %>
+      <% site.pages.filter(function (p) { %>
+        <% return p.layout == 'wiki' && p.wiki == page.wiki && !p.order %>
+      <% }).limit(1).each(function(p) { %>
+        <span class="sep"></span>
+        <a class='cap breadcrumb' href='<%- url_for(p.path) %>'><%- page.wiki %></a>
+      <% }); %>
+    </div>
+  <% } else { %>
+      <div>
+        <a class='cap breadcrumb' href='/'><%- __('btn.home') %></a>
+        <span class="sep"></span>
+        <a class='cap breadcrumb' href='<%- url_for(page.path) %>'><%- page.title || page.seo_title %></a>
+      </div>
+  <% } %>
+  </div>
+<% } %>
--- a/layout/_partial/navbar/list_post.ejs
+++ b/layout/_partial/navbar/list_post.ejs
@ -0,0 +1,27 @@
+<nav class='cap green'>
+  <% if (is_home()) { %>
+    <a class='active' href='/'><%- __('btn.recent_publish') %></a>
+  <% } else { %>
+    <a href='/'><%- __('btn.recent_publish') %></a>
+  <% } %>
+  <% if (page.category) { %>
+    <a class='active' href='<%- url_for(config.category_dir) %>'><%- __('btn.category') + __('symbol.colon') + page.category %></a>
+  <% } else if (page.layout == 'categories') { %>
+    <a class='active' href='<%- url_for(config.category_dir) %>'><%- __('btn.categories') %></a>
+  <% } else { %>
+    <a href='<%- url_for(config.category_dir) %>'><%- __('btn.categories') %></a>
+  <% } %>
+  <% if (page.tag) { %>
+    <a class='active' href='<%- url_for(config.tag_dir) %>'><%- __('btn.tag') + __('symbol.colon') + page.tag %></a>
+  <% } else if (page.layout == 'tags') { %>
+    <a class='active' href='<%- url_for(config.tag_dir) %>'><%- __('btn.tags') %></a>
+  <% } else { %>
+    <a href='<%- url_for(config.tag_dir) %>'><%- __('btn.tags') %></a>
+  <% } %>
+
+  <% if (is_archive()) { %>
+    <a class='active' href='<%- url_for(config.archive_dir) %>'><%- __('btn.archives') %></a>
+  <% } else { %>
+    <a href='<%- url_for(config.archive_dir) %>'><%- __('btn.archives') %></a>
+  <% } %>
+</nav>
--- a/layout/_partial/navbar/list_wiki.ejs
+++ b/layout/_partial/navbar/list_wiki.ejs
@ -0,0 +1,26 @@
+<nav class='cap green'>
+  <% if (page.layout == 'index' && page.title && page.wiki) { %>
+    <a href='/wiki/'><%- __('btn.all_wiki') %></a>
+  <% } else { %>
+    <a class='active' href='/wiki/'><%- __('btn.all_wiki') %></a>
+  <% } %>
+  <%
+  var groups = [];
+  var paths = [];
+  site.pages.filter(function (p) {
+    return p.layout == 'index' && p.title && p.wiki;
+  }).sort('order').each(function(p) {
+    if (groups.includes(p.wiki) == false) {
+      groups.push(p.title);
+      paths.push(p.path);
+    }
+  });
+  %>
+  <% groups.forEach((group, i) => { %>
+    <% if (page.title == group) { %>
+      <a class='active' href='<%- url_for(paths[i]) %>'><%- group %></a>
+    <% } else { %>
+      <a class='' href='<%- url_for(paths[i]) %>'><%- group %></a>
+    <% } %>
+  <% }); %>
+</nav>
--- a/layout/_partial/plugins/comments/layout.ejs
+++ b/layout/_partial/plugins/comments/layout.ejs
@ -0,0 +1,27 @@
+<%
+var loadComment = false;
+if (theme.comments.service && theme.comments.service.length > 0) {
+  if (page.comments == undefined || page.comments != false) {
+    loadComment = true;
+  }
+}
+// 合并项目评论
+if (loadComment && page.layout == 'wiki' && page.wiki) {
+  if (page.comment_id == undefined) {
+    if (theme.comments.service == 'utterances') {
+      // 使用项目名作为评论issue标题并共享评论数据
+      page.comment_id = page.wiki;
+    }
+  }
+}
+%>
+<% if (loadComment) { %>
+  <article class='comments-wrap' id="comments">
+    <div class='cmt-title cap cyan'>
+      <%- page.comment_title != undefined ? page.comment_title : __('meta.comment_title') %>
+    </div>
+    <div class='cmt-body <%- theme.comments.service %>'>
+      <%- partial(theme.comments.service + '/layout') %>
+    </div>
+  </article>
+<% } %>
--- a/layout/_partial/plugins/comments/script.ejs
+++ b/layout/_partial/plugins/comments/script.ejs
@ -0,0 +1,3 @@
+<% if (theme.comments.service && theme.comments.service.length > 0) { %>
+  <%- partial(theme.comments.service + '/script') %>
+<% } %>
--- a/layout/_partial/plugins/comments/utterances/layout.ejs
+++ b/layout/_partial/plugins/comments/utterances/layout.ejs
@ -0,0 +1 @@
+<div id="utterances"></div>
--- a/layout/_partial/plugins/comments/utterances/script.ejs
+++ b/layout/_partial/plugins/comments/utterances/script.ejs
@ -0,0 +1,29 @@
+<script>
+  function pjax_utterances(){
+    if(!document.getElementById("utterances"))return;
+    setTimeout(function() {
+      var checkUtterances = setInterval(function () {
+        var HEAD = document.getElementById("utterances");
+        if (!HEAD) return
+        clearInterval(checkUtterances)
+        try {
+          HEAD.innerHTML="";
+        } catch (error) {}
+        var script = document.createElement('script');
+        script.setAttribute('src','https://utteranc.es/client.js');
+        script.setAttribute('repo','<%- theme.comments.utterances.repo %>');
+        let issuenumber = '<%- theme.comments.utterances['issue-number'] || page.comment_id %>';
+        if (issuenumber) {
+          script.setAttribute('issue-term', issuenumber);
+        } else {
+          script.setAttribute('issue-term', '<%- theme.comments.utterances['issue-term'] %>');
+        }
+        script.setAttribute('theme', '<%- page.dark ? theme.comments.utterances.theme.dark : theme.comments.utterances.theme.light %>' );
+        script.setAttribute('label','<%- theme.comments.utterances.label %>');
+        script.setAttribute('crossorigin','<%- theme.comments.utterances.crossorigin %>');
+        HEAD.appendChild(script);
+       }, 200)
+    });
+  }
+  pjax_utterances();
+</script>
--- a/layout/_partial/post_list/paginator.ejs
+++ b/layout/_partial/post_list/paginator.ejs
@ -0,0 +1,13 @@
+<% if (is_home() && page.total > 1) { %>
+  <div class='paginator-wrap'>
+    <a class='paginator prev<%- page.prev != 0 ? "" : " disable" %>' href='<%- url_for(page.prev_link) %>'>
+      <svg class="icon" style="width: 1.05859375em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1084 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2239"><path d="M409.874051 23.92377L22.70891 430.483307a84.202997 84.202997 0 0 0 0 114.98106l387.165141 406.559537a74.867186 74.867186 0 0 0 109.500036 0 84.202997 84.202997 0 0 0 0-115.041291L264.416084 569.255629h742.287368c42.76404 0 77.457121-36.37955 77.45712-81.311907 0-44.932358-34.69308-81.311907-77.396889-81.311908H264.355853l255.018234-267.787215a84.202997 84.202997 0 0 0 0-114.98106 74.867186 74.867186 0 0 0-109.500036 0z" p-id="2240"></path></svg>
+    </a>
+    <div class='paginator current'>
+      <span class='pn'><%- page.current %> / <%- page.total %></span>
+    </div>
+    <a class='paginator next<%- page.next != 0 ? "" : " disable" %>' href='<%- url_for(page.next_link) %>'>
+      <svg class="icon" style="width: 1.0546875em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1080 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25103"><path d="M1045.447111 461.937778l0.853333 1.194666a85.447111 85.447111 0 0 1 15.36 48.867556v1.422222c0 1.820444-0.113778 3.640889-0.284444 5.461334L1061.660444 512a86.129778 86.129778 0 0 1-12.970666 45.226667c-2.901333 4.664889-6.257778 9.045333-10.012445 13.084444l-0.455111 0.455111-378.993778 399.36a85.333333 85.333333 0 0 1-129.479111-110.819555l5.688889-6.656 242.176-255.317334H96.881778a85.333333 85.333333 0 0 1-8.192-170.268444l8.192-0.398222h688.469333L533.788444 145.635556A85.333333 85.333333 0 0 1 534.186667 31.345778L540.444444 25.201778a85.333333 85.333333 0 0 1 114.346667 0.455111l6.087111 6.200889L1039.928889 455.111111l1.080889 1.194667c1.137778 1.308444 2.218667 2.673778 3.242666 4.039111l1.137778 1.592889z" p-id="25104"></path></svg>
+    </a>
+  </div>
+<% } %>
--- a/layout/_partial/post_list/post_card.ejs
+++ b/layout/_partial/post_list/post_card.ejs
@ -0,0 +1,59 @@
+<%
+let showCat = false;
+if (post.categories && post.categories.length > 0) {
+  showCat = true;
+}
+%>
+<% if (post.cover) { %>
+  <div class='post-cover-wrap'>
+    <% if (theme.plugins.lazyload && theme.plugins.lazyload.enable) { %>
+      <% if (theme.plugins.lazyload.loadingImg) { %>
+        <div class='post-cover lazyload placeholder' data-bg='<%- post.cover %>'></div>
+      <% } else { %>
+        <div class='post-cover lazyload' data-bg='<%- post.cover %>'></div>
+      <% } %>
+    <% } else { %>
+      <div class='post-cover' style='background-image:url(<%- post.cover %>)'></div>
+    <% } %>
+  </div>
+<% } %>
+<h2 class="post-title">
+  <%- (post.title || post.seo_title) ? (post.title || post.seo_title) : date(post.date, config.date_format) %>
+</h2>
+<div class='excerpt'>
+  <% if (post.excerpt) { %>
+    <p><%- strip_html(post.excerpt) %></p>
+  <% } else if (post.description) { %>
+    <p><%- post.description %></p>
+  <% } else if (post.content && theme.article.auto_excerpt > 0) { %>
+    <p><%- truncate(strip_html(post.content), {length: theme.article.auto_excerpt}) %></p>
+  <% } %>
+</div>
+<div class='meta cap'>
+  <span class='cap'>
+    <time><%= date(post.date, config.date_format) %></time>
+  </span>
+  <% if (showCat) { %>
+    <% if (post.layout == 'post' && post.categories && post.categories.length > 0) { %>
+      <%
+      var cats = [];
+      if (post.categories) {
+        post.categories.forEach((cat, i) => {
+          cats.push(cat.name);
+        });
+      }
+      function layoutCats() {
+        if (cats.length > 0) {
+          var ret = '<span class="cap breadcrumb">';
+          ret += cats.shift()
+          ret += '</span>';
+          return ret;
+        } else {
+          return '';
+        }
+      }
+      %>
+      <%- layoutCats() %>
+    <% } %>
+  <% } %>
+</div>
--- a/layout/_partial/post_list/wiki_card.ejs
+++ b/layout/_partial/post_list/wiki_card.ejs
@ -0,0 +1,41 @@
+<% if (post.logo) { %>
+  <%
+  var arr = post.logo.split(' ');
+  var height = '';
+  var src = '';
+  arr.forEach(function(item) {
+    var px = item.match(/[0-9]*px/i);
+    if (px && px.length > 0) {
+      px = px[0];
+      height = px;
+    } else {
+      src = item;
+    }
+  });
+  %>
+  <div class='logo'>
+  <% if (height.length > 0) { %>
+    <img src='<%- src %>' alt='logo' height='<%- height %>'>
+  <% } else { %>
+    <img src='<%- src %>' alt='logo'>
+  <% } %>
+  </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>
+  <h2 class='post-title'><%- post.wiki || post.title %></h2>
+  <% if (post.description) { %>
+    <p><%- post.description %></p>
+  <% } else if (post.excerpt) { %>
+    <%- strip_html(post.excerpt) %>
+  <% } %>
+  <div class='readmore cap'>
+    了解详情
+  </div>
+</div>
--- a/layout/_partial/scripts/global.ejs
+++ b/layout/_partial/scripts/global.ejs
@ -0,0 +1,72 @@
+<script>
+  // 懒加载 js
+  function loadScript(src, cb) {
+    setTimeout(function () {
+      var HEAD =
+        document.getElementsByTagName("head")[0] || document.documentElement;
+      var script = document.createElement("script");
+      script.setAttribute("type", "text/javascript");
+      if (cb) script.onload = cb;
+      script.setAttribute("src", src);
+      HEAD.appendChild(script);
+    });
+  }
+  // 懒加载 css https://github.com/filamentgroup/loadCSS
+  var loadCSS = function (href, before, media, attributes) {
+    var doc = window.document;
+    var ss = doc.createElement("link");
+    var ref;
+    if (before) {
+      ref = before;
+    } else {
+      var refs = (doc.body || doc.getElementsByTagName("head")[0]).childNodes;
+      ref = refs[refs.length - 1];
+    }
+    var sheets = doc.styleSheets;
+    if (attributes) {
+      for (var attributeName in attributes) {
+        if (attributes.hasOwnProperty(attributeName)) {
+          ss.setAttribute(attributeName, attributes[attributeName]);
+        }
+      }
+    }
+    ss.rel = "stylesheet";
+    ss.href = href;
+    ss.media = "only x";
+    function ready(cb) {
+      if (doc.body) {
+        return cb();
+      }
+      setTimeout(function () {
+        ready(cb);
+      });
+    }
+    ready(function () {
+      ref.parentNode.insertBefore(ss, before ? ref : ref.nextSibling);
+    });
+    var onloadcssdefined = function (cb) {
+      var resolvedHref = ss.href;
+      var i = sheets.length;
+      while (i--) {
+        if (sheets[i].href === resolvedHref) {
+          return cb();
+        }
+      }
+      setTimeout(function () {
+        onloadcssdefined(cb);
+      });
+    };
+    function loadCB() {
+      if (ss.addEventListener) {
+        ss.removeEventListener("load", loadCB);
+      }
+      ss.media = media || "all";
+    }
+    if (ss.addEventListener) {
+      ss.addEventListener("load", loadCB);
+    }
+    ss.onloadcssdefined = onloadcssdefined;
+    onloadcssdefined(loadCB);
+    return ss;
+  };
+</script>
--- a/layout/_partial/scripts/index.ejs
+++ b/layout/_partial/scripts/index.ejs
@ -0,0 +1,30 @@
+<!-- required -->
+<%- partial('global') %>
+<% if (theme.stellar.cdn_js) { %>
+  <%- js({src: theme.stellar.cdn_js, async: true}) %>
+<% } else { %>
+  <%- js({src: 'js/main.js', async: true}) %>
+<% } %>
+<%- js({src: theme.plugins.jquery || 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js'}) %>
+
+
+<!-- optional -->
+<%- partial('lazyload') %>
+<%- partial('preload') %>
+<%- partial('swiper') %>
+
+<%- partial('scrollreveal') %>
+
+
+<%- partial('../plugins/comments/script') %>
+
+<!-- inject -->
+<% if (config.inject && config.inject.script && config.inject.script.length > 0) { %>
+  <% config.inject.script.forEach(function(js) { %>
+    <%- js %>
+  <% }) %>
+<% } %>
+
+
+<!-- lazyload scripts -->
+<%- partial('issues') %>
--- a/layout/_partial/scripts/issues.ejs
+++ b/layout/_partial/scripts/issues.ejs
@ -0,0 +1,11 @@
+<script>
+  function loadIssuesJS() {
+      const issues = document.getElementById('issues-api');
+      if (issues != undefined) {
+        loadScript('<%- url_for("/js/issues.js") %>');
+      }
+    };
+  $(function () {
+    loadIssuesJS();
+  });
+</script>
--- a/layout/_partial/scripts/lazyload.ejs
+++ b/layout/_partial/scripts/lazyload.ejs
@ -0,0 +1,25 @@
+<% if (theme.plugins.lazyload && theme.plugins.lazyload.enable) { %>
+  <script defer src="<%- theme.plugins.lazyload.js || 'https://cdn.jsdelivr.net/npm/vanilla-lazyload@17/dist/lazyload.min.js' %>"></script>
+  <script>
+    // https://www.npmjs.com/package/vanilla-lazyload
+    // Set the options globally
+    // to make LazyLoad self-initialize
+    window.lazyLoadOptions = {
+      elements_selector: ".lazyload",
+      threshold: 0
+    };
+    // Listen to the initialization event
+    // and get the instance of LazyLoad
+    window.addEventListener(
+      "LazyLoad::Initialized",
+      function (event) {
+        window.lazyLoadInstance = event.detail.instance;
+      },
+      false
+    );
+    document.addEventListener('DOMContentLoaded', function () {
+      lazyLoadInstance.update();
+    });
+  </script>
+
+<% } %>
--- a/layout/_partial/scripts/preload.ejs
+++ b/layout/_partial/scripts/preload.ejs
@ -0,0 +1,16 @@
+<% if (theme.plugins.preload.enable && theme.plugins.preload.service) { %>
+  <% let preload = theme.plugins.preload; %>
+  <% if (preload.service == 'instant_page') { %>
+    <script async src="<%- preload.instant_page %>" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>
+  <% } else if (preload.service == 'flying_pages') { %>
+    <script>
+      window.FPConfig = {
+        delay: 0,
+        ignoreKeywords: [],
+        maxRPS: 5,
+        hoverDelay: 25
+      };
+    </script>
+    <script defer src="<%- preload.flying_pages %>"></script>
+  <% } %>
+<% } %>
--- a/layout/_partial/scripts/scrollreveal.ejs
+++ b/layout/_partial/scripts/scrollreveal.ejs
@ -0,0 +1,12 @@
+<% if (theme.plugins.scrollreveal.enable && theme.plugins.scrollreveal.js) { %>
+  <%- js(theme.plugins.scrollreveal.js) %>
+  <script type="text/javascript">
+    ScrollReveal().reveal("body .reveal", {
+      distance: "<%- theme.plugins.scrollreveal.distance %>",
+      duration: "<%- theme.plugins.scrollreveal.duration %>",
+      interval: "<%- theme.plugins.scrollreveal.interval %>",
+      scale: "<%- theme.plugins.scrollreveal.scale %>",
+      easing: "ease-out",
+    });
+  </script>
+<% } %>
--- a/layout/_partial/scripts/swiper.ejs
+++ b/layout/_partial/scripts/swiper.ejs
@ -0,0 +1,29 @@
+<script>
+  function loadSwiper() {
+    if ($(".md").find(".swiper-container").length == 0) return;
+    loadCSS('<%- theme.plugins.swiper.css %>');
+    loadScript('<%- theme.plugins.swiper.js %>', () => {
+      var swiper = new Swiper('.swiper-container', {
+        slidesPerView: 'auto',
+        spaceBetween: 8,
+        centeredSlides: true,
+        zoom: true,
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        autoplay: {
+          delay: 5000,
+          disableOnInteraction: false,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+      });
+	  });
+  };
+  $(function () {
+    loadSwiper();
+  });
+</script>
--- a/layout/_partial/sidebar/header.ejs
+++ b/layout/_partial/sidebar/header.ejs
@ -0,0 +1,17 @@
+<header class='header'>
+  <%- partial('logo') %>
+  <nav class='menu'>
+    <% theme.sidebar.menu.forEach((item, i) => { %>
+      <% if (item.class == page.class) { %>
+        <a class='nav-item active' href='<%- url_for(item.url) %>'>
+          <span><%- __(item.name) %></span>
+        </a>
+      <% } else { %>
+        <a class='nav-item' href='<%- url_for(item.url) %>'>
+          <span><%- __(item.name) %></span>
+        </a>
+      <% } %>
+    <% }); %>
+
+  </nav>
+</header>
--- a/layout/_partial/sidebar/index.ejs
+++ b/layout/_partial/sidebar/index.ejs
@ -0,0 +1,38 @@
+<%
+// 默认组件
+if (page.sidebar == undefined) {
+  if (page.layout == 'post' && page.content) {
+    page.sidebar = ['toc', 'recent'];
+  } else if (page.layout == 'wiki' && page.content) {
+    page.sidebar = ['toc', 'wiki_more'];
+  } else {
+    page.sidebar = ['welcome', 'recent'];
+  }
+}
+function layoutFooterDiv() {
+  if (theme.footer.social && theme.footer.social.length > 0) {
+    var el = '<footer class="footer"><div class="social-wrap">';
+    theme.footer.social.forEach(item => {
+      if (item.icon && item.url) {
+        el += '<a class="social" href="' + url_for(item.url) + '">' + item.icon + '</a>';
+      }
+    });
+    el += '</div></footer>';
+    return el;
+  } else {
+    return '';
+  }
+}
+%>
+<div class='wrap'>
+  <%- partial('header') %>
+  <div class='widgets'>
+    <% page.sidebar.forEach(function(widget){ %>
+      <% if (widget in theme.sidebar.widgets) { %>
+        <% let w = theme.sidebar.widgets[widget]; %>
+        <%- partial('widgets/' + w.layout, {item: w}) %>
+      <% } %>
+    <% }) %>
+  </div>
+  <%- layoutFooterDiv() %>
+</div>
--- a/layout/_partial/sidebar/logo.ejs
+++ b/layout/_partial/sidebar/logo.ejs
@ -0,0 +1,6 @@
+<a class='logo-wrap' href='/'>
+  <% if (theme.sidebar.logo.avatar != false) { %>
+    <div class='img'><img no-lazy src='<%- theme.sidebar.logo.avatar || config.avatar %>'/></div>
+  <% } %>
+  <div class='title'><%- theme.sidebar.logo.title || config.title %></div>
+</a>
--- a/layout/_partial/sidebar/widgets/markdown.ejs
+++ b/layout/_partial/sidebar/widgets/markdown.ejs
@ -0,0 +1,10 @@
+<div class='widget-wrap' id='markdown'>
+  <div class='widget-header dis-select'>
+    <span class='name'><%- item.title %></span>
+  </div>
+  <div class='widget-body'>
+    <% (item.content||[]).forEach(function(row){ %>
+      <%- markdown(row) %>
+    <% }) %>
+  </div>
+</div>
--- a/layout/_partial/sidebar/widgets/recent.ejs
+++ b/layout/_partial/sidebar/widgets/recent.ejs
@ -0,0 +1,30 @@
+<div class='widget-wrap' id='recent'>
+  <div class='widget-header dis-select'>
+    <span class='name'><%- __('meta.recent_update') %></span>
+    <% if (item.rss) { %>
+      <a class='cap-action' id='rss' title='Subscribe' href='<%- item.rss %>'>
+        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8938"><path d="M800.966 947.251c0-404.522-320.872-732.448-716.69-732.448V62.785c477.972 0 865.44 395.987 865.44 884.466h-148.75z m-162.273 0h-148.74c0-228.98-181.628-414.598-405.678-414.598v-152.01c306.205 0 554.418 253.68 554.418 566.608z m-446.24-221.12c59.748 0 108.189 49.503 108.189 110.557 0 61.063-48.44 110.563-108.188 110.563-59.747 0-108.18-49.5-108.18-110.563 0-61.054 48.433-110.556 108.18-110.556z" p-id="8939"></path></svg>
+      </a>
+    <% } %>
+  </div>
+  <div class='widget-body'>
+    <%
+    var arr = page.class == 'wiki' ? site.pages.filter(function(p){
+      return p.layout == 'wiki' && p.title && p.title.length > 0;
+    }) : site.posts.filter(function(p){
+      return p.title && p.title.length > 0;
+    });
+    %>
+    <% arr.sort('updated', -1).limit(item.limit).each(function(post){ %>
+      <div class='post-title'>
+        <a href="<%= url_for(post.link || post.path) %>">
+          <% if (post.wiki && (post.title.toUpperCase().includes(post.wiki.toUpperCase()) == false)) { %>
+            <%- post.wiki ? post.wiki + ': ' : '' %><%- post.title %>
+          <% } else { %>
+            <%- post.title %>
+          <% } %>
+        </a>
+      </div>
+    <% }) %>
+  </div>
+</div>
--- a/layout/_partial/sidebar/widgets/toc.ejs
+++ b/layout/_partial/sidebar/widgets/toc.ejs
@ -0,0 +1,77 @@
+<%
+var enable = false;
+if (page.layout == 'post') {
+  if (page.content && toc(page.content).length > 0) {
+    enable = true;
+  }
+} else if (page.layout == 'wiki' || page.sidebar.includes('toc') == true) {
+  enable = true;
+}
+
+function layout_toc() {
+  if (toc(page.content).length > 0) {
+    return toc(page.content, {
+      list_number: item.list_number,
+      min_depth: item.min_depth,
+      max_depth: item.max_depth
+    });
+  }
+}
+ %>
+<% if (enable == true) { %>
+  <div class='widget-wrap' id='toc'>
+    <div class='widget-header dis-select'>
+      <span class='name'>
+        <% if (page.toc_title) { %>
+          <%- page.toc_title %>
+        <% } else if (page.layout == 'wiki') { %>
+          <%- page.wiki || item.wiki %>
+        <% } else { %>
+          <%- __('meta.toc') %>
+        <% } %>
+      </span>
+      <a class='cap-action' id='s-top' title='<%- __("meta.back_to_top") %>' href='#start'>
+        <svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10505"><path d="M884.526 163.323H208.881c-30.516 0-55.25 24.934-55.25 55.685s24.734 55.685 55.25 55.685h675.645c30.515 0 55.255-24.93 55.255-55.685s-24.74-55.685-55.255-55.685zM568.253 336.87a56.765 56.765 0 0 0-4.06-3.701c-0.63-0.517-1.29-0.968-1.935-1.454-0.799-0.605-1.577-1.224-2.406-1.787-0.779-0.528-1.583-0.978-2.386-1.46-0.748-0.45-1.485-0.926-2.253-1.341-0.81-0.44-1.649-0.814-2.483-1.208-0.8-0.384-1.588-0.784-2.407-1.132-0.814-0.338-1.643-0.61-2.463-0.906-0.875-0.323-1.745-0.66-2.641-0.932-0.825-0.25-1.66-0.435-2.489-0.645-0.916-0.236-1.817-0.492-2.75-0.681-0.962-0.19-1.935-0.307-2.902-0.445-0.814-0.118-1.618-0.272-2.442-0.354a55.163 55.163 0 0 0-5.438-0.276h-0.015c-0.267 0-0.528 0.036-0.794 0.036a54.856 54.856 0 0 0-39.86 16.271l-279.413 281.61c-21.576 21.75-21.576 57.006 0 78.756a54.876 54.876 0 0 0 39.07 16.312 54.835 54.835 0 0 0 39.066-16.312l186.67-188.145V898.09c0 30.75 24.74 55.685 55.256 55.685s55.255-24.934 55.255-55.685v-387.42L769.526 697.22a54.871 54.871 0 0 0 39.065 16.312 54.835 54.835 0 0 0 39.066-16.312c21.576-21.75 21.576-57.006 0-78.756L568.253 336.87z" p-id="10506"></path></svg>
+      </a>
+    </div>
+    <div class='widget-body <%- page.layout == "wiki" ? "wiki" : "post" %>'>
+      <% if (page.layout == 'wiki' && page.wiki) { %>
+        <%
+        var wikis = [];
+        wikis = site.pages.filter(function (p) {
+          if (p.layout == 'wiki' && p.wiki && p.wiki == page.wiki) {
+            if (p.order == undefined) {
+              p.order = 0;
+            }
+            return true;
+          } else {
+            return false;
+          }
+        }).sort('order');
+        %>
+        <% if (wikis.length > 1) { %>
+          <% wikis.each(function(p) { %>
+            <% if (p.path == page.path) { %>
+              <div class='doc-tree active'>
+                <a class='doc-tree-link active' href="<%- url_for(p.path) %>"><span class="toc-text"><%- p.title || p.seo_title %></span></a>
+                <%- layout_toc() %>
+              </div>
+            <% } else { %>
+              <div class='doc-tree'>
+                <a class='doc-tree-link' href="<%- url_for(p.path) %>"><span class="toc-text"><%- p.title || p.seo_title %></span></a>
+              </div>
+            <% } %>
+          <% }); %>
+        <% } else { %>
+          <div class='doc-tree active'>
+            <%- layout_toc() %>
+          </div>
+        <% } %>
+      <% } else { %>
+        <div class='doc-tree active'>
+          <%- layout_toc() %>
+        </div>
+      <% } %>
+    </div>
+  </div>
+<% } %>
--- a/layout/_partial/sidebar/widgets/wiki_more.ejs
+++ b/layout/_partial/sidebar/widgets/wiki_more.ejs
@ -0,0 +1,28 @@
+<% if (page.layout == 'wiki') { %>
+  <% site.pages.filter(function (p) { %>
+    <% return p.layout == 'index' && p.title && p.wiki && p.wiki.includes(page.wiki) %>
+  <% }).limit(1).each(function(current_group) { %>
+    <% if (current_group.wiki.length > 1) { %>
+      <div class='widget-wrap' id='related'>
+        <div class='widget-header dis-select'>
+          <span class='name'>更多<%- current_group.title %></span>
+        </div>
+        <div class='widget-body'>
+          <% current_group.wiki.forEach((wiki, i) => { %>
+            <% site.pages.filter(function (p) { %>
+              <% return p.wiki == wiki && p.wiki != page.wiki && p.description %>
+            <% }).each(function(post) { %>
+              <% if (post.wiki || post.title) { %>
+                <div class='post-title'>
+                  <a href="<%= url_for(post.link || post.path) %>">
+                    <%- post.wiki || post.title %>
+                  </a>
+                </div>
+              <% } %>
+            <% }); %>
+          <% }); %>
+        </div>
+      </div>
+    <% } %>
+  <% }); %>
+<% } %>
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@ -0,0 +1,43 @@
+<%
+if (page.class == undefined) {
+  page.class = 'post';
+}
+%>
+<% if (page.posts && (is_category() || is_tag())) { %>
+  <%- partial('index') %>
+<% } else { %>
+  <% page.title = __('btn.archives'); %>
+  <%- partial('_partial/navbar/list_post') %>
+  <div class='post-list'>
+  	<% var years = []; %>
+  	<% site.posts.sort('date', -1).each(function(post) { %>
+  		<% post.year = date(post.date, 'YYYY'); %>
+  		<% if (post.year && (years.includes(post.year) == false) && (post.title || post.date)) { %>
+  			<% years.push(post.year); %>
+  		<% } %>
+  	<% }); %>
+    <div class='list-title'><%- __('page.archives', years.length, site.posts.length) %></div>
+  	<% years.forEach((year, i) => { %>
+  		<article class='post-card reveal' id='archive'>
+  			<div class='card-title'><%= year %></div>
+  			<% site.posts.sort('date', -1).filter(function (post) { %>
+  				<% post.year = date(post.date, 'YYYY'); %>
+  		    <% return post.year == year; %>
+  		  <% }).each(function(post) { %>
+  				<div>
+            <a class='post' href="<%= url_for(post.link || post.path) %>">
+    					<time><%= date(post.date, 'MM-DD') %></time>
+    					<span>
+                <% if (post.title) { %>
+      						<%- post.title %>
+      					<% } else if (post.date) { %>
+      						<%= date(post.date, config.date_format) %>
+      					<% } %>
+              </span>
+    				</a>
+          </div>
+  			<% }); %>
+  		</article>
+  	<% }); %>
+  </div>
+<% } %>
--- a/layout/categories.ejs
+++ b/layout/categories.ejs
@ -0,0 +1,23 @@
+<%
+if (page.class == undefined) {
+  page.class = 'post';
+}
+%>
+<% if (site.categories.length) { %>
+  <% page.title = __('btn.categories'); %>
+  <% page.layout = 'categories'; %>
+  <%- partial('_partial/navbar/list_post') %>
+  <div class='post-list'>
+    <div class='list-title'><%- __('page.categories', site.categories.length) %></div>
+    <article class='post-card reveal' id='cats'>
+      <% site.categories.sort('path').each(function(category){ %>
+        <div>
+          <a class="<%= category.parent ? 'cat child' : 'cat'%>" href="<%= url_for(category.path) %>">
+            <span class='name'><%- category.name %></span>
+            <span class='badge'>(<%- category.posts.length %>)</span>
+          </a>
+        </div>
+      <% }) %>
+    </article>
+  </div>
+<% } %>
--- a/layout/index.ejs
+++ b/layout/index.ejs
@ -0,0 +1,63 @@
+<%
+if (page.class == undefined) {
+  if (page.layout == 'index' && page.title && page.wiki) {
+    page.class = 'wiki';
+  } else {
+    page.class = 'post';
+  }
+}
+%>
+<% if (page.class == 'post') { %>
+  <%- partial('_partial/navbar/list_post') %>
+  <% if (page.posts) { %>
+    <div class='post-list post'>
+      <% page.posts.each(function(post){ %>
+        <a class='post-card post reveal' href='<%- url_for(post.link || post.path) %>'>
+          <article class='excerpt md'>
+            <%- partial('_partial/post_list/post_card', {post: post}) %>
+          </article>
+        </a>
+      <% }) %>
+      <%- partial('_partial/post_list/paginator') %>
+    </div>
+  <% } %>
+<% } else if (page.class == 'wiki') { %>
+  <% function outputExcerpt(post) { %>
+    <a class='post-card wiki reveal' href='<%- url_for(post.link || post.path) %>'>
+      <article class='excerpt md'>
+        <%- partial('_partial/post_list/wiki_card', {post: post}) %>
+      </article>
+    </a>
+  <% } %>
+  <%- partial('_partial/navbar/list_wiki') %>
+  <% if (page.title && page.wiki) { %>
+    <div class='post-list wiki filter'>
+      <% page.wiki.forEach((wiki, i) => { %>
+        <% site.pages.filter(function (p) { %>
+          <% return p.layout == 'wiki' && p.wiki == wiki && p.description; %>
+        <% }).limit(1).each(function(post) { %>
+          <%- outputExcerpt(post) %>
+        <% }); %>
+      <% }); %>
+    </div>
+  <% } else { %>
+    <div class='post-list wiki'>
+      <%
+      var wikis = [];
+      wikis = site.pages.filter(function (p) {
+        if (p.layout == 'wiki' && p.wiki && p.description) {
+          if (p.order == undefined) {
+            p.order = 0;
+          }
+          return true;
+        } else {
+          return false;
+        }
+      }).sort('order');
+      %>
+      <% wikis.forEach(function(post) { %>
+        <%- outputExcerpt(post) %>
+      <% }); %>
+    </div>
+  <% } %>
+<% } %>
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang='<%- page.lang %>'>
+<%- partial('_partial/head') %>
+<body theme='<%- page.dark ? "dark" : "light" %>'>
+  <%- partial('_partial/article/wiki_cover') %>
+  <div class='l_body' id='start'>
+    <aside class='l_left'>
+    <%- partial('_partial/sidebar/index') %>
+    </aside>
+    <div class='l_main<%- page.content ? "" : " list" %>'>
+      <%- partial('_partial/sidebar/header') %>
+      <%- body %>
+      <footer class='page-footer'>
+        <%- partial('_partial/footer') %>
+      </footer>
+      <%- partial('_partial/menubtn') %>
+    </div>
+  </div>
+  <%- partial('_partial/scripts/index') %>
+</body>
+</html>
--- a/layout/page.ejs
+++ b/layout/page.ejs
@ -0,0 +1,12 @@
+<% if ((page.h1 && page.h1.length > 0) || (page.content && page.content.length > 0)) { %>
+  <%- partial('_partial/navbar/breadcrumb') %>
+  <article class='content md <%- page.layout %> reveal'>
+  <% if (page.h1 && page.h1.length > 0) { %>
+    <h1 class='article-title'><span><%- page.h1 %></span></h1>
+  <% } %>
+  <% if (page.content && page.content.length > 0) { %>
+    <%- page.content %>
+  <% } %>
+  </article>
+<% } %>
+<%- partial('_partial/plugins/comments/layout') %>
--- a/layout/post.ejs
+++ b/layout/post.ejs
@ -0,0 +1,15 @@
+<%
+if (page.class == undefined) {
+  page.class = 'post';
+}
+%>
+<% let post = page; %>
+<%- partial('_partial/navbar/breadcrumb') %>
+<article class='content md <%- post.layout %> reveal'>
+<h1 class='article-title'><span><%- post.h1 || post.title %></span></h1>
+<%- post.content %>
+</article>
+<%- partial('_partial/article/references') %>
+<%- partial('_partial/article/read_next') %>
+<%- partial('_partial/article/related_posts') %>
+<%- partial('_partial/plugins/comments/layout') %>
--- a/layout/tags.ejs
+++ b/layout/tags.ejs
@ -0,0 +1,21 @@
+<%
+if (page.class == undefined) {
+  page.class = 'post';
+}
+%>
+<% if (site.tags.length) { %>
+  <% page.title = __('btn.tags'); %>
+  <% page.layout = 'tags'; %>
+  <%- partial('_partial/navbar/list_post') %>
+  <div class='post-list'>
+    <div class='list-title'><%- __('page.tags', site.tags.length) %></div>
+    <article class='post-card reveal' id='tags'>
+      <% site.tags.sort('length', -1).each(function(tag){ %>
+        <a class='tag' href="<%= url_for(tag.path) %>">
+          <span class='name'><%= tag.name %></span>
+          <span class='badge'>x<%- tag.length %></span>
+        </a>
+      <% }) %>
+    </article>
+  </div>
+<% } %>
--- a/layout/wiki.ejs
+++ b/layout/wiki.ejs
@ -0,0 +1,22 @@
+<%
+if (page.class == undefined) {
+  page.class = 'wiki';
+}
+if (page.layout == undefined) {
+  page.layout = 'index';
+}
+if (page.title == undefined) {
+  page.title = 'Wiki';
+}
+%>
+<% if (page.layout == 'index') { %>
+  <%- partial('index') %>
+<% } else { %>
+  <%- partial('_partial/navbar/breadcrumb') %>
+  <article class='content md <%- page.layout %>'>
+  <h1 class='article-title'><span><%- page.h1 || page.title %></span></h1>
+  <%- page.content %>
+  </article>
+  <%- partial('_partial/article/read_next') %>
+  <%- partial('_partial/plugins/comments/layout') %>
+<% } %>
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "hexo-theme-stellar",
+  "version": "1.0.0-rc.1",
+  "description": "Elegant and powerful theme for Hexo.",
+  "main": "package.json",
+  "scripts": {
+    "test": "echo test"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xaoxuu/hexo-theme-stellar.git"
+  },
+  "keywords": [
+    "hexo",
+    "theme",
+    "stellar"
+  ],
+  "author": "xaoxuu (https://github.com/xaoxuu/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xaoxuu/hexo-theme-stellar/issues/"
+  },
+  "homepage": "https://xaoxuu.com/wiki/stellar/",
+  "devDependencies": {
+  }
+}
--- a/publish.sh
+++ b/publish.sh
@ -0,0 +1,56 @@
+#!/bin/bash
+#
+# https://xaoxuu.com/wiki/stellar
+#
+# 只有 rc 阶段的测试版本和正式版本发布到 npm
+#
+# 1. 输入要发布的版本号
+# 2. 修改主题 _config.yml 中的 stellar.version
+# 3. 修改主题 package.json 中的 version
+# 4. 提交 commit
+
+# 版本号 例如 1.0.0-rc.1
+VERSION=$1
+
+# 替换版本号
+function prepare() {
+  text="'"${VERSION}"'"" # This is theme's version."
+  sed -i "" "s/^  version:\([^\"]\{1,\}\)/  version: ${text}/g" '_config.yml'
+  sed -i "" "s/^  \"version\":\([^,]\{1,\}\)/  \"version\": \"${VERSION}\"/g" 'package.json'
+}
+
+# 提交
+function commit() {
+  msg="release: ${VERSION}"
+
+  printf "\n\n> \033[32m%s\033[0m" 'git add --all'
+  printf "\n"
+  git add --all
+
+  printf "\n\n> \033[32m%s\033[0m" 'git commit -m'
+  printf " \033[35m%s\033[0m" ${msg}
+  printf "\n"
+  git commit -m "${msg}"
+
+  printf "\n\n> \033[32m%s\033[0m" 'git push origin'
+  printf "\n"
+  git push origin
+
+  # done
+  printf "\n\n> \033[32m%s\033[0m\n" 'Congratulations!'
+}
+
+
+while :
+do
+  case $VERSION in
+    '')
+      read -p "请输入要发布的版本号: " VERSION
+    ;;
+    *)
+    break
+    ;;
+  esac
+done
+
+prepare && commit
--- a/scripts/events/index.js
+++ b/scripts/events/index.js
@ -0,0 +1,18 @@
+/* global hexo */
+
+'use strict';
+
+hexo.on('generateBefore', () => {
+  // Merge config.
+  require('./lib/config')(hexo);
+});
+
+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/
+===================================================`);
+});
--- a/scripts/events/lib/config.js
+++ b/scripts/events/lib/config.js
@ -0,0 +1,41 @@
+/**
+ * 部分代码借鉴自 NexT:
+ * https://github.com/next-theme/hexo-theme-next/blob/master/scripts/events/lib/config.js
+ */
+
+'use strict';
+
+module.exports = hexo => {
+  
+  const { cache, language_switcher } = hexo.theme.config;
+  const warning = function(...args) {
+    hexo.log.warn(`Since ${args[0]} is turned on, the ${args[1]} is disabled to avoid potential hazards.`);
+  };
+
+  if (cache && cache.enable && language_switcher) {
+    warning('language_switcher', 'caching');
+    cache.enable = false;
+  }
+
+  if (cache && cache.enable && hexo.config.relative_link) {
+    warning('caching', '`relative_link` option in Hexo `_config.yml`');
+    hexo.config.relative_link = false;
+  }
+  hexo.config.meta_generator = false;
+
+  // merge data
+  const data = hexo.locals.get('data');
+  if (data.widgets) {
+    for (let id of Object.keys(data.widgets)) {
+      hexo.theme.config.sidebar.widgets[id] = data.widgets[id];
+    }
+  }
+
+
+  // default widgets
+  if (hexo.theme.config.sidebar.widgets.wiki_more == undefined) {
+    hexo.theme.config.sidebar.widgets.wiki_more = {layout: 'wiki_more'};
+  }
+
+
+};
--- a/scripts/filters/index.js
+++ b/scripts/filters/index.js
@ -0,0 +1,5 @@
+'use strict';
+
+
+hexo.extend.filter.register('after_post_render', require('./lib/lazyload').processPost);
+hexo.extend.filter.register('after_render:html',  require('./lib/lazyload').processSite);
--- a/scripts/filters/lib/lazyload.js
+++ b/scripts/filters/lib/lazyload.js
@ -0,0 +1,67 @@
+'use strict';
+
+const fs = require('hexo-fs');
+
+function lazyProcess(htmlContent, target) {
+  const cfg = this.theme.config.plugins.lazyload;
+  if (cfg == undefined || cfg.enable != true) {
+    return htmlContent;
+  }
+  if (cfg.onlypost == true) {
+    if (target != 'post') {
+      return htmlContent;
+    }
+  }
+  const loadingImg = cfg.loadingImg;
+  return htmlContent.replace(/<img(.*?)src="(.*?)"(.*?)>/gi, function(str, p1, p2) {
+    // might be duplicate
+    if (/data-srcset/gi.test(str)) {
+      return str;
+    }
+    if (/src="data:image(.*?)/gi.test(str)) {
+      return str;
+    }
+    if (/no-lazy/gi.test(str)) {
+      return str;
+    }
+    let cls = '';
+    if (str.indexOf('class=') > -1) {
+      cls = str.substring(str.indexOf('class='));
+      if (cls.length > 7) {
+        const c = cls.substring(6, 7);
+        cls = cls.split(c);
+        if (cls.length > 1) {
+          cls = cls[0] + '"' + cls[1] + '"';
+        }
+      }
+    }
+    let result = str;
+    let newCls = '';
+    if (cls.length > 0 && result.includes('class=')) {
+      newCls = cls.replace(/(class=|[\"]*)/g, '') + ' ';
+    }
+    const oldCls = newCls.trim();
+    if (loadingImg) {
+      newCls += 'lazyload placeholder';
+    } else {
+      newCls += 'lazyload';
+    }
+    if (cls.length > 0) {
+      result = result.replace('"' + oldCls + '"', '"' + newCls + '"');
+    }
+    if (loadingImg) {
+      return result.replace(p2, p2 + '" class="lazyload placeholder" ' + 'data-srcset="' + p2 + '" srcset="' + loadingImg);
+    }
+    return result.replace(p2, p2 + '" class="lazyload" ' + 'data-srcset="' + p2 + '" srcset="' + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAAaADAAQAAAABAAAAAQAAAADa6r/EAAAAC0lEQVQIHWNgAAIAAAUAAY27m/MAAAAASUVORK5CYII=');
+
+  });
+}
+
+module.exports.processPost = function(data) {
+  data.content = lazyProcess.call(this, data.content, 'post');
+  return data;
+};
+
+module.exports.processSite = function(htmlContent) {
+  return lazyProcess.call(this, htmlContent, 'site');
+};
--- a/scripts/generators/404.js
+++ b/scripts/generators/404.js
@ -0,0 +1,10 @@
+/**
+ * 404 v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+hexo.extend.generator.register('404', function (locals) {
+  return {
+    path: '/404.html',
+    layout: ['404']
+  }
+});
--- a/scripts/generators/categories.js
+++ b/scripts/generators/categories.js
@ -0,0 +1,11 @@
+/**
+ * categories v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+hexo.extend.generator.register('categories', function (locals) {
+  return {
+    path: hexo.config.category_dir + '/index.html',
+    data: locals.posts,
+    layout: ['categories']
+  }
+});
--- a/scripts/generators/tags.js
+++ b/scripts/generators/tags.js
@ -0,0 +1,11 @@
+/**
+ * tags v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+ hexo.extend.generator.register('tags', function (locals) {
+  return {
+    path: hexo.config.tag_dir + '/index.html',
+    data: locals.posts,
+    layout: ['tags']
+  }
+});
--- a/scripts/generators/wiki.js
+++ b/scripts/generators/wiki.js
@ -0,0 +1,11 @@
+/**
+ * wiki v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+hexo.extend.generator.register('wiki', function (locals) {
+  return {
+    path: (hexo.config.wiki_dir || 'wiki') + '/index.html',
+    data: locals.posts,
+    layout: ['wiki']
+  }
+});
--- a/scripts/helpers/related_posts.js
+++ b/scripts/helpers/related_posts.js
@ -0,0 +1,54 @@
+/**
+ * https://github.com/tea3/hexo-related-popular-posts/wiki/More-Settings#customize-html
+ */
+
+'use strict';
+var util = require('hexo-util');
+
+// Examples of helper
+hexo.extend.helper.register('popular_posts_wrapper', function(args){
+  if (!args || !args.json || args.json.length == 0) return "";
+  const cfg = hexo.theme.config.article.related_posts;
+  if (cfg.enable != true) return;
+  var returnHTML = "";
+  var div = `
+    <div class="related_posts">
+    <section class='header'>
+      <div class='title cap cyan'>${cfg.title}</div>
+    </section>
+    <section class='body'>
+    `;
+  function generateHTML(list){
+
+    var el = '';
+    el += '<a class="item" href="' + list.path + '" title="' + list.title + '" rel="bookmark ">';
+
+    if (cfg.placeholder_img && cfg.placeholder_img.length > 0) {
+      el += '<div class="img">'
+      if (list.img && list.img != "") {
+        el += '<img src="' + list.img + '" />';
+      } else {
+        el += '<img src="' + cfg.placeholder_img + '" />';
+      }
+      el += '</div>';
+    }
+
+    el += '<span class="title">' + list.title + '</span>';
+
+    if (list.excerpt && list.excerpt.length > 0) {
+      el += '<span class="excerpt">' + util.truncate(util.stripHTML(list.excerpt), {length: 64}) + '</span>';
+    }
+
+    el +=  '</a>';
+    return el;
+  }
+
+  for(var i = 0; i < args.json.length; i++) {
+    returnHTML += generateHTML(args.json[i]);
+  }
+
+  if (returnHTML != "") returnHTML = "<div class=\"" + args.class + "\">" + returnHTML + "</div>";
+  div += returnHTML;
+  div += '</section></div>';
+  return div;
+});
--- a/scripts/tags/about.js
+++ b/scripts/tags/about.js
@ -0,0 +1,46 @@
+/**
+ * about.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% about [avatar:xxx] [height:80px] %}
+ * title / body
+ * {% endabout %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('about', function(args, content) {
+  args = ArgsMap(args, ['avatar', 'height']);
+  var rows = hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n');
+  var el = '';
+  // wrapper
+  el += '<div class="tag-plugin about">';
+  el += '<div class="about-header">';
+  // avatar
+  el += '<div class="avatar">'
+  el += '<img src="' + args.avatar + '"';
+  if (args.height && args.height.length > 0) {
+    el += ' height="' + args.height + '"/>';
+  } else {
+    el += '/>';
+  }
+  el += '</div>';
+  // title
+  if (rows.length > 0) {
+    // el += '<div class="title">';
+    el += rows.shift();
+    // el += '</div>';
+  }
+  
+  el += '</div>';
+
+  // content
+  el += '<div class="about-body">';
+  el += rows.join('');
+  el += '</div>';
+  
+  el += '</div>';
+  return el;
+}, {ends: true});
--- a/scripts/tags/checkbox.js
+++ b/scripts/tags/checkbox.js
@ -0,0 +1,40 @@
+/**
+ * checkbox.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * radio.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% checkbox [checked:false] [color:cyan] [symbol:plus/minus/times] text %}
+ * {% radio [checked:false] [color:cyan] text %}
+ */
+
+'use strict';
+
+const { ArgsMap, ArgsJoinTags } = require('./utils');
+
+function layoutDiv(args, type) {
+  args = ArgsMap(args, ['color', 'checked', 'symbol'], ['text']);
+  var el = '';
+  // div
+  el += '<div class="tag-plugin checkbox"';
+  el += ' ' + ArgsJoinTags(args, ['color', 'symbol']).join(' ');
+  el += '>';
+  // input
+  el += '<input type="' + type + '"';
+  if (args.checked == 'true') {
+    el += ' checked="true"';
+  }
+  el += '/>';
+  // text
+  el += '<span>' + args.text + '</span>';
+  // div
+  el += '</div>';
+  return el;
+}
+
+hexo.extend.tag.register('checkbox', function(args) {
+  return layoutDiv(args, 'checkbox');
+});
+
+hexo.extend.tag.register('radio', function(args) {
+  return layoutDiv(args, 'radio');
+});
--- a/scripts/tags/folding.js
+++ b/scripts/tags/folding.js
@ -0,0 +1,32 @@
+/**
+ * folding.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% folding [color:yellow] [codeblock:false] [open:false] title %}
+ * body
+ * {% endtable %}
+ */
+
+'use strict';
+
+const { ArgsMap, ArgsJoinTags } = require('./utils');
+
+hexo.extend.tag.register('folding', function(args, content) {
+  args = ArgsMap(args, ['color', 'codeblock', 'open'], ['title']);
+  var el = '';
+  // header
+  el += '<details class="tag-plugin"'
+  el += ' ' + ArgsJoinTags(args, ['color', 'codeblock']).join(' ');
+  if (args.open && args.open == 'true') {
+    el += ' open';
+  }
+  el += '>';
+  // summary
+  el += '<summary><span>' + args.title + '</span></summary>';
+  // content
+  el += '<div class="body">';
+  el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  el += '</div></details>';
+
+  return el;
+}, {ends: true});
--- a/scripts/tags/frame.js
+++ b/scripts/tags/frame.js
@ -0,0 +1,68 @@
+/**
+ * frame.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% frame iphone11 [img:src] [video:url] [focus:top/bottom] [alt] %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('frame', function(args) {
+  args = ArgsMap(args, ['focus', 'img', 'video'], ['device', 'alt']);
+  const img = args.img || '';
+  const video = args.video || '';
+  const device = args.device || '';
+  const focus = args.focus || '';
+  const alt = args.alt || '';
+  if ((img.length == 0 && video.length == 0) || device.length == 0) {
+    return;
+  }
+  var el = '';
+  function imgTag(url, alt) {
+    let i = '';
+    i += '<img class="img" src="' + url + '"';
+    if (alt.length > 0) {
+      i += ' alt="' + alt + '"';
+    }
+    i += '/>';
+    return i;
+  }
+  if (video.length > 0) {
+    el += '<div class="tag-plugin video-wrap">';
+    el += '<div class="frame-wrap" id="' + device + '"';
+    if (focus.length > 0) {
+      el += 'focus="' + focus + '">';
+    } else {
+      el += '>';
+    }
+    el += '<video';
+    if (img.length > 0) {
+      el += ' poster="' + img + '"';
+    }
+    el += ' playsinline="" muted="" loop="" autoplay="" preload="metadata">';
+    el += '<source src="' + video + '" type="video/mp4">';
+    el += '</video>';
+
+    el += '<div class="frame"></div>';
+    el += '</div>';
+    el += '</div>';
+  } else if (img.length > 0) {
+    el += '<div class="tag-plugin img-wrap">';
+    el += '<div class="frame-wrap" id="' + device + '"';
+    if (focus.length > 0) {
+      el += 'focus="' + focus + '">';
+    } else {
+      el += '>';
+    }
+    el += imgTag(img, alt);
+    el += '<div class="frame"></div>';
+    el += '</div>';
+    if (alt.length > 0) {
+      el += '<span class="image-caption">' + alt + '</span>';
+    }
+    el += '</div>';
+  }
+  return el;
+});
--- a/scripts/tags/friends.js
+++ b/scripts/tags/friends.js
@ -0,0 +1,66 @@
+/**
+ * friends.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% friends [style:rect] [group:name] %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('friends', function(args) {
+  args = ArgsMap(args, ['style', 'group']);
+  var friends = hexo.locals.get('data').friends;
+  if (friends == undefined) {
+    return;
+  }
+  var el = '<div class="tag-plugin friends-wrap ';
+  if (args.style && args.style.length > 0) {
+    el += args.style;
+  } else {
+    el += ' round';
+  }
+  el += '">';
+  function groupHeader(group) {
+    var header = '<div class="group-header">';
+    header += '<p class="title">' + group.title + '</p>';
+    header += '<p class="description">' + group.description + '</p>';
+    header += '</div>';
+    return header;
+  }
+  function cell(friend) {
+    if (friend.url && friend.title) {
+      var cell = '<div class="user-simple">';
+      cell += '<a href="' + friend.url + '">';
+      cell += '<img src="' + friend.avatar + '"/>';
+      cell += '<div class="name"><span>' + friend.title + '</span></div>';
+      cell += '</a></div>'
+      return cell;
+    } else {
+      return '';
+    }
+  }
+  for (let groupId of Object.keys(friends)) {
+    function f() {
+      if (groupId in friends) {
+        let group = friends[groupId];
+        el += groupHeader(group);
+        el += '<div class="group-body">';
+        group.items.forEach((friend, i) => {
+          el += cell(friend);
+        });
+        el += '</div>';
+      }
+    }
+    if (args.group && args.group.length > 0) {
+      if (args.group == groupId) {
+        f();
+      }
+    } else {
+      f();
+    }
+  }
+  el += '</div>';
+  return el;
+});
--- a/scripts/tags/ghcard.js
+++ b/scripts/tags/ghcard.js
@ -0,0 +1,41 @@
+/**
+ * friends.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% ghcard user/repo [theme:xxx] %} or {% ghcard user %}
+ * 
+ * example:
+ * {% ghcard xaoxuu %}
+ * {% ghcard xaoxuu/hexo-theme-stellar %}
+ * 
+ * API: https://github.com/anuraghazra/github-readme-stats
+ */
+
+'use strict';
+
+const { ArgsMap, ArgsJoinURLParams } = require('./utils');
+
+hexo.extend.tag.register('ghcard', function(args) {
+  var params = ['show_owner', 'theme', 'title_color', 'text_color', 'icon_color', 'bg_color', 'hide_border', 'cache_seconds', 'locale'];
+  args = ArgsMap(args, params, ['repo']);
+  const path = args.repo;
+  var el = '';
+  el += '<div class="tag-plugin ghcard">';
+  el += '<a class="ghcard" rel="external nofollow noopener noreferrer" href="https://github.com/' + path + '">';
+  let url = '';
+  if (path.includes('/')) {
+    // is repo
+    const ps = path.split('/');
+    url += 'https://github-readme-stats.vercel.app/api/pin/?username=' + ps[0] + '&repo=' + ps[1];
+  } else {
+    // is user
+    url += 'https://github-readme-stats.vercel.app/api/?username=' + path;
+  }
+  url += '&' + ArgsJoinURLParams(args, params);
+  if (!url.includes('&show_owner=')) {
+    url += '&show_owner=true';
+  }
+  el += '<img src="' + url + '"/>';
+  el += '</a></div>';
+  return el;
+});
--- a/scripts/tags/image.js
+++ b/scripts/tags/image.js
@ -0,0 +1,66 @@
+/**
+ * image.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% image src [alt] [width:400px] [bg:#eee] [download:true/false/url] %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('image', function(args) {
+  args = ArgsMap(args, ['width', 'height', 'bg', 'download', 'padding'], ['src', 'alt']);
+  var style = '';
+  if (args.width) {
+    style += 'width:' + args.width + ';';
+  }
+  if (args.height) {
+    style += 'height:' + args.height + ';';
+  }
+  if (args.padding) {
+    style += 'padding:' + args.padding + ';';
+  }
+  function img(src, alt, style) {
+    let img = '';
+    img += '<img class="img" src="' + src + '"';
+    if (alt) {
+      img += ' alt="' + alt + '"';
+    }
+    if (style.length > 0) {
+      img += ' style="' + style + '"';
+    }
+    img += '/>';
+    return img;
+  }
+
+  var el = '';
+  // wrap
+  el += '<div class="tag-plugin img-wrap">';
+  // bg
+  el += '<div class="img-bg"';
+  if (args.bg && args.bg.length > 0) {
+    el += ' style="background:' + args.bg + '"';
+  }
+  el += '>';
+  el += img(args.src, args.alt, style);
+  el += '</div>';
+
+  if (args.alt && args.alt.length > 0) {
+    el += '<div class="image-meta">';
+    if (args.download && args.download.length > 0) {
+      el += '<span class="image-caption left">' + args.alt + '</span>';
+      let href = args.download;
+      if (args.download == 'true') {
+        href = args.src;
+      }
+      el += '<a class="image-download" href="' + href + '"><svg class="icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3734"><path d="M561.00682908 685.55838913a111.03077546 111.03077546 0 0 1-106.8895062 0L256.23182837 487.72885783a55.96309219 55.96309219 0 0 1 79.13181253-79.18777574L450.70357448 523.88101491V181.55477937a55.96309219 55.96309219 0 0 1 111.92618438 0v344.06109173l117.07478902-117.07478901a55.96309219 55.96309219 0 0 1 79.13181252 79.18777574zM282.81429711 797.1487951h447.70473912a55.96309219 55.96309219 0 0 1 0 111.92618438H282.81429711a55.96309219 55.96309219 0 0 1 0-111.92618438z" p-id="3735"></path></svg></a>';
+    } else {
+      el += '<span class="image-caption center">' + args.alt + '</span>';
+    }
+    el += '</div>';
+  }
+
+  el += '</div>';
+  return el;
+});
--- a/scripts/tags/issues.js
+++ b/scripts/tags/issues.js
@ -0,0 +1,32 @@
+/**
+ * issues.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% issues [sites/timeline/friends] api:xxx [group:key=value1,value2,value3] %}
+ * 
+ * example:
+ * {% issues sites api:https://api.github.com/repos/volantis-x/examples/issues?sort=updated&state=open&page=1&per_page=100 group:version=版本：^4.0,版本：^3.0,版本：^2.0 %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('issues', function(args) {
+  args = ArgsMap(args, ['api', 'group'], ['type']);
+  // 所有支持的参数
+  let type = args.type || '';
+  let api = args.api || '';
+  let group = args.group || '';
+  if (type.length == 0 || api.length == 0) {
+    return;
+  }
+  // 布局
+  var el = '<div class="tag-plugin issues-wrap ' + type + '" id="issues-api"';
+  el += 'api="' + api + '"';
+  if (group.length > 0) {
+    el += 'group="' + group + '"';
+  }
+  el += '></div>';
+  return el;
+});
--- a/scripts/tags/link.js
+++ b/scripts/tags/link.js
@ -0,0 +1,32 @@
+/**
+ * link.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% link url title [description] [img:src] %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('link', function(args) {
+  args = ArgsMap(args, ['src'], ['url', 'title', 'description']);
+  var el = '';
+  el += '<div class="tag-plugin tag link">';
+  el += '<a class="link-card" title="' + args.title + '" href="' + args.url + '">';
+
+  // left
+  el += '<div class="left">';
+  el += '<span class="title">' + args.title + '</span><span class="url">' + (args.description || args.url) + '</span>';
+  el += '</div>';
+
+  // right
+  el += '<div class="right">';
+  el += '<img src="' + (args.img || hexo.theme.config.tag_plugins.link.default_img) + '"/>';
+  el += '</div>';
+
+  // end
+  el += '</a></div>';
+
+  return el;
+});
--- a/scripts/tags/navbar.js
+++ b/scripts/tags/navbar.js
@ -0,0 +1,38 @@
+/**
+ * navbar.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% navbar [markdown link] ... %}
+ * 
+ * example:
+ * {% navbar [Home](/) [About](/about/) [Comments](#comments) %}
+ */
+
+'use strict';
+
+hexo.extend.tag.register('navbar', function(args) {
+  if (args.length == 0) {
+    return;
+  }
+  var el = '<div class="tag-plugin navbar"><nav class="cap">';
+  function layoutItem(a) {
+    if (a.includes('](')) {
+      // markdown
+      let el = hexo.render.renderSync({text: a, engine: 'markdown'}).split('\n').join('');
+      if (el.length > 8) {
+        el = el.slice(3, el.length-4);
+      }
+      return el;
+    } else {
+      var item = '<a href="#' + a + '">';
+      item += a;
+      item += '</a>';
+      return item;
+    }
+  }
+  args.forEach((item, i) => {
+    el += layoutItem(item);
+  });
+  el += '</nav></div>';
+  return el;
+});
--- a/scripts/tags/note.js
+++ b/scripts/tags/note.js
@ -0,0 +1,54 @@
+/**
+ * note.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * note:
+ * {% note [color:color] [title] content %}
+ * 
+ * noteblock:
+ * {% noteblock [color:color] title %}
+ * markdown content
+ * {% endnoteblock %}
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+function outputNoteBlock(color, title, content) {
+  var el = '';
+  const defaultColor = hexo.theme.config.tag_plugins.note.default_color;
+  if (!color && defaultColor) {
+    color = defaultColor;
+  }
+  // header
+  el += '<div class="tag-plugin note"';
+  if (color && color.length > 0) {
+    el += ' color="' + color + '"';
+  }
+  el += '>';
+  // title
+  if (title && title.length > 0) {
+    el += '<div class="title"><strong>' + title + '</strong></div>';
+  }
+  // content
+  el += '<div class="body">';
+  el += hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('');
+  el += '</div></div>';
+
+  return el;
+}
+
+hexo.extend.tag.register('note', function(args) {
+  args = ArgsMap(args, ['color'], ['title', 'content']);
+  if (args.content) {
+    return outputNoteBlock(args.color, args.title, args.content);
+  } else {
+    return outputNoteBlock(args.color, '', args.title);
+  }
+});
+
+hexo.extend.tag.register('noteblock', function(args, content) {
+  args = ArgsMap(args, ['color'], ['title']);
+  return outputNoteBlock(args.color, args.title, content);
+}, {ends: true});
--- a/scripts/tags/swiper.js
+++ b/scripts/tags/swiper.js
@ -0,0 +1,39 @@
+/**
+ * swiper.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ * 
+ * {% swiper %}
+ * ![img](src)
+ * {% endswiper %}
+ */
+
+'use strict';
+
+const { ArgsMap, ArgsJoinTags } = require('./utils');
+
+hexo.extend.tag.register('swiper', function(args, content) {
+  args = ArgsMap(args, ['width']);
+  var el = '';
+  function slide() {
+    let imgs = hexo.render.renderSync({text: content, engine: 'markdown'});
+    imgs = imgs.match(/<img(.*?)src="(.*?)"(.*?)>/gi);
+    if (imgs && imgs.length > 0) {
+      imgs.forEach((img, i) => {
+        el += '<div class="swiper-slide">' + img + '</div>';
+      });
+    }
+  }
+  el += '<div class="tag-plugin swiper-container"';
+  if (args.width && args.width.length > 0) {
+    el += ' ' + ArgsJoinTags(args, 'width').join(' ');
+  }
+  el += '>';
+  el += '<div class="swiper-wrapper">';
+  slide();
+  el += '</div>';
+  el += '<div class="swiper-pagination"></div>';
+  el += '<div class="swiper-button-prev"></div>';
+  el += '<div class="swiper-button-next"></div>';
+  el += '</div>';
+  return el;
+}, {ends: true});
--- a/scripts/tags/timeline.js
+++ b/scripts/tags/timeline.js
@ -0,0 +1,40 @@
+/**
+ * timeline.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 
+ * {% timeline %}
+ * 
+ * {% timenode header1 %}
+ * what happened 1
+ * {% endtimenode %}
+ * 
+ * {% timenode header2 %}
+ * what happened 2
+ * {% endtimenode %}
+ * 
+ * {% endtimeline %}
+ */
+
+'use strict';
+
+function postTimeline(args, content) {
+  return `<div class="tag-plugin timeline"><svg class="icon top" width="1em" height="1em" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M7,0 C3.13425,0 0,3.13425 0,7 C0,10.86575 3.13425,14 7,14 C10.86575,14 14,10.86575 14,7 C14,3.13425 10.86575,0 7,0 Z M7,12.25 C4.104625,12.25 1.75,9.89449999 1.75,7 C1.75,4.10550001 4.104625,1.75 7,1.75 C9.895375,1.75 12.25,4.10550001 12.25,7 C12.25,9.89449999 9.895375,12.25 7,12.25 Z M8.75875001,7 L7.43750001,7 C7.19600001,7 7.00000002,6.804 7.00000002,6.56250001 L7.00000002,5.24125001 C7.00000002,4.76262501 6.61237501,4.37500001 6.13375002,4.37500001 L6.11625001,4.37500001 C5.63762502,4.37500001 5.25000001,4.76262501 5.25000001,5.24125001 L5.25000001,7.88375 C5.25000001,8.362375 5.63762502,8.75 6.11625001,8.75 L8.75875001,8.75 C9.237375,8.75 9.62500001,8.362375 9.62500001,7.88375 L9.62500001,7.86625 C9.62500001,7.387625 9.237375,7 8.75875001,7 L8.75875001,7 Z" id="top"></path>
+</svg>${content}<svg class="icon bottom" width="1em" height="1em" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<path d="M7,0 C10.8558804,0.0243061403 13.9756939,3.14411956 14,7 C14,10.8659932 10.8659932,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,1.27272727 C4.67984382,1.25597015 2.57881097,2.64070073 1.67929035,4.77945461 C0.779769726,6.91820849 1.25950821,9.38836411 2.89419242,11.0349403 C4.52887664,12.6815164 6.99549008,13.1791467 9.14070778,12.2951521 C11.2859255,11.4111574 12.6859091,9.32021669 12.6859091,7 C12.6739296,3.85798179 10.1418488,1.30748075 7,1.27272727 Z M2.70454544,7 C2.7044994,7.39789465 2.91674722,7.76558417 3.26132643,7.96454478 C3.60590563,8.1635054 4.030458,8.1635054 4.3750372,7.96454478 C4.7196164,7.76558417 4.93186422,7.39789465 4.93181818,7 C4.93186422,6.60210535 4.7196164,6.23441583 4.3750372,6.03545522 C4.030458,5.8364946 3.60590563,5.8364946 3.26132643,6.03545522 C2.91674722,6.23441583 2.7044994,6.60210535 2.70454544,7 L2.70454544,7 Z M5.88636363,7 C5.88636363,7.39786396 6.09862151,7.76550543 6.44318181,7.96443741 C6.7877421,8.1633694 7.2122579,8.1633694 7.55681819,7.96443741 C7.90137849,7.76550543 8.11363637,7.39786396 8.11363637,7 C8.11363637,6.38495562 7.61504438,5.88636363 7,5.88636363 C6.38495562,5.88636363 5.88636363,6.38495562 5.88636363,7 L5.88636363,7 Z M9.06818182,7 C9.06813578,7.39789465 9.2803836,7.76558417 9.6249628,7.96454478 C9.969542,8.1635054 10.3940944,8.1635054 10.7386736,7.96454478 C11.0832528,7.76558417 11.2955006,7.39789465 11.2954546,7 C11.2955006,6.60210535 11.0832528,6.23441583 10.7386736,6.03545522 C10.3940944,5.8364946 9.969542,5.8364946 9.6249628,6.03545522 C9.2803836,6.23441583 9.06813578,6.60210535 9.06818182,7 Z" id="bottom"></path>
+</svg></div>`;
+}
+
+function postTimenode(args, content) {
+  args = args.join(' ').split(', ');
+  var header = args[0];
+  return `<div class="tag-plugin timenode"><div class="header"><span>${header}</span><a href="#comments"><svg class="icon comment" width="1em" height="1em" viewBox="0 0 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M2.9969419,5.71559633 C2.9969419,6.20032331 3.38989075,6.59327217 3.87461774,6.59327217 C4.35934472,6.59327217 4.75229358,6.20032331 4.75229358,5.71559633 C4.75229358,5.23086935 4.35934472,4.83792049 3.87461774,4.83792049 C3.38989075,4.83792049 2.9969419,5.23086935 2.9969419,5.71559633 L2.9969419,5.71559633 Z" id="Path"></path>
+  <path d="M6.76452599,5.71559633 C6.76452599,6.20032331 7.15747485,6.59327217 7.64220183,6.59327217 C8.12692882,6.59327217 8.51987768,6.20032331 8.51987768,5.71559633 C8.51987768,5.23086935 8.12692882,4.83792049 7.64220183,4.83792049 C7.15747485,4.83792049 6.76452599,5.23086935 6.76452599,5.71559633 L6.76452599,5.71559633 Z" id="Path"></path>
+  <path d="M10.5321101,5.71559633 C10.5321101,6.20032331 10.925059,6.59327217 11.4097859,6.59327217 C11.8945129,6.59327217 12.2874618,6.20032331 12.2874618,5.71559633 C12.2874618,5.23086935 11.8945129,4.83792049 11.4097859,4.83792049 C10.925059,4.83792049 10.5321101,5.23086935 10.5321101,5.71559633 L10.5321101,5.71559633 Z" id="Path"></path>
+  <path d="M7.60209315,13.9999855 L7.55255823,13.9999855 C7.30643038,13.9884675 7.07504521,13.8795376 6.90961525,13.6972904 L4.89384746,11.4483761 L1.65891421,11.4483761 C0.743346584,11.4478203 0.00111501673,10.7074957 6.1284311e-14,9.79372406 L6.1284311e-14,1.65465205 C0.00111501673,0.740880414 0.743346584,0.000555821957 1.65891421,0 L13.5877306,0 C14.5013239,0.00333115 15.2404835,0.742844925 15.2415902,1.65465205 L15.2415902,9.82701889 C15.2251033,10.7277804 14.490407,11.4502791 13.5877306,11.4534208 L10.271924,11.4534208 L8.2976038,13.6892189 C8.27421324,13.715602 8.24923084,13.7405354 8.22279597,13.7638801 C8.05262919,13.9170682 7.83125236,14.0012711 7.60209315,13.9999855 L7.60209315,13.9999855 Z M1.66396879,1.21475675 C1.41971289,1.21474108 1.22092389,1.41089082 1.21815455,1.65465205 L1.21815455,9.78968833 C1.21926521,10.0347976 1.41837601,10.2330673 1.66396879,10.2336194 L5.44075337,10.2336194 L7.60007132,12.6520346 L9.72299626,10.2467355 L13.5877306,10.2467355 C13.8298342,10.2462637 14.0275201,10.0534394 14.0335448,9.81188488 L14.0335448,1.65465205 C14.0329874,1.4093126 13.8335527,1.21072101 13.5877306,1.21072101 L1.66396879,1.21475675 Z" id="comment"></path>
+</svg></a></div><div class="body">${hexo.render.renderSync({text: content, engine: 'markdown'}).split('\n').join('')}</div></div>`;
+}
+
+hexo.extend.tag.register('timeline', postTimeline, {ends: true});
+
+hexo.extend.tag.register('timenode', postTimenode, {ends: true});
--- a/scripts/tags/utils.js
+++ b/scripts/tags/utils.js
@ -0,0 +1,72 @@
+/**
+ * folding.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ */
+
+'use strict';
+
+
+module.exports = {
+  ArgsMap(args, keys, others) {
+    if (Array.isArray(args) == false) {
+      return args;
+    }
+    var map = {others: Array()};
+    args.forEach((arg, i) => {
+      let kv = arg.trim();
+      if (kv.includes('://') && kv.split(':').length == 2) {
+        // 纯 url
+        map.others.push(kv);
+      } else {
+        kv = kv.split(':');
+        if (kv.length > 1) {
+          if (keys.includes(kv[0]) == true) {
+            map[kv.shift()] = kv.join(':');
+          } else {
+            map.others.push(kv.join(':'));
+          }
+        } else if (kv.length == 1) {
+          map.others.push(kv[0]);
+        }
+      }
+    });
+    // 解析不带 key 的参数
+    if (others && others.length > 0 && map.others.length > 0) {
+      if (Array.isArray(others) == false) {
+        others = [others];
+      }
+      others.forEach((arg, i) => {
+        map[arg] = map.others.shift();
+      });
+      // 最后一段合并到最后一个参数中
+      if (map.others.length > 0) {
+        map[others[others.length-1]] += ' ' + map.others.join(' ');
+        map.others = [];
+      }
+    }
+    return map;
+  },
+  ArgsJoinTags(args, keys) {
+    if (Array.isArray(keys) == false) {
+      keys = [keys];
+    }
+    var ret = [];
+    keys.forEach((key, i) => {
+      if (args[key] && args[key].length > 0) {
+        ret.push(key + '="' + args[key] + '"');
+      }
+    });
+    return ret;
+  },
+  ArgsJoinURLParams(args, keys) {
+    if (Array.isArray(keys) == false) {
+      keys = [keys];
+    }
+    var ret = [];
+    keys.forEach((key, i) => {
+      if (args[key] && args[key].length > 0) {
+        ret.push(key + '=' + args[key]);
+      }
+    });
+    return ret.join('&');
+  }
+};
--- a/source/css/_custom.styl
+++ b/source/css/_custom.styl
@ -0,0 +1,74 @@
+@require('_defines/base')
+@require('_defines/const')
+
+// 通用主题色
+$color-theme = #1BCDFC
+$color-link = #2196f3
+$color-button = #1BCDFC
+$color-hover = #ff5722
+$color-inner = #fff
+$color-inlinecode = #D56D28
+$color-cat = #FF7844
+$color-cat-hover = darken($color-cat, 20)
+
+// 浅色页面
+$c-site-bg-light = #f8f8f8
+$c-block-light = #f2f2f2
+$c-title-light = #111
+$c-text-light = #333
+$c-card-light = white
+
+// 深色页面
+$c-site-bg-dark = black
+$c-block-dark = #111
+$c-title-dark = #fff
+$c-text-dark = #fff
+$c-card-dark = #333
+
+
+
+// @font-face
+//   font-family: 'Dosis'
+//   src: url('https://cdn.jsdelivr.net/gh/volantis-x/cdn-fonts@20.5.30/Dosis/Dosis-Medium.ttf')
+//   font-weight: normal
+//   font-style: normal
+
+$ff-body = Dosis, -apple-system, "Helvetica Neue", Helvetica, Arial, "WenQuanYi Micro Hei", "Microsoft Yahei", Menlo, Monaco, monospace, courier, sans-serif
+$ff-code = Menlo, Monaco, monospace, courier, sans-serif
+
+$ff-logo = $ff-body
+
+// font size
+$fs-root = 16px
+$fs-h1   = 2rem   // 32px
+$fs-h2   = 1.625rem  // 26px
+$fs-h3   = 1.375rem  // 22px
+$fs-h4   = 1.125rem  // 18px
+$fs-h5   = 1rem      // 16px
+$fs-h6   = 1rem      // 16px
+$fs15 = .9375rem  // 15px
+$fs14 = .875rem   // 14px
+$fs13 = .8125rem   // 13px
+$fs-code = .8125rem  // 13px
+$fs12 = .75rem   // 13px
+$fs-footnote = .75rem  // the smallest (12px)
+
+
+// site layout
+$sidebar = 280px
+
+// max body width
+$layout-max-body-width = 720px
+
+// gap
+$gap = 16px // 必须是 px
+
+// border radius
+$border-card = 12px
+$border-block = 4px
+
+
+// shadow
+$boxshadow-card = 0 1px 2px 0px rgba(0, 0, 0, 0.1)
+$boxshadow-float = 0 4px 8px 0px rgba(0, 0, 0, 0.1)
+$boxshadow-card-float = 0 2px 4px 0px rgba(0, 0, 0, 0.1), 0 4px 8px 0px rgba(0, 0, 0, 0.1), 0 8px 16px 0px rgba(0, 0, 0, 0.1)
--- a/source/css/_defines/base.styl
+++ b/source/css/_defines/base.styl
@ -0,0 +1,43 @@
+
+// 可替代 transition 使用
+transition($op = all, $time = 0.28s, $ease = ease-out)
+  transition: $op $time $ease
+  -moz-transition: $op $time $ease
+  -webkit-transition: $op $time $ease
+  -o-transition: $op $time $ease
+
+// 为1个属性设置动画
+trans1($op, $time = 0.2s)
+  transition: $op $time ease-out
+  -moz-transition: $op $time ease-out
+  -webkit-transition: $op $time ease-out
+  -o-transition: $op $time ease-out
+
+// 为2个属性设置动画
+trans2($op1, $op2)
+  transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+  -moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+  -webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+  -o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
+
+
+txt-ellipsis()
+  white-space: nowrap
+  overflow: hidden
+  text-overflow: ellipsis
+
+placeholder(rules)
+  &::-webkit-input-placeholder
+    rules()
+  &:-moz-placeholder
+    rules()
+	&::-moz-placeholder
+    rules()
+	&:-ms-input-placeholder
+    rules()
+
+disable-select()
+  -moz-user-select: none
+  -ms-user-select: none
+  -webkit-user-select: none
+  user-select: none
--- a/source/css/_defines/const.styl
+++ b/source/css/_defines/const.styl
@ -0,0 +1,50 @@
+
+// device defines
+$device-mobile-s = 320px
+$device-mobile-m = 375px
+$device-mobile-l = 425px
+$device-mobile = 500px
+$device-tablet = 768px
+$device-laptop = 1024px
+$device-desktop = 1440px
+$device-2k = 2048px
+$device-4k = 2560px
+
+// -------- 这些是方便开发预定义的颜色，不需要动态改变 --------
+$color-md-red = #f44336
+$color-md-pink = #E91E63
+$color-md-purple = #9c27b0
+$color-md-deep-purple = #673ab7
+$color-md-indigo = #3f51b5
+$color-md-light-blue = #4BA7EE
+$color-md-blue = #2196f3
+$color-md-deep-blue = #3367d6
+$color-md-teal = #009688
+$color-md-green = #4caf50
+$color-md-light-green = #8bc34a
+$color-md-orange = #ff9800
+$color-md-deep-orange = #ff5722
+$color-md-brown = #795548
+$color-md-blue-grey = #607d8b
+$color-md-grey = #9e9e9e
+$color-md-light-grey =#e0e0e0
+$color-md-yellow = #FCEC60
+$color-md-amber = #F6C344
+
+$color-mac-cyan = #1BCDFC
+$color-mac-green = #3DC550
+$color-mac-yellow = #FFBD2B
+$color-mac-red = #FE5F58
+
+$color-google-blue = #4688F1
+$color-google-green = #3AA757
+$color-google-yellow = #FABB2D
+$color-google-red = #E8453C
+
+$c-red = #F44336
+$c-orange = #FA6400
+$c-yellow = #FFBD2B
+$c-green = #3DC550
+$c-cyan = #1BCDFC
+$c-blue = #2196f3
+$c-purple = #9c27b0
--- a/source/css/_defines/func.styl
+++ b/source/css/_defines/func.styl
@ -0,0 +1,51 @@
+
+
+scrollbar($w = 4px, $b = 2px, $c = var(--text-meta), $h = var(--text-p3))
+  &::-webkit-scrollbar
+    height: $w
+    width: $w
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    background: $c
+    cursor: pointer
+    border-radius: $b
+    &:hover
+      background: $h
+
+
+scrollbar-codeblock()
+  &::-webkit-scrollbar
+    height: 4px
+    width: 4px
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    background: transparent
+    cursor: pointer
+    border-radius: $border-block
+  &:hover
+    &::-webkit-scrollbar-thumb
+      background: var(--text-meta)
+      &:hover
+        background: var(--text-p3)
+
+
+hover-block($v, $h, $br = 4px)
+  border-radius: $br
+  padding: $v $h
+  trans2 color background
+  &:hover
+    background: var(--hover-block)
+
+
+inside-box($fs = $fs15)
+  p,ol,ul
+    margin-top: 0.5rem
+    margin-bottom: 0.5rem
+    &:first-child
+      margin-top: 0
+    &:last-child
+      margin-bottom: 0
+  p,li
+    font-size: $fs
--- a/source/css/_defines/theme.styl
+++ b/source/css/_defines/theme.styl
@ -0,0 +1,27 @@
+:root
+  --site-bg: $c-site-bg-light
+  --block: $c-block-light
+  --block-border: mix($c-block-light, $c-text-light, 95)
+  --hover-block: mix($c-block-light, $c-text-light, 98)
+  --text-p0: $c-title-light
+  --text-p1: $c-text-light
+  --text-p2: mix($c-text-light, $c-site-bg-light, 80)
+  --text-p3: mix($c-text-light, $c-site-bg-light, 60)
+  --text-meta: mix($c-text-light, $c-site-bg-light, 20)
+  --card: $c-card-light
+  --theme-highlight: darken($color-theme, 5)
+  --theme-bg: mix($color-theme, $c-card-light, 10)
+
+body[theme='dark']
+  --site-bg: $c-site-bg-dark
+  --block: $c-block-dark
+  --block-border: mix($c-block-dark, $c-text-dark, 90)
+  --hover-block: mix($c-block-dark, $c-text-dark, 95)
+  --text-p0: $c-title-dark
+  --text-p1: $c-text-dark
+  --text-p2: mix($c-text-dark, $c-site-bg-dark, 70)
+  --text-p3: mix($c-text-dark, $c-site-bg-dark, 45)
+  --text-meta: mix($c-text-dark, $c-site-bg-dark, 30)
+  --card: $c-card-dark
+  --theme-highlight: $color-theme
+  --theme-bg: mix($color-theme, $c-card-dark, 10)
--- a/source/css/_layout/base.styl
+++ b/source/css/_layout/base.styl
@ -0,0 +1,129 @@
+*
+  outline: none
+html
+  font-family: $ff-body
+  font-size: $fs-root
+
+body
+  background: var(--site-bg)
+  margin: 0
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-rendering: optimizelegibility
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+
+
+h1
+  font-size: $fs-h1
+  font-weight: 600
+
+pre
+  font-family: $ff-code
+  font-size: $fs-code
+  tab-size: 4
+  -moz-tab-size: 4
+  -o-tab-size: 4
+  -webkit-tab-size: 4
+
+a
+  text-decoration: none
+  color: $color-link
+  &:hover
+    color: $color-hover
+
+a.button
+  font-weight: 500
+  line-height: 1
+  padding: 0.75rem 2rem
+  border-radius: 3px
+  trans1: background
+  font-size: $fs15
+  &.cyan
+    background: $color-mac-cyan
+    color: white
+    &:hover
+      background: $color-hover
+
+
+.cap
+  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
+  font-size: 0.9em
+  margin: 0 .25em
+span.dot:before
+  content: '·'
+span.sep:before
+  content: '/'
+
+hr
+  color: var(--text-meta)
+  opacity: .1
+
+button
+  padding: 1em
+  border: none
+  font-weight: 600
+  outline: none
+  disable-select()
+  &:hover
+    color: $color-inner
+    background: $color-theme
+
+img
+  max-width: 100%
+
+
+li
+  font-size: $fs15
+
+svg.icon
+  width: 1em
+  height: 1em
+  vertical-align: middle
+  fill: currentColor
+  overflow: hidden
+
+ul,ol
+  padding-left: 1.5rem
+
+ul ul, ul ol
+  padding-left: 0
+ol ul, ol ol
+  padding-left: 0
+
+.dis-select
+  disable-select()
+
+
+// table
+table:not([class])
+  border-collapse: collapse
+  overflow: auto
+  display: inline-block
+  max-width: 100%
+  vertical-align: text-top
+  th
+    background: var(--hover-block)
+  td,th
+    padding: 8px 16px
+    border: 2px solid var(--hover-block)
+    line-height: 1.5
+    font-size: 90%
+  tr
+    word-break: keep-all
+    background: var(--block)
+    trans()
+    &:hover
+      background: var(--hover-block)
--- a/source/css/_layout/footer.styl
+++ b/source/css/_layout/footer.styl
@ -0,0 +1,12 @@
+.page-footer
+  margin: $gap
+  font-size: $fs12
+  color: var(--text-p3)
+  p
+    margin: 4px 0
+    line-height: 1.2
+  a
+    color: var(--text-p3)
+    text-decoration: underline
+    &:hover
+      color: $color-hover
--- a/source/css/_layout/highlight.styl
+++ b/source/css/_layout/highlight.styl
@ -0,0 +1,238 @@
+article.md .highlight
+  margin: 1rem 0
+  border-radius: $border-block
+  -webkit-font-smoothing: auto
+  -moz-osx-font-smoothing: auto
+  overflow: hidden
+  // width: "calc(100% - 2px)"
+  width: 100%
+  background: var(--block)
+  border: 1px solid var(--block-border)
+  line-height: 1.5
+  font-family: $ff-code
+
+article.md .highlight
+  position: relative
+  overflow: auto
+  display: block
+  figcaption
+    color: var(--text-p2)
+    font-size: $fs-code
+    padding: 4px 0.5rem
+    position: sticky
+    left: 0
+    background: var(--hover-block)
+    border-top-left-radius: "calc(%s - 1px)" % $border-block
+    border-top-right-radius: "calc(%s - 1px)" % $border-block
+    border-bottom: 1px solid var(--block-border)
+    span
+      margin-right: 4px
+  >table
+    overflow: auto
+    display: block
+    td,th
+      padding: 0
+      border: none
+      line-height: 1.5
+    margin: 0
+    background: transparent
+    border: none
+    scrollbar-codeblock()
+    tr
+      background: transparent
+      &:hover
+        background: transparent
+
+
+  .gutter
+    pointer-events: none
+    disable-select()
+    text-align: right
+    padding: 0 1em
+    border-width: 0
+    margin-left: 0
+    position: sticky
+    left: 0
+    z-index: 1
+    background: var(--block)
+    pre .line
+      color: var(--text-p2)
+  .code
+    pre
+      display: block
+      padding: .5em 1rem
+  .gutter+.code pre
+    padding-left: 0.25em
+
+
+table:not([class])
+  border-collapse: collapse
+
+article.md .highlight
+  .code
+    vertical-align: top
+    &:before
+      content: ""
+      position: absolute
+      top: 0
+      right: 0
+      padding: 4px 0.5rem
+      opacity: .25
+      font-weight: 700
+
+  &.yaml .code:before
+    content: "YAML"
+  &.json .code:before
+    content: "JSON"
+
+  &.diff .code:before
+    content: "diff"
+
+  &.html .code:before
+    content: "HTML"
+  &.js .code:before,&.javascript .code:before
+    content: "JS"
+  &.css .code:before
+    content: "CSS"
+  &.less .code:before
+    content: "Less"
+  &.stylus .code:before
+    content: "Stylus"
+
+  &.bash .code:before
+    content: "bash"
+  &.shell .code:before
+    content: "shell"
+  &.sh .code:before
+    content: "sh"
+  &.ini .code:before
+    content: "ini"
+
+  &.c .code:before
+    content: "C"
+  &.cpp .code:before
+    content: "C++"
+  &.objc .code:before,&.objectivec .code:before
+    content: "Objective-C"
+  &.swift .code:before
+    content: "Swift"
+
+  &.java .code:before
+    content: "Java"
+  &.python .code:before
+    content: "Python"
+  &.php .code:before
+    content: "PHP"
+  &.rust .code:before
+    content: "Rust"
+  &.sql .code:before
+    content: "SQL"
+  &.ruby .code:before
+    content: "Ruby"
+  &.makefile .code:before
+    content: "Makefile"
+  &.go .code:before
+    content: "Go"
+  &.typescript .code:before
+    content: "TypeScript"
+
+
+
+$hl-keyword = #9c27b0
+$hl-blue = #1E80F0
+$hl-cyan = #17AFCA
+$hl-green = #3FA33F
+$hl-light-blue = #6ECDF9
+$hl-red = #EE2B29
+$hl-orange = #FB3F1B
+$hl-amber = #FD8607
+$hl-text = var(--text-p1)
+pre
+  .code:before
+    display: none
+  // 行
+  .line,.params
+    color: $hl-text
+
+  .line .addition
+    color: $hl-green
+  .line .deletion
+    color: $hl-red
+
+  .marked
+    background-color: alpha(#FED542, .4)
+    padding: 2px 8px 2px 0
+    border-radius: 2px
+    width: 100%
+
+  .title, .attr, .attribute
+    color: $color-md-indigo
+
+  // 注释
+  .comment
+    color: var(--text-p3)
+
+  .keyword, .meta-keyword, .javascript .function
+    color: $hl-keyword
+
+  .type, .built_in, .tag .name
+    color: $color-md-light-blue
+
+  .variable, .regexp, .ruby .constant, .xml .tag .title, .xml .pi, .xml .doctype, .html .doctype, .css .id, .css .class, .css .pseudo
+    color: $hl-amber
+
+  .number, .preprocessor, .literal, .constant
+    color: $hl-amber
+
+  .class, .ruby .class .title, .css .rules .attribute
+    color: $color-md-orange
+
+  .string, .meta-string
+    color: darken($color-md-green, 10%)
+
+  .value, .inheritance, .header, .ruby .symbol, .xml .cdata
+    color: $color-md-green
+
+  .css .hexcolor
+    color: #66cccc
+
+  .function, .python .decorator, .python .title, .ruby .function .title, .ruby .title .keyword, .perl .sub, .javascript .title, .coffeescript .title
+    color: #6699cc
+
+
+.highlight.html,.highlight.css,.highlight.less,.highlight.stylus
+  .line
+    .tag .name, .selector-tag
+      color: $hl-red
+    .selector-class, .selector-attr
+      color: $hl-amber
+    .attribute
+      color: $color-md-indigo
+    .number
+      color: $hl-cyan
+
+
+.highlight.objc,.highlight.objectivec,.highlight.swift,.highlight.c
+  .line
+    .meta
+      color: $hl-keyword
+    .meta-string,.string
+      color: $hl-orange
+    .class
+      color: $hl-text
+      .title
+        color: $hl-blue
+    .comment
+      color: $hl-green
+
+.highlight.json
+  .line
+    .attr
+      color: #E24F5A
+    .literal
+      color: $color-md-indigo
+
+.highlight.yaml
+  .line
+    .attr
+      color: #E24F5A
--- a/source/css/_layout/index.styl
+++ b/source/css/_layout/index.styl
@ -0,0 +1,4 @@
+@import 'partial/*'
+@import 'tag-plugins/*'
+@import 'sidebar/*'
+@import 'pages/*'
--- a/source/css/_layout/layout.styl
+++ b/source/css/_layout/layout.styl
@ -0,0 +1,79 @@
+.l_body
+  display: flex
+  margin: auto
+  padding: 0 $gap
+  justify-content: center
+
+.l_body .l_left
+  z-index: 8
+  width: $sidebar
+  flex-shrink: 0
+  height 100vh
+  position: sticky
+  position: -webkit-sticky
+  top: 0
+
+.l_body .l_main
+  flex-shrink: 1
+  flex-grow: 1
+  // margin: var(--gap) var(--gap) var(--gap) var(--gap_2)
+  // width: "calc(100% - %s)" % ($sidebar + 18 * $gap)
+  width: 320px
+  max-width: $layout-max-body-width
+  footer
+    margin-top: 4rem
+    margin-bottom: 2rem
+
+.float-panel
+  position: sticky
+  right: 0
+  bottom: 2rem
+  float: right
+  z-index: 9
+  display: flex
+  border-radius: 2rem 0 0 2rem
+  padding-right: 2rem
+  padding: 4px
+  overflow: hidden
+  background: var(--hover-block)
+.sidebar-toggle.mobile
+  cursor: pointer
+  color: var(--text-p2)
+  background: white
+  padding: 0.5rem
+  margin-right: 1rem
+  border-radius: 32px
+  line-height: 1
+  width: 2rem
+  height: 2rem
+  font-size: 13px
+
+.l_body.mobile.sidebar
+  .sidebar-toggle.mobile
+    background: $color-hover
+    color: white
+
+
+// iPad 竖屏
+@media screen and (max-width: $device-tablet)
+  .mobile-only
+    display: block !important
+  .l_body
+    padding: 0
+    .l_left
+      position: fixed
+      height: 100vh
+      width: 280px
+      transform: translateX(0 - $gap - 320px)
+      margin: 0
+      left: 0
+      background: var(--site-bg)
+      box-shadow: $boxshadow-card-float
+    .l_main
+      max-width: 100%
+  .l_body.mobile
+    .l_left
+      transition: transform .38s ease-out
+  .l_body.mobile.sidebar
+    .l_left
+      transform: translateX(0px)
--- a/source/css/_layout/main.styl
+++ b/source/css/_layout/main.styl
@ -0,0 +1,26 @@
+.l_main
+  position: relative
+  header
+    display: none
+    margin: $gap * 2 $gap $gap
+    padding: 0.25rem
+    background: var(--block)
+    border-radius: 8px
+    .logo-wrap
+      margin: 0.5rem 1rem
+      .img
+        width: 32px
+        height: 32px
+        display: none
+      .title
+        font-size: 1.5rem
+
+// pc上右边顶部留白
+@media screen and (min-width: $device-tablet)
+  .l_main
+    margin-top: $gap * 2
+
+// 移动端显示主导航栏
+@media screen and (max-width: $device-tablet)
+  .l_main.list header
+    display: block
--- a/source/css/_layout/md.styl
+++ b/source/css/_layout/md.styl
@ -0,0 +1,83 @@
+article.md
+  max-width: 100%
+  padding: 1rem
+  overflow: hidden
+  color: var(--text-p1)
+  line-height: 1.7
+
+article.md.content
+  margin-bottom: $gap * 2
+
+// titles
+article.md
+  h1.article-title
+    margin-top: $gap * 0.5
+    line-height: 1.2
+  h1,h2,h3,h4,h5,h6
+    line-height: 1.8
+    color: var(--text-p0)
+    &:hover
+      a.headerlink:before
+        opacity: 1
+  a.headerlink:before
+    opacity: 0
+    content: '#'
+    position: absolute
+    width: 0.75em
+    margin-left: -0.75em
+  h2
+    margin-top: 3rem
+    border-bottom: 1px solid var(--block-border)
+    font-weight: 400
+  h3
+    margin-top: 3rem
+    margin-bottom: 0
+    font-weight: 500
+  h2+h3
+    margin-top: 1rem
+  h3+h4
+    margin-top: 1rem
+  h5
+    font-size: $fs14
+  h6
+    font-size: $fs12
+
+// a
+article.md
+  p>a
+    trans1: color
+    &:not([class])
+      font-weight: 500
+      &:hover
+        text-decoration: underline
+
+// code
+article.md code
+  color: $color-inlinecode
+  font-family: $ff-code
+  font-size: $fs14
+  word-break: break-all
+
+
+// div
+article.md>div
+  margin: 1rem 0
+// blockquote
+article.md blockquote
+  margin: 1rem 0
+  padding: 1rem
+  background: var(--block)
+  border-left: $border-block solid $color-theme
+  border-radius: 0 $border-block $border-block 0
+  color: var(--text-p2)
+  p
+    margin: 0.5em 0
+    font-size: $fs14
+
+article.md ul, article.md ol
+  padding-left: 2rem
+
+article.md img
+  border-radius: 4px
+  margin: auto
+  display: block
--- a/source/css/_layout/navbar.styl
+++ b/source/css/_layout/navbar.styl
@ -0,0 +1,51 @@
+nav.cap
+  position: sticky
+  position: -webkit-sticky
+  margin-top: 1.75rem
+  top: -2px
+  display: flex
+  background: var(--site-bg)
+  padding: 0.5rem 1.25rem 0.38rem
+  z-index: 1
+  overflow: scroll
+  scrollbar(0, 0)
+  >p
+    margin: 0
+  a
+    padding: 0.5rem 0.75rem
+    color: var(--text-p3)
+    border-radius: 4px
+    font-weight: 600
+    white-space: nowrap
+    trans1 background
+    &:hover
+      background: var(--hover-block)
+      color: var(--text-p1)
+    &.active
+      font-weight: 700
+      color: inherit
+
+.md .tag-plugin.navbar
+  nav.cap
+    margin: 0
+    padding: 1px
+    background: var(--block)
+    border-radius: 6px
+    a
+      margin: 1px
+      padding: 0.5em 0.75rem
+      &:hover
+        background: #fff
+        color: var(--text-p1)
+
+// 面包屑导航
+.breadcrumb-navigation
+  padding: $gap $gap 0
+  margin-top: $gap
+  font-size: $fs-footnote
+  color: var(--text-p3)
+  font-weight: 500
+  a.cap:hover
+    color: $color-cat-hover
+  div+div
+    margin-top: 2px
--- a/source/css/_layout/pages/archives.styl
+++ b/source/css/_layout/pages/archives.styl
@ -0,0 +1,15 @@
+.post-list .post-card#archive
+  a.post
+    display: inline-flex
+    align-items: baseline
+    font-size: $fs14
+    margin: 0.25rem 0
+    font-weight: 600
+    color: var(--text-p2)
+    &:hover
+      color: $color-hover
+    time
+      font-family: $ff-code
+      margin-right: 1em
+      flex-shrink: 0;
+      opacity 0.5
--- a/source/css/_layout/pages/categories.styl
+++ b/source/css/_layout/pages/categories.styl
@ -0,0 +1,16 @@
+.post-list .post-card#cats
+  a.cat
+    display: flex
+    font-size: $fs14
+    &.child
+      padding-left: 2rem
+    font-weight: 600
+    padding: 0.5rem 1rem
+    border-radius: $border-block
+    color: var(--text-p2)
+    &:hover
+      background: var(--block)
+      color: $color-hover
+    .badge
+      opacity 0.5
+      margin-left: 4px
--- a/source/css/_layout/pages/error.styl
+++ b/source/css/_layout/pages/error.styl
@ -0,0 +1,21 @@
+article.md.error-page
+  text-align: center
+  margin-top: 2rem
+  img#error
+    width: 30vw
+    max-height: 150px
+    margin-bottom: 2rem
+  h1
+    font-size: 4rem
+    margin-bottom: 0
+  p.what,p.why
+    margin: 0.5em
+  p.why
+    font-size: $fs13
+  a#back
+    margin: 2rem 0
+    display: inline-block
+
+@media screen and (max-width: $device-tablet)
+  article.md.error-page
+    margin-top: 4rem
--- a/source/css/_layout/pages/friends.styl
+++ b/source/css/_layout/pages/friends.styl
@ -0,0 +1,61 @@
+.friends-wrap
+  .group-header
+    margin: 1rem 0
+    p
+      margin: 0
+    p.title
+      font-size: 1.125rem
+      font-weight: 500
+    p.description
+      font-size: $fs14
+  .group-body
+    display: grid
+    grid-gap: 4px 4px
+    grid-template-columns: repeat(auto-fill, 96px)
+    margin-bottom: 2rem
+
+.friends-wrap .user-simple
+  a
+    margin: auto
+    color: var(--text-p1)
+    font-size: $fs12
+    display: flex
+    flex-direction: column
+    align-items: center
+    text-align: center
+    line-height: 1.2
+    border-radius: 4px
+    overflow: hidden
+    position: relative
+    background: var(--card)
+    img
+      object-fit: cover
+      display: block
+      width: 64px
+      height: 64px
+    .name
+      padding-top: 0.5em
+
+// style
+.friends-wrap.round .user-simple
+  a
+    padding: 0.5rem
+    trans1: background
+    img
+      border-radius: 64px
+    &:hover
+      background: var(--hover-block)
+
+.friends-wrap.rect .user-simple
+  a
+    padding: 0
+    display: block
+    trans1: box-shadow
+    img
+      width: 96px
+      height: 96px
+      border-radius: 0
+    .name
+      padding: 0.5em
+    &:hover
+      box-shadow: $boxshadow-card-float
--- a/source/css/_layout/pages/tags.styl
+++ b/source/css/_layout/pages/tags.styl
@ -0,0 +1,17 @@
+.post-list .post-card#tags
+  a.tag
+    display: inline-flex
+    align-items: center
+    margin: 0.25rem 0.5rem
+    position: relative
+    font-weight: 500
+    color: var(--text-p2)
+    &:hover
+      color: $color-hover
+    span
+      margin: 0 0.25rem
+    .name
+      font-size: $fs14
+    .badge
+      opacity 0.5
+      font-size: $fs12
--- a/source/css/_layout/partial/comments.styl
+++ b/source/css/_layout/partial/comments.styl
@ -0,0 +1,8 @@
+.comments-wrap
+  padding: $gap * 2 $gap
+  div.cmt-body.utterances
+    margin: 0 -4px
+
+  a.avatar
+    border-radius: 120px !important
+    overflow: hidden !important
--- a/source/css/_layout/partial/cover.styl
+++ b/source/css/_layout/partial/cover.styl
@ -0,0 +1,30 @@
+.l_cover
+  height: 100vh
+  text-align: center
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+
+.l_cover .cover-wrap
+  margin-bottom: 0
+  max-width: 500px
+  .logo
+    margin-bottom: 2rem
+    img
+      object-fit: contain
+      max-height: 35vh
+      max-width: 100%
+  .cover-title
+    font-weight: 700
+    font-size: 1.5rem
+    margin: 1rem 0
+    &:first-child
+      font-size: 3rem
+  .description
+    margin: 1rem 0
+  .start-wrap
+    margin: $gap * 2 0
+    flex-shrink: 0
+    a.start
+      display: inline-block
--- a/source/css/_layout/partial/lazyload.styl
+++ b/source/css/_layout/partial/lazyload.styl
@ -0,0 +1,14 @@
+img
+  max-width 100%
+  &.lazyload:not(.placeholder)
+    transition opacity .5s ease-out 0s
+    &:not(.loaded)
+      opacity: 0
+    &.loaded
+      opacity: 1
+    if hexo-config('plugins.lazyload.blurIn') == true
+      transition filter .25s ease-out 0s
+      &:not(.loaded)
+        filter blur(8px)
+      &.loaded
+        filter none
--- a/source/css/_layout/partial/paginator.styl
+++ b/source/css/_layout/partial/paginator.styl
@ -0,0 +1,22 @@
+.posts .paginator-wrap
+  display: flex
+  justify-content: space-between
+  align-items: center
+  disable-select()
+  font-weight: 500
+  svg.icon
+    font-size: 1.8rem
+  .paginator
+    text-align: center
+    padding: $gap
+  div.paginator
+    font-size: $fs14
+    color: var(--text-p2)
+  a.paginator
+    color: $color-link
+    trans1: color
+    &.disable
+      pointer-events: none
+      opacity: 0.25
+  a.paginator:hover
+    color: $color-hover
--- a/source/css/_layout/partial/read_next.styl
+++ b/source/css/_layout/partial/read_next.styl
@ -0,0 +1,18 @@
+.read-next-wrap
+  padding: $gap * 2 $gap
+  .body
+    .post-title
+      margin: 0.5rem 0
+      line-height: 1.2
+      font-size: $fs14
+      color: var(--text-p2)
+      font-weight: 500
+      a
+        color: inherit
+        &:hover
+          color: $color-hover
+      &.read
+        color: var(--text-p3)
+        font-size: $fs12
+      &.unread
+        font-size: 1rem
--- a/source/css/_layout/partial/references.styl
+++ b/source/css/_layout/partial/references.styl
@ -0,0 +1,16 @@
+.references-wrap
+  margin: $gap * 2 $gap
+  padding: 1rem
+  background: var(--block)
+  border-radius: $border-block
+  .header
+    font-weight: 500
+    color: var(--text-p3)
+    margin-bottom: 1rem
+  .body
+    ul
+      margin: 0
+    .post-title
+      margin: 0.5rem 0
+      line-height: 1.2
+      font-size: $fs13
--- a/source/css/_layout/partial/related_posts.styl
+++ b/source/css/_layout/partial/related_posts.styl
@ -0,0 +1,71 @@
+div.related-posts-wrap
+  padding: $gap * 2 $gap
+  &:empty
+    display: none
+  .related-posts
+    width: 100%
+    display: flex
+    margin: $gap 0
+    overflow-x: scroll
+    disable-select()
+    align-items: flex-start
+    scrollbar(8px, 4px)
+    padding-bottom: 4px
+    a
+      flex-grow: 0
+      flex-shrink: 0
+      background: var(--card)
+      border-radius: 0.5rem
+      padding-bottom: 1rem
+      line-height: 1.2
+      display: flex
+      flex-direction: column
+      overflow: hidden
+      width: 360px
+      opacity: 0.7
+      trans1: opacity 0.5s
+      border: 1px solid var(--hover-block)
+      .img
+        height: 180px
+        overflow: hidden
+        img
+          width: 100%
+          height: 100%
+          object-fit: cover
+      @media screen and (max-width: $device-tablet)
+        width: 300px
+        .img
+          height: 150px
+      @media screen and (max-width: $device-mobile)
+        width: 300px
+      .title
+        color: var(--text-p1)
+        font-weight: 500
+        font-size: $fs15
+        margin: 1rem 1rem 0 1rem
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 2
+      .excerpt
+        color: var(--text-p2)
+        font-size: $fs13
+        margin: 0.4rem 1rem 0 1rem
+        display: -webkit-box
+        -webkit-box-orient: vertical
+        overflow: hidden
+        -webkit-line-clamp: 3
+      &:hover
+        opacity: 1
+    a+a
+      margin-left: $gap
+
+
+// // iPad 竖屏
+// @media screen and (max-width: $device-tablet)
+//   section.related-posts-wrap
+//     .related-posts
+//       a
+//         min-width: 280px
+//         .img
+//           height: 120px
--- a/source/css/_layout/post_list.styl
+++ b/source/css/_layout/post_list.styl
@ -0,0 +1,107 @@
+// list
+.post-list
+  margin: 1rem
+  .card-title,.list-title
+    font-weight: 600
+    color: var(--text-meta)
+    font-family: $ff-code
+    line-height: 1.2
+  .list-title
+    margin: 2rem 1rem 0rem
+    font-size: 1.5rem
+  .card-title
+    padding-bottom: 0.5rem
+    font-size: 1.2rem
+
+// card
+.post-list .post-card
+  display: block
+  margin: 1rem 0
+  color: var(--text-p2)
+  border-radius: $border-card
+  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.02)
+  trans1 box-shadow
+  overflow: hidden
+  background: var(--card)
+  .meta.cap
+    margin-bottom: 0.5rem
+    span+span
+      margin-left: 0.5rem
+.post-list .post-card:hover
+  box-shadow: 0 2px 8px 0px rgba(0, 0, 0, 0.04), 0 4px 16px 0px rgba(0, 0, 0, 0.04)
+  .logo img
+    transform: scale(1.1)
+  .excerpt .readmore
+    color: $color-link
+
+// common article
+.post-list article
+  padding: 1rem
+
+// posts
+.post-list .post-card
+  .post-title
+    font-weight: 500
+    margin: .5em 0
+    line-height: 1.2
+    font-size: $fs-h3
+    border-bottom: none
+    color: var(--text-p1)
+    trans1 color
+  .excerpt
+    font-size: $fs14
+  .post-cover-wrap
+    overflow: hidden
+    margin-left: 0 - 1.5 * $gap
+    margin-top: 0 - 1.5 * $gap
+    margin-bottom: 1.25 * $gap
+    width: "calc(100% + 3 * %s)" % $gap
+  .post-cover
+    background-position: center
+    background-size: cover
+    height: 320px
+    @media screen and (max-width: 900px)
+      height: 280px
+    @media screen and (max-width: $device-tablet)
+      height: 320px
+    @media screen and (max-width: $device-mobile)
+      height: 280px
+    @media screen and (max-width: $device-mobile-l)
+      height: 240px
+    @media screen and (max-width: $device-mobile-m)
+      height: 200px
+    trans1: transform 1s
+.post-list .post-card.post:hover
+  .post-title
+    color: $color-hover
+  .post-cover
+    transform: scale(1.04)
+
+// wiki
+.post-list .post-card.wiki article
+  display: flex
+  flex-wrap: wrap
+  trans1 box-shadow
+  justify-content: center
+
+
+.post-list .post-card.wiki article .logo
+  display: flex
+  width: 180px
+  margin: 1rem
+  align-items: center
+  img
+    object-fit: contain
+    trans1 transform 0.75s
+.post-list .post-card.wiki article .excerpt
+  margin: 1rem
+  min-width: 220px
+  flex: 1
+  overflow: hidden
+  word-wrap: break-word
+  .title
+    font-weight: 600
+    font-size: $fs-h3
+  >p
+    margin: 0.5rem 0
+    font-size: $fs14
--- a/source/css/_layout/sidebar.styl
+++ b/source/css/_layout/sidebar.styl
@ -0,0 +1,133 @@
+.l_left .wrap
+  display: flex
+  flex-direction: column
+  height: "calc(100% - 4 * %s)" % $gap
+  margin-top: $gap * 2
+  padding: $gap
+  @media screen and (max-width: $device-tablet)
+    height: "calc(100% - 2 * %s)" % $gap
+    margin-top: 0
+
+.logo-wrap
+  margin: $gap 0
+  display: flex
+  align-items: center
+  color: var(--text-p0)
+  &:hover
+    color: var(--text-p0)
+  .img
+    width: 40px
+    height: 40px
+    flex-shrink: 0
+    border-radius: 20px
+    overflow: hidden
+    margin-right: 1rem
+    img
+      object-fit: cover
+  .title
+    padding-top: 2px
+    font-size: 1.75rem
+    font-weight: 900
+    color: inherit
+    font-family: $ff-logo
+
+nav.menu
+  margin-top: 0
+  background: var(--block)
+  border-radius: 6px
+  disable-select()
+  display: flex
+  padding: 1px
+  flex-wrap: wrap
+  &::-webkit-scrollbar
+    display: none
+  &::-webkit-scrollbar-track-piece
+    background: transparent
+  &::-webkit-scrollbar-thumb
+    display: none
+  a.nav-item
+    text-overflow: ellipsis
+    word-break: keep-all
+    margin: 1px
+    border-radius: 4px
+    font-size: $fs14
+    font-weight: 500
+    trans2: color background
+    overflow: hidden
+    span
+      color: var(--text-p3)
+      display: block
+      padding: 6px 12px
+    &.active span, &:hover span
+      color: var(--text-p1)
+      background: var(--card)
+
+.l_left .widgets
+  margin: $gap 0
+  overflow: scroll
+  flex-grow: 1
+  scrollbar(0, 0)
+  .widget-wrap
+    margin: 1rem 0 2rem 0
+    .widget-header
+      display: flex
+      font-size: 1rem
+      color: var(--text-meta)
+      justify-content: space-between
+      align-items: center
+      font-weight: 600
+      position: sticky
+      position: -webkit-sticky
+      top: -2px
+      background: var(--site-bg)
+      padding: 2px 0
+      z-index 1
+      .name
+        font-size: 1rem
+      .cap-action
+        hover-block 4px 4px
+        line-height: 0
+        color: var(--text-meta)
+        trans2: color background
+        .icon
+          fill: var(--text-meta)
+        &:hover
+          color: $color-hover
+          .icon
+            fill: $color-hover
+
+    .widget-body
+      margin: 0.5rem 0
+      font-size: $fs14
+      color: var(--text-p2)
+      p
+        margin-top: 0.5em
+        margin-bottom: 0.5em
+        >a
+          &:not([class])
+            font-weight: 500
+            &:hover
+              text-decoration: underline
+
+
+
+.l_left .footer
+  margin-top: 0
+  margin-bottom: 1rem
+  line-height: 0
+  .social-wrap
+    display: grid
+    grid-gap: $gap * 0.5 $gap * 0.5
+    grid-template-columns: repeat(auto-fill, 32px)
+  a
+    display: inline-block
+    background: var(--card)
+    padding: 4px
+    border-radius: 4px
+    filter: grayscale(100%)
+    overflow: hidden
+    trans1: box-shadow
+    &:hover
+      color: $color-hover
+      filter: grayscale(0%)
+      box-shadow: $boxshadow-float
--- a/source/css/_layout/sidebar/recent.styl
+++ b/source/css/_layout/sidebar/recent.styl
@ -0,0 +1,10 @@
+.widgets
+  .post-title
+    margin: 0.5rem 0
+    line-height: 1.2
+    font-size: $fs14
+    font-weight: 500
+    a
+      color: inherit
+      &:hover
+        color: $color-hover
--- a/source/css/_layout/sidebar/toc.styl
+++ b/source/css/_layout/sidebar/toc.styl
@ -0,0 +1,74 @@
+// toc padding
+#toc .widget-body
+  line-height: 1.2
+  .toc
+    padding: 0
+    margin: 0
+    padding-left: 0.25rem
+    .toc-item .toc-link
+      padding: 0.5rem 0 0.5rem 1rem
+      font-weight: 500
+      font-size: $fs13
+      color: var(--text-p2)
+    .toc-child .toc-item .toc-link
+      padding: 0.25rem 0 0.25rem 1.8rem
+      font-weight: 400
+      color: var(--text-p2)
+    .toc-child .toc-child .toc-item .toc-link
+      padding-left: 2.6rem
+      font-size: $fs12
+      color: var(--text-p3)
+    .toc-child .toc-child .toc-child .toc-item .toc-link
+      padding-left: 3.4rem
+  .toc:only-child
+    .toc-item .toc-link
+      padding-left: 0.5rem
+    .toc-child .toc-item .toc-link
+      padding-left: 1.3rem
+    .toc-child .toc-child .toc-item .toc-link
+      padding-left: 2.1rem
+    .toc-child .toc-child .toc-child .toc-item .toc-link
+      padding-left: 2.9rem
+
+
+#toc .toc-item
+  color: var(--text-p2)
+  font-size: $fs12
+  padding: 0
+  list-style: none
+  &.active
+    color: $color-theme
+    border-left-color: @color
+  .toc-child .toc-item
+    padding: 0
+#toc a.toc-link
+  color: inherit
+  display: block
+  line-height: 1.2
+  border-radius: 4px
+  &:hover
+    background: var(--hover-block)
+  &.active
+    color: var(--theme-highlight) !important
+
+#toc .doc-tree
+  border-left: 2px solid var(--hover-block)
+  a.doc-tree-link
+    color: var(--text-p3)
+    padding: 0.5rem
+    display: block
+    border-top-right-radius: 4px
+    border-bottom-right-radius: 4px
+    font-size: $fs12
+    font-weight: 500
+    &.active
+      color: var(--text-p2)
+      font-size: $fs14
+    &:hover
+      background: var(--hover-block)
+
+#toc .widget-body.wiki
+  .doc-tree.active
+    border-color: var(--text-meta)
+  .doc-tree.active:only-child
+    border-color: var(--hover-block)
--- a/source/css/_layout/tag-plugins/about.styl
+++ b/source/css/_layout/tag-plugins/about.styl
@ -0,0 +1,58 @@
+.tag-plugin.about
+  background: var(--block)
+  border-radius: 6px
+  padding: 2rem
+  .about-header
+    display flex
+    flex-direction: row-reverse
+    justify-content: space-between
+    flex-wrap: wrap
+    img
+      object-fit: contain
+    >img
+      margin: auto 0
+    >p
+      font-size: $fs12
+      font-weight: 500
+      color: var(--text-p3)
+      padding-top: 0.75rem
+      strong:first-child
+        font-size: 3rem
+        font-weight: 700
+        color: var(--text-p1)
+        margin-right: 0.75rem
+    .avatar
+      display: inline-flex
+      margin: 0 1rem
+      // flex-shrink: 0
+  .about-body
+    >p
+      font-size: $fs14
+      line-height: 1.5
+    .tag-plugin.navbar:last-child
+      // margin: 0 -0.75rem -0.75rem
+      nav.cap
+        padding: 0
+        background: none
+        a
+          margin: 0
+          padding: 0
+          color: var(--text-p1)
+          color: $color-link
+          &:hover
+            color: $color-hover
+            background: none
+        a+a
+          margin-left: 1rem
+  .about-header+.about-body
+    margin-top: 1.5rem
+
+@media screen and (max-width: $device-mobile)
+  .tag-plugin.about
+    background: none
+    padding: 1rem
+    .about-header
+      .avatar
+        margin: 1rem auto
+      p
+        width 100%
--- a/Show More
+++ b/Show More