first commit

LICENSE

@@ -0,0 +1,8 @@
+MIT License
+Copyright (c) <year> <copyright holders>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,58 @@
+# hexo-theme-butterfly
+
+[预览](https://jerryc.me/)
+
+一款基于[hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody)修改的主题
+
+处于dev阶段，一些功能需要时间去适配（例如夜间模式）
+
+## 安装
+在你的博客目录里
+```
+git clone https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
+```
+
+## 应用主题
+修改hexo配置文件`_config.yml`，把主题改为`Butterfly`
+
+```
+theme: Butterfly
+```
+
+## 文档
+可查看[这里](https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/#%E7%89%B9%E6%80%A7)
+
+一些不同的东西后续补上教程
+
+
+## Front-matter
+
+page页
+```
+---
+title: {{ title }}
+date: {{ date }}
+comments: 
+reward:
+description:
+top_img: 
+---
+```
+
+post页
+```
+---
+title: {{ title }}
+date: {{ date }}
+tags:
+categories:
+keywords:
+description:
+top_img:
+cover:
+---
+```
+
+## 截图
+![image](https://user-images.githubusercontent.com/16351105/58887365-1272f780-8718-11e9-9329-3292c6ba20d4.png)
+![image](https://user-images.githubusercontent.com/16351105/58887457-3cc4b500-8718-11e9-9417-2bdea603c92e.png)

_config.yml

@@ -0,0 +1,381 @@
+# Theme color for customize
+# Notice: color value must in double quotes like "#000" or may cause error!
+# ---------------
+# theme_color:
+#   enable: true
+#   main: "#7A7FF1"
+#   paginator: "#7A7FF1"
+#   button_hover: "#FF7242"
+#   text_selection: "#69c46d"
+#   link_color: "#858585"
+#   hr_color: "#A4D8FA"
+
+# Main menu navigation
+# format: xxx: /xxx/||icon
+# ---------------
+menu:
+  Home: /||fa fa-home
+  Archives: /archives/||fa fa-archive
+  Tags: /tags/||fa fa-tags
+  Categories: /categories/||fa fa-folder-open
+  Link: /link/||fa fa-link
+  About: /about/||fa fa-heart
+#   #XXX: /xxx
+
+
+# Favicon
+# use my-favicon.ico to avoid duplicate favicon of melody theme
+# ---------------
+favicon: /img/favicon.png
+
+# PWA
+# See https://github.com/JLHwung/hexo-offline
+# ---------------
+# pwa:
+#   enable: true
+#   manifest: /img/pwa/manifest.json
+#   theme_color: "#fff"
+#   apple_touch_icon: /img/pwa/apple-touch-icon.png
+#   favicon_32_32: /img/pwa/32.png
+#   favicon_16_16: /img/pwa/16.png
+#   mask_icon: /img/pwa/safari-pinned-tab.svg
+#   shortcut_icon: /img/favicon.ico
+
+
+# Highlight theme
+# ---------------
+highlight_theme: light
+
+code_word_wrap: false
+
+# Nav settings
+# formal: 
+#   icon: link
+# ---------------
+social:
+  fa fa-github: https://github.com/jerryc127
+  fa fa-rss: /atom.xml
+
+# Algolia search
+# ---------------
+algolia_search:
+  enable: flase
+  hits:
+    per_page: 6
+
+  labels:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+    hits_stats: "${hits} results found in ${time} ms"
+
+
+# Local search
+# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=local-search
+# ---------------
+local_search:
+  enable: true
+  labels:
+    input_placeholder: Search for Posts
+    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result
+
+# MathJax
+# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/third-party-support?id=mathjax
+# ---------------
+mathjax:
+  enable: false
+  cdn: https://cdn.jsdelivr.net/npm/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML
+
+# KaTeX
+# ---------------
+katex:
+  enable: false
+  cdn:
+    css: https://cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css  
+  hide_scrollbar: true
+
+
+
+# Analysis
+# ---------------
+# baidu_analytics: 
+
+#Google Analytics
+google_analytics:
+
+
+
+# stylesheets loaded in the <head>
+# ---------------
+stylesheets:
+  - /css/index.css
+
+# scripts loaded in the end of the body
+# ---------------
+scripts:
+  - /js/utils.js
+  - /js/main.js
+  - /js/baidupush.js
+
+
+# cdn for third-party library
+# ---------------
+cdn:
+  css:
+    fontawesome: https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css
+    # fontawesomeV5: https://use.fontawesome.com/releases/v5.8.1/css/all.css
+    googlefont: https://fonts.googleapis.com/css?family=Titillium+Web
+    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css
+  js:
+    jquery: https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js
+    fancybox: https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js
+    js-cookies: https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js
+    lozy: https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js
+
+
+# Post info settings
+# ---------------
+# avatar: /img/avatar.png
+avatar: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/avatar.png
+
+# the banner image of index
+# if the banner of another page not setting,it will show the top_img
+top_img: https://i.loli.net/2019/05/22/5ce53eb6dc82757840.jpg
+
+#the banner image of post
+# if the post not set the post cover and post top image, it will show it
+post_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/post.png
+
+# the default cover of the post
+default_cover: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg.png
+
+# the banner image of archive page
+archive_img: https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/Photo/archive.jpg
+
+# if the photo link cannot connect,it will show that
+lodding_bg:
+  flink: /img/friend_404.gif
+  post_page: /img/404.jpg
+
+
+post_meta:
+  date_type: both # or updated 文章日期是创建日或者更新日
+  categories: true # or false 是否显示分类
+  tags: true # or false 是否显示标签
+
+# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/additional-package-support?id=word-counting
+wordcount:
+  enable: false
+
+toc:
+  enable: true
+  number: true
+
+post_copyright:
+  enable: true
+  license: CC BY-NC-SA 4.0
+  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
+
+# Please see doc for more details: https://molunerfinn.com/hexo-theme-melody-doc/#/theme-config?id=auto-excerpt
+auto_excerpt:
+  enable: true
+  length: 150
+
+
+# adv:
+  # enable: false
+  # info: 
+
+# Share System
+# ---------------
+addThis:
+  enable: false
+  pubid:
+
+sharejs:
+  enable: true
+  sites: facebook,twitter,wechat,weibo,qq
+
+addtoany:
+  enable: false
+
+# Comments System
+# ---------------
+disqus:
+  enable: false
+  shortname: 
+  count: true 
+
+# laibili:
+  # enable: false
+  # uid:
+
+# gitment
+  # enable: false
+  # owner: 
+  # repo: 
+  # client_id: 
+  # client_secret: 
+
+# gitalk:
+#   enable: false
+#   client_id: 
+#   client_secret: 
+#   repo:
+#   owner:
+#   admin:
+####   Using this js for redirect to gitalk container after login
+####   See https://github.com/gitalk/gitalk/issues/125
+#   js: https://cdn.jsdelivr.net/gh/upupming/gitalk@36368e5dffd049e956cdbbd751ff96c28d8255cf/dist/gitalk.min.js
+
+# valine comment system. https://valine.js.org
+valine:
+  enable: false # if you want use valine,please set this value is ture
+  appId:   # leancloud application app id
+  appKey:   # leancloud application app key
+  notify: false # valine mail notify (true/false) https://github.com/xCss/Valine/wiki
+  verify: false # valine verify code (true/false)
+  pageSize: 10 # comment list page size
+  avatar: monsterid # gravatar style https://valine.js.org/#/avatar
+  lang: en # i18n: zh-cn/en
+  placeholder: Please leave your footprints # valine comment input placeholder(like: Please leave your footprints )
+  guest_info: nick,mail,link #valine comment header inf
+
+# Footer Settings
+# ---------------
+since: 2018
+
+footer_custom_text:
+
+footer_copyright:
+  enable: true
+
+ICP:
+  enable: false
+  # text: 
+
+# busuanzi count for PV / UV in site
+busuanzi:
+  # count values only if the other configs are false
+  enable: true
+  # custom uv span for the whole site
+  site_uv: true
+  site_uv_header: <i class="fa fa-user"></i>
+  site_uv_footer:
+  # custom pv span for the whole site
+  site_pv: true
+  site_pv_header: <i class="fa fa-eye"></i>
+  site_pv_footer:
+  # custom pv span for one page only
+  page_pv: false
+  page_pv_header: <i class="fa fa-file-o"></i>
+  page_pv_footer:
+
+
+
+# Follow Me Button
+follow:
+  enable: true
+
+
+# Google Webmaster tools verification setting
+# See: https://www.google.com/webmasters/
+google_site_verification:
+
+# Bing Webmaster tools verification setting
+# See: https://www.bing.com/webmaster/
+bing_site_verification:
+
+# Yandex Webmaster tools verification setting
+# See: https://webmaster.yandex.ru/
+#yandex_site_verification:
+
+# Baidu Webmaster tools verification setting
+# See: https://ziyuan.baidu.com/site/
+baidu_site_verification:
+
+# 360 Webmaster tools verification setting
+# see http://zhanzhang.so.com/
+qihu_site_verification:
+
+Flink:
+  headline: 友情鏈接
+  info_headline: 我的Blog資料
+  name: Blog 名字： JerryC
+  address: Blog 地址： https://jerryc.me/
+  avatar: Blog 頭像： https://jerryc.me/img/avatar.png
+  info: Blog 簡介： 今日事,今日畢
+  comment: 如果需要交換友鏈,請留言
+
+
+## friendlink
+
+flinks: 
+  [
+  {'name': '夢魘小棧',
+  'link': 'https://blog.ihoey.com',
+  'avatar': 'https://cdn.dode.top/avatar.png',
+  'descr': '心，若沒有棲息的地方，到哪裏都是流浪......'},
+  {'name': '冰峯博客',
+   'link':'https://www.ad-s.cn/',
+   'avatar': 'https://secure.gravatar.com/avatar/4074cd3e035c6e5796f6c263ef8ef0b8?s=56&d=wavatar&r=g',
+   'descr': '男人就應該保持冷靜，沸騰的水只會被蒸發掉。'}
+  ]
+   
+
+## chinese traditional to Simplified
+translate:
+  enable: true
+
+
+runtimeshow:
+  enable: true
+
+
+nightshift:
+  enable: true
+
+
+activate_power_mode:
+  enable: false
+
+
+
+announcement:
+  content: 感謝訪問本站，若喜歡請收藏 ^_^
+
+reward:
+  enable: true
+  QR_code:
+    - itemlist:
+        img: /img/wechat.jpg
+        text: 微信
+    - itemlist:
+        img: /img/alipay.jpg
+        text: 支付寶
+
+related_post:
+  enable: true
+
+
+# canvas_ribbon
+# See: https://github.com/hustcc/ribbon.js
+canvas_ribbon:
+  enable: false
+  size: 150
+  alpha: 0.6
+  zIndex: -1
+  click_to_change: false
+
+
+canvas_ribbon_piao:
+  enable: true
+
+
+# 避免重复网址分散seo
+canonical: true
+
+# 禁止百度转码
+disable_baidu_transformation: true
+
+twitter_meta: true
+Open_Graph_meta: true

languages/default.yml

@@ -0,0 +1,72 @@
+sidebar:
+  catalog: Catalog
+  have_read: You've read
+
+footer:
+  driven: Driven
+  theme: Theme
+
+copy:
+  success: Copy successfully
+  error: Copy error
+  noSupport: The browser does not support
+
+page:
+  articles: Articles
+  tag: Tag
+  category: Category
+  archives: Archives
+
+sticky: Sticky
+no_title: No title
+read_more: Read more
+
+post:
+  created: Created
+  updated: Updated
+  wordcount: Word count
+  min2read: 'Reading time: %s min'
+  copyright:
+    author: Author
+    link: Link
+    copyright_notice: Copyright Notice
+    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
+
+
+search: Search
+algolia_search:
+  input_placeholder: Search for Posts
+  hits_empty: "We didn't find any results for the search: ${query}."
+  hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+  label: Local search
+  input_placeholder: Search for Posts
+  hits_empty: "We didn't find any results for the search: ${query}"
+  powered_by: Powered by
+
+pagination:
+  prev: Previous Post
+  next: Next Post
+
+comment: Comment
+
+aside:
+  articles: Articles
+  tags: Tags
+  categories: Categories
+  card_announcement: Announcement
+  card_categories:  Categories
+  card_tags: Tags
+  card_archives: Archives
+  card_recent_post: Recent Post
+  card_bookmark: Add to bookmark
+  card_webinfo:
+    headline: Info
+    article_name: Article
+    runtime_name: Run time
+    site_uv_name: UV
+    site_pv_name: PV
+
+donate: Donate
+share: Share

languages/en.yml

@@ -0,0 +1,73 @@
+sidebar:
+  catalog: Catalog
+  have_read: You've read
+
+footer:
+  driven: Driven
+  theme: Theme
+
+copy:
+  success: Copy successfully
+  error: Copy error
+  noSupport: The browser does not support
+
+page:
+  articles: Articles
+  tag: Tag
+  category: Category
+  archives: Archives
+
+sticky: Sticky
+no_title: No title
+read_more: Read more
+
+post:
+  created: Created
+  updated: Updated
+  wordcount: Word count
+  min2read: 'Reading time: %s min'
+  copyright:
+    author: Author
+    link: Link
+    copyright_notice: Copyright Notice
+    copyright_content: 'All articles in this blog are licensed under <a href="%s">%s</a> unless stating additionally.'
+
+
+search: Search
+algolia_search:
+  input_placeholder: Search for Posts
+  hits_empty: "We didn't find any results for the search: ${query}."
+  hits_stats: "${hits} results found in ${time} ms"
+
+local_search:
+  label: Local search
+  input_placeholder: Search for Posts
+  hits_empty: "We didn't find any results for the search: ${query}"
+  powered_by: Powered by
+
+pagination:
+  prev: Previous Post
+  next: Next Post
+
+comment: Comment
+
+aside:
+  articles: Articles
+  tags: Tags
+  categories: Categories
+  card_announcement: Announcement
+  card_categories:  Categories
+  card_tags: Tags
+  card_archives: Archives
+  card_recent_post: Recent Post
+  card_bookmark: Add to bookmark
+  card_webinfo:
+    headline: Info
+    article_name: Article
+    runtime_name: Run time
+    site_uv_name: UV
+    site_pv_name: PV
+
+
+donate: Donate
+share: Share

languages/zh-Hans.yml

@@ -0,0 +1,73 @@
+sidebar:
+  catalog: 目录
+  have_read: 你已经读了
+
+footer:
+  driven: 驱动
+  theme: 主题
+
+copy:
+  success: 复制成功
+  error: 复制错误
+  noSupport: 浏览器不支持
+
+page:
+  articles: 文章总览
+  tag: 标签
+  category: 分类
+  archives: 归档
+
+sticky: 置顶
+no_title: 无题
+read_more: 阅读更多
+
+post:
+  created: 发表于
+  updated: 更新于
+  wordcount: 字数总计
+  min2read: '阅读时长: %s 分钟'
+  copyright:
+    author: 文章作者
+    link: 文章链接
+    copyright_notice: 版权声明
+    copyright_content: '本博客所有文章除特别声明外，均采用 <a href="%s">%s</a> 许可协议。转载请注明来自 <a href="%s">%s</a>！'
+
+search: 搜索
+algolia_search:
+  input_placeholder: 搜索文章
+  hits_empty: "找不到您查询的内容:${query}"
+  hits_stats: "找到 ${hits} 条结果，用时 ${time} 毫秒"
+
+local_search:
+  label: 本地搜索
+  input_placeholder: 搜索文章
+  hits_empty: "找不到您查询的内容:${query}"
+  powered: "提供支持"
+  by: 由
+
+pagination:
+  prev: 上一篇
+  next: 下一篇
+
+comment: 评论
+
+aside:
+  articles: 文章
+  tags: 标签
+  categories: 分类
+  card_announcement: 公告
+  card_categories: 分类
+  card_tags: 标签
+  card_archives: 归档
+  card_recent_post: 最新文章
+  card_bookmark: 加入书签
+  card_webinfo:
+    headline: 网站资讯
+    article_name: 文章数目
+    runtime_name: 已运行时间
+    site_uv_name: 本站访客数
+    site_pv_name: 本站总访问量
+
+
+donate: 打赏
+share: 分享

languages/zh-TW.yml

@@ -0,0 +1,78 @@
+sidebar:
+  catalog: 目錄
+  have_read: 你已經讀了
+
+footer:
+  driven: Power by
+  theme: Theme
+
+copy:
+  success: 複製成功
+  error: 複製錯誤
+  noSupport: 瀏覽器不支持
+
+page:
+  articles: 文章總覽
+  tag: 標籤
+  category: 分類
+  archives: 歸檔
+
+sticky: 置頂
+no_title: 無題
+archives: 時間軸
+read_more: 閲讀更多
+created_date: 發表於
+update_date: 更新於
+
+post:
+  created: 發表於
+  updated: 更新於
+  wordcount: 字數總計
+  commentcount: 評論數
+  min2read: '閲讀時長: %s 分鐘'
+  copyright:
+    author: 文章作者
+    link: 文章鏈接
+    copyright_notice: 版權聲明
+    copyright_content: '本博客所有文章除特別聲明外，均採用
+      <a href="%s" target="_blank">%s</a> 許可協議。轉載請註明來自 <a href="%s" target="_blank">%s</a>！'
+
+search: 搜索
+algolia_search:
+  input_placeholder: 搜索文章
+  hits_empty: "找不到您查詢的內容:${query}"
+  hits_stats: "找到 ${hits} 條結果，用時 ${time} 毫秒"
+
+local_search:
+  label: 本地搜索
+  input_placeholder: 搜索文章
+  hits_empty: "找不到您查詢的內容:${query}"
+  powered: "提供支持"
+  by: 由
+
+pagination:
+  prev: 上一篇
+  next: 下一篇
+
+comment: 評論
+
+aside:
+  articles: 文章
+  tags: 標籤
+  categories: 分類
+  card_announcement: 公告
+  card_categories: 分類
+  card_tags: 標籤
+  card_archives: 歸檔
+  card_recent_post: 最新文章
+  card_bookmark: 加入書籤
+  card_webinfo:
+    headline: 網站資訊
+    article_name: 文章數目
+    runtime_name: 已運行時間
+    site_uv_name: 本站訪客數
+    site_pv_name: 本站總訪問量
+
+
+donate: 打賞
+share: 分享

layout/archive.pug

@@ -0,0 +1,11 @@
+
+extends includes/layout.pug
+
+block content
+  include ./includes/mixins/article-sort.pug
+  #archive
+    .article-sort-title= _p('page.articles') + ' - ' + site.posts.length
+    +articleSort(page.posts)
+    include includes/pagination.pug
+  #aside_content.aside_content
+      include includes/aside.pug

layout/category.pug

@@ -0,0 +1,11 @@
+extends includes/layout.pug
+
+block content
+  include ./includes/mixins/article-sort.pug
+  #category
+    .article-sort-title= _p('page.category') + ' - ' + page.category
+    +articleSort(page.posts)
+    include includes/pagination.pug
+  #aside_content.aside_content
+    include includes/aside.pug
+  

layout/flink.pug

@@ -0,0 +1,163 @@
+style.
+   .md-links {
+        min-height: calc(100% - 120px - 5pc - 6em);
+        text-align: center;
+        overflow: auto;
+        padding: 0;
+        margin: 0 auto;
+    }
+    .md-links-item { 
+        height: 90px;
+        line-height: 17px;
+        margin: 20px 7px;
+        padding: 0px 0px;
+        transition: box-shadow 0.25s;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        border-radius: 8px;
+        -webkit-transform: perspective(1px) translateZ(0);
+        transform: perspective(1px) translateZ(0);
+        box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+        position: relative;
+        -webkit-transition-property: color;
+        transition-property: color;
+        -webkit-transition-duration: 0.3s;
+        transition-duration: 0.3s;                      
+    }
+    .md-links a {
+        color: #333;
+        text-decoration: none;
+    }
+    .md-links li {
+        width: calc(100%/3 - 14px);
+        float: left;
+        list-style: none;
+    }
+    .md-links-item img {
+        float: left;
+        border-radius: 35px;
+        margin: 11px 10px;
+        width: 70px;
+        height: 70px;
+        border: 0px solid #eaeefb;       
+    }
+    .md-links-item:hover img{
+        filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+        -moz-transform: rotate(540deg);
+        -o-transform: rotate(540deg);
+        -webkit-transform: rotate(540deg);
+        transform: rotate(540deg);
+    }
+    .md-links-des{
+        padding: 16px 10px;  
+        font-size:13px; 
+        overflow: hidden;
+        height:50px;
+        white-space: nowrap;
+        text-overflow: ellipsis;      
+    }
+    .md-links-item:before {
+        content: "";
+        position: absolute;
+        z-index: -1;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: #2098D1 !important;
+        -webkit-transform: scale(0);
+        transform: scale(0);
+        -webkit-transition-property: transform;
+        transition-property: transform;
+        -webkit-transition-duration: 0.3s;
+        transition-duration: 0.3s;
+        -webkit-transition-timing-function: ease-out;
+        transition-timing-function: ease-out;
+    }
+    .md-links-item:hover, .md-links-item:focus, .md-links-item:active {
+        color: white;
+    }
+    .md-links-item:hover:before, .md-links-item:focus:before, .md-links-item:active:before {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+    .md-links-item a:hover{
+        cursor: pointer;
+    }
+    .md-links-title {
+        padding-top: 16px;
+        padding-right: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        height:40px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+    #scheme-Paradox .mdl-mini-footer{
+        clear: left;
+    }
+    #bottom{
+        position: relative;
+    }
+    .post-cards {
+        margin-top: 5px;
+        margin-bottom: 75px;
+        min-height: 100px;
+        padding: 15px;
+        /*background: #fff;*/
+        border-radius: 15px;
+    }
+    .comment-word{
+        font-weight:bold;
+        font-size:1.7em;
+    }
+    @media screen and (max-width:1100px){
+        .post-cards {
+            position: relative;
+            margin: -20px -16px 0;
+            border-radius: 18px;
+            padding: 16px;
+        }
+        .md-links li {
+            width: calc(100%/2 - 14px);   
+    }
+    }
+    @media screen and (max-width:600px) {
+        .md-links li {
+            width: calc(100%/1 - 14px); 
+    }
+    }
+
+
+.flink
+    p(class="comment-word")= theme.Flink.headline
+
+    div(class="post-cards")
+        ul(class="md-links")
+            - var data = theme.flinks
+            - var i = 0
+                each item in data
+                    li(class="md-links-item")
+                        a(href=item.link  title=item.name target="_blank")
+                            img.lozad(data-src=item.avatar alt=item.name onerror=`onerror=null;src='${theme.lodding_bg.flink}'` height="72px")
+                            div(class="md-links-title")=item.name 
+                                <br/>
+                            div(class="md-links-des")=item.descr
+
+
+    <hr>
+    div 
+        p(style="font-size:15px;font-weight:bold")= theme.Flink.info_headline
+        ul
+            li= theme.Flink.name
+            li= theme.Flink.address
+            li= theme.Flink.avatar 
+            li= theme.Flink.info
+
+    <hr>
+    div(class="comment_int") 
+        p(class="comment-word")= theme.Flink.comment
+
+
+

layout/gallery.pug

@@ -0,0 +1,4 @@
+extends includes/layout.pug
+
+block content
+  include includes/gallery/layout.pug

layout/includes/additional-js.pug

@@ -0,0 +1,132 @@
+if (theme.algolia_search.enable)
+  script(async src=url_for('/js/search/algolia.js'))
+if (theme.mathjax && theme.mathjax.enable)
+  if(!is_tag() && !is_category() && !is_archive())
+    include ./third-party/mathjax.pug
+if (theme.katex && theme.katex.enable)
+  if(!is_tag() && !is_category() && !is_archive())
+    include ./third-party/katex.pug
+if (theme.local_search && theme.local_search.enable)
+  script(async src=url_for('/js/search/local-search.js'))
+
+
+if theme.translate && theme.translate.enable
+  script(src=url_for('/js/tw_cn.js'))
+  script.
+    $(document).ready(function() { 
+      initializeChineseConversion();
+    });
+    function simplifyTextInPage(simplified) {
+      if (simplified) {
+        $(document.body).t2s();
+        $('#translateLink').addClass('simplified');
+        $('#translateLink').text('繁');
+      } else {
+        $(document.body).s2t();
+        $('#translateLink').removeClass('simplified');
+        $('#translateLink').text('簡');
+      }
+    }
+    function initializeChineseConversion() {
+      var simplified = +Cookies.get('simplified');
+      // ?lang=zh-Hans, ?lang=zh-Hant
+      var scriptCode = /[?&;]lang=[^&;]*(Han[st])/i.exec(window.location.search);
+      if (scriptCode) {
+        simplified = +(scriptCode[1].match(/Hans/i) != null);
+        Cookies.set('simplified', simplified, {expires: 7, path: '/'});
+      }
+      simplifyTextInPage(simplified);
+      $('#translateLink').click(function() {
+        simplified = +!simplified;
+        Cookies.set('simplified', simplified, {expires: 7, path: '/'});
+        simplifyTextInPage(simplified);
+        $(this).blur();
+      });
+    }
+
+if theme.nightshift.enable
+  script(src=url_for('js/nightshift.js'))
+
+if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
+  include ./third-party/canvas-ribbon.pug
+
+if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
+  include ./third-party/canvas-ribbon-piao.pug
+
+if theme.activate_power_mode.enable
+  script(src=url_for('js/activate-power-mode.js'))
+  script.
+    POWERMODE.colorful = true; // make power mode colorful
+    POWERMODE.shake = true; // turn off shake
+    document.body.addEventListener('input', POWERMODE);
+
+
+
+
+
+//- script(src="https://unpkg.com/aos@next/dist/aos.js")
+//- script.
+//-     $(".recent-post-item,.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink").attr("data-aos","slide-up");
+//-     AOS.init();
+
+
+script(src="https://cdn.jsdelivr.net/npm/instant.page@1.2.2/instantpage.min.js" type="module")
+
+//- if is_post()
+//-   script(src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9")
+//-   script.
+//-     var typed = new Typed("#typed", {
+//-     stringsElement: '#post-title-effects',
+//-     typeSpeed: 150,
+//-     loop: true,
+//-     backSpeed: 100
+//-     });
+
+if is_home()
+  script(src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9")
+  script.
+    var typed = new Typed(".subtitle", {
+    strings: ["今日事,今日畢", "Never put off till tomorrow what you can do today"],
+    startDelay: 300,
+    typeSpeed: 100,
+    loop: true,
+    backSpeed: 50
+    });
+  
+  script.
+    //首頁fullpage
+    function alignContent() {
+      for (var n = $(window).height(), e = document.querySelectorAll(".full_page"), i = 0; i < e.length; i++) 
+        e[i].style.height = n + "px";
+        $("#site-info").each(function () {
+          var x = $(this).height();
+          $(this).css("top", (n-x)/2)
+        })
+    }
+
+    function recent_post_padding() {
+      $(".recent-post-info").each(function () {
+        var k = $(".recent-post-item").height();
+        var e = $(this).height();
+        $(this).css({"padding-top": (k-e)/2 , "padding-bottom": (k-e)/2 })
+      })   
+    }
+
+    alignContent();
+
+    //recent-post-item垂直置中
+    if ($(window).width() > 768) {    
+      recent_post_padding();
+    }
+     
+    $(window).bind("resize", function () {
+
+      alignContent()
+
+      if ($(window).width() > 768) {    
+        recent_post_padding();     
+      }
+    })
+
+
+script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")

layout/includes/aside.pug

@@ -0,0 +1,121 @@
+.card_widget.card-author
+  .card-content
+    .post_data
+      .data-item.text-center
+        img.lozad(data-src=theme.avatar || url_for('/img/avatar.png') onerror=`onerror=null;src='${theme.lodding_bg.flink}'`)
+        p.author-info__name.text-center= config.author
+        p.author-info__description.text-center= config.description
+
+    .post_data.data_config
+      if site.posts.length
+        .data-item.text-center
+          .data_link
+            a(href=url_for(config.archive_dir) + '/')
+              p.headline= _p('aside.articles') 
+              p.length_num= site.posts.length
+
+      if site.tags.length
+        .data-item.text-center       
+          .data_link
+            a(href=url_for(config.tag_dir) + '/' )
+              p.headline= _p('aside.tags')
+              p.length_num= site.tags.length
+
+      if site.categories.length
+        .data-item.text-center      
+          .data_link
+            a(href=url_for(config.category_dir) + '/')
+              p.headline= _p('aside.categories') 
+              p.length_num= site.categories.length
+
+    .post_data.text-center
+      a#bookmark-it.data-item.bookmark.bookmarke--primary.bookmark--animated(href="javascript:;" title= _p('aside.card_bookmark') )=  _p('aside.card_bookmark') || 'Follow Me'
+      
+   
+   
+    if(theme.social)
+      .post_data.data_config
+        #aside-social-icons 
+          each url, icon in theme.social
+            a.social-icon.data-item(href=url target="_blank")
+              i(class=icon)
+
+.card_widget.card-announcement
+  .card-content
+    .item_headline
+      i.fa.fa-bullhorn.card-announcement-animation(aria-hidden="true")
+      span= _p('aside.card_announcement')
+    .announcement_content= theme.announcement.content
+
+.card_widget.card-recent-post
+  .card-content
+    .item_headline
+      i.fa.fa-history(aria-hidden="true")
+      span= _p('aside.card_recent_post')
+    .aside_recent_item
+      - site.posts.sort('date', -1).limit(5).each(function(article){
+        .aside_recent_post
+          - var link = article.link || article.path
+            a(href=url_for(link))
+              - var post_cover = article.cover
+              - var default_post_cover = theme.default_cover
+              .aside_post_cover
+                if (post_cover)
+                  img.aside_post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+                else
+                  img.aside_post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+              div#aside_title
+                .aside_post_title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+                if (theme.post_meta.date_type)
+                  - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
+                  time.aside_post_meta.post-meta__date #[=date(article[date_type], config.date_format)]
+    
+      - })
+      
+.card_widget.card-categories
+  .card-content
+    .item_headline
+      i.fa.fa-folder-open(aria-hidden="true")
+      span= _p('aside.card_categories')
+    ul.aside_category_item
+      - site.categories.sort('name').each(function(category){
+        li.aside_category_list
+          a.aside_category_list_link(href='/' + `${category.path}`)
+            span.aside_category_list_name= category.name
+            span.aside_category_list_length= category.length
+      - })
+
+.card_widget.card-tags
+  .card-content
+    .item_headline
+      i.fa.fa-tags(aria-hidden="true")
+      span= _p('aside.card_tags')
+    .card-tag-cloud!= tagcloud({min_font: 16, max_font: 24, amount: 200, color: true, start_color: '#999', end_color: '#000'})
+
+.card_widget.card-archives
+  .card-content
+    .item_headline
+      i.fa.fa-archive(aria-hidden="true")
+      span= _p('aside.card_archives')
+    div.archives_item!= list_archives({type:'monthly',format: 'YYYY年MM月'})
+
+.card_widget.card-webinfo
+  .card-content
+    .item_headline
+        i.fa.fa-line-chart(aria-hidden="true")
+        span= _p('aside.card_webinfo.headline')
+    .webinfo
+      .webinfo_item
+        .webinfo_article_name= _p('aside.card_webinfo.article_name') + " :"
+        .webinfo_article_count= site.posts.length
+      .webinfo_item
+        .webinfo_runtime_name= _p('aside.card_webinfo.runtime_name') + " :"
+        #webinfo_runtime_count.webinfo_runtime_count
+        script(src=url_for('js/runtimeshow.js'))       
+      .webinfo_item       
+        .webinfo_site_uv_name= _p('aside.card_webinfo.site_uv_name') + " :"
+        .webinfo_site_uv_count#busuanzi_value_site_uv
+      .webinfo_item
+        .webinfo_site_name= _p('aside.card_webinfo.site_pv_name') + " :"
+        .webinfo_site_pv_count#busuanzi_value_site_pv
+

layout/includes/comments/disqus.pug

@@ -0,0 +1,15 @@
+if theme.disqus.enable
+  #disqus_thread
+  script.
+    var unused = null;
+    var disqus_config = function () {
+      this.page.url = '!{ page.permalink }';
+      this.page.identifier = '!{ page.path }';
+      this.page.title = '!{ page.title }';
+    }
+    var d = document, s = d.createElement('script');
+    s.src = "https://" + '!{theme.disqus.shortname}' +".disqus.com/embed.js";
+    s.setAttribute('data-timestamp', '' + +new Date());
+    (d.head || d.body).appendChild(s);
+  if theme.disqus.count
+    script#dsq-count-scr(src="https://" + theme.disqus.shortname + ".disqus.com/count.js" async)

layout/includes/comments/gitalk.pug

@@ -0,0 +1,13 @@
+if theme.gitment && theme.gitment.enable
+  #gitment-container
+  script.
+    var gitment = new Gitment({
+      id: md5(decodeURI(location.pathname)),
+      owner: '!{theme.gitment.owner}',
+      repo: '!{theme.gitment.repo}',
+      oauth: {
+        client_id: '!{theme.gitment.client_id}',
+        client_secret: '!{theme.gitment.client_secret}'
+      }
+    })
+    gitment.render('gitment-container')

layout/includes/comments/gitment.pug

@@ -0,0 +1,12 @@
+if theme.gitment && theme.gitment.enable
+  #gitment-container
+  script.
+    var gitment = new Gitment({
+      owner: '!{theme.gitment.owner}',
+      repo: '!{theme.gitment.repo}',
+      oauth: {
+        client_id: '!{theme.gitment.client_id}',
+        client_secret: '!{theme.gitment.client_secret}'
+      }
+    })
+    gitment.render('gitment-container')

layout/includes/comments/index.pug

@@ -0,0 +1,17 @@
+hr
+#post-comment
+  .comment_headling
+    i.fa.fa-comments.fa-fw(aria-hidden="true")
+    =" "
+    span= _p('comment')
+   
+  if theme.disqus.enable
+    include ./disqus.pug
+  else if theme.laibili && theme.laibili.enable
+    include ./laibili.pug
+  else if theme.gitment && theme.gitment.enable
+    include ./gitment.pug
+  else if theme.gitalk && theme.gitalk.enable
+    include ./gitalk.pug
+  else if theme.valine && theme.valine.enable
+    include ./valine.pug

layout/includes/comments/laibili.pug

@@ -0,0 +1,11 @@
+if theme.laibili && theme.laibili.enable
+  #lv-container(data-id="city" data-uid=theme.laibili.uid)
+    script.
+      (function(d, s) {
+          var j, e = d.getElementsByTagName(s)[0];
+          if (typeof LivereTower === 'function') { return; }
+          j = d.createElement(s);
+          j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
+          j.async = true;
+          e.parentNode.insertBefore(j, e);
+      })(document, 'script');

layout/includes/comments/valine.pug

@@ -0,0 +1,69 @@
+if theme.valine && theme.valine.enable
+  #vcomment.vcomment
+  script(src='https://cdn1.lncld.net/static/js/3.0.4/av-min.js')
+  script(src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js')
+  script.
+    var notify = '#{ theme.valine.notify }' == true ? true : false;
+    var verify = '#{ theme.valine.verify }' == true ? true : false;
+    var GUEST_INFO = ['nick','mail','link'];
+    var guest_info = '#{ theme.valine.guest_info }'.split(',').filter(function(item){
+      return GUEST_INFO.indexOf(item) > -1
+    });
+    guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;
+
+    var localeName = 'tw',
+    localeMode = {
+        head: {
+            nick: '暱稱(必填)',
+            mail: '郵箱(必填,可以收到回復提醒)',
+            link: '網址(選填)',
+        },
+        tips: {
+            comments: '評論',
+            sofa: '快來做第一個評論的人吧~',
+            busy: '還在提交中，請稍候...',
+            again: '這麼簡單也能錯，也是沒誰了.'
+        },
+        ctrl: {
+            reply: '回覆',
+            ok: '好的',
+            sure: '確認',
+            cancel: '取消',
+            confirm: '確認',
+            continue: '繼續',
+            more: '查看更多...',
+            try: '再試試?',
+            preview: '預覽',
+            emoji: '表情'
+        },
+        error: {
+            99: '初始化失敗，請檢查init中的`el`元素.',
+            100: '初始化失敗，請檢查你的AppId和AppKey.',
+            401: '未經授權的操作，請檢查你的AppId和AppKey.',
+            403: '訪問被api域名白名單拒絕，請檢查你的安全域名設置.',
+        },
+        timeago: {
+            seconds: '秒前',
+            minutes: '分鐘前',
+            hours: '小時前',
+            days: '天前',
+            now: '剛剛'
+        }
+    };
+
+    window.valine = new Valine();
+    valine.installLocale(localeName,localeMode);
+
+    valine.init({
+      el:'#vcomment',
+      notify:notify,
+      verify:verify,
+      appId:'#{theme.valine.appId}',
+      appKey:'#{theme.valine.appKey}',
+      placeholder:'#{theme.valine.placeholder}',
+      avatar:'#{theme.valine.avatar}',
+      guest_info:guest_info,
+      pageSize:'#{theme.valine.pageSize}',
+      lang:'#{theme.valine.lang}',
+      visitor: true
+    });

layout/includes/config.pug

@@ -0,0 +1,39 @@
+-
+  var algolia = 'undefined';
+  var env = process.env;
+  if (theme.algolia_search.enable) {
+    algolia = JSON.stringify({
+      appId: env.ALGOLIA_APP_ID || config.algolia.appId || config.algolia.applicationID,
+      apiKey: env.ALGOLIA_API_KEY || config.algolia.apiKey,
+      indexName: env.ALGOLIA_INDEX_NAME || config.algolia.indexName,
+      hits: theme.algolia_search.hits,
+      // search languages
+      languages: {
+        input_placeholder: _p("algolia_search.input_placeholder"),
+        hits_empty: _p("algolia_search.hits_empty"),
+        hits_stats: _p("algolia_search.hits_stats")
+      }
+    })
+  } 
+  
+  var localSearch = 'undefined';
+  if (theme.local_search && theme.local_search.enable) {
+    localSearch = JSON.stringify({
+      path: config.search.path,
+      languages: {
+        // search languages
+        hits_empty: _p("local_search.hits_empty")
+      }
+    })
+  }
+script.
+  var GLOBAL_CONFIG = { 
+    root: '!{config.root}',
+    algolia: !{algolia},
+    localSearch: !{localSearch},
+    copy: {
+      success: '!{_p("copy.success")}',
+      error: '!{_p("copy.error")}',
+      noSupport: '!{_p("copy.noSupport")}'
+    }
+  } 

layout/includes/count/busuanzi.pug

@@ -0,0 +1,29 @@
+.busuanzi
+  script(async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js")
+  if(!is_post())
+    if(theme.busuanzi.site_uv)
+      span#busuanzi_container_site_uv!= theme.busuanzi.site_uv_header
+        span#busuanzi_value_site_uv
+        span!=theme.busuanzi.site_uv_footer
+    if(theme.busuanzi.site_pv)
+      if(theme.busuanzi.site_pv)
+        span.footer-separator |
+      span#busuanzi_container_site_pv!= theme.busuanzi.site_pv_header
+        span#busuanzi_value_site_pv
+        span!=theme.busuanzi.site_pv_footer
+  else
+    if(theme.busuanzi.page_pv)
+      span#busuanzi_container_page_pv!= theme.busuanzi.page_pv_header
+        span#busuanzi_value_page_pv
+        span!=theme.busuanzi.page_pv_footer
+    else
+      if(theme.busuanzi.site_uv)
+        span#busuanzi_container_site_uv!= theme.busuanzi.site_uv_header
+          span#busuanzi_value_site_uv
+          span!=theme.busuanzi.site_uv_footer
+      if(theme.busuanzi.site_pv)
+        if(theme.busuanzi.site_pv)
+          span.footer-separator |
+        span#busuanzi_container_site_pv!= theme.busuanzi.site_pv_header
+          span#busuanzi_value_site_pv
+          span!=theme.busuanzi.site_pv_footer

layout/includes/footer.pug

@@ -0,0 +1,27 @@
+#footer.layout
+  - var now = new Date()
+  - var nowYear = now.getFullYear()
+  if theme.since && theme.since != nowYear
+    .copyright!= `©${theme.since} - ${nowYear} By ${config.author}`
+  else
+    .copyright!= `©${nowYear} By ${config.author}`
+  if theme.footer_copyright.enable
+    .framework-info
+      span= _p('footer.driven') + ' '
+      a(href='http://hexo.io')
+        span Hexo
+      span.footer-separator |
+      span= _p('footer.theme') + ' '
+      a(href='https://github.com/Molunerfinn/hexo-theme-melody')
+        span Melody
+  //- if theme.runtimeshow.enable
+  //-   script(src=url_for('js/runtimeshow.js'))
+  //-   div#span_dt_dt
+  if theme.footer_custom_text
+    .footer_custom_text!=`${theme.footer_custom_text}`   
+  if theme.ICP.enable
+    .icp
+      a(href=theme.ICP.url)
+        span=theme.ICP.text
+  //- if theme.busuanzi.enable
+  //-   include ./count/busuanzi.pug

layout/includes/gallery/layout.pug

@@ -0,0 +1 @@
+#gallery!= page.content

layout/includes/head.pug

@@ -0,0 +1,115 @@
+- var without_index = url.replace('index.html', '')
+- var without_html = without_index.replace('.html', '')
+
+meta(http-equiv="x-dns-prefetch-control" content="on")
+if theme.canonical
+  link(rel="canonical" href=without_html)
+
+if theme.twitter_meta
+  meta(name="twitter:card" content="summary_large_image")
+  meta(name="twitter:title" content=pageTitle_no_include_blog_name)
+  meta(name="twitter:description" content=pageDescription)
+  meta(name="twitter:image" content= page.cover|| theme.avatar)
+
+if theme.Open_Graph_meta
+  if is_post()
+    meta(property="og:type" content="article")
+  else
+    meta(property="og:type" content="website")
+
+  meta(property="og:title" content=pageTitle_no_include_blog_name)
+  meta(property="og:url" content=without_html)
+  meta(property="og:site_name" content=config.title)
+  meta(property="og:description" content=pageDescription)
+  meta(property="og:image" content= page.cover|| theme.avatar)
+
+if theme.disable_baidu_transformation
+  meta(http-equiv="Cache-Control" content="no-transform")
+  meta(http-equiv="Cache-Control" content="no-siteapp")
+
+if is_post()
+  if(page.prev)
+    link(rel="prev" title=page.prev.title href=url_for(page.prev.permalink) )
+  if(page.next)
+    link(rel="next" title=page.next.title  href=url_for(page.next.permalink) )
+
+
+if theme.algolia_search.enable
+  link(rel="dns-prefetch" href="https://cdn.jsdelivr.net")
+  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.css")
+  script(src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.1.1/dist/instantsearch.min.js" defer)
+
+if (theme.gitment && theme.gitment.enable)
+  link(rel="dns-prefetch" href="https://unpkg.com")
+  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitment/style/default.min.css")
+  script(src="https://cdn.jsdelivr.net/npm/gitment/dist/gitment.browser.min.js")
+  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
+if (theme.gitalk && theme.gitalk.enable)
+  link(rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css")
+  if(theme.gitalk.js)
+    script(src=theme.gitalk.js)
+  else
+    script(src="https://cdn.jsdelivr.net/npm/gitalk@latest/dist/gitalk.min.js")
+  script(src="https://cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js")
+
+//- if (theme.pwa && theme.pwa.enable)
+//-   link(rel="manifest" href=theme.pwa.manifest)
+
+if (theme.pwa && theme.pwa.enable)
+  link(rel="manifest" href=theme.pwa.manifest)
+  if(theme.pwa.theme_color) 
+    meta(name="theme-color" content=theme.pwa.theme_color)
+  if(theme.pwa.theme_color) 
+    meta(name="msapplication-TileColor" content=theme.pwa.theme_color)
+  if(theme.pwa.apple_touch_icon) 
+    link(rel="apple-touch-icon" sizes="180x180" href=theme.pwa.apple_touch_icon)
+  if(theme.pwa.favicon_32_32) 
+    link(rel="icon" type="image/png" sizes="32x32" href=theme.pwa.favicon_32_32)
+  if(theme.pwa.favicon_16_16)
+    link(rel="icon" type="image/png" sizes="16x16" href=theme.pwa.favicon_16_16)
+  if(theme.pwa.mask_icon)
+    link(rel="mask-icon" href=theme.pwa.mask_icon color="#5bbad5")
+  if(theme.pwa.shortcut_icon)
+    link(rel="shortcut icon", href=theme.pwa.shortcut_icon)
+
+
+if theme.baidu_analytics
+  link(rel="dns-prefetch" href="https://hm.baidu.com")
+  script.
+    var _hmt = _hmt || [];
+    (function() {
+      var hm = document.createElement("script");
+      hm.src = "https://hm.baidu.com/hm.js?!{theme.baidu_analytics}";
+      var s = document.getElementsByTagName("script")[0]; 
+      s.parentNode.insertBefore(hm, s);
+    })();
+if theme.google_analytics
+  link(rel="dns-prefetch" href="https://www.google-analytics.com")
+  script.
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', '!{theme.google_analytics}', 'auto');
+    ga('send', 'pageview');
+
+if theme.google_site_verification
+  meta(name="google-site-verification" content=theme.google_site_verification)
+
+if theme.bing_site_verification
+  meta(name="msvalidate.01" content=theme.bing_site_verification)
+
+if theme.baidu_site_verification
+  meta(name="baidu-site-verification" content=theme.baidu_site_verification)
+
+if theme.qihu_site_verification
+  meta(name="360-site-verification" content=theme.qihu_site_verification)
+
+
+if (is_archive())
+  - var preload_img = theme.archive_img ||theme.top_img || config.top_img 
+  link(rel="preload" href=preload_img  as="image" )
+else if (!is_post())
+  - var preload_img = page.top_img||theme.top_img || config.top_img
+  link(rel="preload" href=preload_img  as="image" )

layout/includes/header.pug

@@ -0,0 +1,21 @@
+#page-header
+  span.pull-left 
+    a#site-name(href=url_for('/')) #[=config.title]
+  //- i.fa.fa-bars.toggle-menu.pull-right(aria-hidden="true")
+  .open.toggle-menu.pull-right
+    .menu-icon-first
+    .menu-icon-second
+    .menu-icon-third
+    
+  span.pull-right.menus
+    each value, label in theme.menu
+      a.site-page(href=value.split('||')[0])
+        i.fa-fw(class=value.split('||')[1])
+        span=' '+label
+    script.
+      document.body.addEventListener('touchstart', function(){ });
+  span.pull-right
+    if (theme.algolia_search.enable || theme.local_search && theme.local_search.enable)
+        a.site-page.social-icon.search
+          i.fa.fa-search.fa-fw
+          span=' '+_p('search')

layout/includes/layout.pug

@@ -0,0 +1,83 @@
+
+- var pageTitle = page.title || config.subtitle || ''
+- if (is_archive()) pageTitle = _p('page.archives')
+- if (is_tag()) pageTitle = _p('page.tag') + ': ' + page.tag
+- if (is_category()) pageTitle = _p('page.category') + ': ' + page.category
+- if (is_month()) pageTitle += ': ' + page.month + '/' + page.year
+- if (is_year()) pageTitle += ': ' + page.year
+- var pageTitle_saved  //- 暂时存储pageTitle
+- var pageTitle_no_include_blog_name //- 存储pageTitle， 不带 " | "，meta用
+//- home时显示config.title (JerryC)，其他显示 pageTitle。meta用
+- is_home() ? pageTitle_no_include_blog_name = config.title : pageTitle_no_include_blog_name = pageTitle
+//- 暂时存储pageTitle
+- pageTitle ? pageTitle_saved = pageTitle + ' | ' + config.title : pageTitle_saved = config.title
+//- home时pageTitle显示 JerryC - subtitle，其他显示 pageTitle | JerryC
+- is_home() ? pageTitle = config.title + ' - ' + config.subtitle : pageTitle = pageTitle_saved
+
+- var pageDescription = page.description || page.title || config.description || ''
+- var pageKeywords = (config.keywords || []).join(',')
+- if (page.tags && page.tags.data) pageKeywords = page.tags.data.map(function(tag) {return tag.name;}).join(',')
+- var pageAuthor = config.email ? config.author + ',' + config.email : config.author
+- var pageCopyright = config.copyright || config.author
+
+doctype html
+html(lang=config.language)
+  head
+    meta(charset='UTF-8')
+    meta(http-equiv="X-UA-Compatible" content="IE=edge")
+    meta(name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1")
+    title= pageTitle
+    meta(name="description" content=pageDescription)
+    meta(name="keywords" content=pageKeywords)
+    meta(name="author" content=pageAuthor)
+    meta(name="copyright" content=pageCopyright)
+    meta(name ="format-detection" content="telephone=no")
+    //- !=favicon_tag(config.favicon || theme.favicon || '/favicon.ico')
+    if theme.stylesheets !== undefined && theme.stylesheets.length > 0
+      each url in theme.stylesheets
+        link(rel='stylesheet', href=url_for(url))
+    each item in theme.cdn.css
+      if item !== undefined
+        link(rel='stylesheet', href=item)
+    include ./head.pug
+    include ./config.pug
+  body
+    if (is_post() && page.toc != false && theme.toc.enable)
+      i.fa.fa-arrow-right#toggle-sidebar(aria-hidden="true")
+      include ./sidebar.pug
+    if (!is_post())
+      include ./nav.pug
+    #content-outer
+      block top_img
+      if (!is_post())
+        #content-inner.layout_page
+          if body
+            div!= body
+          else
+            block content
+      else
+        #content-inner.layout.layout_post    
+          if body
+            div!= body
+          else
+            block content
+    //- - var top_img = page.top_img || theme.post_meta.top_img || theme.top_img || config.top_img || true
+    //- - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
+    //- - var footer_bg_class= bg_img ? 'footer-bg' : ''
+    //- footer(style=bg_img class=footer_bg_class)
+    footer
+      include ./footer.pug
+    i.fa.fa-arrow-up#go-up(aria-hidden="true")
+    include ./rightside.pug
+    each item in theme.cdn.js
+      if item !== undefined
+        script(src=url_for(item))
+    if theme.scripts !== undefined && theme.scripts.length > 0
+      //- scripts list from config.yml
+      each url in theme.scripts
+        script(src=url_for(url))
+    include ./additional-js.pug
+    include ./search/index.pug
+    
+
+    

layout/includes/mixins/article-sort.pug

@@ -0,0 +1,12 @@
+mixin articleSort(posts)
+  .article-sort
+    - var year
+    - posts.each(function (article) {
+      - var tempYear = date(article.date, 'YYYY')
+      if tempYear !== year
+        - year = tempYear
+        .article-sort-item.year= year
+      .article-sort-item
+        time.article-sort-item__time= date(article.date)
+        a.article-sort-item__title(href=url_for(article.path))= article.title || 'No Title'
+    - })

layout/includes/nav.pug

@@ -0,0 +1,36 @@
+if (is_archive())
+  - var top_img = theme.archive_img ||theme.top_img || config.top_img
+else
+  - var top_img = page.top_img||theme.top_img || config.top_img
+
+- var bg_img = top_img && top_img !== true ? `background-image: url(${top_img})` : ''
+- var flag = top_img === true ? 'no-bg' : ''
+
+
+if is_home()
+  nav#nav.full_page(style=bg_img class=flag)
+    include ./header.pug
+    #site-info
+      #site-title
+        span.blogtitle= page.title || page.tag || page.category || config.title
+      #site-sub-title
+        span.subtitle
+        
+      if(theme.social)
+        #site-social-icons
+          each url, icon in theme.social
+            a.social-icon(href=url target="_blank")
+              i(class=icon)
+      
+    .scroll-down
+      i.fa.fa-angle-down.scroll-down-effects
+
+else
+  nav#nav.bg_local(style=bg_img class=flag)
+    include ./header.pug
+    #page_site-info
+      #site-title
+          if (is_archive()) 
+            span.blogtitle= _p('archives')
+          else
+            span.blogtitle= page.title || page.tag || page.category || config.title

layout/includes/pagination.pug

@@ -0,0 +1,56 @@
+-
+  var options = {
+    prev_text: '<i class="fa fa-chevron-left"></i>',
+    next_text: '<i class="fa fa-chevron-right"></i>',
+    mid_size: 1
+  }
+
+if(!is_post())
+  nav#pagination
+    div.pagination
+      !=paginator(options)
+else
+  nav#pagination.pagination_post
+    if(page.prev)
+      if(page.next)
+        .prev-post.pull-left
+          - var pagination_cover = page.prev.cover || theme.default_cover
+          a(href=url_for(page.prev.path))
+            img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` )
+            .label=_p('pagination.prev')
+            .prev_info
+              //- i.fa.fa-chevron-left   
+              span=page.prev.title
+      else
+        .prev-post.pull-full
+          - var pagination_cover = page.prev.cover || theme.default_cover
+          a(href=url_for(page.prev.path))
+            img.prev_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            .label=_p('pagination.prev')
+            .prev_info
+              //- i.fa.fa-chevron-left   
+              span=page.prev.title
+
+          
+
+    if(page.next)
+      if(page.prev)
+        .next-post.pull-right
+          - var pagination_cover = page.next.cover || theme.default_cover
+          a(href=url_for(page.next.path))
+            img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            .label=_p('pagination.next')
+            .next_info
+              span=page.next.title 
+              //- i.fa.fa-chevron-right
+      else
+        .next-post.pull-full
+          - var pagination_cover = page.next.cover || theme.default_cover
+          a(href=url_for(page.next.path))
+            img.next_cover.lozad(data-src=`${pagination_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'`)
+            .label=_p('pagination.next')
+            .next_info
+              span=page.next.title 
+              //- i.fa.fa-chevron-right
+      
+

layout/includes/recent-posts.pug

@@ -0,0 +1,59 @@
+each article , index in page.posts.data
+  .recent-post-item.article-container
+    - var link = article.link || article.path
+      if index%2 == 0
+        .post_cover.is_left
+          a(href=url_for(link))
+            - var post_cover = article.cover
+            - var default_post_cover = theme.default_cover
+            if (post_cover)
+              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+            else
+              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+      else
+        .post_cover.is_right
+          a(href=url_for(link))
+            - var post_cover = article.cover
+            - var default_post_cover = theme.default_cover
+            if (post_cover)
+              img.post_bg.lozad(data-src=`${post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+            else
+              img.post_bg.lozad(data-src=`${default_post_cover}` onerror=`onerror=null;src='${theme.lodding_bg.post_page}'` title=article.title || _p('no_title'))
+
+    .recent-post-info   
+      a.article-title(href=url_for(link) title=article.title || _p('no_title'))= article.title || _p('no_title')
+      if (article.top)
+        span.article-meta
+          i.fa.fa-thumb-tack.article-meta__icon.sticky
+          span.sticky= _p('sticky')
+          span.article-meta__separator(style="margin-right: 0.3rem") |
+      if (theme.post_meta.date_type)
+        - var date_type = theme.post_meta.date_type == 'updated' ? 'updated' : 'date'
+        time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(article[date_type], config.date_format)]
+      if (theme.post_meta.categories && article.categories.data.length > 0)
+        span.article-meta
+          span.article-meta__separator |
+          each item, index in article.categories.data
+            i.fa.fa-inbox.article-meta__icon(aria-hidden="true")
+            a(href=url_for(item.path)).article-meta__categories #[=item.name]
+            if (index < article.categories.data.length - 1)
+                i.fa.fa-angle-right(aria-hidden="true")
+      //- if (theme.post_meta.tags && article.tags.data.length > 0)
+      //-   span.article-meta.tags
+      //-     span.article-meta__separator |
+      //-     each item, index in article.tags.data
+      //-       i.fa.fa-tag.article-meta__icon(aria-hidden="true")
+      //-       a(href=url_for(item.path)).article-meta__tags #[=item.name]
+      //-       if (index < article.tags.data.length - 1)
+      //-         span.article-meta__link -
+      if theme.auto_excerpt && theme.auto_excerpt.enable
+        - const content = strip_html(article.content)
+        - let expert = content.substring(0, theme.auto_excerpt.length) 
+        - content.length > theme.auto_excerpt.length ? expert += ' ...' : ''
+        .content!= expert
+        .more_setting
+          a.more.more--border.more--primary.more--animated(href=url_for(link) + '#more' style="margin-top: 14px")= _p('read_more')
+      else
+        .content!= post_description
+
+    

layout/includes/reward.pug

@@ -0,0 +1,65 @@
+.post-reward
+  a.reward-buttom
+    i.fa.fa-qrcode
+    = ' ' + _p('donate')
+    .reward-main
+      ul.reward-all
+        each item in theme.reward.QR_code
+          li.reward-item
+            img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
+            .post-qr-code__desc=(item.itemlist||item).text
+
+
+
+//- donate-share样式1
+//- .post-reward-share
+//-   .post-reward
+//-     a.reward-buttom
+//-       i.fa.fa-qrcode
+//-       = ' ' + _p('donate')
+//-     .reward-main
+//-       ul.reward-all
+//-         each item in theme.QR_code
+//-           li.reward-item
+//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
+//-             .post-qr-code__desc=(item.itemlist||item).text
+  
+//-   .post-share
+//-     include share/index.pug
+//-     a.share-buttom
+//-       i.fa.fa-share-alt
+//-       = ' ' + _p('share')
+
+//- donate-share样式1
+//- #social
+//-   .social-main
+//-     span.social-donate
+//-       a#social-donate
+//-         i.fa.fa-qrcode
+//-         = _p('donate')
+
+
+//-     .circle
+//-       .circle-empty
+//-         span
+//-       span.circle_item
+//-         a(style="cursor:pointer")
+
+//-     .social-sharebutton
+//-       span.share-s
+//-         a(href="javascript:void(0)" id="share-s" title=_p('share'))
+//-           i.fa.fa-share-alt
+//-           = _p('share')
+//-       include share/index.pug
+
+
+//- if (theme.QR_code)
+//-   if (theme.QR_code.length > 0)
+//-     .post-qr-code
+//-         each item in theme.QR_code
+//-           .post-qr-code-item
+//-             img.lozad.post-qr-code__img(data-src=(item.itemlist||item).img)
+//-             .post-qr-code__desc=(item.itemlist||item).text
+
+
+

layout/includes/rightside.pug

@@ -0,0 +1,7 @@
+section#rightside.rightside
+  if page.comments !== false && !is_home() && !is_archive()
+    i#to_comment.fa.fa-comments-o 
+  if theme.translate && theme.translate.enable
+    a#translateLink.translate_chn_to_cht=theme.translate.show 
+  if theme.nightshift.enable
+    i#nightshift.fa.fa-moon-o.nightshift

layout/includes/search/algolia.pug

@@ -0,0 +1,12 @@
+#algolia-search.search-dialog
+  #algolia-search-title.search-dialog__title Algolia
+  #algolia-input-panel
+    #algolia-search-input
+  hr
+  #algolia-search-results
+    #algolia-hits
+    #algolia-pagination
+    #algolia-stats
+  span.search-close-button
+    i.fa.fa-times
+.search-mask

layout/includes/search/index.pug

@@ -0,0 +1,5 @@
+if (theme.algolia_search.enable)
+  include ./algolia.pug
+if (theme.local_search)
+  if (!theme.algolia_search.enable && theme.local_search.enable)
+    include ./local-search.pug

layout/includes/search/local-search.pug

@@ -0,0 +1,23 @@
+#local-search.search-dialog
+  #local-search-title.search-dialog__title=_p("local_search.label")
+  #local-input-panel
+    #local-search-input
+      .local-search-box
+        input(placeholder=_p("local_search.input_placeholder")).local-search-box--input
+  hr
+  #local-search-results
+    #local-hits
+    #local-stats
+      #hr.local-search-stats__hr
+        case config.language
+          when "zh-Hans"
+            span=_p("local_search.by")
+            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+            |  #[span=_p("local_search.powered")]
+          when "en"
+          default
+            span=_p("local_search.powered_by")
+            |  #[a(href="https://github.com/wzpan/hexo-generator-search" style={'color': '#49B1F5'}) hexo-generator-search]
+  span.search-close-button
+    i.fa.fa-times
+.search-mask

layout/includes/share/add-this.pug

@@ -0,0 +1,2 @@
+.addthis_inline_share_toolbox.pull-right
+script(src=`//s7.addthis.com/js/300/addthis_widget.js#pubid=${theme.addThis.pubid}` async)

layout/includes/share/addtoany.pug

@@ -0,0 +1,13 @@
+.addtoany
+    .a2a_kit.a2a_kit_size_32.a2a_default_style
+        a.a2a_button_facebook
+        a.a2a_button_twitter
+        a.a2a_button_wechat
+        a.a2a_button_sina_weibo
+        a.a2a_button_facebook_messenger
+        a.a2a_button_email
+        a.a2a_button_copy_link
+        a.a2a_dd(href="https://www.addtoany.com/share")
+script(async src="https://static.addtoany.com/menu/page.js")
+
+

layout/includes/share/index.pug

@@ -0,0 +1,7 @@
+.post_share
+  if theme.addThis.enable
+    include ./add-this.pug
+  else if theme.sharejs && theme.sharejs.enable
+    include ./share-js.pug
+  else if theme.addtoany.enable
+    include ./addtoany.pug

layout/includes/share/share-js.pug

@@ -0,0 +1,4 @@
+if (theme.sharejs && theme.sharejs.enable)
+  .social-share(data-image= page.cover|| theme.avatar data-sites= theme.sharejs.sites)
+  link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css")
+  script(src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js")

layout/includes/sidebar.pug

@@ -0,0 +1,17 @@
+#sidebar
+  - const showToc = is_post() && page.toc != false && theme.toc.enable
+  -
+    let tocNumber
+    if (page.toc_number !== undefined) tocNumber = page.toc_number
+    else if (theme.toc.number !== undefined) tocNumber = theme.toc.number
+    else tocNumber = true
+  -
+  if(showToc)
+    .sidebar-toc
+      div.sidebar-toc__title= _p('sidebar.catalog')
+      div.sidebar-toc__progress
+        span.progress-notice= _p('sidebar.have_read')
+        span.progress-num 0
+        span.progress-percentage %
+        div.sidebar-toc__progress-bar
+      div.sidebar-toc__content!=toc(page.content, {list_number: tocNumber})

layout/includes/third-party/canvas-ribbon-piao.pug

@@ -0,0 +1 @@
+script(id="ribbon" src=url_for('https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/js/piao.js'))

layout/includes/third-party/canvas-ribbon.pug

@@ -0,0 +1,3 @@
+script(id="ribbon" src=url_for('/js/third-party/canvas-ribbon.js') size=theme.canvas_ribbon.size
+alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex data-click=`${theme.canvas_ribbon.click_to_change}`)
+

layout/includes/third-party/katex.pug

@@ -0,0 +1,7 @@
+link(rel="stylesheet" type="text/css" href=theme.katex.cdn.css)
+script(src='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.js')
+link(rel="stylesheet" type="text/css" href='https://cdn.jsdelivr.net/npm/katex-copytex@latest/dist/katex-copytex.min.css')
+script.
+  $(function () {
+    $('span.katex-display').wrap('<div class="katex-wrap"></div>')
+  })

layout/includes/third-party/mathjax.pug

@@ -0,0 +1,27 @@
+script(type="text/x-mathjax-config").
+  MathJax.Hub.Config({
+    tex2jax: {
+      inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
+      processEscapes: true,
+      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+    },
+    CommonHTML: {
+      linebreaks: { automatic: true, width: "90% container" }
+    },
+    "HTML-CSS": { 
+      linebreaks: { automatic: true, width: "90% container" }
+    },
+    "SVG": { 
+      linebreaks: { automatic: true, width: "90% container" }
+    }
+  });
+
+script(type="text/x-mathjax-config").
+  MathJax.Hub.Queue(function() {
+    var all = MathJax.Hub.getAllJax(), i;
+    for (i=0; i < all.length; i += 1) {
+      all[i].SourceElement().parentNode.className += ' has-jax';
+    }
+  });
+
+script(src=theme.mathjax.cdn)

layout/index.pug

@@ -0,0 +1,8 @@
+extends includes/layout.pug
+
+block content
+  #recent-posts.recent-posts
+    include includes/recent-posts.pug  
+    include includes/pagination.pug
+  #aside_content.aside_content
+      include includes/aside.pug

layout/page.pug

@@ -0,0 +1,40 @@
+extends includes/layout.pug
+
+block content
+  if page.type === 'tags'
+    .tag-cloud
+      .tag-cloud__title= _p('page.tag')
+        |  - 
+        span.tag-cloud__amount= site.tags.length
+      .tag-cloud-tags!= tagcloud({min_font: 20, max_font: 43, amount: 200, color: true, start_color: '#A4D8FA', end_color: '#0790E8'})
+      if page.comments !== false
+        include includes/comments/index.pug
+    #aside_content.aside_content
+      include includes/aside.pug
+
+  else if page.type === 'link'
+    include flink.pug
+      if page.comments !== false
+        include includes/comments/index.pug
+    #aside_content.aside_content
+      include includes/aside.pug
+  else if page.type === 'categories'    
+    #post-content.category-content
+      .category-lists
+        .category__title= _p('page.category')
+          |  - 
+          span.category__amount= site.categories.length
+        div!= list_categories()
+      if page.comments !== false
+        include includes/comments/index.pug
+    #aside_content.aside_content
+      include includes/aside.pug
+  else
+    article#page
+      h1= page.title
+      .article-container!= page.content
+      include includes/pagination.pug
+      if page.comments !== false
+        include includes/comments/index.pug
+    #aside_content.aside_content
+      include includes/aside.pug

layout/post.pug

@@ -0,0 +1,130 @@
+extends includes/layout.pug
+
+block top_img
+  - var top_img =  page.top_img || page.cover || theme.post_meta.top_img || theme.post_img || config.top_img
+  if (top_img && page.top_img !== false)
+    - var bg_img = top_img !== true ? `background-image: url(${top_img})` : ''
+    - var flag = top_img === true ? 'no-bg' : ''
+    div#top-container(style=bg_img class=flag)
+      include ./includes/header.pug
+      #post-info
+        #post-title
+            .posttitle=page.title || _p('no_title')
+        #post-meta
+          if (theme.post_meta.date_type)
+            if (theme.post_meta.date_type === 'both')
+              time.post-meta__date
+                i.fa.fa-calendar(aria-hidden="true")
+                =' '+_p('post.created')+' '+date(page.date, config.date_format)
+                span.post-meta__separator |
+                i.fa.fa-history(aria-hidden="true")
+                =' '+_p('post.updated')+' '+date(page.updated, config.date_format)
+            else
+              - var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
+              time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[=date(page[date_type], config.date_format)]
+                    
+          if (theme.post_meta.categories && page.categories.data.length > 0)
+            if (theme.post_meta.date_type)
+              span.post-meta__separator.mobile_hidden |
+            span.mobile_hidden
+              each item, index in page.categories.data
+                i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+                a(href=url_for(item.path)).post-meta__categories #[=item.name]
+                if (index < page.categories.data.length - 1)
+                  i.fa.fa-angle-right(aria-hidden="true")
+            //- if (theme.disqus.enable && theme.disqus.count)
+            //-   if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
+            //-     span.post-meta__separator |
+            //-   i.fa.fa-comment-o.post-meta__icon(aria-hidden="true")
+            //-   a(href=url_for(page.path) + '#disqus_thread')
+            //-     span.disqus-comment-count(data-disqus-identifier=page.path)
+            //- if theme.valine && theme.valine.enable
+            //-   if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
+            //-     span.post-meta__separator |
+            //-   i.fa.fa-comment-o.post-meta__icon(aria-hidden="true")
+            //-   a(href=url_for(page.path) + '#vcomment')
+            //-     pan.valine-comment-count(data-xid=url_for(page.path))
+          if (theme.wordcount && theme.wordcount.enable)
+            .post-meta-wordcount
+              span= _p('post.wordcount') + ': '
+              span.word-count= wordcount(page.content)
+              span.post-meta__separator |
+              span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))  
+            
+  else
+    div#top-container.plain
+      include ./includes/header.pug
+
+block content
+  article#post(class="")
+    if (!top_img)
+      #post-title.plain= page.title || _p('no_title')
+      #post-meta
+        if (theme.post_meta.date_type)
+          //- - var date_type = theme.post_meta.date_type === 'updated' ? 'updated' : 'date'
+          time.post-meta__date #[i.fa.fa-calendar(aria-hidden="true")] #[= _p('created_date') + " "+ date(page['date'], config.date_format)]
+          span.post-meta__separator |
+          time.post-meta__update #[i.fa.fa-history(aria-hidden="true")] #[= _p('update_date') + " "+ date(page['updated'], config.date_format)]
+        
+        if (theme.post_meta.categories && page.categories.data.length > 0)
+          if (theme.post_meta.date_type)
+            span.post-meta__separator.mobile_hidden |
+          span.mobile_hidden
+            each item, index in page.categories.data
+              i.fa.fa-inbox.post-meta__icon(aria-hidden="true")
+              a(href=url_for(item.path)).post-meta__categories #[=item.name]
+              if (index < page.categories.data.length - 1)
+                i.fa.fa-angle-right(aria-hidden="true")
+        //- if (theme.disqus.enable && theme.disqus.count)
+        //-   if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
+        //-     span.post-meta__separator |
+        //-   i.fa.fa-comment-o(aria-hidden="true")
+        //-   a(href=url_for(page.path) + '#disqus_thread')
+        //-     span.disqus-comment-count(data-disqus-identifier=page.path)
+        //- if theme.valine && theme.valine.enable
+        //-   if (theme.post_meta.date_type || theme.post_meta.categories && page.categories.data.length > 0)
+        //-     span.post-meta__separator |
+        //-   i.fa.fa-comment-o(aria-hidden="true")
+        //-   a(href=url_for(page.path) + '#vcomment')
+        //-     span.valine-comment-count(data-xid=url_for(page.path))
+        if (theme.wordcount && theme.wordcount.enable)
+          span.post-meta__separator |
+          span.post-meta-wordcount
+            span= _p('post.wordcount') + ': '
+            span.word-count= wordcount(page.content)
+            span.post-meta__separator |
+            span= _p('post.min2read', min2read(page.content, {cn: 350, en: 160}))
+
+
+    #post-content.article-container!= page.content
+  if (theme.post_copyright && theme.post_copyright.enable)
+    .post-copyright
+      .post-copyright__author
+        span.post-copyright-meta= _p('post.copyright.author') + ": "
+        span.post-copyright-info
+          a(href=`mailto:${config.email}`) #[=config.author]
+      .post-copyright__type
+        span.post-copyright-meta= _p('post.copyright.link') + ": "
+        span.post-copyright-info
+          a(href=url_for(page.permalink)) #[=page.permalink]
+      .post-copyright__notice
+        span.post-copyright-meta= _p('post.copyright.copyright_notice') + ": "
+        span.post-copyright-info!= _p('post.copyright.copyright_content', theme.post_copyright.license_url, theme.post_copyright.license, config.url, config.title)
+  
+  .tag_share
+    if (theme.post_meta.tags)
+      .post-meta__tag-list
+        each item, index in page.tags.data
+          a(href=url_for(item.path)).post-meta__tags #[=item.name]    
+    include includes/share/index.pug
+        
+  if theme.reward.enable
+    include includes/reward.pug
+  include includes/pagination.pug
+
+  if theme.related_post && theme.related_post.enable
+    div.relatedPosts!= related_posts(page,site.posts)
+  if (theme.adv && theme.adv.enable)
+    .post-adv!= theme.adv.info
+  if page.comments !== false
+    include includes/comments/index.pug

layout/tag.pug

@@ -0,0 +1,10 @@
+extends includes/layout.pug
+
+block content
+  include ./includes/mixins/article-sort.pug
+  #tag
+    .article-sort-title= _p('page.tag') + ' - ' + page.tag
+    +articleSort(page.posts)
+    include includes/pagination.pug
+  #aside_content.aside_content
+    include includes/aside.pug

scripts/gallery-tag.js

@@ -0,0 +1,16 @@
+hexo.extend.tag.register('gallery', args => {
+  const url = args[0]
+  const title = args[1] || 'No title'
+  return `
+    <div
+      class="gallery-item"
+      style="background-image: url('${url}')"
+      data-title="${title}"
+      data-url="${url}"
+    >
+      <div class="gallery-item__title">
+        ${title}
+      </div>
+    </div>
+  `
+})

scripts/related_post.js

@@ -0,0 +1,64 @@
+hexo.extend.helper.register('related_posts', function(currentPost, allPosts){
+  var relatedPosts = [];
+  currentPost.tags.forEach(function (tag) {
+    allPosts.forEach(function (post) {
+          if (isTagRelated(tag.name, post.tags)) {
+              var relatedPost = {
+                  title: post.title,
+                  path: post.path,
+                  cover: post.cover,
+                  weight: 1
+              };
+              var index = findItem(relatedPosts, 'path', post.path);
+              if (index != -1) {
+                  relatedPosts[index].weight += 1;
+              } else{
+                  if (currentPost.path != post.path) {
+                      relatedPosts.push(relatedPost);
+                  };
+              };
+          };
+      });
+  });
+  if (relatedPosts.length == 0) {return ''};
+  var result = '<div class="relatedPosts_headling"><i class="fa fa-thumbs-up" aria-hidden="true"></i><span>&nbsp;相關文章</span></div><div class="relatedPosts_list">';
+  relatedPosts = relatedPosts.sort(compare('weight'));
+  for (var i = 0; i < Math.min(relatedPosts.length, 6); i++) {
+    result += '<div class="relatedPosts_item"><a href="/' + relatedPosts[i].path + '">';
+    result += '<img class="relatedPosts_cover lozad" data-src="' + relatedPosts[i].cover + '">';
+    result += '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>';
+    result += '</a></div>'  
+  };
+  result += '</div>';
+  result += '<div class="clear_both"></div>';
+  // console.log(relatedPosts);
+  return result;
+});
+hexo.extend.helper.register('echo', function(path){
+return path;
+});
+function isTagRelated (tagName, TBDtags) {
+  var result = false;
+  TBDtags.forEach(function (tag) {
+      if (tagName == tag.name) {
+          result = true;
+      };
+  })
+  return result;
+}
+function findItem (arrayToSearch, attr, val) {
+  for (var i = 0; i < arrayToSearch.length; i++) {
+      if (arrayToSearch[i][attr] == val) {
+          return i
+      };
+  };
+  return -1;
+}
+function compare (attr) {
+  return function (a, b) {
+      var val1 = a[attr];
+      var val2 = b[attr];
+      return val2 - val1;
+  }
+}
+

scripts/replace-config.js

@@ -0,0 +1,12 @@
+/**
+ * Note: configs in _data/melody.yml will replace configs in hexo.theme.config.
+ */
+
+hexo.on('generateBefore', function () {
+  const rootConfig = hexo.config
+  if (hexo.locals.get) {
+    const data = hexo.locals.get('data')
+    data && data.melody && (hexo.theme.config = data.melody)
+  }
+  hexo.theme.config.rootConfig = rootConfig
+})

source/css/_global/index.styl

@@ -0,0 +1,342 @@
+html
+  height: 100%
+  font-size: $rem
+
+body
+  position: relative
+  display: flex
+  flex-direction: column
+  min-height: 100%
+  background: #fff
+  color: $font-black
+  font-size: $font-size
+  font-family: $font-family
+  line-height: $text-line-height
+
+*::-webkit-scrollbar
+  width: 8px
+  height: 8px
+
+*::-webkit-scrollbar-thumb
+  background: $light-blue
+
+*::-webkit-scrollbar-track
+  background-color: transparent
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+  position: relative
+  margin: 0.2rem 0
+  color: lighten($font-color, 15%)
+  font-weight: bold
+
+#content-outer
+  flex: 1 auto
+
+*
+  box-sizing: border-box
+
+#content-inner
+  .img-alt
+    text-decoration: none
+    color: $a-link-color
+
+#toggle-sidebar
+  position: fixed
+  bottom: $sidebar-icon-top
+  left: $sidebar-icon-left
+  z-index: 100
+  font-size: $sidebar-icon-size
+  cursor: pointer
+  transition: all 0.2s
+  opacity: 0
+
+#go-up
+  position: fixed
+  right: $go-up-right
+  bottom: $go-up-bottom
+  z-index: 100
+  font-size: $sidebar-icon-size
+  opacity: 0
+  cursor: pointer
+  transition: all .2s
+
+.fancybox-caption
+  text-align: center
+
+
+hr
+  position: relative
+  margin: 2rem auto
+  width: calc(100% - 4px)
+  border: 2px dashed $pale-blue
+  background: $white
+
+  &:hover
+    &:before
+      left: calc(95% - 20px)
+
+  &:before
+    position: absolute
+    top: -10px
+    left: 5%
+    z-index: 1
+    color: $light-blue
+    content: "\f0c4"
+    font: normal normal normal 14px / 1 FontAwesome
+    font-size: 20px
+    transition: all 1s ease-in-out
+
+// collapse/expand beautify
+details
+  padding: 0.3rem
+  border: 2px solid darken($light-grey, 10%)
+
+  summary
+    color: $theme-color
+
+// set <caption> of <figure> to center-align
+// use class="not-code" to avoid conflicts because code also use <figure> tag
+.not-code
+  margin: 0.5em
+  padding: 0.5em
+  border: thin silver solid
+  text-align: center
+
+table
+  overflow: auto
+  width: 100%
+  border-spacing: 0
+  border-collapse: collapse
+
+  thead
+    background: alpha($a-link-color, 10%)
+
+  th,
+  td
+    padding: 0.3rem 0.6rem
+    border: 1px solid darken($light-grey, 10%)
+    vertical-align: top
+
+*::selection
+  background: $selection
+  color: $pale-grey
+
+.text-center
+  text-align: center
+.pull-left
+  float: left
+
+.pull-right
+  float: right
+
+@media screen and (max-width: $bg)
+  i#toggle-sidebar,
+  #sidebar
+    display: none
+
+  body
+    padding-left: 0 !important
+
+
+
+// valine 
+#vcomment 
+  input 
+    font-size: 0.65rem
+
+  button 
+    font-size: .7rem;
+    padding: .3rem 1rem;
+    background-color: #49b1f5;
+    color: #fff;
+    border-color: #fff;
+
+  textarea 
+    font-size: 0.7rem
+    background: url(/img/comment_bg.png) 100% 100% no-repeat
+
+  .info
+    display: none
+
+  .vcomment
+    margin-top: 20px
+  
+  .vimg
+    border: 0
+
+    &:hover
+      -moz-transform: rotate(540deg)
+      -o-transform: rotate(540deg)
+      -webkit-transform: rotate(540deg)
+      transform: rotate(540deg)
+  .vcount
+    font-size: 0.775rem
+
+  .vnum 
+    font-size: 1.1rem
+
+  .vnick
+    font-size: 100%
+
+  .vsys
+    font-size: 70%
+  
+  .vtime
+    font-size: .65rem
+  
+  .vcontent
+    font-size: 100%
+  
+  .vat
+    font-size: .7125rem;
+    color: $cyan;
+    border: 1px solid $cyan;
+    padding: 0 .8rem;
+    border-radius: 5px;
+  
+
+#site-title, #site-sub-title, 
+#site-name,
+#aside_content .author-info__name,
+#aside_content .author-info__description
+  font-family: 'Titillium Web',Lato,PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+
+
+#rightside 
+  right: -38px
+  z-index: 100
+  position: fixed
+  bottom: 50px
+  padding-bottom: 32px
+  opacity: 0
+  transition: all .2s
+
+  .translate_chn_to_cht
+    width: 30px
+    height: 30px
+    background-color: #49b1f5
+    color: #e3e8ee
+    text-align: center
+    line-height: 29px
+    font-size: 16px
+    display: block
+    margin-bottom: 2px
+    cursor: pointer
+    text-decoration: none
+
+  .nightshift
+    width: 30px
+    height: 30px
+    background-color: #49b1f5
+    color: #e3e8ee
+    text-align: center
+    font-size: 17px
+    display: block
+    margin-bottom: 2px
+    cursor: pointer
+    padding-top: 6px
+    
+  #to_comment
+      width: 30px
+      height: 30px
+      background-color: #49b1f5
+      color: #e3e8ee
+      text-align: center
+      font-size: 17px
+      display: block
+      margin-bottom: 2px
+      cursor: pointer
+      padding-top: 6px
+
+  a
+    &:hover  
+      color: white
+    &:after    
+      color: white
+
+  
+
+.comment_headling
+  font-size: 20px
+  font-weight: 700
+  margin-bottom: 10px
+
+
+// bookmark 樣式
+.fc-container .fancybox-bg {
+  background: #eee;
+}
+
+.fancybox-is-open.fc-container .fancybox-bg {
+  opacity: 0.95;
+}
+
+.fc-content {
+  margin: 20px;
+  max-width: 550px;
+  padding: 50px;
+  box-shadow: 10px 10px 60px -25px;
+  border-radius: 4px;
+}
+
+.fc-content h3 {
+  margin-top: 0;
+  font-size: 1.6em;
+  letter-spacing: normal;
+}
+
+.fc-content p {
+  color: #666;
+  line-height: 1.5;
+}
+
+.fc-content p:last-child {
+  margin-bottom: 0;
+}
+
+/* Custom animation */
+.fancybox-fx-material.fancybox-slide--previous,
+.fancybox-fx-material.fancybox-slide--next {
+  transform: translateY(-60px) scale(1.1);
+  opacity: 0;
+}
+
+.fancybox-fx-material.fancybox-slide--current {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+}
+
+.bookmark-ok
+  background: #FF6666;
+  border-width: 0;
+  color: #fff;
+  text-decoration: none;
+  padding: 7px 20px;
+  line-height: 1.5;
+  border-radius: 20px;
+  text-transform: uppercase;
+  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 80%;
+  font-weight: 700;
+  margin: 5px 5px 5px 0;
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  transition: all .2s ease-in-out;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+.tright
+  text-align: right 
+
+
+
+

source/css/_highlight/diff.styl

@@ -0,0 +1,8 @@
+$highlight_theme = hexo-config('highlight_theme')
+
+if $highlight_theme == 'light'
+  $highlight-deletion = #fdd
+  $highlight-addition = #dfd
+else
+  $highlight-deletion = #008000
+  $highlight-addition = #800000

source/css/_highlight/highlight.styl

@@ -0,0 +1,303 @@
+// https://github.com/equinusocio/vsc-material-theme
+@require "theme"
+@require "diff"
+
+languages = "js" "javascript" "python" "ruby" "xml" "html" "css" "perl" "sql" "coffeescript" "java" "scala" "kotlin" "c" "c\+\+" "go" "less" "sass" "scss" "stylus" "styl" "typescript" "ts" "bash" "yml" "gradle" "groovy" "ejs" "swig"
+wordWrap = !hexo-config("rootConfig.highlight.line_number") && hexo-config("code_word_wrap")
+
+loopForLanguages()
+  for lang in languages
+    .article-container
+      figure.highlight
+        &{"." + lang}
+          table
+            &:before
+              content: lang
+
+loopForLanguages()
+
+// Placeholder: $code-block
+$code-block
+  overflow: auto
+  margin: 1rem 0
+  padding: 0
+  padding-top: 1.4rem
+  background: $highlight-background
+  color: $highlight-foreground
+  font-size: $code-font-size
+  line-height: $line-height-code-block
+
+  if wordWrap
+    counter-reset: line
+    white-space: pre-wrap
+
+figure.highlight
+  position: relative
+
+blockquote
+  margin: 0
+  padding: 0.1rem 0.8rem
+  border-left: 0.2rem solid $blockquote-padding-color
+  color: $blockquote-color
+  background-color: $blockquote-background-color
+
+.article-container
+  pre,
+  code
+    font-family: $code-font !important
+
+  code
+    padding: 0.1rem 0.2rem
+    background: $code-background
+    color: $code-foreground
+    word-wrap: break-word
+    font-size: $code-font-size
+
+  pre
+    @extend $code-block
+
+    code
+      padding: 0
+      background: none
+      color: $highlight-foreground
+      text-shadow: none
+
+  .highlight
+    @extend $code-block
+    position: relative
+    border-radius: 1px
+
+    &:after
+      position: absolute
+      top: 0
+      z-index: 0
+      min-width: 100%
+      height: 1.4rem
+      background: darken($highlight-background, 5)
+      content: ""
+
+    pre
+      margin: 0
+      padding: 8px 0
+      border: none
+
+    .line
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+      if wordWrap
+        &:before
+          display: inline-block
+          padding: 0 0.3rem 0 0
+          min-width: 1.6rem
+          color: $highlight-gutter.color
+          content: counter(line)
+          counter-increment: line
+          text-align: left
+
+    table
+      position: relative
+      margin: 0
+      width: auto
+      border: none
+
+      &:before
+        position: absolute
+        z-index: 1
+        display: inline-block
+        margin-top: -1.4rem
+        padding: 0 0.7rem
+        width: 5rem
+        color: $highlight-foreground
+        content: "Code"
+        font-weight: bold
+        font-size: 0.8rem
+        line-height: 1.4rem
+
+      &:after
+        position: absolute
+        top: -1.4rem
+        z-index: 0
+        width: 100%
+        height: 1.4rem
+        background: darken($highlight-background, 5)
+        content: ""
+
+    td
+      padding: 0
+      border: none
+
+    figcaption
+      clearfix()
+      position: absolute
+      z-index: 1
+      margin-bottom: 1em
+      padding: 0.2em 0 0.2em 0.7rem
+      width: 100%
+      height: 1.4em
+      color: $highlight-foreground
+      font-size: 1em
+      line-height: 1em
+
+      span
+        float: left
+        overflow: hidden
+        max-width: 100%
+        text-overflow: ellipsis
+        white-space: nowrap
+
+      a
+        float: right
+        padding-right: 10px
+        color: $highlight-foreground
+
+        &:hover
+          border-bottom-color: $highlight-foreground
+
+      &+table
+        margin-top: 1em
+
+        &:before
+          margin-top: -2.1rem
+
+        &:after
+          top: -2.1rem
+
+    .gutter pre
+      padding-right: 0.5rem
+      padding-left: 0.5rem
+      background-color: $highlight-gutter.bg-color
+      color: $highlight-gutter.color
+      text-align: right
+
+    .code pre
+      padding-right: 0.5rem
+      padding-left: 0.5rem
+      width: 100%
+      background-color: $highlight-background
+
+    .line
+      height: 1rem
+
+  .gutter
+    user-select: none
+    -webkit-user-select: none
+    -moz-user-select: none
+    -ms-user-select: none
+
+  .gist table
+    width: auto
+
+    td
+      border: none
+
+  // For diff highlight
+  pre .deletion
+    background: $highlight-deletion
+
+  pre .addition
+    background: $highlight-addition
+
+  pre .meta
+    color: $highlight-purple
+
+  pre
+    .comment
+      color: $highlight-comment
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .variable,
+    .attribute,
+    .regexp,
+    .ruby .constant,
+    .xml .tag .title,
+    .xml .pi,
+    .xml .doctype,
+    .html .doctype,
+    .css .id,
+    .tag .name,
+    .css .class,
+    .css .pseudo
+      color: $highlight-red
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .tag
+      color: $highlight-aqua
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .number,
+    .preprocessor,
+    .literal,
+    .params,
+    .constant,
+    .command
+      color: $highlight-orange
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .built_in
+      color: $highlight-yellow
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .ruby .class .title,
+    .css .rules .attribute,
+    .string,
+    .value,
+    .inheritance,
+    .header,
+    .ruby .symbol,
+    .xml .cdata,
+    .special,
+    .number,
+    .formula
+      color: $highlight-green
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .keyword,
+    .title,
+    .css .hexcolor
+      color: $highlight-aqua
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .function,
+    .python .decorator,
+    .python .title,
+    .ruby .function .title,
+    .ruby .title .keyword,
+    .perl .sub,
+    .javascript .title,
+    .coffeescript .title
+      color: $highlight-blue
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground
+
+    .tag .attr,
+    .javascript .function
+      color: $highlight-purple
+
+      &::selection
+        background: $highlight-selection
+        color: $highlight-foreground

source/css/_highlight/theme.styl

@@ -0,0 +1,91 @@
+$highlight_theme = hexo-config("highlight_theme")
+
+if $highlight_theme == "default"
+  $highlight-background = #263238
+  $highlight-current-line = #efefef
+  $highlight-selection = #80CBC420
+  $highlight-foreground = #EEFFFF
+  $highlight-comment = #546E7A
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-gutter = {
+    color: #37474F,
+    bg-color: $highlight-background
+  }
+
+if $highlight_theme == "darker"
+  $highlight-background = #212121
+  $highlight-current-line = #282a2e
+  $highlight-selection = #61616150
+  $highlight-foreground = #EEFFFF
+  $highlight-comment = #4A4A4A
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-gutter = {
+    color: #424242,
+    bg-color: $highlight-background
+  }
+
+if $highlight_theme == "pale night"
+  $highlight-background = #292D3E
+  $highlight-current-line = #393939
+  $highlight-selection = #717CB450
+  $highlight-foreground = #A6ACCD
+  $highlight-comment = #676E95
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-gutter = {
+    color: #3A3F58,
+    bg-color: $highlight-background
+  }
+
+if $highlight_theme == "ocean"
+  $highlight-background = #0F111A
+  $highlight-current-line = #000000
+  $highlight-selection = #717CB450
+  $highlight-foreground = #8F93A2
+  $highlight-comment = #464B5D
+  $highlight-red = #FF5370
+  $highlight-orange = #F78C6C
+  $highlight-yellow = #FFCB6B
+  $highlight-green = #C3E88D
+  $highlight-aqua = #89DDFF
+  $highlight-blue = #82AAFF
+  $highlight-purple = #C792EA
+  $highlight-gutter = {
+    color: #3B3F5180,
+    bg-color: $highlight-background
+  }
+
+if $highlight_theme == "light"
+  $highlight-background = #F6F8FA
+  $highlight-current-line = #00346e
+  $highlight-selection = #80CBC440
+  $highlight-foreground = #90A4AE
+  $highlight-comment = #90A4AE90
+  $highlight-red = #E53935
+  $highlight-orange = #F76D47
+  $highlight-yellow = #FFB62C
+  $highlight-green = #91B859
+  $highlight-aqua = #39ADB5
+  $highlight-blue = #6182B8
+  $highlight-purple = #7C4DFF
+  $highlight-gutter = {
+    color: #CFD8DC,
+    bg-color: $highlight-background
+  }

source/css/_layout/aside.styl

@@ -0,0 +1,292 @@
+#aside_content
+  width: 25%
+
+  .card_widget
+    -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
+    box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
+    border-radius: 8px
+    -webkit-transition: all .3s
+    -moz-transition: all .3s
+    -o-transition: all .3s
+    -ms-transition: all .3s
+    transition: all .3s
+    background: #fff
+    margin-top: 20px
+    margin-left: 15px
+    overflow: hidden
+
+    &:hover
+      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+
+  .card-author
+    img
+      height: 128px
+      width: 128px
+      display: inline-block
+      vertical-align: top
+      border-radius: 70px
+      transition: all .3s
+
+      &:hover
+        -moz-transform: rotate(540deg)
+        -o-transform: rotate(540deg)
+        -webkit-transform: rotate(540deg)
+        transform: rotate(540deg)
+    .author-info
+      &__name
+        font-size: 1.1rem
+        display: block
+        margin: -0.1rem auto
+        font-weight: 500
+
+      &__description
+        display: block
+        margin: -0.1rem auto
+
+    .data_link 
+      a
+        text-decoration: none
+
+      .length_num 
+        font-size: 1rem
+        color: #000
+
+      .headline 
+        display: block
+        font-size: 0.7rem
+        letter-spacing: 1px
+        margin-bottom: -21px
+        text-transform: uppercase
+        color:#4c4948
+
+    #aside-social-icons
+      margin: 0.5rem auto -0.7rem
+      width: 15rem
+      text-align: center
+
+      .social-icon 
+        margin: 0 0.5rem
+        color: #4c4948
+        /* text-shadow: 0.1rem 0.1rem 0.2rem rgba(0,0,0,0.15) */
+        font-size: 1rem
+        cursor: pointer
+      
+      i
+        transition: all 0.3s
+        
+        &:hover
+          -moz-transform: rotate(540deg)
+          -o-transform: rotate(540deg)
+          -webkit-transform: rotate(540deg)
+          transform: rotate(540deg)
+        
+
+    a#bookmark-it
+      display: inline-block
+      margin-top: .2rem
+      padding: 0 1rem
+      height: 1.6rem
+      background: #49b1f5
+      color: #fff
+      text-decoration: none
+      line-height: 1.6rem
+      position: relative
+      text-transform: uppercase
+      z-index: 1
+
+    .toggle_change--primary,.bookmark--primary 
+      color: $cyan
+    
+    .toggle_change--animated,.bookmark--animated 
+      transition-property: color
+      transition-duration: 1s
+
+      &:before {
+        content: ""
+        position: absolute
+        top: 0
+        left: 0
+        right: 0
+        bottom: 0
+        background: $cyan
+        transform: scaleX(0)
+        transform-origin: 0 50%
+        transition-property: transform
+        transition-duration: 0.5s
+        transition-timing-function: ease-out
+        z-index: -1
+      }
+
+      &:hover {
+        color: white
+
+        &:before {
+          transform: scaleX(1)
+          transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
+        }
+      }
+      
+
+
+  .card-content 
+    padding: 1rem 1.2rem
+  
+  .post_data
+    display: flex
+
+  .data-item
+    flex-grow: 1
+    align-items: center
+    flex-basis: auto
+    justify-content: center
+
+
+  .item_headline 
+    font-size: 0.8rem
+    
+    span 
+      margin-left: 10px
+
+  .card-tag-cloud a
+    text-decoration: none
+    position: relative
+    padding-bottom: 0.3rem
+    word-break: keep-all
+
+    &::after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: -1
+      width: 0
+      height: 3px
+      background-color: lighten($theme-color, 30%)
+      content: ""
+      transition: all 0.3s ease-in-out
+
+    &:hover
+      color: $light-blue !important
+
+      &::after
+        width: 100%
+
+
+
+  .aside_recent_item 
+      margin: 10px 0 -15px 0
+    
+    .aside_recent_post 
+      a
+        text-decoration: none
+        color: #4c4948
+
+    .aside_recent_post
+      margin-bottom: 10px
+      width: 100%
+
+    .aside_post_cover
+      height: 70px
+      width: 70px
+      float: left
+    .aside_post_bg
+      object-fit: cover
+      width: 100%
+      height: 100%
+      max-width: 100%
+
+      &:hover
+        box-shadow: none
+    
+    #aside_title
+      padding-top: 4px
+    
+      .aside_post_meta
+        font-size: 0.6rem
+        padding-left: 5px
+
+      .aside_post_title
+        line-height: 1rem
+        display: -webkit-box
+        -webkit-line-clamp: 2
+        -webkit-box-orient: vertical
+        overflow: hidden
+        height: 41px
+        padding-left: 5px
+
+        &:hover
+          color: $light-blue !important
+
+
+
+  .aside_category_item,.archive-list
+    list-style: none
+    margin-bottom: -3px
+    margin-block-start: 0.2rem
+
+  .aside_category_list,.archive-list-item
+    margin-left: -40px
+    padding: 0.2rem 1rem
+
+    &:hover
+      background-color: $light-blue
+      color: #363636
+    a
+      text-decoration: none
+      color: #4c4948
+
+  .aside_category_list_length,.archive-list-count
+    float: right 
+  
+  .card-archives
+    margin-bottom: 20px
+
+  .card-announcement-animation
+    animation: announ_animation 1.5s infinite
+  
+  .card-webinfo
+    .webinfo
+      padding: 0.2rem 1rem
+
+      .webinfo_item
+        display: block
+        padding: 4px 0 0
+
+        .webinfo_article_name,
+        .webinfo_runtime_name,
+        .webinfo_site_uv_name,
+        .webinfo_site_name
+          display: inline-block
+        
+        .webinfo_article_count,
+        .webinfo_runtime_count,
+        .webinfo_site_uv_count,
+        .webinfo_site_pv_count
+          float: right
+          display: inline-block
+
+
+@keyframes announ_animation{
+
+  0%,to{
+    color: #4c4948
+
+}
+  50%{
+    color: #FF0000
+
+    }
+    }
+
+
+@media screen and (max-width: 900px) 
+  .layout_page
+    flex-direction: column
+  
+  #recent-posts,#aside_content
+    width: 100% !important
+  
+  .card_widget
+    margin-left: 0 !important
+
+

source/css/_layout/category.styl

@@ -0,0 +1,64 @@
+.category-content
+  ol,
+  ul
+    margin-top: 0.4rem
+    padding: 0 0 0 0.8rem
+    list-style: none
+    counter-reset: li
+
+    p
+      margin: 0
+
+    ol,
+    ul
+      padding-left: 0.5rem
+
+    li
+      position: relative
+      margin: 0.3rem 0
+      // padding-left: 0.3rem
+      padding: 0.1rem 0.5rem 0.1rem 1.5rem !important
+
+      &:hover
+        &:before
+          transform: rotate(360deg)
+
+      &:before
+        position: absolute
+        top: 0
+        left: 0
+        background: $light-blue
+        color: $white
+        cursor: pointer
+        transition: all 0.3s ease-out
+
+  ol
+    li
+      &:before
+        margin-top: 0.2rem
+        width: w = 1.2rem
+        height: h = w
+        border-radius: 0.5 * w
+        content: counter(li)
+        counter-increment: li
+        text-align: center
+        font-size: 0.6rem
+        line-height: h
+
+  ul
+    li
+      &:hover
+        &:before
+          border-color: $ruby
+
+      &:before
+        $w = 0.3rem
+        top: 10px
+        margin-left: 0.45rem
+        width: w = $w
+        height: h = w
+        border: 0.5 * w solid $light-blue
+        border-radius: w
+        background: $white
+        content: ""
+        line-height: h

source/css/_layout/comments.styl

@@ -0,0 +1,2 @@
+#disqus_thread
+  margin-top: 1rem

source/css/_layout/footer.styl

@@ -0,0 +1,34 @@
+footer
+  $bg-svg += ""
+  margin-top: 1rem
+  background: $light-blue
+  // background-image: url($bg-svg)
+  background-attachment: local
+
+  &.footer-bg
+    background-position: bottom
+    background-size: cover
+
+
+#footer
+  padding: 1.2rem 1rem 1rem
+  color: $light-grey
+  text-align: center
+
+  a
+    color: $light-grey
+    text-decoration: none
+    cursor: pointer
+
+    &:hover
+      color: $white
+
+  .footer-separator
+    margin: 0 0.2rem
+
+#busuanzi
+  &_value
+    &_site_uv,
+    &_site_pv,
+    &_page_pv
+      margin-left: 0.2rem

source/css/_layout/head.styl

@@ -0,0 +1,236 @@
+#nav
+  position: relative
+  margin-bottom: 1rem
+  background-color: $light-blue
+  background-position: center
+  background-size: cover
+
+
+  &.full_page
+    background-attachment: local
+    height: 100vh
+  
+  &.bg_local
+    background-attachment: local
+
+
+  &.no-bg
+    $bg-svg += ""
+    background-image: url($bg-svg) !important
+    background-size: initial
+
+  #site-social-icons
+    margin: 0 auto
+    width: 15rem
+    text-align: center
+    display: none
+
+    .social-icon
+      margin: 0 0.5rem
+      color: $light-grey
+      text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+      font-size: .9rem
+      cursor: pointer
+
+      &:hover
+        color: $white
+
+#site-info
+  position: absolute
+  width: 100%
+  top: 43%
+
+#site-title,
+#site-sub-title
+  color: $light-grey
+  text-align: center
+  text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+  line-height: 1.5
+
+#site-title
+  font-weight: bold
+  font-size: 1.3rem
+
+#site-sub-title
+  font-size: 0.8rem
+
+.scroll-down
+  position: absolute
+  bottom: 0
+  width: 100%
+  cursor: pointer
+  height: 42px
+  font-size: 30px
+  text-align: center
+
+
+#page-header
+  position: absolute
+  top: 0
+  z-index: 99
+  padding: 10px 36px
+  width: 100%
+  border: none
+  font-size: 18px
+  transition: all 0.2s ease-in-out
+
+  .toggle-menu
+    display: none
+    padding-top: 0.6rem
+    color: $light-grey
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+
+    &:hover
+      color: $white
+
+    .menu-icon-first, 
+    .menu-icon-second,
+    .menu-icon-third 
+      width: 18px
+      height: 3px
+      background-color: #eee
+      margin: 2px 0
+      transition: 0.4s
+    
+    &.close
+      /* 旋转第一条横线 */
+      .menu-icon-first 
+        -webkit-transform: rotate(45deg) translate(4px, 3px)
+        transform: rotate(45deg) translate(4px, 3px)
+
+      /* 隐藏第二条横线 */
+      .menu-icon-second 
+        opacity: 0
+
+      /* 旋转第三条横线 */
+      .menu-icon-third 
+        -webkit-transform: rotate(-45deg) translate(4px, -4px)
+        transform: rotate(-45deg) translate(4px, -4px)
+
+
+
+
+
+
+  a
+    color: $light-grey
+    text-decoration: none
+
+    &:hover
+      color: $white
+
+  .site-page
+    position: relative
+    margin-left: 0.6rem
+    padding-bottom: 0.3rem
+    text-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 0.3)
+    font-size: 0.7rem
+    cursor: pointer
+
+    &::after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: -1
+      width: 0
+      height: 3px
+      background-color: lighten($theme-color, 30%)
+      content: ""
+      transition: all 0.3s ease-in-out
+
+    &:hover
+      &::after
+        width: 100%
+
+  &.fixed
+    position: fixed
+    top: -60px
+    z-index: 101
+    background: alpha($white, 0.8)
+    box-shadow: 0 5px 6px -5px alpha($grey, 0.6)
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out
+
+    &.open-sidebar
+      .site-page
+        display: none
+        opacity: 0
+
+    a,
+    #site-name
+      color: $light-black
+      text-shadow: none
+    
+    .menu-icon-first, 
+    .menu-icon-second,
+    .menu-icon-third
+      background-color: $light-black
+      text-shadow: none
+
+
+      &a,#site-name
+        &:hover
+          color: $light-blue
+
+  &.visible
+    transform: translate3d(0, 100%, 0)
+
+  #site-name
+    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+    font-weight: bold
+    cursor: pointer
+
+@media screen and (min-width: $sm)
+  #site-title
+    font-size: 2rem
+
+  #site-sub-title
+    font-size: 1.2rem
+
+@media screen and (max-width: $sm)
+
+  #page-header
+    padding: 10px 0.8rem
+
+    .toggle-menu
+      display: block
+
+    .menus
+      position: absolute
+      top: 3rem
+      right: 0.8rem
+      display: none
+      width: 8rem
+      background: alpha($white, 0.9)
+      cursor: pointer
+      box-shadow: 0 0 4px rgba(0, 0, 0, 0.27)
+
+      a
+        display: block !important
+        opacity: 1 !important
+        margin-left: 0
+        padding-top: 0.3rem
+        padding-bottom: 0.3rem
+        padding-left: 0.6rem
+        color: $font-black
+        text-shadow: none
+        font-size: 0.8rem
+        z-index: 0
+
+        &:hover
+          color: $light-blue
+
+    .search 
+      right: 0.5rem
+
+      span
+        display none
+    
+    &.fixed.open-sidebar 
+      .search
+        display: inline-block;
+        opacity: 1;
+
+
+#page-header .site-page
+  margin-left: 1rem

source/css/_layout/page.styl

@@ -0,0 +1,319 @@
+galleryItemStyle(w, h)
+  .gallery
+    &-item
+      width: w
+      height: unit(h, "rem")
+
+      &__title
+        transform: translate3d(0, unit(h, "rem"), 0)
+
+      &:hover
+        .gallery-item__title
+          transform: translate3d(0, unit(h - 1.5, "rem"), 0)
+
+.recent-post-item
+  .content
+    margin-top: 0.5rem
+
+    p
+      word-break: break-word
+
+
+    ol,
+    ul
+      margin-top: 0.4rem
+      padding: 0 0 0 0.8rem
+      list-style: none
+      counter-reset: li
+
+      p
+        margin: 0
+
+      ol,
+      ul
+        padding-left: 0.5rem
+
+      li
+        position: relative
+        margin: 0.2rem 0
+        padding: 0.1rem 0.5rem 0.1rem 1.5rem
+
+        &:hover
+          &:before
+            transform: rotate(360deg)
+
+        &:before
+          position: absolute
+          top: 0
+          left: 0
+          background: $light-blue
+          color: $white
+          cursor: pointer
+          transition: all 0.3s ease-out
+
+    ol
+      li
+        &:before
+          margin-top: 0.2rem
+          width: w = 1.2rem
+          height: h = w
+          border-radius: 0.5 * w
+          content: counter(li)
+          counter-increment: li
+          text-align: center
+          font-size: 0.6rem
+          line-height: h
+
+    ul
+      li
+        &:hover
+          &:before
+            border-color: $ruby
+
+        &:before
+          $w = 0.3rem
+          top: 10px
+          margin-left: 0.45rem
+          width: w = $w
+          height: h = w
+          border: 0.5 * w solid $light-blue
+          border-radius: w
+          background: $white
+          content: ""
+          line-height: h
+
+  .article-type
+    margin-left: 0.3rem
+    color: $grey
+
+  .article-meta
+    color: $grey
+
+    .sticky
+      color: $theme-button-hover-color
+
+    i
+      margin: 0 0.2rem 0 0.3rem
+
+    &__separator
+      margin-left: 0.3rem
+
+    .fa-angle-right,
+    &__link
+      margin: 0 0 0 0.3rem
+
+  time
+    color: $grey
+  
+  .more_setting
+    display: none
+
+  .more
+    display: inline-block
+    padding: 0 1rem
+    height: h = 1.6rem
+    // background: $light-blue
+    // color: $white
+    text-align: center
+    text-decoration: none
+    line-height: h
+    cursor: pointer
+    // transition: all 0.2s ease-in-out
+
+    // &:hover
+    //   background: $ruby
+
+  .article-title
+    margin-bottom: 0.3rem
+    color: $black
+    text-decoration: none
+    font-size: 1.2rem
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+    line-height: 1.4
+    text-overflow: ellipsis
+    display: -webkit-box
+    -webkit-box-orient: vertical
+    -webkit-line-clamp: 2
+    overflow: hidden
+    word-wrap: break-word
+
+    &:hover
+      // border-bottom: 1px solid $light-blue
+      color: $light-blue !important
+
+.tag-cloud
+  padding: 1.5rem 1rem 2rem
+  text-align: center
+
+  a
+    display: inline-block
+    margin: 0 0.4rem
+    text-decoration: none
+    cursor: pointer
+
+    &:hover
+      color: $ruby !important
+
+  &__title
+    font-size: 1.8rem
+
+#tag,
+#category,
+#archive
+  padding: 3rem 3rem 3rem
+
+.article-sort
+  padding-left: 1rem
+  border-left: 2px solid $pale-blue
+
+  &-title
+    position: relative
+    padding-bottom: 1.2rem
+    padding-left: 1rem
+    font-size: 1.2rem
+    line-height: 1
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      position: absolute
+      top: 0.25rem
+      left: calc(-0.5rem + 1px)
+      z-index: 1
+      width: w = 0.5rem
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    &:after
+      position: absolute
+      bottom: 0
+      left: 0
+      z-index: 0
+      width: 0.1rem
+      height: 1.3rem
+      background: $pale-blue
+      content: ""
+
+  &-item
+    position: relative
+    margin-bottom: 1rem
+    transition: all 0.2s ease-in-out
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      $w = 0.3rem
+      position: absolute
+      top: 0.48rem
+      left: calc(-1rem - 7px)
+      width: w = $w
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    &.year
+      font-size: 1rem
+
+      &:hover
+        &:before
+          border-color: $light-blue
+
+      &:before
+        top: 0.7rem
+        border-color: $ruby
+
+    &__time
+      position: absolute
+      top: 0.1rem
+      color: $a-link-color
+
+    &__title
+      display: block
+      margin-left: 5rem
+      color: $font-black
+      text-decoration: none
+      font-size: 0.8rem
+      cursor: pointer
+
+.category-lists
+  padding: 1rem 0 1.5rem
+
+  .category__title
+    text-align: center
+    font-size: 1.8rem
+
+.category-list
+  a
+    color: $font-black
+    text-decoration: none
+    cursor: pointer
+
+  .category-list-count
+    margin-left: 0.4rem
+    color: $a-link-color
+
+    &:before
+      content: "("
+
+    &:after
+      content: ")"
+
+.gallery
+  &-item
+    position: relative
+    display: inline-block
+    overflow: hidden
+    margin: 0.4rem
+    width: 6rem
+    height: 6rem
+    background-position: 50% 50%
+    background-size: cover
+    background-repeat: no-repeat
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+
+    &__title
+      position: absolute
+      overflow: hidden
+      padding: 0 0.4rem
+      width: 100%
+      height: 1.5rem
+      background: rgba(0, 0, 0, 0.5)
+      color: $pale-blue
+      text-align: center
+      text-overflow: ellipsis
+      white-space: nowrap
+      line-height: 1.5rem
+      transition: 0.2s ease-in-out
+      transform: translate3d(0, 6rem, 0)
+
+    &:hover
+      .gallery-item__title
+        transform: translate3d(0, 4.5rem, 0)
+
+@media screen and (max-width: $sm)
+  .recent-post-item
+    .article-title
+      font-size: 1rem
+
+    .article-meta.tags
+      display: none
+
+  galleryItemStyle(calc(50% - 22px), 6)
+
+@media screen and (min-width: $md)
+  galleryItemStyle(8rem, 8)

source/css/_layout/pagination.styl

@@ -0,0 +1,114 @@
+#pagination
+  overflow: hidden
+  margin-top: 1rem
+  width: 100%
+
+  .pagination
+    text-align: center
+  .space
+    color: $a-link-color
+
+  .page-number
+    display: inline-block
+    margin: 0 0.2rem
+    min-width: w = 1.2rem
+    height: w
+    text-align: center
+    line-height: w
+    cursor: pointer
+
+    &.current
+      background: $cyan
+      color: $white
+      cursor: default
+
+  img.prev_cover, img.next_cover
+    position: absolute
+    padding: 0
+    z-index: 50
+    top: 0
+    left: 0
+    width: 100%
+    height: 100%
+    opacity: .4
+    background-size: cover
+    transition: all 0.6s;
+    object-fit: cover
+    pointer-events: none
+
+  .prev_info
+    position: absolute
+    z-index: 100
+    font-weight: 400
+    width: 70%
+    color: #fff
+    overflow: hidden
+    white-space: nowrap
+    -o-text-overflow: ellipsis
+    text-overflow: ellipsis
+    display: block
+    bottom: 50px
+
+  .next_info
+    position: absolute
+    z-index: 100
+    font-weight: 400
+    width: 70%
+    color: #fff
+    overflow: hidden
+    white-space: nowrap
+    -o-text-overflow: ellipsis
+    text-overflow: ellipsis
+    display: block
+    right: 40px
+    bottom: 50px
+    text-align: right
+
+  .pull-full
+    width: 100% !important
+
+  .prev-post .label
+    position: absolute
+    top: 50px 
+    z-index: 100
+    font-size: 13px
+    display: block
+    text-transform: uppercase
+    color: rgba(255,255,255,.7)
+
+  .next-post .label
+    position: absolute
+    top: 50px
+    right: 40px
+    z-index: 100
+    display: block
+    text-transform: uppercase
+    color: rgba(255,255,255,.7)
+
+  .prev-post, .next-post
+    width: 50%
+    float: left
+
+    a
+      width: 100%
+      height: 150px
+      padding: 55px 40px
+      text-align: left
+      position: relative
+      display: block
+      float: left
+      overflow: hidden
+
+    &:hover
+      img.prev_cover, img.next_cover
+        opacity: .8
+        transform:scale(1.1)
+
+
+@media screen and (max-width:768px) 
+  .prev-post, .next-post
+    width: 100% !important
+
+.pagination_post
+    margin: 2rem 0 !important
+    background: #000

source/css/_layout/post.styl

@@ -0,0 +1,334 @@
+#post-title
+  font-size: 1.4rem
+
+  &.plain
+    margin-bottom: 0.3rem
+    border-bottom: 1px solid $light-grey
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+
+    &:hover
+      border-bottom: 1px solid $light-blue
+      color: $light-blue
+
+#post
+  overflow: hidden
+
+  &-meta
+    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+
+  #post-meta
+    color: $grey
+
+    a
+      text-decoration: none
+
+    i.fa.fa-comment-o
+      margin-right: 0.2rem
+
+#top-container
+  position: relative
+  margin-bottom: 1rem
+  background-color: $light-blue
+  background-attachment: local
+  background-position: center
+  background-size: cover
+  height: 19rem
+
+  &:before
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    content: '';
+    width: 100%;
+    height: 100%;
+    opacity: 0.5;
+    background-color: #394245;
+    background-image: linear-gradient(234deg, #394245 0%, #000 100%);
+
+  &.no-bg
+    $bg-svg += ""
+    background-color: $light-blue
+    background-image: url($bg-svg) !important
+    background-size: auto
+
+  &.plain
+    margin-bottom: 1rem
+    height: 56px
+
+  a
+    color: $light-grey
+    text-decoration: none
+    transition: all 0.3s ease-out
+
+    &:hover
+      color: $white
+
+  #top-img
+    padding: 0
+    border: none
+
+  #site-name
+    font-weight: bold
+    cursor: pointer
+
+  #post-info
+    width: 100%
+    color: $light-grey
+    text-align: left
+    padding-left: 8%
+    position: absolute
+    bottom: 1.5rem
+
+  #post-title
+    text-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.15)
+    font-size: 1.5rem
+
+  i.fa.fa-angle-right
+    margin: 0 0.3rem 0 0.2rem
+
+.post-meta
+  &__separator
+    margin: 0 0.3rem
+
+  &__icon
+    margin-right: 0.2rem
+
+  &__tags
+    display: inline-block
+    width: fit-content
+    margin: 0.4rem 0.4rem 0.4rem 0
+    padding: 0rem 0.6rem
+    border: 1px solid $light-blue
+    border-radius: 0.6rem
+    background: $white
+    color: $light-blue
+    text-decoration: none
+    font-size: 12px
+    cursor: pointer
+    transition: all 0.2s ease-in-out
+
+    &:hover
+      background: $light-blue
+      color: $white
+
+.layout
+  margin: 0 auto
+  max-width: 1000px
+
+#post-content
+  margin-bottom: 1rem
+
+  ol,
+  ul
+    margin-top: 0.4rem
+    counter-reset: li
+
+    p
+      margin: 0
+
+    ol,
+    ul
+      padding-left: 0.5rem
+
+    li
+      position: relative
+      margin: 0.3rem 0
+      padding-left: 0.3rem
+
+a
+  color: $a-link-color
+  transition: all 0.2s
+
+  &:hover
+    color: $light-blue
+    text-decoration: none
+
+  &#site-name
+    text-decoration: none
+
+a.fancybox
+  outline: none
+
+  &:focus
+    outline: none
+
+  display: inline-block
+  width: 100%
+  text-align: center
+  text-decoration: none
+
+img
+  padding: $img-border-padding
+  max-width: 100%
+  transition: all 0.2s
+
+  &:hover
+    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
+
+.code-area-wrap
+  position: relative
+
+.fa-clipboard
+  position: absolute
+  top: 0.4rem
+  right: 10px
+  z-index: 1
+  color: $highlight-aqua
+  cursor: pointer
+  transition: color 0.2s
+
+  &:hover
+    color: darken($highlight-aqua, 20%)
+
+.copy-notice
+  position: absolute
+  top: 0
+  right: 0
+  z-index: 1
+  background: darken($highlight-background, 5)
+  color: $highlight-aqua
+  opacity: 0
+
+.post-copyright
+  position: relative
+  margin-bottom: 0.4rem
+  padding: 0.5rem 0.8rem
+  border: 1px solid $light-grey
+  transition: box-shadow 0.3s ease-in-out
+
+  &:before
+    position: absolute
+    top: t = 0.5rem
+    right: t
+    width: w = 0.8rem
+    height: w
+    border-radius: w
+    background: $light-blue
+    content: ""
+
+  &:after
+    position: absolute
+    top: t = 0.7rem
+    right: t
+    width: w = 0.4rem
+    height: w
+    border-radius: w
+    background: $white
+    content: ""
+
+  &:hover
+    box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5)
+
+  &-meta
+    color: $light-blue
+    font-weight: bold
+
+  &-info
+    a
+      word-break: break-word
+
+.post-adv
+  margin: 1rem 0
+
+@media screen and (max-width: $sm)
+  .layout
+    margin: 0 30px
+    width: auto
+
+  #top-container
+    // background-attachment: local
+
+    #post-title
+      font-size: 1rem
+
+  #post-title
+    font-size: 1.1rem
+
+
+@media screen and (min-width: $md)
+  .layout
+    width: $content-large-width
+
+
+        
+.katex-wrap
+  overflow: auto
+  if hexo-config("katex") && hexo-config("katex.hide_scrollbar")
+    &::-webkit-scrollbar
+      display: none
+      
+
+// 文章字體
+#post-content p {
+  font-size: 1.1em
+}
+
+#post-content ol, #post-content ul {
+  font-size: 1em
+}
+
+
+
+@media screen and (max-width: 900px)
+  .layout 
+    margin: 0 15px
+    width: auto
+
+
+
+
+.layout_post 
+  padding: 50px
+  -webkit-box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+  box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+  border-radius: 8px
+  -webkit-transition: all 0.3s
+  -moz-transition: all 0.3s
+  -o-transition: all 0.3s
+  -ms-transition: all 0.3s
+  transition: all 0.3s
+  background: #fff
+  margin-top: 40px
+  margin-bottom: 40px
+
+  &:hover 
+    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+  
+  img
+    margin:0 auto
+    display:block
+
+
+
+  .tag_share
+    display: block
+
+    .post-meta__tag-list
+      display: inline-block
+
+    .post_share
+      width: fit-content;
+      display: inline-block;
+      float: right;
+      margin: 0.4rem 0
+
+      .social-share
+        font-size: 12px
+
+      .social-share .social-share-icon
+        width: 26px;
+        height: 26px;
+        font-size: 15px;
+        line-height: 25px;
+
+      .social-share a
+        margin: 0 4px;
+    
+
+  #post
+    a
+      text-decoration: none
+      color: $light-blue  

source/css/_layout/relatedposts.styl

@@ -0,0 +1,80 @@
+.relatedPosts
+    margin: 0 auto
+    padding: 0
+    margin-top: 1rem
+    width: 100%
+
+  .relatedPosts_item
+    width: calc(100%/3 - 10px)
+    height: 200px
+    overflow: hidden
+    float: left
+    position: relative
+    margin: 5px
+    background: #000
+
+    &:hover
+      .relatedPosts_cover
+        opacity: .8
+        transform:scale(1.1)
+
+
+  .relatedPosts_cover
+    border: 0
+    -webkit-transition: all 0.6s
+    -moz-transition: all 0.6s
+    -o-transition: all 0.6s
+    -ms-transition: all 0.6s
+    transition: all 0.6s
+    display: block
+    width: 100%
+    height: 100%
+    padding: 0
+    opacity: 0.4
+    margin: 0
+    object-fit: cover
+
+  .relatedPosts_title
+      color: #fff
+      position: absolute
+      left: 0
+      right: 0
+      top: 45%
+      height: 60px
+      padding: 0 30px
+      display: -webkit-box
+      -webkit-line-clamp: 2
+      -webkit-box-orient: vertical
+      overflow: hidden
+      max-width: 100%
+      width: 100%
+      margin: 0 auto
+      text-align: center
+
+  .relatedPosts_headling
+    font-size: 20px
+    font-weight: 700
+    margin-bottom: 5px
+
+  .clear_both
+    clear: both
+
+
+
+@media screen and (max-width:768px) 
+  .relatedPosts_item
+    width: calc(100%/2 - 4px)
+    height: 150px
+    margin: 2px
+  
+  .relatedPosts_title
+    top: 40%
+
+@media screen and (max-width:480px) 
+  .relatedPosts_item
+    width: calc(100% - 4px)
+    height: 150px
+    margin: 2px
+  
+  .relatedPosts_title
+    top: 40%

source/css/_layout/reward.styl

@@ -0,0 +1,71 @@
+.post-reward
+  position: relative
+  width: 100%
+  margin: 75px auto 0
+  text-align: center
+  display: block
+
+  .reward-buttom
+    text-align: center
+    display: inline-block
+    cursor: pointer
+    color: #fff
+    line-height: 36px
+    background: #49b1f5
+    width: 80px
+    
+    &:hover
+      background: #00c4b6
+      
+      .reward-main
+        display: block
+
+  
+    .reward-main
+      position: absolute
+      bottom: 40px
+      margin: 0
+      padding: 0 0 15px
+      width: 100%
+      left: 0
+      transition: all 0.6s
+      display: none
+  
+      .reward-all
+        margin: 0 auto
+        padding: 20px 10px 8px
+        background: #f5f5f5
+        display: inline-block
+        border-radius: 4px
+        cursor: auto
+
+        &:after
+          content: ""
+          width: 0
+          height: 0
+          border-left: 13px solid transparent
+          border-right: 13px solid transparent
+          border-top: 13px solid #f5f5f5
+          position: absolute
+          bottom: 2px
+          left: 0
+          right: 0
+          margin: 0 auto
+
+        .reward-item
+          list-style-type: none
+          padding: 0 8px
+          display: inline-block
+
+          img
+            width: 130px
+            max-width: 130px
+            border-radius: 3px
+            position: relative
+
+          .post-qr-code__desc
+            text-align: center
+            margin: -10px 0
+            color: #858585
+
+

source/css/_layout/sidebar.styl

@@ -0,0 +1,60 @@
+#sidebar
+  position: fixed
+  top: 0
+  left: -300px
+  z-index: 10
+  overflow-y: auto
+  padding: 1rem 0 2rem 0.5rem
+  width: $sidebar-width
+  height: 100%
+  background: $sidebar-background
+  box-shadow: -0.25rem 0 0.25rem rgba(232, 237, 250, 0.6) inset
+  opacity:  0.9
+  transition: all 0.2s
+
+  .sidebar-toc
+    ol,
+    li
+      list-style: none
+
+    ol
+      margin-top: 0.2rem
+      padding-left: 0.4rem
+
+    &__title
+      padding-right: 0.5rem
+      text-align: center
+      font-size: unit(0.9 * $rem, "px")
+
+    .toc-link
+      display: block
+      padding-left: 0.2rem
+      border-right: 3px solid transparent
+      text-decoration: none
+      transition: all 0.2s ease-in-out
+
+      &.active
+        border-right-color: darken($cyan, 20%)
+        background: $cyan
+        color: $white
+
+    &__progress
+      position: relative
+      margin-top: -0.3rem
+      padding-left: 0.6rem
+      color: $cyan
+
+      .progress-notice
+        margin-right: 0.4rem
+
+      .progress-num
+        display: inline-block
+        min-width: 0.9rem
+
+      &-bar
+        width: 0
+        height: 1px
+        background: $cyan
+
+
+

source/css/_search/algolia.styl

@@ -0,0 +1,72 @@
+#algolia-search
+  .ais-search-box
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input
+      padding: 0.25rem 0.7rem
+      outline: none
+      border: 2px solid $light-blue
+      border-radius: 2rem
+      font-size: 14px
+
+  .ais-hits--item.algolia-hit-item
+    position: relative
+    padding-left: 1.5rem
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      $w = 0.3rem
+      position: absolute
+      top: 0.4rem
+      left: 0
+      width: w = $w
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    a
+      display: block
+      color: $font-black
+      text-decoration: none
+      font-size: 14px
+      cursor: pointer
+
+      &:hover
+        color: $light-blue
+
+  .ais-pagination.pagination
+    margin: 0.8rem 0 0 0
+    padding: 0
+    text-align: center
+
+    .ais-pagination--item
+      margin: 0 0.2rem
+      padding: 0
+
+      a
+        display: inline-block
+        min-width: 1.2rem
+        height: 1.2rem
+        text-align: center
+        line-height: 1.2rem
+
+    .ais-pagination--item.current
+      a
+        background: $cyan
+        color: $white
+        text-decoration: none
+        cursor: default
+
+  .algolia-logo
+    padding-top: 2px
+    width: 4rem
+    height: 1.5rem

source/css/_search/index.styl

@@ -0,0 +1,46 @@
+.search-dialog
+  position: fixed
+  top: 5rem
+  left: 50%
+  z-index: 1001
+  display: none
+  margin-left: -15rem
+  padding: 1rem
+  width: 30rem
+  background: $white
+
+  hr
+    margin: 1rem auto
+
+  span.search-close-button
+    position: absolute
+    top: 0.5rem
+    right: 0.5rem
+    color: $grey
+    line-height: 1
+    cursor: pointer
+    transition: color 0.2s ease-in-out
+
+    &:hover
+      color: $light-blue
+
+  &__title
+    padding: 0 0 0.7rem
+    color: $light-blue
+    font-size: 1rem
+    line-height: 1
+
+.search-mask
+  position: fixed
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 1000
+  display: none
+  background: rgba(0, 0, 0, 0.6)
+
+@media screen and (max-width: $sm)
+  .search-dialog
+    margin-left: -45%
+    width: 90%

source/css/_search/local-search.styl

@@ -0,0 +1,52 @@
+#local-search
+  .local-search-box
+    margin: 0 auto
+    max-width: 100%
+    width: 100%
+
+    input
+      padding: 0.25rem 0.7rem
+      width: 100%
+      outline: none
+      border: 2px solid $light-blue
+      border-radius: 2rem
+      font-size: 14px
+
+  .local-search__hit-item
+    position: relative
+    padding-left: 1.5rem
+
+    &:hover
+      &:before
+        border-color: $ruby
+
+    &:before
+      $w = 0.3rem
+      position: absolute
+      top: 0.4rem
+      left: 0
+      width: w = $w
+      height: h = w
+      border: 0.5 * w solid $light-blue
+      border-radius: w
+      background: $white
+      content: ""
+      line-height: h
+      transition: all 0.2s ease-in-out
+
+    a
+      display: block
+      color: $font-black
+      text-decoration: none
+      font-size: 14px
+      cursor: pointer
+
+      &:hover
+        color: $light-blue
+
+  .local-search-stats__hr
+    display: none !important
+
+  .search-result-list
+    overflow-y: auto
+    max-height: 10.5rem

source/css/_third-party/normalize.min.css

@@ -0,0 +1 @@
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*# sourceMappingURL=normalize.min.css.map */

source/css/index.styl

@@ -0,0 +1,21 @@
+@import "nib"
+@import "_third-party/normalize.min.css"
+// project
+@import "var"
+@import "_global"
+@import "_highlight/highlight"
+@import "_layout/*"
+@import "other"
+if hexo-config("nightshift.enable")
+  @import "nightshift"
+  
+// search
+if hexo-config("algolia_search.enable")
+  @import "_search/index"
+  @import "_search/algolia"
+
+if hexo-config("local_search") && hexo-config("local_search.enable")
+  @import "_search/index"
+  @import "_search/local-search"
+
+

source/css/nightshift.styl

@@ -0,0 +1,229 @@
+.night-mode 
+  footer
+    background: #2d3035
+
+  #sidebar
+    background: #2d3035 !important
+    box-shadow: -0.25rem 0 0.25rem #2d3035 !important
+
+  if hexo-config("local_search") && hexo-config("local_search.enable")
+    #local-search
+      background: #2d3035  
+      .local-search-box--input  
+        background: #2d3035
+        color: #99a9bf
+          
+      .search-result-title
+        color: #99a9bf
+  if hexo-config("algolia_search.enable")
+    #algolia-search
+      background: #2d3035
+      .ais-search-box--input
+        background: #2d3035
+        color: #99a9bf
+
+      #algolia-search-results
+        .algolia-hit-item-link
+          color: #99a9bf !important
+      
+  h1, h2, h3, h4, h5, h6
+    color: #99a9bf
+
+  .article-container code
+    background: #616a6b 
+    color: #99a9bf 
+
+  // 評論
+  #vcomment
+    * 
+      color: #99a9bf !important
+    
+    .vsys
+      background: rgb(97, 106, 107) !important
+
+    .vbtn
+      background: rgb(45, 48, 53) !important      
+      color: #99a9bf !important
+        
+  .recent-post-item .article-title
+      color: #99a9bf
+
+  #page-header
+      &.fixed
+          background: #2d3035
+          box-shadow: 0 5px 6px -5px rgba(133,133,133,0) 
+
+          a, 
+          .toggle-menu, 
+          #site-name 
+              color: #99a9bf 
+              
+  blockquote
+      border-left: 0.2rem solid #7A5353 
+      color: #99a9bf
+
+  hr
+      background: 0
+      border: 2px dashed #616A6B
+      &:before
+          color: #99a9bf
+
+  .post-meta__tags
+      background: 0
+      border: 1px solid #99a9bf
+      color: #99a9bf
+
+
+  .post-copyright
+    border: 1px solid #99a9bf
+
+    *
+        color: #99a9bf
+
+  .article-container .highlight
+      background-color: #1B2631 
+      .code pre
+          background-color: #1B2631 
+
+      .gutter pre
+          background: #1C2833 
+
+
+      &:after
+          background: rgb(27, 38, 59) 
+      
+      table
+          &:after,.copy-notice
+              background: rgb(27, 38, 59) 
+      
+  .copy-notice
+      background: rgb(27, 38, 59) 
+
+  .post-cards,.md-links-item
+      // background: #2d3035
+      a
+          color: #99a9bf
+
+  .aplayer
+      color: #000000 
+      filter: brightness(0.6)
+
+  .article-sort-item__title
+      color: #99a9bf
+
+  .category-list
+      a
+          color: #99a9bf
+
+
+
+  .translate_chn_to_cht,
+  .nightshift,
+  #to_comment
+      background-color: #2d3035 !important
+
+  img
+      filter: brightness(0.6)
+
+  .layout_post
+      background:#2d3035
+  
+  canvas
+    display: none !important
+
+  #aside_content
+    .card_widget
+      background:#2d3035 !important
+    .headline,
+    .length_num,
+    .aside_post_title,
+    .aside_category_list_link,
+    .archive-list-link,
+    .social-icon
+      color: #99a9bf !important
+    
+    #bookmark-it
+      background: #616a6b !important
+  
+  #archive,
+  .tag-cloud,
+  #tag,
+  .category-content,
+  #category,
+  #page,
+  .flink
+    background:#2d3035
+
+  #nav,
+  #top-container
+    &::before
+      content: ""
+      position: absolute
+      top: 0
+      bottom: 0
+      left: 0
+      right: 0
+      background-color: rgba(0,0,0,.6)
+
+  .layout_page
+    .post-meta__date,
+    .article-meta__separator,
+    .article-meta__categories,
+    i
+      color: #99a9bf
+
+  #site-info .blogtitle, 
+  span.subtitle,
+  #post-info .posttitle,
+  #post-info #post-meta,
+  #site-social-icons i,
+  #top-container a
+    color: rgba(238,238,238,.6)
+
+  //打賞 分享
+  .post-reward
+    .reward-buttom
+      background-color: #616a6b
+    .post_share
+      filter: brightness(0.6)
+    img
+      filter: brightness(1)
+
+      
+  
+
+@media screen and (max-width: 768px)
+  .night-mode
+    color: #99a9bf 
+    background-color: rgb(45, 48, 53)
+
+    #page-header
+      .menus 
+        a
+          color: #99a9bf 
+          background: #2d3035
+      &.fixed
+        .menu-icon-first,
+        .menu-icon-second,
+        .menu-icon-third
+          background-color: #99a9bf;
+
+
+@media screen and (min-width: 768px)
+  .night-mode
+    color: #99a9bf 
+    background-color: #2d3032
+      
+    .recent-post-item
+        background: #2d3035 !important
+
+
+
+  
+
+
+
+
+
+
+

source/css/other.styl

@@ -0,0 +1,355 @@
+#recent-posts
+  .recent-post-item 
+    padding: 0
+    box-shadow: 0 4px 8px 6px rgba(7,17,27,0.06)
+    border-radius: 8px
+    -webkit-transition: all 0.3s
+    -moz-transition: all 0.3s
+    -o-transition: all 0.3s
+    -ms-transition: all 0.3s
+    transition: all 0.3s
+    background: #fff
+    margin-top: 20px
+    height: 280px
+
+    &:hover 
+      -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+      box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+
+      img.post_bg
+        transform:scale(1.1)
+  
+  .is_left
+    float: left
+    border-top-left-radius: 8px
+    border-bottom-left-radius: 8px
+
+  .is_right
+    float: right
+    border-top-right-radius: 8px
+    border-bottom-right-radius: 8px
+
+  .post_cover
+    width: 45%
+    height: 280px
+    overflow: hidden
+
+    
+    
+
+  img.post_bg
+    border: 0
+    transition: all .6s
+    display: block
+    width: 100%
+    height: 100%
+    padding: 0
+    margin: 0
+    object-fit: cover
+  
+
+    &:hover
+      transform:scale(1.1)
+  
+  #pagination
+    margin-top: 2rem
+
+
+.recent-post-info 
+  padding: 50px 40px
+  display: inline-block
+  width: 55%
+  overflow hidden
+
+
+a.article-meta__categories
+  text-decoration: none
+  color: #858585
+
+  &:hover
+    color: #49b1f5 !important
+
+.content
+  display: -webkit-box
+  -webkit-line-clamp: 3
+  -webkit-box-orient: vertical
+  overflow: hidden
+  height: 90px
+
+.more {
+  position: relative
+  letter-spacing: 1.2px
+  text-transform: uppercase
+  overflow: hidden
+  z-index: 1
+
+  &:focus {
+    outline: none
+  }
+}
+
+.more--primary {
+  color: lightslategray
+}
+
+.more--animated {
+  transition-property: color
+  transition-duration: 0.5s
+
+  &.more--border.more--primary {
+    border: 1px solid lightslategray
+  }
+
+  &:before {
+    content: ""
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: lightslategray
+    transform: scaleX(0)
+    transform-origin: 0 50%
+    transition-property: transform
+    transition-duration: 0.5s
+    transition-timing-function: ease-out
+    z-index: -1
+  }
+
+  &:hover {
+    color: white
+
+    &:before {
+      transform: scaleX(1)
+      transition-timing-function: cubic-bezier(0.45, 1.64, 0.47, 0.66)
+    }
+  }
+}
+
+.layout_page
+  display: flex 
+  margin: 0 auto
+  max-width: 1200px
+  align-items: flex-start
+  padding: 0 15px
+
+#recent-posts
+    width: 75%
+
+#page,.category-content,.flink
+  padding: 40px 44px 44px
+
+#page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+  box-shadow: 0 4px 8px 6px rgba(7,17,27,.06)
+  border-radius: 8px
+  transition: all .3s
+  background: #fff
+  margin-top: 20px
+  width: 75%
+
+.card_widget,#archive,.tag-cloud,#tag,.category-content,#category,#page,.flink
+
+  &:hover 
+    -webkit-box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+    box-shadow: 0 4px 12px 12px rgba(7,17,27,0.15)
+
+#page_site-info
+  padding: 10rem 1rem 7rem
+  #site-title
+    font-family: PingFang SC, Hiragino Sans GB, "Microsoft JhengHei", "Microsoft YaHei", Helvetica Neue, Helvetica, Arial, sans-serif
+
+@media screen and (max-width: 900px) 
+    #page,.category-content,#archive,.tag-cloud,.flink,#tag,#category
+      width: 100% !important
+    
+    // .recent-post-info 
+    //   padding: 40px 30px 20px
+
+
+@media screen and (max-width:768px) 
+  .recent-post-item
+    height: auto !important
+    border-radius: 8px
+
+  .post_cover 
+      width: 100% !important
+      height: 230px !important
+      border-radius: 8px !important
+           
+  .recent-post-item,#page,.tag-cloud,.flink
+    margin-top: 1px
+
+  .recent-post-item,#page,.category-content,.tag-cloud,.flink
+    box-shadow: none !important
+    background: none !important
+    padding: 0px 20px 0 !important
+  
+    &:hover 
+      -webkit-box-shadow: none
+      box-shadow: none
+  
+  #archive,#category,#tag
+    box-shadow: none !important
+    background: none !important
+    padding: 0px 30px 0 !important
+
+  
+  .layout_post
+    padding: 0 20px 0
+    border-radius: 0
+    -webkit-box-shadow: none
+    box-shadow: none
+    background: none
+    margin: 0
+
+    &:hover
+      -webkit-box-shadow: none
+      box-shadow: none
+  
+    
+  .layout_page
+    padding: 0 !important
+  
+  #aside_content
+    display: none !important
+    // .card_widget
+    //   box-shadow: none
+    //   border-radius: 0
+    //   border-top: 1px dashed #a4d8fa
+
+    //   &:hover
+    //     box-shadow: none
+
+  
+  .category-lists
+    padding: 0
+
+
+  
+  .recent-post-info 
+    padding: 20px 10px !important
+    width: 100%
+
+  #recent-posts #pagination
+    margin-bottom: 0
+
+  .more_setting
+    display: block !important
+
+  #nav #site-social-icons
+    display: block
+
+  #page_site-info
+    padding: 7rem 1rem 5rem
+  
+  #top-container
+    height: 14rem
+
+    #post-info
+      bottom: 1rem
+      padding-left: 5%
+  
+  .mobile_hidden
+    display: none
+  
+    
+  canvas
+    display: none !important
+
+
+
+.layout_page,
+.layout_post,
+footer
+  animation: main 1s;
+
+#nav,
+#top-container
+  animation: header 1s
+
+#site-title
+  animation: titlescale 1s
+
+.search-dialog
+  transition: all .2s
+
+.scroll-down-effects
+  -webkit-animation: pulse 1.5s infinite
+  animation: pulse 1.5s infinite
+  // font-size: 28px
+  position: absolute
+  color: #fff
+
+@keyframes pulse{
+
+  0%,to{
+    // -ms-filter:"alpha(opacity=40)"
+    // filter:alpha(opacity=40)
+    opacity:.4
+    top:0}
+  50%{
+    // -ms-filter:none
+    // -webkit-filter:none
+    // filter:none
+    opacity:1
+    top:-16px}
+    }
+
+@keyframes header {
+  0% {
+  opacity: 0;
+  transform: translateY(-50px)
+}
+100% {
+  opacity: 1;
+  transform: translateY(0)
+}
+
+}
+
+
+@keyframes main {
+  0% {
+  opacity: 0;
+  transform: translateY(50px)
+}
+100% {
+  opacity: 1;
+  transform: translateY(0)
+}
+}
+
+@keyframes titlescale{
+  
+  0% {
+    // opacity:0;
+    transform: scale(0.7)
+}
+  100% {
+    // opacity:1;
+    transform: scale(1)
+}
+    
+}
+
+
+.article-container .code_full_page
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  min-width: 100%;
+  z-index: 9999;
+  margin: 0;
+  animation: code_full_page 1s;
+
+.code_body
+  overflow: hidden
+
+@keyframes code_full_page{
+  0%{transform:scale(0)}
+  50%{transform:scale(1)}
+  80%{transform:scale(.98)}
+  100%{transform:scale(1)}}
+

source/img/algolia.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1366 362">
+  <linearGradient id="a" x1="428.258" x2="434.145" y1="404.15" y2="409.85" gradientUnits="userSpaceOnUse" gradientTransform="matrix(94.045 0 0 -94.072 -40381.527 38479.52)">
+    <stop offset="0" stop-color="#00aeff"/>
+    <stop offset="1" stop-color="#3369e7"/>
+  </linearGradient>
+  <path fill="url(#a)" d="M61.8 15.4h242.8c23.9 0 43.4 19.4 43.4 43.4v242.9c0 23.9-19.4 43.4-43.4 43.4H61.8c-23.9 0-43.4-19.4-43.4-43.4v-243c0-23.9 19.4-43.3 43.4-43.3z"/>
+  <path fill="#FFF" d="M187 98.7c-51.4 0-93.1 41.7-93.1 93.2S135.6 285 187 285s93.1-41.7 93.1-93.2-41.6-93.1-93.1-93.1zm0 158.8c-36.2 0-65.6-29.4-65.6-65.6s29.4-65.6 65.6-65.6 65.6 29.4 65.6 65.6-29.3 65.6-65.6 65.6zm0-117.8v48.9c0 1.4 1.5 2.4 2.8 1.7l43.4-22.5c1-.5 1.3-1.7.8-2.7-9-15.8-25.7-26.6-45-27.3-1 0-2 .8-2 1.9zm-60.8-35.9l-5.7-5.7c-5.6-5.6-14.6-5.6-20.2 0l-6.8 6.8c-5.6 5.6-5.6 14.6 0 20.2l5.6 5.6c.9.9 2.2.7 3-.2 3.3-4.5 6.9-8.8 10.9-12.8 4.1-4.1 8.3-7.7 12.9-11 1-.6 1.1-2 .3-2.9zM217.5 89V77.7c0-7.9-6.4-14.3-14.3-14.3h-33.3c-7.9 0-14.3 6.4-14.3 14.3v11.6c0 1.3 1.2 2.2 2.5 1.9 9.3-2.7 19.1-4.1 29-4.1 9.5 0 18.9 1.3 28 3.8 1.2.3 2.4-.6 2.4-1.9z"/>
+  <path fill="#182359" d="M842.5 267.6c0 26.7-6.8 46.2-20.5 58.6-13.7 12.4-34.6 18.6-62.8 18.6-10.3 0-31.7-2-48.8-5.8l6.3-31c14.3 3 33.2 3.8 43.1 3.8 15.7 0 26.9-3.2 33.6-9.6s10-15.9 10-28.5v-6.4c-3.9 1.9-9 3.8-15.3 5.8-6.3 1.9-13.6 2.9-21.8 2.9-10.8 0-20.6-1.7-29.5-5.1-8.9-3.4-16.6-8.4-22.9-15-6.3-6.6-11.3-14.9-14.8-24.8s-5.3-27.6-5.3-40.6c0-12.2 1.9-27.5 5.6-37.7 3.8-10.2 9.2-19 16.5-26.3 7.2-7.3 16-12.9 26.3-17s22.4-6.7 35.5-6.7c12.7 0 24.4 1.6 35.8 3.5 11.4 1.9 21.1 3.9 29 6.1v155.2zm-108.7-77.2c0 16.4 3.6 34.6 10.8 42.2 7.2 7.6 16.5 11.4 27.9 11.4 6.2 0 12.1-.9 17.6-2.6 5.5-1.7 9.9-3.7 13.4-6.1v-97.1c-2.8-.6-14.5-3-25.8-3.3-14.2-.4-25 5.4-32.6 14.7-7.5 9.3-11.3 25.6-11.3 40.8zm294.3 0c0 13.2-1.9 23.2-5.8 34.1s-9.4 20.2-16.5 27.9c-7.1 7.7-15.6 13.7-25.6 17.9s-25.4 6.6-33.1 6.6c-7.7-.1-23-2.3-32.9-6.6-9.9-4.3-18.4-10.2-25.5-17.9-7.1-7.7-12.6-17-16.6-27.9s-6-20.9-6-34.1c0-13.2 1.8-25.9 5.8-36.7 4-10.8 9.6-20 16.8-27.7s15.8-13.6 25.6-17.8c9.9-4.2 20.8-6.2 32.6-6.2s22.7 2.1 32.7 6.2c10 4.2 18.6 10.1 25.6 17.8 7.1 7.7 12.6 16.9 16.6 27.7 4.2 10.8 6.3 23.5 6.3 36.7zm-40 .1c0-16.9-3.7-31-10.9-40.8-7.2-9.9-17.3-14.8-30.2-14.8-12.9 0-23 4.9-30.2 14.8-7.2 9.9-10.7 23.9-10.7 40.8 0 17.1 3.6 28.6 10.8 38.5 7.2 10 17.3 14.9 30.2 14.9 12.9 0 23-5 30.2-14.9 7.2-10 10.8-21.4 10.8-38.5zm127.1 86.4c-64.1.3-64.1-51.8-64.1-60.1L1051 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9zm68.9 0h-39.3V108.1l39.3-6.2v175zm-19.7-193.5c13.1 0 23.8-10.6 23.8-23.7S1177.6 36 1164.4 36s-23.8 10.6-23.8 23.7 10.7 23.7 23.8 23.7zm117.4 18.6c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4s8.9 13.5 11.1 21.7c2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6s-25.9 2.7-41.1 2.7c-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8s9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2s-10-3-16.7-3c-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1s19.5-2.6 30.3-2.6zm3.3 141.9c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18 5.9 3.6 13.7 5.3 23.6 5.3zM512.9 103c12.9 0 23.8 1.6 32.6 4.8 8.8 3.2 15.9 7.7 21.1 13.4 5.3 5.8 8.9 13.5 11.1 21.7 2.3 8.2 3.4 17.2 3.4 27.1v100.6c-6 1.3-15.1 2.8-27.3 4.6-12.2 1.8-25.9 2.7-41.1 2.7-10.1 0-19.4-1-27.7-2.9-8.4-1.9-15.5-5-21.5-9.3-5.9-4.3-10.5-9.8-13.9-16.6-3.3-6.8-5-16.4-5-26.4 0-9.6 1.9-15.7 5.6-22.3 3.8-6.6 8.9-12 15.3-16.2 6.5-4.2 13.9-7.2 22.4-9s17.4-2.7 26.6-2.7c4.3 0 8.8.3 13.6.8 4.7.5 9.8 1.4 15.2 2.7v-6.4c0-4.5-.5-8.8-1.6-12.8-1.1-4.1-3-7.6-5.6-10.7-2.7-3.1-6.2-5.5-10.6-7.2-4.4-1.7-10-3-16.7-3-9 0-17.2 1.1-24.7 2.4-7.5 1.3-13.7 2.8-18.4 4.5l-4.7-32.1c4.9-1.7 12.2-3.4 21.6-5.1 9.4-1.8 19.5-2.6 30.3-2.6zm3.4 142c12 0 20.9-.7 27.1-1.9v-39.8c-2.2-.6-5.3-1.3-9.4-1.9-4.1-.6-8.6-1-13.6-1-4.3 0-8.7.3-13.1 1-4.4.6-8.4 1.8-11.9 3.5s-6.4 4.1-8.5 7.2c-2.2 3.1-3.2 4.9-3.2 9.6 0 9.2 3.2 14.5 9 18s13.7 5.3 23.6 5.3zm158.5 31.9c-64.1.3-64.1-51.8-64.1-60.1L610.6 32l39.1-6.2v183.6c0 4.7 0 34.5 25.1 34.6v32.9z"/>
+</svg>

source/js/activate-power-mode.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,function(){return function(o){var n={};function r(t){if(n[t])return n[t].exports;var e=n[t]={exports:{},id:t,loaded:!1};return o[t].call(e.exports,e,e.exports,r),e.loaded=!0,e.exports}return r.m=o,r.c=n,r.p="",r(0)}([function(t,e,l){"use strict";var r=document.createElement("canvas");r.width=window.innerWidth,r.height=window.innerHeight,r.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",function(){r.width=window.innerWidth,r.height=window.innerHeight}),document.body.appendChild(r);var i=r.getContext("2d"),c=[],u=0,p=!1;function o(t,e){return Math.random()*(e-t)+t}function f(t){if(h.colorful){var e=o(0,360);return"hsla("+o(e-10,e+10)+", 100%, "+o(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function h(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var o=l(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:o.left+t.left,y:o.top+t.top,color:f(e)}}var n=window.getSelection();if(n.rangeCount){var r=n.getRangeAt(0),i=r.startContainer;return i.nodeType===document.TEXT_NODE&&(i=i.parentNode),{x:(t=r.getBoundingClientRect()).left,y:t.top,color:f(i)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)c[u]=(o=t.x,n=t.y,r=t.color,{x:o,y:n,alpha:1,color:r,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}),u=(u+1)%500;var o,n,r;if(h.shake){var i=1+2*Math.random(),a=i*(.5<Math.random()?-1:1),d=i*(.5<Math.random()?-1:1);document.body.style.marginLeft=a+"px",document.body.style.marginTop=d+"px",setTimeout(function(){document.body.style.marginLeft="",document.body.style.marginTop=""},75)}p||requestAnimationFrame(s)}function s(){p=!0,i.clearRect(0,0,r.width,r.height);for(var t=!1,e=r.getBoundingClientRect(),o=0;o<c.length;++o){var n=c[o];n.alpha<=.1||(n.velocity.y+=.075,n.x+=n.velocity.x,n.y+=n.velocity.y,n.alpha*=.96,i.globalAlpha=n.alpha,i.fillStyle=n.color,i.fillRect(Math.round(n.x-1.5)-e.left,Math.round(n.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(s):p=!1}h.shake=!0,h.colorful=!1,t.exports=h},function(e,t){!function(){var u=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],p=null!=window.mozInnerScreenX;function t(t,e,o){var n=o&&o.debug||!1;if(n){var r=document.querySelector("#input-textarea-caret-position-mirror-div");r&&r.parentNode.removeChild(r)}var i=document.createElement("div");i.id="input-textarea-caret-position-mirror-div",document.body.appendChild(i);var a=i.style,d=window.getComputedStyle?getComputedStyle(t):t.currentStyle;a.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(a.wordWrap="break-word"),a.position="absolute",n||(a.visibility="hidden"),u.forEach(function(t){a[t]=d[t]}),p?t.scrollHeight>parseInt(d.height)&&(a.overflowY="scroll"):a.overflow="hidden",i.textContent=t.value.substring(0,e),"INPUT"===t.nodeName&&(i.textContent=i.textContent.replace(/\s/g," "));var l=document.createElement("span");l.textContent=t.value.substring(e)||".",i.appendChild(l);var c={top:l.offsetTop+parseInt(d.borderTopWidth),left:l.offsetLeft+parseInt(d.borderLeftWidth)};return n?l.style.backgroundColor="#aaa":document.body.removeChild(i),c}void 0!==e&&void 0!==e.exports?e.exports=t:window.getCaretCoordinates=t}()}])});

source/js/baidupush.js

@@ -0,0 +1,12 @@
+(function(){
+    var bp = document.createElement('script');
+    var curProtocol = window.location.protocol.split(':')[0];
+    if (curProtocol === 'https') {
+        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
+    }
+    else {
+        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
+    }
+    var s = document.getElementsByTagName("script")[0];
+    s.parentNode.insertBefore(bp, s);
+})();

source/js/main.js

@@ -0,0 +1,513 @@
+$(function () {
+  if ($(".sidebar-toc__content").children().length > 0 ) {
+    $(".layout_post").animate({}, function () {
+      {
+        setTimeout(function () {
+          $('#page-header').addClass('open-sidebar')
+          $("#toggle-sidebar").addClass('on')
+          $('body').animate({
+            paddingLeft: 300
+          }, 200)
+          $('#sidebar').animate({}, function () {
+            $('#sidebar').css({
+              'transform': 'translateX(300px)'
+            },200)
+          })
+          $('#toggle-sidebar').animate({}, function () {
+            $('#toggle-sidebar').css({
+              'transform': 'rotateZ(180deg)',
+              'color': '#99a9bf',
+              'opacity': "1"
+            })
+          })
+
+        }, 200);
+      }
+    })
+  }
+  else
+    $("#toggle-sidebar").css("display", "none")
+ 
+
+  //-------------------------------------------------------------------------------------------------------
+  //sidebar
+  $('#toggle-sidebar').on('click', function () {
+
+    if (!isMobile() && $('#sidebar').is(':visible')) {
+      var isOpen = $(this).hasClass('on')
+      isOpen ? $(this).removeClass('on') : $(this).addClass('on')
+      if (isOpen) {
+        $('#page-header').removeClass('open-sidebar')
+        $('body').animate({
+          paddingLeft: 0
+        }, 200)
+
+        $('#sidebar').animate({}, function () {
+          $('#sidebar').css({
+            'transform': 'translateX(0px)'
+          })
+        })
+
+        $('#toggle-sidebar').animate({}, function () {
+          $('#toggle-sidebar').css({
+            'transform': 'rotateZ(0deg)',
+            'color': '#1F2D3D'
+          })
+        })
+
+      } else {
+        $('#page-header').addClass('open-sidebar')
+        $('body').animate({
+          paddingLeft: 300
+        }, 200)
+        $('#sidebar').animate({}, function () {
+          $('#sidebar').css({
+            'transform': 'translateX(300px)'
+          })
+        })
+        $('#toggle-sidebar').animate({}, function () {
+          $('#toggle-sidebar').css({
+            'transform': 'rotateZ(180deg)',
+            'color': '#99a9bf'
+          })
+        })
+      }
+    }
+  })
+
+  //-----------------------------------------------------------------------------------------------------
+  // 首页fullpage添加
+  // 添加class 
+  if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
+  } else {
+    $('.full_page').css('background-attachment', 'fixed')
+  }
+
+  //---------------------------------------------------------------------------------------------------------
+  //側邊欄comment
+  $("#to_comment").on("click", function () {
+
+    scrollTo('#post-comment')
+
+  });
+
+  $(".scroll-down").on("click", function () {
+
+    scrollTo('#content-outer')
+
+  });
+
+
+  //--------------------------------------------------------------------------------------------------------
+  // tags 隨機大小 顔色
+  var list = document.querySelectorAll(".tag-cloud .tag-cloud-tags a");
+
+  if ($(window).width() > 768) {
+    Array.prototype.forEach.call(list, (item, index) => {
+      item.style.fontSize = Math.floor(Math.random() * 20 + 15) + "px"; //15 ~ 35
+      item.style.color =
+        "rgb(" +
+        Math.floor(Math.random() * 201) +
+        ", " +
+        Math.floor(Math.random() * 201) +
+        ", " +
+        Math.floor(Math.random() * 201) +
+        ")"; // 0,0,0 -> 200,200,200
+    });
+  } else {
+    Array.prototype.forEach.call(list, (item, index) => {
+      item.style.fontSize = Math.floor(Math.random() * 13 + 15) + "px"; //15 ~ 28
+      item.style.color =
+        "rgb(" +
+        Math.floor(Math.random() * 201) +
+        ", " +
+        Math.floor(Math.random() * 201) +
+        ", " +
+        Math.floor(Math.random() * 201) +
+        ")"; // 0,0,0 -> 200,200,200
+    });
+  }
+
+
+  //--------------------------------------------------------------------------------------------------------
+  // bookmark
+  $.fancyConfirm = function (opts) {
+    opts = $.extend(true, {
+      title: 'Are you sure?',
+      message: '',
+      okButton: 'OK',
+      noButton: 'Cancel',
+      callback: $.noop
+    }, opts || {});
+  
+    $.fancybox.open({
+      type: 'html',
+      src:
+        '<div class="fc-content">' +
+        '<h3>' + opts.title + '</h3>' +
+        '<p>' + opts.message + '</p>' +
+        '<p class="tright">' +
+        '<button data-value="1" data-fancybox-close class="bookmark-ok">' + opts.okButton + '</button>' +
+        '</p>' +
+        '</div>',
+      opts: {
+        animationDuration: 350,
+        animationEffect: 'material',
+        modal: true,
+        baseTpl:
+          '<div class="fancybox-container fc-container" role="dialog" tabindex="-1">' +
+          '<div class="fancybox-bg"></div>' +
+          '<div class="fancybox-inner">' +
+          '<div class="fancybox-stage"></div>' +
+          '</div>' +
+          '</div>',
+      }
+    });
+  }
+  
+  $('#bookmark-it').click(
+    function () {
+      if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
+        window.sidebar.addPanel(document.title, window.location.href, '');
+      } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
+        window.external.AddFavorite(location.href, document.title);
+      } else if (window.opera && window.print) { // Opera Hotlist
+        this.title = document.title;
+        return true;
+      } else { // webkit - safari/chrome
+        // alert('按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.');
+        $.fancyConfirm({
+          title: "添加書籤？",
+          message:
+            '按 ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D 鍵將本頁加入書籤.',
+          okButton: "OK",
+        });
+
+      }
+    });
+
+  //-------------------------------------------------------------------------------------------------------
+  //代码copy
+  // Add copy icon
+  // $('figure.highlight').wrap('<div class="code-area-wrap"></div>')
+  // var $copyIcon = $('<i class="fa fa-clipboard" aria-hidden="true"></i>')
+  // var $notice = $('<div class="copy-notice"></div>')
+  // $('.code-area-wrap').prepend($copyIcon)
+  // $('.code-area-wrap').prepend($notice)
+  // // copy function
+  // function copy(text, ctx) {
+  //   if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
+  //     try {
+  //       document.execCommand('copy') // Security exception may be thrown by some browsers.
+  //       $(ctx).prev('.copy-notice')
+  //         .text(GLOBAL_CONFIG.copy.success)
+  //         .velocity({
+  //           translateX: -30,
+  //           opacity: 1
+  //         }, {
+  //           loop: 1,
+  //           duration: 750,
+  //           easing: 'easeOutQuint'
+  //         })
+  //     } catch (ex) {
+  //       $(ctx).prev('.copy-notice')
+  //         .text(GLOBAL_CONFIG.copy.error)
+  //         .velocity({
+  //           translateX: -30,
+  //           opacity: 1
+  //         }, {
+  //           loop: 1,
+  //           duration: 750,
+  //           easing: 'easeOutQuint'
+  //         })
+  //       return false
+  //     }
+  //   } else {
+  //     $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
+  //   }
+  // }
+  // // click events
+  // $('.code-area-wrap .fa-clipboard').on('click', function () {
+  //   var selection = window.getSelection()
+  //   var range = document.createRange()
+  //   range.selectNodeContents($(this).siblings('figure').find('.code pre')[0])
+  //   selection.removeAllRanges()
+  //   selection.addRange(range)
+  //   var text = selection.toString()
+  //   copy(text, this)
+  //   selection.removeAllRanges()
+  // })
+
+  //---------------------------------------------------------------------------------------------------
+  //fancybox
+  var imgList = $(".recent-post-info  img");
+  if (imgList.length === 0) {
+    imgList = $("#post-content img");
+  }
+  for (var i = 0; i < imgList.length; i++) {
+    var $a = $(
+      '<a href="' +
+      imgList[i].src +
+      '" data-fancybox="group" data-caption="' +
+      imgList[i].alt +
+      '" class="fancybox"></a>'
+    );
+    var alt = imgList[i].alt;
+    var $wrap = $(imgList[i]).wrap($a);
+    if (alt) {
+      $wrap.after('<div class="img-alt">' + alt + "</div>");
+    }
+  }
+
+  $().fancybox({
+    selector: "[data-fancybox]",
+    loop: true,
+    transitionEffect: "slide",
+    protect: true,
+    // wheel: false,
+    buttons: ["slideShow", "fullScreen", "thumbs", "close"]
+  });
+
+  var galleryItem = $(".gallery-item");
+  var galleryList = [];
+  galleryItem.each(function (idx, elem) {
+    galleryList.push({
+      src: $(elem).data("url"),
+      opts: {
+        caption: $(elem).data("title")
+      }
+    });
+  });
+  galleryItem.on("click", function () {
+    $.fancybox.open(
+      galleryList, {
+        loop: true,
+        transitionEffect: "slide"
+      },
+      galleryItem.index(this)
+    );
+    return false;
+    
+  });
+
+  //--------------------------------------------------------------------------------------------------------
+  //lazy懶加載
+  //把img的src删除，添加data-src,用于lozad.js
+  var $img = $("#post img");
+  $img.addClass("lozad");
+  $img.each(function () {
+    var src_link = $(this).attr("src");
+    $(this).attr("data-src", src_link);
+    $(this).removeAttr("src");
+  })
+
+  const observer = lozad(); // lazy loads elements with default selector as '.lozad'
+  observer.observe();
+
+  //---------------------------------------------------------------------------------------------------------
+  /** head点击*/
+  $('.toggle-menu').on('click', function () {
+    if (!$('.menus').is(':visible')) {
+      $(".toggle-menu").removeClass("open").addClass("close");
+      $('.menus').slideDown(300)
+    } else {
+      $(".toggle-menu").removeClass("close").addClass("open");
+      $('.menus').slideUp(200)
+    }
+  })
+
+  $(document).on('click touchstart', function (e) {
+    var flag = $('.menus')[0].contains(e.target) || $('.toggle-menu')[0].contains(e.target)
+    if (!flag && $('.toggle-menu').is(':visible')) {
+      $(".toggle-menu").removeClass("close").addClass("open");
+      $('.menus').slideUp(200)
+    }
+  })
+
+
+  $(window).on('resize', function (e) {
+    if (!$('.toggle-menu').is(':visible')) {
+      if (!$('.menus').is(':visible')) {
+        $(".toggle-menu").removeClass("open").addClass("close");
+        $('.menus').slideDown(300)
+      }
+    }
+  })
+
+  //---------------------------------------------------------------------------------------------------------
+  /** scroll 滚动 toc*/
+  var initTop = 0
+  $('.toc-child').hide()
+
+  // main of scroll
+  $(window).scroll(throttle(function (event) {
+    var currentTop = $(this).scrollTop()
+    if (!isMobile()) {
+      // percentage inspired by hexo-theme-next
+      scrollPercent(currentTop)
+      // head position
+      findHeadPosition(currentTop)
+    }
+    var isUp = scrollDirection(currentTop)
+    if (currentTop > 56) {
+      if (isUp) {
+        $('#page-header').hasClass('visible') ? $('#page-header').removeClass('visible') : console.log()
+      } else {
+        $('#page-header').hasClass('visible') ? console.log() : $('#page-header').addClass('visible')
+      }
+      $('#page-header').addClass('fixed')
+      if ($('#go-up').css('opacity') === '0') {
+
+        $('#go-up').animate({}, function () {
+          $('#go-up').css({
+            'opacity': '1',
+            'transform': 'translateX(-30px) rotateZ(360deg)'
+          })
+        })
+      }
+      if ($('#rightside').css('opacity') === '0') {
+
+        $('#rightside').animate({}, function () {
+          $('#rightside').css({
+            'opacity': '1',
+            'transform': 'translateX(-38px)'
+          })
+        })
+      }
+
+
+    } else {
+      if (currentTop === 0) {
+        $('#page-header').removeClass('fixed').removeClass('visible')
+      }
+
+      $('#go-up').animate({}, function () {
+        $('#go-up').css({
+          'opacity': '0',
+          'transform': 'translateX(0) rotateZ(180deg) '
+        })
+      })
+
+      $('#rightside').animate({}, function () {
+        $('#rightside').css({
+          'opacity': '0',
+          'transform': 'translateX(0)'
+        })
+      })
+
+    }
+  }, 50, 100))
+
+  // go up smooth scroll
+  $('#go-up').on('click', function () {
+    scrollTo('body')
+  })
+
+  // head scroll
+  $('#post-content').find('h1,h2,h3,h4,h5,h6').on('click', function (e) {
+    scrollToHead('#' + $(this).attr('id'))
+  })
+
+  // head scroll
+  $('.toc-link').on('click', function (e) {
+    e.preventDefault()
+    scrollToHead($(this).attr('href'))
+  })
+
+  // find the scroll direction
+  function scrollDirection(currentTop) {
+    var result = currentTop > initTop // true is down & false is up
+    initTop = currentTop
+    return result
+  }
+
+  // scroll to a head(anchor)
+  function scrollToHead(anchor) {
+    scrollTo(anchor);
+  }
+
+  // expand toc-item
+  function expandToc($item) {
+    if ($item.is(':visible')) {
+      return
+    }
+    $item.fadeIn(400)
+  }
+
+  function scrollPercent(currentTop) {
+    var docHeight = $('#content-outer').height()
+    var winHeight = $(window).height()
+    var contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
+    var scrollPercent = (currentTop) / (contentMath)
+    var scrollPercentRounded = Math.round(scrollPercent * 100)
+    var percentage = (scrollPercentRounded > 100) ? 100 : scrollPercentRounded
+    $('.progress-num').text(percentage)
+    $('.sidebar-toc__progress-bar').animate({
+      width: percentage + '%'
+    }, 100)
+  }
+
+  function updateAnchor(anchor) {
+    if (window.history.replaceState && anchor !== window.location.hash) {
+      window.history.replaceState(undefined, undefined, anchor)
+    }
+  }
+
+  // find head position & add active class
+  // DOM Hierarchy:
+  // ol.toc > (li.toc-item, ...)
+  // li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...))
+  function findHeadPosition(top) {
+    // assume that we are not in the post page if no TOC link be found,
+    // thus no need to update the status
+    if ($('.toc-link').length === 0) {
+      return false
+    }
+
+    var list = $('#post-content').find('h1,h2,h3,h4,h5,h6')
+    var currentId = ''
+    list.each(function () {
+      var head = $(this)
+      if (top > head.offset().top - 25) {
+        currentId = '#' + $(this).attr('id')
+      }
+    })
+
+    if (currentId === '') {
+      $('.toc-link').removeClass('active')
+      $('.toc-child').hide()
+    }
+
+    var currentActive = $('.toc-link.active')
+    if (currentId && currentActive.attr('href') !== currentId) {
+      updateAnchor(currentId)
+
+      $('.toc-link').removeClass('active')
+      var _this = $('.toc-link[href="' + currentId + '"]')
+      _this.addClass('active')
+
+      var parents = _this.parents('.toc-child')
+      // Returned list is in reverse order of the DOM elements
+      // Thus `parents.last()` is the outermost .toc-child container
+      // i.e. list of subsections
+      var topLink = (parents.length > 0) ? parents.last() : _this
+      expandToc(topLink.closest('.toc-item').find('.toc-child'))
+      topLink
+        // Find all top-level .toc-item containers, i.e. sections
+        // excluding the currently active one
+        .closest('.toc-item').siblings('.toc-item')
+        // Hide their respective list of subsections
+        .find('.toc-child').hide()
+    }
+  }
+
+  //代碼框雙擊全屏
+    $('figure').on('dblclick', function(e) {
+      if (e.target !== this)
+          return;
+      $(this).toggleClass('code_full_page');
+      $('body').toggleClass('code_body');
+    });
+  
+
+});

source/js/nightshift.js

@@ -0,0 +1,28 @@
+$(function() {
+  changeReadModel();
+
+  function switchReadMode() {
+    var next_mode = $("body").hasClass("night-mode") ? "day" : "night";
+    Cookies.set("read-mode", next_mode, {expires: 7, path: '/'});
+    changeReadModel();
+  }
+
+  function changeReadModel() {
+    if (Cookies.get("read-mode") == "night") {
+      $("body").addClass("night-mode");
+      $("#nightshift").removeClass("fa-moon-o").addClass("fa-sun-o");
+    }
+
+    // 非夜間模式
+    if (Cookies.get("read-mode") == "day") {
+      $("body").removeClass("night-mode");
+      $("#nightshift").removeClass("fa-sun-o").addClass("fa-moon-o");
+    }
+  }
+
+  $("#nightshift").click(function() {
+    switchReadMode();
+  });
+
+
+});

source/js/runtimeshow.js

@@ -0,0 +1,21 @@
+function show_date_time(){
+    window.setTimeout("show_date_time()", 1000);
+    BirthDay=new Date("6/7/2018 00:00:00");//這個日期是可以修改的
+    today=new Date();
+    timeold=(today.getTime()-BirthDay.getTime());//其實僅僅改了這裏
+    // sectimeold=timeold/1000
+    // secondsold=Math.floor(sectimeold);
+    msPerDay=24*60*60*1000
+    e_daysold=timeold/msPerDay
+    daysold=Math.floor(e_daysold);
+    // e_hrsold=(e_daysold-daysold)*24;
+    // hrsold=Math.floor(e_hrsold);
+    // e_minsold=(e_hrsold-hrsold)*60;
+    // minsold=Math.floor((e_hrsold-hrsold)*60);
+    // seconds=Math.floor((e_minsold-minsold)*60);
+    // span_dt_dt.innerHTML = "已運行  " + daysold + " 天 " + hrsold + " 時 " + minsold + " 分 " + seconds + " 秒";
+    webinfo_runtime_count.innerHTML= daysold + " 天"
+}
+    
+show_date_time()
+    

source/js/search/algolia.js

@@ -0,0 +1,136 @@
+$(function () {
+  $('a.social-icon.search').on('click', function () {
+    $('body').css('width', '100%')
+    $('body').css('overflow', 'hidden')
+
+    $('.search-dialog').animate({}, function () {
+      $('.search-dialog').css({
+        'display': 'block',
+        'animation': 'titlescale 0.5s'
+      })
+    })
+
+    $('.ais-search-box--input').focus()
+    $('.search-mask').fadeIn();
+    // shortcut: ESC
+    document.addEventListener('keydown', function f(event) {
+      if (event.code == "Escape") {
+        closeSearch();
+        document.removeEventListener('keydown', f);
+      }
+    })
+  })
+
+  var closeSearch = function () {
+    $('body').css('overflow', 'auto')
+
+    $('.search-dialog').animate({}, function () {
+      $('.search-dialog').css({
+        'display': 'none'
+      })
+    })
+
+    $('.search-mask').fadeOut();
+  }
+  $('.search-mask, .search-close-button').on('click', closeSearch)
+
+
+  var algolia = GLOBAL_CONFIG.algolia
+  var isAlgoliaValid = algolia.appId && algolia.apiKey && algolia.indexName
+  if (!isAlgoliaValid) {
+    return console.error('Algolia setting is invalid!')
+  }
+
+  var search = instantsearch({
+    appId: algolia.appId,
+    apiKey: algolia.apiKey,
+    indexName: algolia.indexName,
+    searchParameters: {
+      hitsPerPage: algolia.hits.per_page || 10
+    },
+    searchFunction: function (helper) {
+      var searchInput = $('#algolia-search-input').find('input')
+
+      if (searchInput.val()) {
+        helper.search()
+      }
+    }
+  })
+
+  search.addWidget(
+    instantsearch.widgets.searchBox({
+      container: '#algolia-search-input',
+      reset: false,
+      magnifier: false,
+      placeholder: GLOBAL_CONFIG.algolia.languages.input_placeholder
+    })
+  )
+  search.addWidget(
+    instantsearch.widgets.hits({
+      container: '#algolia-hits',
+      templates: {
+        item: function (data) {
+          var link = data.permalink ? data.permalink : (GLOBAL_CONFIG.root + data.path)
+          return (
+            '<a href="' + link + '" class="algolia-hit-item-link">' +
+            data._highlightResult.title.value +
+            '</a>'
+          )
+        },
+        empty: function (data) {
+          return (
+            '<div id="algolia-hits-empty">' +
+            GLOBAL_CONFIG.algolia.languages.hits_empty.replace(/\$\{query}/, data.query) +
+            '</div>'
+          )
+        }
+      },
+      cssClasses: {
+        item: 'algolia-hit-item'
+      }
+    })
+  )
+
+  search.addWidget(
+    instantsearch.widgets.stats({
+      container: '#algolia-stats',
+      templates: {
+        body: function (data) {
+          var stats = GLOBAL_CONFIG.algolia.languages.hits_stats
+            .replace(/\$\{hits}/, data.nbHits)
+            .replace(/\$\{time}/, data.processingTimeMS)
+          return (
+            '<hr>' +
+            stats +
+            '<span class="algolia-logo pull-right">' +
+            '  <img src="' + GLOBAL_CONFIG.root + 'img/algolia.svg" alt="Algolia" />' +
+            '</span>'
+          )
+        }
+      }
+    })
+  )
+
+  search.addWidget(
+    instantsearch.widgets.pagination({
+      container: '#algolia-pagination',
+      scrollTo: false,
+      showFirstLast: false,
+      labels: {
+        first: '<i class="fa fa-angle-double-left"></i>',
+        last: '<i class="fa fa-angle-double-right"></i>',
+        previous: '<i class="fa fa-angle-left"></i>',
+        next: '<i class="fa fa-angle-right"></i>'
+      },
+      cssClasses: {
+        root: 'pagination',
+        item: 'pagination-item',
+        link: 'page-number',
+        active: 'current',
+        disabled: 'disabled-item'
+      }
+    })
+  )
+
+  search.start()
+})

source/js/search/local-search.js

@@ -0,0 +1,102 @@
+$(function () {
+  var loadFlag = false
+  $('a.social-icon.search').on('click', function () {
+    $('body').css('width', '100%')
+    $('body').css('overflow', 'hidden')
+    $('.search-dialog').animate({}, function () {
+      $('.search-dialog').css({
+        'display': 'block',
+        'animation': 'titlescale 0.5s'
+      })
+    })
+          $('#local-search-input input').focus()
+  
+          $('.search-mask').fadeIn();
+    if (!loadFlag) {
+      search(GLOBAL_CONFIG.localSearch.path)
+      loadFlag = true
+    }
+
+    // shortcut: ESC
+    document.addEventListener('keydown', function f(event) {
+      if (event.code === 'Escape') {
+        closeSearch()
+        document.removeEventListener('keydown', f)
+      }
+    })
+  })
+
+  var closeSearch = function () {
+    $('body').css('overflow', 'auto')
+    $('.search-dialog').animate({}, function () {
+      $('.search-dialog').css({
+        'display': 'none'
+      })
+    })
+    $('.search-mask').fadeOut();
+  }
+  $('.search-mask, .search-close-button').on('click', closeSearch)
+
+  function search(path) {
+    $.ajax({
+      url: GLOBAL_CONFIG.root + path,
+      dataType: 'xml',
+      success: function (xmlResponse) {
+        // get the contents from search data
+        var datas = $('entry', xmlResponse).map(function () {
+          return {
+            title: $('title', this).text(),
+            content: $('content', this).text(),
+            url: $('url', this).text()
+          }
+        }).get()
+        var $input = $('#local-search-input input')[0]
+        var $resultContent = $('#local-hits')[0]
+        $input.addEventListener('input', function () {
+          var str = '<div class="search-result-list">'
+          var keywords = this.value.trim().toLowerCase().split(/[\s]+/)
+          $resultContent.innerHTML = ''
+          if (this.value.trim().length <= 0) {
+            $('.local-search-stats__hr').hide()
+            return
+          }
+          var count = 0
+          // perform local searching
+          datas.forEach(function (data) {
+            var isMatch = true
+            var dataTitle = data.title.trim().toLowerCase()
+            var dataContent = data.content.trim().replace(/<[^>]+>/g, '').toLowerCase()
+            var dataUrl = data.url
+            var indexTitle = -1
+            var indexContent = -1
+            // only match artiles with not empty titles and contents
+            if (dataTitle !== '' && dataContent !== '') {
+              keywords.forEach(function (keyword, i) {
+                indexTitle = dataTitle.indexOf(keyword)
+                indexContent = dataContent.indexOf(keyword)
+                if (indexTitle < 0 && indexContent < 0) {
+                  isMatch = false
+                } else {
+                  if (indexContent < 0) {
+                    indexContent = 0
+                  }
+                }
+              })
+            }
+            // show search results
+            if (isMatch) {
+              str += '<div class="local-search__hit-item"><a href="' + dataUrl + '" class="search-result-title">' + dataTitle + '</a>' + '</div>'
+              count += 1
+              $('.local-search-stats__hr').show()
+            }
+          })
+          if (count === 0) {
+            str += '<div id="local-search__hits-empty">' + GLOBAL_CONFIG.localSearch.languages.hits_empty.replace(/\$\{query}/, this.value.trim()) +
+              '</div>'
+          }
+          $resultContent.innerHTML = str
+        })
+      }
+    })
+  }
+})

source/js/third-party/anime.min.js

@@ -0,0 +1,27 @@
+/*
+ 2017 Julian Garnier
+ Released under the MIT license
+*/
+var $jscomp$this=this;
+(function(v,p){"function"===typeof define&&define.amd?define([],p):"object"===typeof module&&module.exports?module.exports=p():v.anime=p()})(this,function(){function v(a){if(!g.col(a))try{return document.querySelectorAll(a)}catch(b){}}function p(a){return a.reduce(function(a,d){return a.concat(g.arr(d)?p(d):d)},[])}function w(a){if(g.arr(a))return a;g.str(a)&&(a=v(a)||a);return a instanceof NodeList||a instanceof HTMLCollection?[].slice.call(a):[a]}function F(a,b){return a.some(function(a){return a===b})}
+function A(a){var b={},d;for(d in a)b[d]=a[d];return b}function G(a,b){var d=A(a),c;for(c in a)d[c]=b.hasOwnProperty(c)?b[c]:a[c];return d}function B(a,b){var d=A(a),c;for(c in b)d[c]=g.und(a[c])?b[c]:a[c];return d}function S(a){a=a.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i,function(a,b,d,h){return b+b+d+d+h+h});var b=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);a=parseInt(b[1],16);var d=parseInt(b[2],16),b=parseInt(b[3],16);return"rgb("+a+","+d+","+b+")"}function T(a){function b(a,b,c){0>
+c&&(c+=1);1<c&&--c;return c<1/6?a+6*(b-a)*c:.5>c?b:c<2/3?a+(b-a)*(2/3-c)*6:a}var d=/hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g.exec(a);a=parseInt(d[1])/360;var c=parseInt(d[2])/100,d=parseInt(d[3])/100;if(0==c)c=d=a=d;else{var e=.5>d?d*(1+c):d+c-d*c,l=2*d-e,c=b(l,e,a+1/3),d=b(l,e,a);a=b(l,e,a-1/3)}return"rgb("+255*c+","+255*d+","+255*a+")"}function x(a){if(a=/([\+\-]?[0-9#\.]+)(%|px|pt|em|rem|in|cm|mm|ex|pc|vw|vh|deg|rad|turn)?/.exec(a))return a[2]}function U(a){if(-1<a.indexOf("translate"))return"px";
+if(-1<a.indexOf("rotate")||-1<a.indexOf("skew"))return"deg"}function H(a,b){return g.fnc(a)?a(b.target,b.id,b.total):a}function C(a,b){if(b in a.style)return getComputedStyle(a).getPropertyValue(b.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase())||"0"}function I(a,b){if(g.dom(a)&&F(V,b))return"transform";if(g.dom(a)&&(a.getAttribute(b)||g.svg(a)&&a[b]))return"attribute";if(g.dom(a)&&"transform"!==b&&C(a,b))return"css";if(null!=a[b])return"object"}function W(a,b){var d=U(b),d=-1<b.indexOf("scale")?
+1:0+d;a=a.style.transform;if(!a)return d;for(var c=[],e=[],l=[],h=/(\w+)\((.+?)\)/g;c=h.exec(a);)e.push(c[1]),l.push(c[2]);a=l.filter(function(a,c){return e[c]===b});return a.length?a[0]:d}function J(a,b){switch(I(a,b)){case "transform":return W(a,b);case "css":return C(a,b);case "attribute":return a.getAttribute(b)}return a[b]||0}function K(a,b){var d=/^(\*=|\+=|-=)/.exec(a);if(!d)return a;b=parseFloat(b);a=parseFloat(a.replace(d[0],""));switch(d[0][0]){case "+":return b+a;case "-":return b-a;case "*":return b*
+a}}function D(a){return g.obj(a)&&a.hasOwnProperty("totalLength")}function X(a,b){function d(c){c=void 0===c?0:c;return a.el.getPointAtLength(1<=b+c?b+c:0)}var c=d(),e=d(-1),l=d(1);switch(a.property){case "x":return c.x;case "y":return c.y;case "angle":return 180*Math.atan2(l.y-e.y,l.x-e.x)/Math.PI}}function L(a,b){var d=/-?\d*\.?\d+/g;a=D(a)?a.totalLength:a;if(g.col(a))b=g.rgb(a)?a:g.hex(a)?S(a):g.hsl(a)?T(a):void 0;else{var c=x(a);a=c?a.substr(0,a.length-c.length):a;b=b?a+b:a}b+="";return{original:b,
+numbers:b.match(d)?b.match(d).map(Number):[0],strings:b.split(d)}}function Y(a,b){return b.reduce(function(b,c,e){return b+a[e-1]+c})}function M(a){return(a?p(g.arr(a)?a.map(w):w(a)):[]).filter(function(a,d,c){return c.indexOf(a)===d})}function Z(a){var b=M(a);return b.map(function(a,c){return{target:a,id:c,total:b.length}})}function aa(a,b){var d=A(b);if(g.arr(a)){var c=a.length;2!==c||g.obj(a[0])?g.fnc(b.duration)||(d.duration=b.duration/c):a={value:a}}return w(a).map(function(a,c){c=c?0:b.delay;
+a=g.obj(a)&&!D(a)?a:{value:a};g.und(a.delay)&&(a.delay=c);return a}).map(function(a){return B(a,d)})}function ba(a,b){var d={},c;for(c in a){var e=H(a[c],b);g.arr(e)&&(e=e.map(function(a){return H(a,b)}),1===e.length&&(e=e[0]));d[c]=e}d.duration=parseFloat(d.duration);d.delay=parseFloat(d.delay);return d}function ca(a){return g.arr(a)?y.apply(this,a):N[a]}function da(a,b){var d;return a.tweens.map(function(c){c=ba(c,b);var e=c.value,l=J(b.target,a.name),h=d?d.to.original:l,h=g.arr(e)?e[0]:h,m=K(g.arr(e)?
+e[1]:e,h),l=x(m)||x(h)||x(l);c.isPath=D(e);c.from=L(h,l);c.to=L(m,l);c.start=d?d.end:a.offset;c.end=c.start+c.delay+c.duration;c.easing=ca(c.easing);c.elasticity=(1E3-Math.min(Math.max(c.elasticity,1),999))/1E3;g.col(c.from.original)&&(c.round=1);return d=c})}function ea(a,b){return p(a.map(function(a){return b.map(function(b){var c=I(a.target,b.name);if(c){var d=da(b,a);b={type:c,property:b.name,animatable:a,tweens:d,duration:d[d.length-1].end,delay:d[0].delay}}else b=void 0;return b})})).filter(function(a){return!g.und(a)})}
+function O(a,b,d){var c="delay"===a?Math.min:Math.max;return b.length?c.apply(Math,b.map(function(b){return b[a]})):d[a]}function fa(a){var b=G(ga,a),d=G(ha,a),c=Z(a.targets),e=[],g=B(b,d),h;for(h in a)g.hasOwnProperty(h)||"targets"===h||e.push({name:h,offset:g.offset,tweens:aa(a[h],d)});a=ea(c,e);return B(b,{children:[],animatables:c,animations:a,duration:O("duration",a,d),delay:O("delay",a,d)})}function n(a){function b(){return window.Promise&&new Promise(function(a){return Q=a})}function d(a){return f.reversed?
+f.duration-a:a}function c(a){for(var b=0,c={},d=f.animations,e={};b<d.length;){var g=d[b],h=g.animatable,m=g.tweens;e.tween=m.filter(function(b){return a<b.end})[0]||m[m.length-1];e.isPath$1=e.tween.isPath;e.round=e.tween.round;e.eased=e.tween.easing(Math.min(Math.max(a-e.tween.start-e.tween.delay,0),e.tween.duration)/e.tween.duration,e.tween.elasticity);m=Y(e.tween.to.numbers.map(function(a){return function(b,c){c=a.isPath$1?0:a.tween.from.numbers[c];b=c+a.eased*(b-c);a.isPath$1&&(b=X(a.tween.value,
+b));a.round&&(b=Math.round(b*a.round)/a.round);return b}}(e)),e.tween.to.strings);ia[g.type](h.target,g.property,m,c,h.id);g.currentValue=m;b++;e={isPath$1:e.isPath$1,tween:e.tween,eased:e.eased,round:e.round}}if(c)for(var k in c)E||(E=C(document.body,"transform")?"transform":"-webkit-transform"),f.animatables[k].target.style[E]=c[k].join(" ");f.currentTime=a;f.progress=a/f.duration*100}function e(a){if(f[a])f[a](f)}function g(){f.remaining&&!0!==f.remaining&&f.remaining--}function h(a){var h=f.duration,
+l=f.offset,n=f.delay,P=f.currentTime,q=f.reversed,r=d(a),r=Math.min(Math.max(r,0),h);if(f.children){var p=f.children;if(r>=f.currentTime)for(var u=0;u<p.length;u++)p[u].seek(r);else for(u=p.length;u--;)p[u].seek(r)}r>l&&r<h?(c(r),!f.began&&r>=n&&(f.began=!0,e("begin")),e("run")):(r<=l&&0!==P&&(c(0),q&&g()),r>=h&&P!==h&&(c(h),q||g()));a>=h&&(f.remaining?(t=m,"alternate"===f.direction&&(f.reversed=!f.reversed)):(f.pause(),"Promise"in window&&(Q(),R=b()),f.completed||(f.completed=!0,e("complete"))),
+k=0);e("update")}a=void 0===a?{}:a;var m,t,k=0,Q=null,R=b(),f=fa(a);f.reset=function(){var a=f.direction,b=f.loop;f.currentTime=0;f.progress=0;f.paused=!0;f.began=!1;f.completed=!1;f.reversed="reverse"===a;f.remaining="alternate"===a&&1===b?2:b;for(a=f.children.length;a--;)b=f.children[a],b.seek(b.offset),b.reset()};f.tick=function(a){m=a;t||(t=m);h((k+m-t)*n.speed)};f.seek=function(a){h(d(a))};f.pause=function(){var a=q.indexOf(f);-1<a&&q.splice(a,1);f.paused=!0};f.play=function(){f.paused&&(f.paused=
+!1,t=0,k=d(f.currentTime),q.push(f),z||ja())};f.reverse=function(){f.reversed=!f.reversed;t=0;k=d(f.currentTime)};f.restart=function(){f.pause();f.reset();f.play()};f.finished=R;f.reset();f.autoplay&&f.play();return f}var ga={update:void 0,begin:void 0,run:void 0,complete:void 0,loop:1,direction:"normal",autoplay:!0,offset:0},ha={duration:1E3,delay:0,easing:"easeOutElastic",elasticity:500,round:0},V="translateX translateY translateZ rotate rotateX rotateY rotateZ scale scaleX scaleY scaleZ skewX skewY".split(" "),
+E,g={arr:function(a){return Array.isArray(a)},obj:function(a){return-1<Object.prototype.toString.call(a).indexOf("Object")},svg:function(a){return a instanceof SVGElement},dom:function(a){return a.nodeType||g.svg(a)},str:function(a){return"string"===typeof a},fnc:function(a){return"function"===typeof a},und:function(a){return"undefined"===typeof a},hex:function(a){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(a)},rgb:function(a){return/^rgb/.test(a)},hsl:function(a){return/^hsl/.test(a)},col:function(a){return g.hex(a)||
+g.rgb(a)||g.hsl(a)}},y=function(){function a(a,d,c){return(((1-3*c+3*d)*a+(3*c-6*d))*a+3*d)*a}return function(b,d,c,e){if(0<=b&&1>=b&&0<=c&&1>=c){var g=new Float32Array(11);if(b!==d||c!==e)for(var h=0;11>h;++h)g[h]=a(.1*h,b,c);return function(h){if(b===d&&c===e)return h;if(0===h)return 0;if(1===h)return 1;for(var m=0,k=1;10!==k&&g[k]<=h;++k)m+=.1;--k;var k=m+(h-g[k])/(g[k+1]-g[k])*.1,l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(.001<=l){for(m=0;4>m;++m){l=3*(1-3*c+3*b)*k*k+2*(3*c-6*b)*k+3*b;if(0===l)break;
+var n=a(k,b,c)-h,k=k-n/l}h=k}else if(0===l)h=k;else{var k=m,m=m+.1,f=0;do n=k+(m-k)/2,l=a(n,b,c)-h,0<l?m=n:k=n;while(1e-7<Math.abs(l)&&10>++f);h=n}return a(h,d,e)}}}}(),N=function(){function a(a,b){return 0===a||1===a?a:-Math.pow(2,10*(a-1))*Math.sin(2*(a-1-b/(2*Math.PI)*Math.asin(1))*Math.PI/b)}var b="Quad Cubic Quart Quint Sine Expo Circ Back Elastic".split(" "),d={In:[[.55,.085,.68,.53],[.55,.055,.675,.19],[.895,.03,.685,.22],[.755,.05,.855,.06],[.47,0,.745,.715],[.95,.05,.795,.035],[.6,.04,.98,
+.335],[.6,-.28,.735,.045],a],Out:[[.25,.46,.45,.94],[.215,.61,.355,1],[.165,.84,.44,1],[.23,1,.32,1],[.39,.575,.565,1],[.19,1,.22,1],[.075,.82,.165,1],[.175,.885,.32,1.275],function(b,c){return 1-a(1-b,c)}],InOut:[[.455,.03,.515,.955],[.645,.045,.355,1],[.77,0,.175,1],[.86,0,.07,1],[.445,.05,.55,.95],[1,0,0,1],[.785,.135,.15,.86],[.68,-.55,.265,1.55],function(b,c){return.5>b?a(2*b,c)/2:1-a(-2*b+2,c)/2}]},c={linear:y(.25,.25,.75,.75)},e={},l;for(l in d)e.type=l,d[e.type].forEach(function(a){return function(d,
+e){c["ease"+a.type+b[e]]=g.fnc(d)?d:y.apply($jscomp$this,d)}}(e)),e={type:e.type};return c}(),ia={css:function(a,b,d){return a.style[b]=d},attribute:function(a,b,d){return a.setAttribute(b,d)},object:function(a,b,d){return a[b]=d},transform:function(a,b,d,c,e){c[e]||(c[e]=[]);c[e].push(b+"("+d+")")}},q=[],z=0,ja=function(){function a(){z=requestAnimationFrame(b)}function b(b){var c=q.length;if(c){for(var d=0;d<c;)q[d]&&q[d].tick(b),d++;a()}else cancelAnimationFrame(z),z=0}return a}();n.version="2.0.2";
+n.speed=1;n.running=q;n.remove=function(a){a=M(a);for(var b=q.length;b--;)for(var d=q[b],c=d.animations,e=c.length;e--;)F(a,c[e].animatable.target)&&(c.splice(e,1),c.length||d.pause())};n.getValue=J;n.path=function(a,b){var d=g.str(a)?v(a)[0]:a,c=b||100;return function(a){return{el:d,property:a,totalLength:d.getTotalLength()*(c/100)}}};n.setDashoffset=function(a){var b=a.getTotalLength();a.setAttribute("stroke-dasharray",b);return b};n.bezier=y;n.easings=N;n.timeline=function(a){var b=n(a);b.pause();
+b.duration=0;b.add=function(a){b.children.forEach(function(a){a.began=!0;a.completed=!0});w(a).forEach(function(a){var c=b.duration,d=a.offset;a.autoplay=!1;a.offset=g.und(d)?c:K(d,c);b.seek(a.offset);a=n(a);a.duration>c&&(b.duration=a.duration);a.began=!0;b.children.push(a)});b.reset();b.seek(0);b.autoplay&&b.restart();return b};return b};n.random=function(a,b){return Math.floor(Math.random()*(b-a+1))+a};return n});

source/js/third-party/canvas-ribbon.js

@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2016 hustcc
+ * License: MIT
+ * Version: v1.0.1
+ * GitHub: https://github.com/hustcc/ribbon.js
+ **/
+// changed by Molunerfinn
+!(function () {
+  function attr (node, attr, default_value) {
+    if (default_value === true) {
+      return node.getAttribute(attr) || default_value
+    }
+    return Number(node.getAttribute(attr)) || default_value
+  }
+
+  // get user config
+  var script = document.getElementById('ribbon'),
+    config = {
+      z: attr(script, 'zIndex', -1), // z-index
+      a: attr(script, 'alpha', 0.6), // alpha
+      s: attr(script, 'size', 90), // size
+      c: attr(script, 'data-click', true) // click-to-change
+    }
+
+  var canvas = document.createElement('canvas'),
+    g2d = canvas.getContext('2d'),
+    pr = window.devicePixelRatio || 1,
+    width = window.innerWidth,
+    height = window.innerHeight,
+    f = config.s,
+    q,
+    t,
+    m = Math,
+    r = 0,
+    pi = m.PI * 2,
+    cos = m.cos,
+    random = m.random
+  canvas.width = width * pr
+  canvas.height = height * pr
+  g2d.scale(pr, pr)
+  g2d.globalAlpha = config.a
+  canvas.style.cssText =
+    'opacity: ' +
+    config.a +
+    ';position:fixed;top:0;left:0;z-index: ' +
+    config.z +
+    ';width:100%;height:100%;pointer-events:none;'
+  // create canvas
+  document.getElementsByTagName('body')[0].appendChild(canvas)
+
+  function redraw () {
+    g2d.clearRect(0, 0, width, height)
+    q = [{ x: 0, y: height * 0.7 + f }, { x: 0, y: height * 0.7 - f }]
+    while (q[1].x < width + f) draw(q[0], q[1])
+  }
+  function draw (i, j) {
+    g2d.beginPath()
+    g2d.moveTo(i.x, i.y)
+    g2d.lineTo(j.x, j.y)
+    var k = j.x + (random() * 2 - 0.25) * f,
+      n = line(j.y)
+    g2d.lineTo(k, n)
+    g2d.closePath()
+    r -= pi / -50
+    g2d.fillStyle =
+      '#' +
+      (
+        ((cos(r) * 127 + 128) << 16) |
+        ((cos(r + pi / 3) * 127 + 128) << 8) |
+        (cos(r + (pi / 3) * 2) * 127 + 128)
+      ).toString(16)
+    g2d.fill()
+    q[0] = q[1]
+    q[1] = { x: k, y: n }
+  }
+  function line (p) {
+    t = p + (random() * 2 - 1.1) * f
+    return t > height || t < 0 ? line(p) : t
+  }
+  if (config.c !== 'false') {
+    document.onclick = redraw
+    document.ontouchstart = redraw
+  }
+  redraw()
+})()

source/js/third-party/piao.js

@@ -0,0 +1,324 @@
+(function(name, factory) {
+	if (typeof window === "object") {
+		window[name] = factory()
+	}
+})("Ribbons", function() {
+	var _w = window,
+		_b = document.body,
+		_d = document.documentElement;
+	var random = function() {
+			if (arguments.length === 1) {
+				if (Array.isArray(arguments[0])) {
+					var index = Math.round(random(0, arguments[0].length - 1));
+					return arguments[0][index]
+				}
+				return random(0, arguments[0])
+			} else if (arguments.length === 2) {
+				return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
+			}
+			return 0
+		};
+	var screenInfo = function(e) {
+			var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0),
+				height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0),
+				scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0),
+				scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0);
+			return {
+				width: width,
+				height: height,
+				ratio: width / height,
+				centerx: width / 2,
+				centery: height / 2,
+				scrollx: scrollx,
+				scrolly: scrolly
+			}
+		};
+	var mouseInfo = function(e) {
+			var screen = screenInfo(e),
+				mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0,
+				mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0;
+			return {
+				mousex: mousex,
+				mousey: mousey,
+				centerx: mousex - screen.width / 2,
+				centery: mousey - screen.height / 2
+			}
+		};
+	var Point = function(x, y) {
+			this.x = 0;
+			this.y = 0;
+			this.set(x, y)
+		};
+	Point.prototype = {
+		constructor: Point,
+		set: function(x, y) {
+			this.x = x || 0;
+			this.y = y || 0
+		},
+		copy: function(point) {
+			this.x = point.x || 0;
+			this.y = point.y || 0;
+			return this
+		},
+		multiply: function(x, y) {
+			this.x *= x || 1;
+			this.y *= y || 1;
+			return this
+		},
+		divide: function(x, y) {
+			this.x /= x || 1;
+			this.y /= y || 1;
+			return this
+		},
+		add: function(x, y) {
+			this.x += x || 0;
+			this.y += y || 0;
+			return this
+		},
+		subtract: function(x, y) {
+			this.x -= x || 0;
+			this.y -= y || 0;
+			return this
+		},
+		clampX: function(min, max) {
+			this.x = Math.max(min, Math.min(this.x, max));
+			return this
+		},
+		clampY: function(min, max) {
+			this.y = Math.max(min, Math.min(this.y, max));
+			return this
+		},
+		flipX: function() {
+			this.x *= -1;
+			return this
+		},
+		flipY: function() {
+			this.y *= -1;
+			return this
+		}
+	};
+	var Factory = function(options) {
+			this._canvas = null;
+			this._context = null;
+			this._sto = null;
+			this._width = 0;
+			this._height = 0;
+			this._scroll = 0;
+			this._ribbons = [];
+			this._options = {
+				colorSaturation: "80%",
+				colorBrightness: "60%",
+				colorAlpha: 0.65,
+				colorCycleSpeed: 6,
+				verticalPosition: "center",
+				horizontalSpeed: 150,
+				ribbonCount: 5,
+				strokeSize: 5,
+				parallaxAmount: -0.5,
+				animateSections: true
+			};
+			this._onDraw = this._onDraw.bind(this);
+			this._onResize = this._onResize.bind(this);
+			this._onScroll = this._onScroll.bind(this);
+			this.setOptions(options);
+			this.init()
+		};
+	Factory.prototype = {
+		constructor: Factory,
+		setOptions: function(options) {
+			if (typeof options === "object") {
+				for (var key in options) {
+					if (options.hasOwnProperty(key)) {
+						this._options[key] = options[key]
+					}
+				}
+			}
+		},
+		init: function() {
+			try {
+				this._canvas = document.createElement("canvas");
+				this._canvas.style["display"] = "block";
+				this._canvas.style["position"] = "fixed";
+				this._canvas.style["margin"] = "0";
+				this._canvas.style["padding"] = "0";
+				this._canvas.style["border"] = "0";
+				this._canvas.style["outline"] = "0";
+				this._canvas.style["left"] = "0";
+				this._canvas.style["top"] = "0";
+				this._canvas.style["width"] = "100%";
+				this._canvas.style["height"] = "100%";
+				this._canvas.style["z-index"] = "-1";
+				this._onResize();
+				this._context = this._canvas.getContext("2d");
+				this._context.clearRect(0, 0, this._width, this._height);
+				this._context.globalAlpha = this._options.colorAlpha;
+				window.addEventListener("resize", this._onResize);
+				window.addEventListener("scroll", this._onScroll);
+				document.body.appendChild(this._canvas)
+			} catch (e) {
+				console.warn("Canvas Context Error: " + e.toString());
+				return
+			}
+			this._onDraw()
+		},
+		addRibbon: function() {
+			var dir = Math.round(random(1, 9)) > 5 ? "right" : "left",
+				stop = 1000,
+				hide = 200,
+				min = 0 - hide,
+				max = this._width + hide,
+				movex = 0,
+				movey = 0,
+				startx = dir === "right" ? min : max,
+				starty = Math.round(random(0, this._height));
+			if (/^(top|min)$/i.test(this._options.verticalPosition)) {
+				starty = 0 + hide
+			} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
+				starty = this._height / 2
+			} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
+				starty = this._height - hide
+			}
+			var ribbon = [],
+				point1 = new Point(startx, starty),
+				point2 = new Point(startx, starty),
+				point3 = null,
+				color = Math.round(random(0, 360)),
+				delay = 0;
+			while (true) {
+				if (stop <= 0) break;
+				stop--;
+				movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed);
+				movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25));
+				point3 = new Point();
+				point3.copy(point2);
+				if (dir === "right") {
+					point3.add(movex, movey);
+					if (point2.x >= max) break
+				} else if (dir === "left") {
+					point3.subtract(movex, movey);
+					if (point2.x <= min) break
+				}
+				ribbon.push({
+					point1: new Point(point1.x, point1.y),
+					point2: new Point(point2.x, point2.y),
+					point3: point3,
+					color: color,
+					delay: delay,
+					dir: dir,
+					alpha: 0,
+					phase: 0
+				});
+				point1.copy(point2);
+				point2.copy(point3);
+				delay += 4;
+				color += this._options.colorCycleSpeed
+			}
+			this._ribbons.push(ribbon)
+		},
+		_drawRibbonSection: function(section) {
+			if (section) {
+				if (section.phase >= 1 && section.alpha <= 0) {
+					return true
+				}
+				if (section.delay <= 0) {
+					section.phase += 0.02;
+					section.alpha = Math.sin(section.phase) * 1;
+					section.alpha = section.alpha <= 0 ? 0 : section.alpha;
+					section.alpha = section.alpha >= 1 ? 1 : section.alpha;
+					if (this._options.animateSections) {
+						var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1;
+						if (section.dir === "right") {
+							section.point1.add(mod, 0);
+							section.point2.add(mod, 0);
+							section.point3.add(mod, 0)
+						} else {
+							section.point1.subtract(mod, 0);
+							section.point2.subtract(mod, 0);
+							section.point3.subtract(mod, 0)
+						}
+						section.point1.add(0, mod);
+						section.point2.add(0, mod);
+						section.point3.add(0, mod)
+					}
+				} else {
+					section.delay -= 0.5
+				}
+				var s = this._options.colorSaturation,
+					l = this._options.colorBrightness,
+					c = "hsla(" + section.color + ", " + s + ", " + l + ", " + section.alpha + " )";
+				this._context.save();
+				if (this._options.parallaxAmount !== 0) {
+					this._context.translate(0, this._scroll * this._options.parallaxAmount)
+				}
+				this._context.beginPath();
+				this._context.moveTo(section.point1.x, section.point1.y);
+				this._context.lineTo(section.point2.x, section.point2.y);
+				this._context.lineTo(section.point3.x, section.point3.y);
+				this._context.fillStyle = c;
+				this._context.fill();
+				if (this._options.strokeSize > 0) {
+					this._context.lineWidth = this._options.strokeSize;
+					this._context.strokeStyle = c;
+					this._context.lineCap = "round";
+					this._context.stroke()
+				}
+				this._context.restore()
+			}
+			return false
+		},
+		_onDraw: function() {
+			for (var i = 0, t = this._ribbons.length; i < t; ++i) {
+				if (!this._ribbons[i]) {
+					this._ribbons.splice(i, 1)
+				}
+			}
+			this._context.clearRect(0, 0, this._width, this._height);
+			for (var a = 0; a < this._ribbons.length; ++a) {
+				var ribbon = this._ribbons[a],
+					numSections = ribbon.length,
+					numDone = 0;
+				for (var b = 0; b < numSections; ++b) {
+					if (this._drawRibbonSection(ribbon[b])) {
+						numDone++
+					}
+				}
+				if (numDone >= numSections) {
+					this._ribbons[a] = null
+				}
+			}
+			if (this._ribbons.length < this._options.ribbonCount) {
+				this.addRibbon()
+			}
+			requestAnimationFrame(this._onDraw)
+		},
+		_onResize: function(e) {
+			var screen = screenInfo(e);
+			this._width = screen.width;
+			this._height = screen.height;
+			if (this._canvas) {
+				this._canvas.width = this._width;
+				this._canvas.height = this._height;
+				if (this._context) {
+					this._context.globalAlpha = this._options.colorAlpha
+				}
+			}
+		},
+		_onScroll: function(e) {
+			var screen = screenInfo(e);
+			this._scroll = screen.scrolly
+		}
+	};
+	return Factory
+});
+new Ribbons({
+	colorSaturation: "60%",
+	colorBrightness: "50%",
+	colorAlpha: 0.5,
+	colorCycleSpeed: 5,
+	verticalPosition: "random",
+	horizontalSpeed: 200,
+	ribbonCount: 3,
+	strokeSize: 0,
+	parallaxAmount: -0.2,
+	animateSections: true
+});