first commit

2019-12-03 19:37:44 +08:00 · 2019-12-03 19:37:44 +08:00 · f396a42774
commit f396a42774
105 changed files with 19372 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -0,0 +1,219 @@
+# Ayer
+
+> :desert_island: Ayer is a clean and elegant theme for Hexo, also responsive. If you have any queries or advice during the process of using, Please contact me! My email: shenyu@hotmail.com
+
+
+### [Preview](https://shen-yu.gitee.io)
+
+### [中文说明](https://shen-yu.gitee.io/2019/ayer/)
+
+![Screenshot](screenshots/hexo-theme-ayer.png)
+
+### Install
+
+``` bash
+$ git clone https://github.com/Shen-Yu/hexo-theme-ayer.git themes/ayer
+```
+
+### Enable
+
+Modify `theme` setting in `_config.yml` to `ayer`
+
+``` yml
+theme: ayer
+```
+
+### Update
+
+``` bash
+cd themes/ayer
+git pull
+```
+
+### Configuration
+
+let me know if you can’t find something.
+
+``` yml
+# Menu-侧边栏菜单
+menu:
+  Home: /
+  Archives: /archives
+  Gallery: http://shenyu-vip.lofter.com
+  Travel: /tags/旅行/
+  About: /2019/about
+
+# 网站图标和侧边栏logo
+favicon: /favicon.ico
+logo: /images/ayer-side.svg
+
+# 封面配置
+# enable-是否启用封面；path-封面背景图；logo-封面logo
+cover:
+  enable: true
+  path: /images/cover1.jpg  # images目录下附送多张美图，可更换
+  logo: /images/ayer.svg
+
+# 页面顶部进度条  
+progressBar: ture
+
+# 文章配置
+# 文章太长，截断按钮文字(在需要截断的行增加此标记：<!--more-->)
+excerpt_link: Read More...
+# 文章分享文字
+share_text: Share
+# 搜索文字
+search_text: Search
+# 分页文字
+nav_text:
+  page_prev: Prev page
+  page_next: Next page
+  post_prev: Newer posts
+  post_next: Older posts
+
+# 文章页是否显示目录
+toc: true
+
+# 是否启用搜索
+search: true
+
+# RSS订阅(先安装hexo-generator-feed插件，再去博客根目录config进行配置)
+rss: /atom.xml
+
+# 评论：1、Valine(推荐)；2、Gitalk
+
+# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
+# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
+leancloud:  
+  enable: true
+  app_id: #
+  app_key: #
+# Valine配置
+valine:
+  enable: true # 是否启用
+  avatar: mp # 头像样式(https://valine.js.org/avatar.html)
+  placeholder: 给我的文章加点评论吧~ # placeholder
+
+# 2、Gitalk(https://github.com/gitalk/gitalk)
+gitalk:
+  enable: false # true
+  clientID: # GitHub Application Client ID
+  clientSecret: # Client Secret
+  repo: # Repository name
+  owner: # GitHub ID
+  admin: # GitHub ID
+
+# fancybox(仅用于相册展示，若需要可配置albums)
+fancybox: true
+
+# 访问量统计(不蒜子)
+busuanzi:
+  enable: true
+
+# 友盟cnzz统计(url填js代码src链接)
+cnzz:
+  enable: true
+  url: #
+
+# 数学公式
+mathjax: true
+
+# 网站成立年份(默认为 2019，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
+since: 2019
+
+#是否显示页脚信息(建议保留，有助于本主题的推广)
+pageFooter: true
+```
+
+### Plugins
+
+ [hexo-generator-search](https://github.com/wzpan/hexo-generator-search) Local search
+	
+  ```yml
+  $ npm install hexo-generator-searchdb --save
+  ```
+  Then add the plugin configuration for hexo's configuration file `_config.yml` (note: not the theme's configuration file):
+  
+  ```yml
+  # Hexo-generator-search
+  search:
+    path: search.xml
+    field: post
+    format: html
+  ```
+
+ [hexo-generate-feed](https://github.com/hexojs/hexo-generator-feed) RSS
+
+  ```yml
+  $ npm install hexo-generator-feed --save
+  ```
+  
+  Then add the plugin configuration for hexo's configuration file `_config.yml` (note: not the theme's configuration file):
+  
+  ```yml
+  feed:
+      type: atom
+      path: atom.xml
+      limit: 20
+      hub:
+      content:
+      content_limit: 140
+      content_limit_delim: ' '
+      order_by: -date	
+  ```
+  
+ [hexo-generator-index-pin-top](https://github.com/netcan/hexo-generator-index-pin-top)
+	
+	``` bash
+  $ npm uninstall hexo-generator-index --save
+  $ npm install hexo-generator-index-pin-top --save
+  ```
+
+### Post poster
+
+``` md
+---
+title: Post name
+
+photos: [
+        ["img_url"],
+        ["img_url"]
+        ]
+---
+```
+
+### Gallery
+Need to write in the head of the markdown, this is not a good way to write, I hope to get a better way to write on github.
+
+``` md
+---
+title: Gallery
+
+albums: [
+        ["img_url","img_caption"],
+        ["img_url","img_caption"]
+        ]
+---
+```
+
+### Toc
+
+Use Tocbot to parse the title tags (h1~h6) in the content and insert the directory. 
+
+ ayer/_config.yml
+
+	``` bash
+	# Toc
+  toc: true
+	```
+ If Toc is turned on in ayer/_config.yml, then Tocbot will generate a Toc article directory in the title tag of each blog parsing content, but not all blogs require Toc, so in the Front-matter section of markdown Can be closed:
+
+	``` md
+	---
+  toc: false
+  ---
+	```
+
+---
+
+<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">Ayer</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="https://github.com/Shen-Yu/hexo-theme-ayer" property="cc:attributionName" rel="cc:attributionURL">Eric-Shen</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
--- a/_config.yml
+++ b/_config.yml
@ -0,0 +1,88 @@
+# 侧边栏菜单
+menu:
+  Home: /
+  Archives: /archives
+  Gallery: http://shenyu-vip.lofter.com
+  Travel: /tags/旅行/
+  About: /2019/about
+
+# 网站图标和侧边栏logo
+favicon: /favicon.ico
+logo: /images/ayer-side.svg
+
+# 封面配置
+# enable-是否启用封面；path-封面背景图；logo-封面logo
+cover:
+  enable: true
+  path: /images/cover1.jpg  # images目录下附送多张美图，可更换
+  logo: /images/ayer.svg
+
+# 页面顶部进度条  
+progressBar: ture
+
+# 文章配置
+# 文章太长，截断按钮文字(在需要截断的行增加此标记：<!--more-->)
+excerpt_link: Read More...
+# 文章分享文字
+share_text: Share
+# 搜索文字
+search_text: Search
+# 分页文字
+nav_text:
+  page_prev: Prev page
+  page_next: Next page
+  post_prev: Newer posts
+  post_next: Older posts
+
+# 文章页是否显示目录
+toc: true
+
+# 是否启用搜索
+search: true
+
+# RSS订阅(先安装hexo-generator-feed插件，再去博客根目录config进行配置)
+rss: /atom.xml
+
+# 评论：1、Valine(推荐)；2、Gitalk
+
+# 1、Valine[一款快速、简洁且高效的无后端评论系统](https://github.com/xCss/Valine)
+# 启用Valine必须先创建leancloud应用， 获取 id|key 填入即可
+leancloud:  
+  enable: true
+  app_id: chaSYi8FMdJBwzIBpxeNjqWC-gzGzoHsz
+  app_key: PqqkLYgPkHvH1BmyQqySWnSK
+# Valine配置
+valine:
+  enable: true # 是否启用
+  avatar: mp # 头像样式(https://valine.js.org/avatar.html)
+  placeholder: 给我的文章加点评论吧~ # placeholder
+
+# 2、Gitalk(https://github.com/gitalk/gitalk)
+gitalk:
+  enable: false # true
+  clientID: # GitHub Application Client ID
+  clientSecret: # Client Secret
+  repo: # Repository name
+  owner: # GitHub ID
+  admin: # GitHub ID
+
+# fancybox(仅用于相册展示，若需要可配置albums)
+fancybox: true
+
+# 访问量统计(不蒜子)
+busuanzi:
+  enable: true
+
+# 友盟cnzz统计(url填js代码src链接)
+cnzz:
+  enable: true
+  url: https://s9.cnzz.com/z_stat.php?id=1278069914&web_id=1278069914
+
+# 数学公式
+mathjax: true
+
+# 网站成立年份(默认为 2019，若填入年份小于当前年份，则显示为 2018-2019 类似的格式)
+since: 2015
+
+#是否显示页脚信息(建议保留，有助于本主题的推广)
+pageFooter: true
--- a/languages/de.yml
+++ b/languages/de.yml
@ -0,0 +1,19 @@
+categories: Kategorien
+search: Suche
+tags: Tags
+tagcloud: Tag Cloud
+tweets: Tweets
+prev: zurück
+next: weiter
+comment: Kommentare
+archive_a: Archiv
+archive_b: "Archive: %s"
+page: Seite %d
+recent_posts: letzter Beitrag
+newer: Neuer
+older: Älter
+share: Teilen
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Kategorie
+tag: Tag
--- a/languages/default.yml
+++ b/languages/default.yml
@ -0,0 +1,19 @@
+categories: Categories
+search: Search
+tags: Tags
+tagcloud: Tag Cloud
+tweets: Tweets
+prev: Prev
+next: Next
+comment: Comments
+archive_a: Archives
+archive_b: "Archives: %s"
+page: Page %d
+recent_posts: Recent Posts
+newer: Newer
+older: Older
+share: Share
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Category
+tag: Tag
--- a/languages/es.yml
+++ b/languages/es.yml
@ -0,0 +1,19 @@
+categories: Categorías
+search: Buscar
+tags: Tags
+tagcloud: Nube de Tags
+tweets: Tweets
+prev: Previo
+next: Siguiente
+comment: Comentarios
+archive_a: Archivos
+archive_b: "Archivos: %s"
+page: Página %d
+recent_posts: Posts recientes
+newer: Nuevo
+older: Viejo
+share: Compartir
+powered_by: Construido por
+rss_feed: RSS
+category: Categoría
+tag: Tag
--- a/languages/fr.yml
+++ b/languages/fr.yml
@ -0,0 +1,19 @@
+categories: Catégories
+search: Rechercher
+tags: Mot-clés
+tagcloud: Nuage de mot-clés
+tweets: Tweets
+prev: Précédent
+next: Suivant
+comment: Commentaires
+archive_a: Archives
+archive_b: "Archives: %s"
+page: Page %d
+recent_posts: Articles récents
+newer: Récent
+older: Ancien
+share: Partager
+powered_by: Propulsé par
+rss_feed: Flux RSS
+category: Catégorie
+tag: Mot-clé
--- a/languages/ja.yml
+++ b/languages/ja.yml
@ -0,0 +1,19 @@
+categories: カテゴリ
+search: 検索
+tags: タグ
+tagcloud: タグクラウド
+tweets: ツイート
+prev: 戻る
+next: 次へ
+comment: コメント
+archive_a: アーカイブ
+archive_b: "アーカイブ: %s"
+page: ページ %d
+recent_posts: 最近の投稿
+newer: 次の記事
+older: 前の記事
+share: 共有
+powered_by: Powered by
+rss_feed: RSSフィード
+category: カテゴリ
+tag: タグ
--- a/languages/ko.yml
+++ b/languages/ko.yml
@ -0,0 +1,19 @@
+categories: 카테고리
+search: 검색
+tags: 태그
+tagcloud: 태그 클라우드
+tweets: 트윗
+prev: 이전
+next: 다음
+comment: 댓글
+archive_a: 아카이브
+archive_b: "아카이브: %s"
+page: 페이지 %d
+recent_posts: 최근 포스트
+newer: 최신
+older: 이전
+share: 공유
+powered_by: Powered by
+rss_feed: RSS Feed
+category: 카테고리
+tag: 태그
--- a/languages/nl.yml
+++ b/languages/nl.yml
@ -0,0 +1,20 @@
+
+categories: Categorieën
+search: Zoeken
+tags: Labels
+tagcloud: Tag Cloud
+tweets: Tweets
+prev: Vorige
+next: Volgende
+comment: Commentaren
+archive_a: Archieven
+archive_b: "Archieven: %s"
+page: Pagina %d
+recent_posts: Recente berichten
+newer: Nieuwer
+older: Ouder
+share: Delen
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Categorie
+tag: Label
--- a/languages/no.yml
+++ b/languages/no.yml
@ -0,0 +1,19 @@
+categories: Kategorier
+search: Søk
+tags: Tags
+tagcloud: Tag Cloud
+tweets: Tweets
+prev: Forrige
+next: Neste
+comment: Kommentarer
+archive_a: Arkiv
+archive_b: "Arkiv: %s"
+page: Side %d
+recent_posts: Siste innlegg
+newer: Newer
+older: Older
+share: Share
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Category
+tag: Tag
--- a/languages/pt.yml
+++ b/languages/pt.yml
@ -0,0 +1,19 @@
+categories: Categorias
+search: Buscar
+tags: Tags
+tagcloud: Nuvem de Tags
+tweets: Tweets
+prev: Anterior
+next: Próximo
+comment: Comentários
+archive_a: Arquivos
+archive_b: "Arquivos: %s"
+page: Página %d
+recent_posts: Postagens Recentes
+newer: Mais Recente
+older: Mais Antigo
+share: Compartilhar
+powered_by: Desenvolvido por
+rss_feed: Feed RSS
+category: Categoria
+tag: Tag
--- a/languages/ru.yml
+++ b/languages/ru.yml
@ -0,0 +1,19 @@
+categories: Категории
+search: Поиск
+tags: Метки
+tagcloud: Облако меток
+tweets: Твиты
+prev: Назад
+next: Вперед
+comment: Комментарии
+archive_a: Архив
+archive_b: "Архив: %s"
+page: Страница %d
+recent_posts: Недавние записи
+newer: Следующий
+older: Предыдущий
+share: Поделиться
+powered_by: Создано с помощью
+rss_feed: RSS-каналы
+category: Категория
+tag: Метка
--- a/languages/zh-CN.yml
+++ b/languages/zh-CN.yml
@ -0,0 +1,19 @@
+categories: 分类
+search: 搜索
+tags: 标签
+tagcloud: 标签云
+tweets: 推文
+prev: 上一页
+next: 下一页
+comment: 留言
+archive_a: 归档
+archive_b: 归档：%s
+page: 第 %d 页
+recent_posts: 最新文章
+newer: Newer
+older: Older
+share: 分享
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Category
+tag: Tag
--- a/languages/zh-TW.yml
+++ b/languages/zh-TW.yml
@ -0,0 +1,19 @@
+categories: 分類
+search: 搜尋
+tags: 標籤
+tagcloud: 標籤雲
+tweets: 推文
+prev: 上一頁
+next: 下一頁
+comment: 留言
+archive_a: 彙整
+archive_b: 彙整：%s
+page: 第 %d 頁
+recent_posts: 最新文章
+newer: Newer
+older: Older
+share: Share
+powered_by: Powered by
+rss_feed: RSS Feed
+category: Category
+tag: Tag
--- a/layout/_partial/after-footer.ejs
+++ b/layout/_partial/after-footer.ejs
@ -0,0 +1,36 @@
+<%- js('/js/jquery-2.0.3.min') %>
+<%- js('/js/jquery.justifiedGallery.min') %>
+<%- js('/js/lazyload.min') %>
+<%- js('/js/busuanzi-2.3.pure.min') %>
+<% if (theme.fancybox){ %>
+  <%- js('fancybox/jquery.fancybox.min') %>
+<% } %>
+
+<% if (theme.toc && is_post()){ %>
+  <%- js('/js/tocbot.min') %>
+  <script>
+    // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
+    tocbot.init({
+      tocSelector: '.tocbot',
+      contentSelector: '.article-entry',
+      headingSelector: 'h1, h2, h3, h4, h5, h6',
+      hasInnerContainers: true,
+      scrollSmooth: true,
+      positionFixedSelector: '.tocbot',
+      positionFixedClass: 'is-position-fixed',
+      fixedSidebarOffset: 'auto',
+    });
+  </script>
+<% } %>
+
+<script>
+  var ayerConfig = {
+    mathjax: <%=theme.mathjax %>
+  }
+</script>
+
+<%- js('js/ayer') %>
+
+<% if (theme.mathjax){ %>
+  <%- partial('mathjax') %>
+<% } %>
--- a/layout/_partial/archive-post.ejs
+++ b/layout/_partial/archive-post.ejs
@ -0,0 +1,14 @@
+<article class="archive-article archive-type-<%= post.layout %>">
+  <div class="archive-article-inner">
+    <header class="archive-article-header">
+      <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MM/DD'}) %>
+      <%- partial('post/title', {class_name: 'archive-article-title'}) %>
+    </header>
+    <% if(page.category){ %>
+      <%- partial('post/category') %>
+    <% } %>
+    <% if(page.tag){ %>
+      <%- partial('post/tag') %>
+    <% } %>
+  </div>
+</article>
--- a/layout/_partial/archive.ejs
+++ b/layout/_partial/archive.ejs
@ -0,0 +1,55 @@
+<section class="outer">
+  <article class="articles">
+    <%
+    var title = '';
+    if (page.category) title = page.category;
+    if (page.tag) title = "#" + "&nbsp" + page.tag;
+    if (page.archive) {
+      if (page.year) title = page.year + (page.month ? '/' + page.month : '');
+      else title = __('archive_a');
+    }
+    %>
+    <h1 class="page-type-title"><%- title %></h1>
+
+    <% if (pagination == 2){ %>
+    <% page.posts.each(function(post){ %>
+    <%- partial('article', {post: post, index: true}) %>
+    <% }) %>
+  </article>
+  <% } else { %>
+  <% var last; %>
+  <% page.posts.each(function(post, i){ %>
+  <% var year = post.date.year(); %>
+  <% if (last != year){ %>
+  <% if (last != null){ %>
+  </div>
+  </div>
+  <% } %>
+  <% last = year; %>
+  <div class="archives-wrap">
+    <div class="archive-year-wrap">
+      <a href="<%- url_for(config.archive_dir + '/' + year) %>" class="archive-year"><%= year %></a>
+    </div>
+    <div class="archives">
+      <% } %>
+      <%- partial('archive-post', {post: post, even: i % 2 == 0}) %>
+      <% }) %>
+      <% if (page.posts.length){ %>
+    </div>
+  </div>
+  <% } %>
+  <% } %>
+
+  <% if (page.total > 1){ %>
+  <nav class="page-nav">
+    <%
+        var prev_text = theme.nav_text.page_prev;
+        var next_text = theme.nav_text.page_next
+      %>
+    <%- paginator({
+        prev_text: prev_text,
+        next_text: next_text
+      }) %>
+  </nav>
+  <% } %>
+</section>
--- a/layout/_partial/article.ejs
+++ b/layout/_partial/article.ejs
@ -0,0 +1,58 @@
+<article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %>" itemscope
+  itemprop="blogPost" data-scroll-reveal>
+
+  <div class="article-inner">
+    <% if (post.link || post.title){ %>
+    <header class="article-header">
+      <%- partial('post/title', {class_name: 'article-title'}) %>
+    </header>
+    <% } %>
+
+    <% if (index || is_post()) { %>
+    <div class="article-meta">
+      <%- partial('post/date', {class_name: 'article-date', date_format: null}) %>
+      <%- partial('post/category') %>
+    </div>
+    <% } %>
+
+    <% if (theme.toc && is_post()){ %>
+    <%- partial('post/tocbot') %>
+    <% } %>
+
+    <div class="article-entry" itemprop="articleBody">
+      <%- partial('post/justifiedGallery') %>
+      <%- partial('post/gallery') %>
+      <% if (post.excerpt && index){ %>
+      <%- post.excerpt %>
+      <% if (theme.excerpt_link){ %>
+      <a class="article-more-link" href="<%- url_for(post.path) %>"><%= theme.excerpt_link %></a>
+      <% } %>
+      <% } else { %>
+      <%- post.content %>
+      <% } %>
+    </div>
+    <footer class="article-footer">
+      <a data-url="<%- post.permalink %>" data-id="<%= post._id %>"
+        class="article-share-link"><%- theme.share_text %></a>
+      <%- partial('post/tag') %>
+    </footer>
+
+  </div>
+
+  <% if (!index){ %>
+  <%- partial('post/nav') %>
+  <% } %>
+
+  <% if (theme.valine && theme.valine.enable){ %>
+  <%- partial('post/valine', {
+            key: post.slug,
+            title: post.title,
+            url: config.url+url_for(post.path)
+          }) %>
+  <% } %>
+
+  <% if (is_post()) { %>
+  <%- partial('post/gitalk') %>
+  <%} %>
+
+</article>
--- a/layout/_partial/ayer.ejs
+++ b/layout/_partial/ayer.ejs
@ -0,0 +1,23 @@
+<% if (theme.cover.enable) { %>
+<section class="cover">
+  <div class="cover-frame">
+    <div class="bg-box">
+      <img src="<%- theme.cover.path %>" alt="image frame" />
+    </div>
+    <div class="cover-inner text-center text-white">
+      <h1><a href="<%- url_for() %>"><%= config.title %></a></h1>
+      <h2><%= config.subtitle %></h2>
+      <div>
+        <img
+          src="<%- theme.cover.logo %>"
+          class="cover-logo"
+          alt="<%= config.title %>"
+        />
+      </div>
+    </div>
+  </div>
+  <div class="cover-learn-more">
+    <a href="#main" class="anchor"><i class="ri-arrow-down-line"></i></a>
+  </div>
+</section>
+<% } %>
--- a/layout/_partial/footer.ejs
+++ b/layout/_partial/footer.ejs
@ -0,0 +1,32 @@
+<footer class="footer">
+  <div class="outer">
+    <ul class="list-inline">
+      <li>
+        &copy;
+        <% if (theme.since && !isNaN(theme.since) && theme.since < date(new Date(), 'YYYY')) { %><%- theme.since%>-<% } %><%= date(new Date(), 'YYYY') %>
+        <%= config.author || config.title %>
+      </li>
+      <li>
+        <% if (theme.pageFooter){ %>
+        <% var hexoLink = '<a href="https://hexo.io" target="_blank">Hexo</a>'; %>
+        <% var themeLink = '<a href="https://hexo.io" target="_blank">Ayer</a>'; %>
+        <%- hexoLink %> Theme <%- themeLink %> by shenyu
+        <% } %>
+      </li>
+    </ul>
+    <ul class="list-inline">
+      <li>
+        <% if (theme.busuanzi && theme.busuanzi.enable){ %>
+        <%# "不蒜子统计" %>
+        <%- partial('post/busuanzi') %>
+        <% } %>
+      </li>
+      <li>
+        <!-- cnzz统计 -->
+        <% if (theme.cnzz&&theme.cnzz.enable){ %>
+        <script type="text/javascript" src='<%= theme.cnzz.url%>'></script>
+        <% } %>
+      </li>
+    </ul>
+  </div>
+</footer>
--- a/layout/_partial/head.ejs
+++ b/layout/_partial/head.ejs
@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <% var title = page.title; if (is_archive()) { title = __('archive_a'); if
+    (is_month()) { title += ': ' + page.year + '/' + page.month; } else if
+    (is_year()) { title += ': ' + page.year; } } else if (is_category()) { title
+    = __('categories.ejs') + ': ' + page.categories; } else if (is_tag()) {
+    title = __('tag') + ': ' + page.tag; } %> <% if (page.keywords){ %>
+    <meta
+      name="keywords"
+      content="<%= page.keywords %>,<%= config.keywords %>"
+    />
+    <% } else if (config.keywords){ %>
+    <meta name="keywords" content="<%= config.keywords %>" />
+    <% } %> <% if (page.description){ %>
+    <meta name="description" content="<%= page.description %>" />
+    <% } else if (config.description){ %>
+    <meta name="description" content="<%= config.description %>" />
+    <% } %>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
+    <title>
+      <% if (title){ %><%= title %> | <% } %> <%= config.title %>
+    </title>
+    <% if (theme.favicon){ %>
+    <link rel="shortcut icon" href="<%- theme.favicon %>" />
+    <% } %>
+    <%- css('css/style') %> <% if (theme.fancybox){ %> <%-
+    css('fancybox/jquery.fancybox.min') %> <% } %> <%- js('/js/pace.min.js') %>
+  </head>
+</html>
--- a/layout/_partial/mathjax.ejs
+++ b/layout/_partial/mathjax.ejs
@ -0,0 +1,18 @@
+<script type="text/x-mathjax-config">
+  MathJax.Hub.Config({
+      tex2jax: {
+          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
+          processEscapes: true,
+          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+      }
+  });
+
+  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>
+
+<script src="https://cdn.bootcss.com/mathjax/2.7.6/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
--- a/layout/_partial/post/albums.ejs
+++ b/layout/_partial/post/albums.ejs
@ -0,0 +1,18 @@
+<% if (post.albums && post.albums.length){ %>
+  <div class="article-albums">
+    <ul class="article-albums-photos" id="basicExample">
+      <% post.albums.forEach(function(photo){ %>
+
+        <li class="article-albums-item" data-scroll-reveal>
+          <a class="article-albums-img fancybox" data-fancybox="images" data-caption="<%- photo[1] %>" href="<%- url_for(photo[0]) %>" rel="gallery_<%= post._id %>" title="<%- photo[1] %>">
+            <img class="lazy" data-original="<%- url_for(photo[0]) %>" itemprop="image" alt="<%- photo[1] %>">
+          </a>
+          <% if (photo && photo.length > 1){ %>
+            <span class="article-albums-caption"> <%- photo[1] %> </span>
+          <% } %>
+        </li>
+
+      <% }) %>
+    </ul>
+  </div>
+<% } %>
--- a/layout/_partial/post/busuanzi.ejs
+++ b/layout/_partial/post/busuanzi.ejs
@ -0,0 +1,9 @@
+<ul class="list-inline">
+  <% if (is_home()) { %>
+  <li>PV:<span id="busuanzi_value_site_pv"></span></li>
+  <%} %>
+  <li>UV:<span id="busuanzi_value_site_uv"></span></li>
+  <% if (is_post()) { %>
+  <li>PV:<span id="busuanzi_value_page_pv"></span></li>
+  <%} %>
+</ul>
--- a/layout/_partial/post/category.ejs
+++ b/layout/_partial/post/category.ejs
@ -0,0 +1,10 @@
+<% if (post.categories && post.categories.length){ %>
+  <div class="article-category">
+    <%- list_categories(post.categories, {
+      show_count: false,
+      class: 'article-category',
+      style: 'none',
+      separator: ' / '
+    }) %>
+  </div>
+<% } %>
--- a/layout/_partial/post/date.ejs
+++ b/layout/_partial/post/date.ejs
@ -0,0 +1,3 @@
+<a href="<%- url_for(post.path) %>" class="<%= class_name %>">
+  <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished"><%= date(post.date, date_format) %></time>
+</a>
--- a/layout/_partial/post/gallery.ejs
+++ b/layout/_partial/post/gallery.ejs
@ -0,0 +1,15 @@
+<% if (post.photos && post.photos.length){ %>
+  <div class="article-gallery">
+    <div class="article-gallery-photos">
+      <% post.photos.forEach(function(photo, i){ %>
+        <% if (index){ %>
+          <a class="article-gallery-img" href="<%- url_for(post.path) %>" rel="gallery_<%= post._id %>">
+            <img src="<%- url_for(photo) %>" itemprop="image">
+          </a>
+        <% } else { %>
+          <img src="<%- url_for(photo) %>" itemprop="image">
+        <% } %>
+      <% }) %>
+    </div>
+  </div>
+<% } %>
--- a/layout/_partial/post/gitalk.ejs
+++ b/layout/_partial/post/gitalk.ejs
@ -0,0 +1,21 @@
+<% if (theme.gitalk.enable) { %>
+  <div class="gitalk" id="gitalk-container"></div>
+  <%- css('https://unpkg.com/gitalk/dist/gitalk.css') %>
+  <%- js('https://unpkg.com/gitalk/dist/gitalk.min.js') %>
+  <%- js('https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js') %>
+  <script type="text/javascript">
+    var gitalk = new Gitalk({
+      clientID: '<%- theme.gitalk.clientID %>',
+      clientSecret: '<%- theme.gitalk.clientSecret %>',
+      repo: '<%- theme.gitalk.repo %>',
+      owner: '<%- theme.gitalk.owner %>',
+      admin: ['<%- theme.gitalk.admin %>'],
+      // id: location.pathname,      // Ensure uniqueness and length less than 50
+      id: md5(location.pathname),
+      distractionFreeMode: false,  // Facebook-like distraction free mode
+      pagerDirection: 'last'
+    })
+
+  gitalk.render('gitalk-container')
+  </script>
+<% } %>
--- a/layout/_partial/post/justifiedGallery.ejs
+++ b/layout/_partial/post/justifiedGallery.ejs
@ -0,0 +1,12 @@
+<% if (post.albums && post.albums.length){ %>
+  <div class="justified-gallery" id="gallery">
+  <% post.albums.forEach(function(photo){ %>
+      <div>
+        <a class="fancybox" data-fancybox="images" data-caption="<%- photo[1] %>" href="<%- url_for(photo[0]) %>" rel="gallery_<%= post._id %>" title="<%- photo[1] %>">
+          <img src="<%- url_for(photo[0]) %>" itemprop="image" alt="<%- photo[1] %>">
+        </a>
+      </div>
+  <% }) %>
+  </div>
+<% } %>
+
--- a/layout/_partial/post/nav.ejs
+++ b/layout/_partial/post/nav.ejs
@ -0,0 +1,22 @@
+<% if (post.prev || post.next){ %>
+  <nav class="article-nav">
+    <% if (post.prev){ %>
+      <a href="<%- url_for(post.prev.path) %>" class="article-nav-link">
+        <strong class="article-nav-caption"><%- theme.nav_text.post_prev %></strong>
+        <div class="article-nav-title">
+          <% if (post.prev.title){ %>
+            <%= post.prev.title %>
+          <% } else { %>
+            (no title)
+          <% } %>
+        </div>
+      </a>
+    <% } %>
+    <% if (post.next){ %>
+      <a href="<%- url_for(post.next.path) %>" class="article-nav-link">
+        <strong class="article-nav-caption"><%- theme.nav_text.post_next %></strong>
+        <div class="article-nav-title"><%= post.next.title %></div>
+      </a>
+    <% } %>
+  </nav>
+<% } %>
--- a/layout/_partial/post/search.ejs
+++ b/layout/_partial/post/search.ejs
@ -0,0 +1,4 @@
+<div class="local-search local-search-plugin">
+  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
+  <div id="local-search-result" class="local-search-result"></div>
+</div>
--- a/layout/_partial/post/tag.ejs
+++ b/layout/_partial/post/tag.ejs
@ -0,0 +1,6 @@
+<% if (post.tags && post.tags.length){ %>
+  <%- list_tags(post.tags, {
+    show_count: false,
+    class: 'article-tag'
+  }) %>
+<% } %>
--- a/layout/_partial/post/title.ejs
+++ b/layout/_partial/post/title.ejs
@ -0,0 +1,17 @@
+<% if (post.link){ %>
+<h2 itemprop="name">
+  <a class="<%= class_name %>" href="<%- url_for(post.link) %>" itemprop="url"
+    ><%= post.title %></a
+  >
+</h2>
+<% } else if (post.title){ %> <% if (index){ %>
+<h2 itemprop="name">
+  <a class="<%= class_name %>" href="<%- url_for(post.path) %>"
+    ><%= post.title %></a
+  >
+</h2>
+<% } else { %>
+<h1 class="<%= class_name %> sea-center" style="border-left:0" itemprop="name">
+  <%= post.title %>
+</h1>
+<% } %> <%- partial('topping') %> <% } %>
--- a/layout/_partial/post/tocbot.ejs
+++ b/layout/_partial/post/tocbot.ejs
@ -0,0 +1,6 @@
+<% if (post.toc != false && toc(page.content).length!==0){ %>
+    <div class="tocbot"></div>
+<% } %>
+
+
+
--- a/layout/_partial/post/topping.ejs
+++ b/layout/_partial/post/topping.ejs
@ -0,0 +1,5 @@
+<% if (is_home() && post.top) { %>
+<div class="article-topping">
+  <i class="ri-umbrella-line"></i>
+</div>
+<% } %>
--- a/layout/_partial/post/valine.ejs
+++ b/layout/_partial/post/valine.ejs
@ -0,0 +1,51 @@
+<% if (!index && theme.leancloud && theme.leancloud.enable){ %>
+<!-- valine评论 -->
+<div id="vcomments-box">
+    <div id="vcomments">
+    </div>
+</div>
+<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
+<script src='//unpkg.com/valine@1.3.10/dist/Valine.min.js'></script>
+<script>
+    new Valine({
+        el: '#vcomments',
+        notify: false,
+        verify: false,
+        app_id: '<%- theme.leancloud.app_id %>',
+        app_key: '<%- theme.leancloud.app_key %>',
+        path: window.location.pathname,
+        avatar: '<%- theme.valine.avatar %>',
+        placeholder: '<%- theme.valine.placeholder %>',
+        recordIP: true
+    });
+    const infoEle = document.querySelector('#vcomments .info');
+    if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
+        infoEle.childNodes.forEach(function (item) {
+            item.parentNode.removeChild(item);
+        });
+    }
+</script>
+<style>
+    #vcomments-box {
+        padding: 5px 30px;
+    }
+
+    @media screen and (max-width: 800px) {
+        #vcomments-box {
+            padding: 5px 0px;
+        }
+    }
+
+    #vcomments-box #vcomments {
+        background-color: #fff;
+    }
+
+    .v .vlist .vcard .vh {
+        padding-right: 20px;
+    }
+
+    .v .vlist .vcard {
+        padding-left: 10px;
+    }
+</style>
+<% } %>
--- a/layout/_partial/sidebar.ejs
+++ b/layout/_partial/sidebar.ejs
@ -0,0 +1,34 @@
+<button class="navbar-toggle"></button>
+<nav class="navbar">
+  <% if (theme.logo){ %>
+  <div class="logo">
+    <a href="<%- url_for() %>"><img src="<%- theme.logo %>" alt="<%= config.title %>"></a>
+  </div>
+  <% } %>
+  <ul class="nav nav-main">
+    <% for (var i in theme.menu){ %>
+    <li class="nav-item">
+      <a class="nav-item-link" href="<%- url_for(theme.menu[i]) %>"><%= i %></a>
+    </li>
+    <% } %>
+  </ul>
+</nav>
+<nav class="navbar navbar-bottom">
+  <ul class="nav">
+    <li class="nav-item">
+      <% if (theme.search){ %>
+      <a class="nav-item-link nav-item-search"  title="<%= __('search') %>">
+        <i class="ri-search-line"></i>
+      </a>
+      <% } %>
+      <% if (theme.rss){ %>
+      <a class="nav-item-link" target="_blank" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>">
+        <i class="ri-rss-line"></i>
+      </a>
+      <% } %>
+    </li>
+  </ul>
+</nav>
+<div class="search-form-wrap">
+  <%- partial('post/search') %>
+</div>
--- a/layout/_partial/totop.ejs
+++ b/layout/_partial/totop.ejs
@ -0,0 +1,3 @@
+<div class="totop" id="totop">
+  <i class="ri-arrow-up-line"></i>
+</div>
--- a/layout/archive.ejs
+++ b/layout/archive.ejs
@ -0,0 +1 @@
+<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>
--- a/layout/categories.ejs
+++ b/layout/categories.ejs
@ -0,0 +1,6 @@
+<section class="outer">
+  <% if (site.categories.length){ %>
+    <h1 class="page-type-title"><%= __('categories') %></h1>
+    <%- list_categories({show_count: theme.show_count}) %>
+  <% } %>
+</section>
--- a/layout/index.ejs
+++ b/layout/index.ejs
@ -0,0 +1,7 @@
+<%- partial('_partial/ayer') %>
+<div id="main">
+  <%- partial('_partial/archive', {pagination: 2, index: true}) %>
+  <div class="to_top">
+    <%- partial('_partial/totop') %>
+  </div>
+</div>
--- a/layout/layout.ejs
+++ b/layout/layout.ejs
@ -0,0 +1,20 @@
+<%- partial('_partial/head') %>
+
+<body>
+  <div id="app">
+    <main class="content">
+      <%- body %>
+      <%- partial('_partial/footer', null, {cache: !config.relative_link}) %>
+    </main>
+    <% if (theme.toc && is_post()){ %>
+    <aside class="sidebar">
+      <% } else { %>
+      <aside class="sidebar">
+        <% } %>
+        <%- partial('_partial/sidebar') %>
+      </aside>
+      <%- partial('_partial/after-footer') %>
+  </div>
+</body>
+
+</html>
--- a/layout/page.ejs
+++ b/layout/page.ejs
@ -0,0 +1,3 @@
+<section class="outer">
+  <%- partial('_partial/article', {post: page, index: false}) %>
+</section>
--- a/layout/post.ejs
+++ b/layout/post.ejs
@ -0,0 +1,3 @@
+<section class="outer">
+  <%- partial('_partial/article', {post: page, index: false}) %>
+</section>
--- a/layout/tags.ejs
+++ b/layout/tags.ejs
@ -0,0 +1,7 @@
+<section class="outer">
+  <% if (site.tags.length){ %>
+    <h1 class="page-type-title"><%= __('tags') %></h1>
+    <%- list_tags({show_count: theme.show_count}) %>
+  <% } %>
+</section>
+
--- a/package.json
+++ b/package.json
@ -0,0 +1,18 @@
+{
+  "name": "ayer",
+  "version": "1.0.0",
+  "description": "ayer 是一个轻量优雅的 Hexo 主题",
+  "main": "index.js",
+  "dependencies": {},
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "ayer",
+    "hexo",
+    "light"
+  ],
+  "author": "shenyu",
+  "license": "ISC"
+}
--- a/screenshots/hexo-theme-ayer.png
+++ b/screenshots/hexo-theme-ayer.png
--- a/source/404.html
+++ b/source/404.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>404</title>
+  <meta name="keywords" content="Hexo,404,Design">
+  <meta name="description" content="Tribute Forrest Gump">
+  <link rel="stylesheet" href="/css/404.css">
+</head>
+<body>
+<div class="notfound">
+  <a class="notfound-link" href="/">
+    <img width="30" src="data:image/svg+xml;base64,PHN2ZyB0PSIxNTYyODQyNjI3NDA5IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgcC1pZD0iNTIxNDgiIHdpZHRoPSI4MDAiIGhlaWdodD0iODAwIj48cGF0aCBkPSJNMTk0LjYgNDc5LjFoNzQ5LjF2NTcuNkgxODYuNEw1MjggODc4LjMgNDg3LjMgOTE5IDEyMSA1NTIuNyA4MC4zIDUxMmw0MDctNDA3IDQwLjcgNDAuN3oiIGZpbGw9IiIgcC1pZD0iNTIxNDkiLz48L3N2Zz4=">
+  </a>
+  <figure class="forrestgump">
+    <figcaption>
+      <h1 style="color: #6b0b0c;">404<br>Not Found!</h1>
+      <h3 style="color: #14206a;">Life was like a box of chocolates, you never know what you're going to get.</h3>
+    </figcaption>
+    <img src="/images/forrestgump.png">
+  </figure>
+</div>
+</body>
+</html>
--- a/source/css/404.styl
+++ b/source/css/404.styl
@ -0,0 +1,40 @@
+@charset "utf-8"
+//
+// 404
+html, body, div, figure, img
+  margin 0
+  padding 0
+
+body
+  font-family "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+
+.notfound
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+figure.forrestgump
+  position relative
+  width 100%
+  img
+    width 100%
+  figcaption
+    float right
+    clear right
+    width 100%
+    padding 0
+    text-align right
+
+@media (min-width: 768.02px)
+  figure.forrestgump
+    width 30rem
+    figcaption
+      width 60%
+      padding 0 2rem
+      
+.notfound-link 
+  position absolute
+  z-index 9
+  margin-top 2rem
+        
--- a/source/css/_extend.styl
+++ b/source/css/_extend.styl
@ -0,0 +1,82 @@
+$block-caption
+  text-decoration none
+  color sea-lighter
+  &:hover
+    color sea-lighter
+
+$block
+  border-radius 4px
+
+$base-style
+  h1, h2, h3, h4, h5, h6
+    margin 1.5rem 0
+  hr
+    height border-width
+    background-color border-color
+    border none
+    padding 0
+    margin 1.5rem 0
+  strong
+    font-weight bold
+  em, cite
+    font-style italic
+  sup, sub
+    font-size 75%
+    line-height 0
+    position relative
+    vertical-align baseline
+  sup
+    top -.5rem
+  sub
+    bottom -.25rem
+  small
+    font-size 85%
+  acronym, abbr
+    border-bottom border-width border-color dotted
+  ul, ol, dl
+    margin 1.5rem 0
+    line-height line-height
+
+  p, table, blockquote
+    margin 1.5rem 0
+
+  img, video
+    max-width 100%
+    height auto
+    display block
+    margin auto
+  iframe
+    border none
+  table
+    width 100%
+    border-collapse collapse
+    vertical-align middle
+    empty-cells show
+    text-align left
+    th, td, &
+      border border-width border-color solid
+    th, td
+      padding 1rem 1.5rem
+    tbody
+      tr:nth-child(2n)
+        background-color rgba(froth, .25)
+
+  blockquote
+    display block
+    padding 0 1.5rem
+    width 100%
+    overflow auto
+    border-left .3rem water solid
+    color sea-lighter
+    > :first-child
+      margin-top 0;
+    > :last-child
+      margin-bottom 0;
+    footer
+      cite
+        &:before
+          content "—"
+          padding 0 .5rem
+
+
+
--- a/source/css/_mixins.styl
+++ b/source/css/_mixins.styl
@ -0,0 +1,59 @@
+clearfix()
+  &::before, &::after
+    content ""
+    display table
+    clear both
+
+hide-text()
+  text-indent: 100%
+  white-space: nowrap
+  overflow: hidden
+
+list-unstyled()
+  list-style none
+  padding-left 0
+  margin-left 0
+
+// Center
+center()
+  top 50%
+  left 50%
+  transform translate(-50%, -50%)
+
+// Horizontal Center
+center-x()
+  left 50%
+  transform translateX(-50%)
+
+// Vertical Center
+center-y()
+  top 50%
+  transform translateY(-50%)
+
+
+border-radius(n)
+  -webkit-border-radius n
+  -moz-border-radius n
+  border-radius n
+
+border-top-radius(n)
+  border-top-left-radius n
+  border-top-right-radius n
+
+border-right-radius(n)
+  border-top-right-radius n
+  border-bottom-right-radius n
+
+border-bottom-radius(n)
+  border-bottom-left-radius n
+  border-bottom-right-radius n
+
+transition(transition)
+  transition transition
+
+rounded-circle(size)
+  width size
+  height size
+  border-radius size / 2
+
+// Media queries
--- a/source/css/_normalize.styl
+++ b/source/css/_normalize.styl
@ -0,0 +1,308 @@
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html
+  line-height 1.15 /* 1 */
+  -webkit-text-size-adjust 100% /* 2 */
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body
+  margin 0
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1
+  font-size 2em
+  margin 0.67em 0
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr
+  box-sizing content-box /* 1 */
+  height 0 /* 1 */
+  overflow visible /* 2 */
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a
+  background-color transparent
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title]
+  border-bottom none /* 1 */
+  text-decoration underline /* 2 */
+  text-decoration underline dotted /* 2 */
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong
+  font-weight bolder
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp
+  font-family monospace, monospace /* 1 */
+  font-size 1em /* 2 */
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small
+  font-size 80%
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup
+  font-size 75%
+  line-height 0
+  position relative
+  vertical-align baseline
+
+sub
+  bottom -0.25em
+
+sup
+  top -0.5em
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img
+  border-style none
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea
+  font-family inherit /* 1 */
+  font-size 100% /* 1 */
+  line-height 1.15 /* 1 */
+  margin 0 /* 2 */
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input /* 1 */
+  overflow visible
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select /* 1 */
+  text-transform none
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"]
+  -webkit-appearance button
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner
+  border-style none
+  padding 0
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]-moz-focusring,
+[type="reset"]-moz-focusring,
+[type="submit"]-moz-focusring
+  outline 1px dotted ButtonText
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset
+  padding 0.35em 0.75em 0.625em
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend
+  box-sizing border-box /* 1 */
+  color inherit /* 2 */
+  display table /* 1 */
+  max-width 100% /* 1 */
+  padding 0 /* 3 */
+  white-space normal /* 1 */
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress
+  vertical-align baseline
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea
+  overflow auto
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"]
+  box-sizing border-box /* 1 */
+  padding 0 /* 2 */
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button
+  height auto
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"]
+  -webkit-appearance textfield /* 1 */
+  outline-offset -2px /* 2 */
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration
+  -webkit-appearance none
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button
+  -webkit-appearance button /* 1 */
+  font inherit /* 2 */
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details
+  display block
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary
+  display list-item
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template
+  display none
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden]
+  display none
--- a/source/css/_partial/albums.styl
+++ b/source/css/_partial/albums.styl
@ -0,0 +1,55 @@
+
+.article-albums
+  position relative
+
+.article-albums-photos
+  position relative
+  display flex
+  flex-wrap wrap
+  list-unstyled()
+  clearfix()
+  &::after
+    content: ''
+    flex-grow 999999999
+  .article-albums-item
+    position relative
+    flex-grow 1
+    margin .5rem
+    overflow hidden
+    img
+      object-fit cover
+      max-width 100%
+      min-width 100%
+      vertical-align: center
+    .article-albums-caption
+      display block
+      width 100%
+      padding 1rem 0
+      text-align center
+
+// Media Query
+@media (min-width: 576px)
+  .article-albums-item
+    img
+      height 32rem
+    .article-albums-caption
+      position absolute
+      bottom 0
+      left 0
+      width 100%
+      background-color rgba(black, .5)
+      background linear-gradient(to top, rgba(black, .5), transparent)
+      color white
+      padding 1rem
+      opacity 0
+      transform translateY(100%)
+      transition(transition-base)
+    &:hover
+      .article-albums-caption
+        opacity 1
+        transform translateY(0)
+
+@media (min-width: 768px)
+  .article-albums-item
+    img
+      height 20rem
--- a/source/css/_partial/apple.styl
+++ b/source/css/_partial/apple.styl
@ -0,0 +1,89 @@
+
+// apple product
+//
+// macbook air
+color-macbook          = white
+color-macbook-darken   = darken(color-macbook, 5%)
+
+//
+// browser
+color-browser-light    = white
+color-browser-btns     =
+        close            #eb6b60
+        minimize         #f4be4f
+        maximize         #66c655
+
+scrolling-wrap-height  = 30rem
+
+//
+// macbook air
+.macbook 
+  position relative
+  .macbook-screen
+    position relative
+    background-color transparent
+    border-style solid
+    border-color color-macbook
+    border-radius 1rem
+    border-width 1.25rem
+    box-shadow 0 1rem 3rem rgba(black, .15), 0 0 .5rem rgba(black, .15) inset
+  
+  .macbook-keyboard
+    display none
+    position relative
+    box-sizing content-box
+    background-color color-macbook
+    border-bottom solid .75rem color-macbook-darken
+    border-bottom-radius(50%)
+    margin -.5rem -5rem 0
+    height .5rem
+    box-shadow 0 .5rem 3rem rgba(0,0,0,.15)
+    &::before 
+      content ''
+      position absolute
+      center-x()
+      background linear-gradient(90deg, color-macbook-darken, color-macbook, color-macbook-darken)
+      box-shadow 0 0 .1rem rgba(0, 0, 0, .05) inset
+      width 20%
+      height .3rem
+      border-radius .125rem
+ 
+
+//
+@media (min-width: 768px)
+  .macbook
+    .macbook-screen
+      border-width 2rem 1.25rem 1.25rem
+    .macbook-keyboard
+      display block
+
+//
+// markdown article
+.macbook-wrap
+  padding 1rem 9rem
+
+//
+// markdown article shwo scrolling page
+@keyframes scrolling-animation
+  0%
+    top 0
+  10%
+    top 0
+    transform translateY(0)
+  30%
+    transform translateY(-35%)
+  60%
+    transform translateY(-75%)
+  90%
+    transform translateY(-100%)
+  100%
+    transform translateY(-100%)
+
+.scrolling-wrap
+  min-height scrolling-wrap-height
+  overflow hidden
+.scrolling
+  position absolute
+  top scrolling-wrap-height
+  width 100%
+  animation scrolling-animation 10s ease-in-out 1s infinite
--- a/source/css/_partial/archive.styl
+++ b/source/css/_partial/archive.styl
@ -0,0 +1,92 @@
+.archives-wrap
+  position relative
+  clearfix()
+  &:first-child
+    margin-top 3rem
+  &:last-child
+    margin-bottom 3rem
+
+.archive-year-wrap
+  position absolute
+  top 0
+  left 0
+  width years-width
+  .archive-year
+    position relative
+    display inline-block
+    @extend $block-caption
+    &::after
+      content ''
+      position absolute
+      left 0
+      bottom 0
+      height .15rem
+      background-color sea-lighter
+      width 100%
+
+.archives
+  margin-left years-width
+  border-left border-width border-color dashed
+  padding-left 3rem
+  clearfix()
+
+.archive-article
+  avoid-column-break()
+
+.archive-article-inner
+  @extend $block
+  margin-bottom 1.5rem
+
+.archive-article-header
+  display table-row
+  > a, > h2
+    display table-cell
+  h2
+    margin 0
+    padding-left 3rem
+    .archive-article-title
+      text-decoration: none
+      font-size 1.5rem
+
+.archive-article-footer
+  margin-top: 1.5rem
+
+.archive-article-date
+  position relative
+  display: block
+  @extend $block-caption
+  &::before
+    content ''
+    position absolute
+    top 50%
+    left -3.5rem
+    margin-top -.5rem
+    rounded-circle(1rem)
+    background-color border-color
+
+.page-type-title
+  margin 0
+  padding 3rem 0
+
+.page-nav
+  clearfix()
+  margin: 3rem auto
+  text-align: center
+  overflow: hidden
+  a, span
+    padding: 1rem 1.5rem
+    line-height: 1
+  a
+    text-decoration: none
+  .prev
+    float: left
+  .next
+    float: right
+  .page-number
+    display: inline-block
+    @media mq-mobile
+      display: none
+  .current
+    font-weight: bold
+  .space
+    color: border-color
--- a/source/css/_partial/article.styl
+++ b/source/css/_partial/article.styl
@ -0,0 +1,256 @@
+
+.article
+  padding 5rem 0 3rem
+  .sea-center
+    text-align center
+    color black
+    &::after
+      border-bottom: 2px dashed water;
+      content: '';
+      width: 100px;
+      display: block;
+      margin: .2em auto 0;
+      height: 2px
+//.article-inner
+//  overflow hidden
+
+.article-topping
+  position absolute
+  top 0
+  left -3rem
+  color: #ea434a
+  &>i
+    font-size 2rem
+    line-height 1.7
+
+
+.article-meta
+  clearfix()
+
+.article-date
+  @extend $block-caption
+  &::before
+    content '\eaf2'
+    margin-right .5rem
+    font-family remixicon
+    opacity .5
+
+.article-category
+  display inline-block
+  margin-left 1.5rem
+  &:before
+    content "\efde"
+    font-family remixicon
+    margin-right .5rem
+    opacity 0.6
+  .article-category-link
+    @extend $block-caption
+
+.archive-article-header
+  + .article-category
+    margin-left 0
+
+.article-entry
+  font-size 110%
+  margin-top 1rem
+  clearfix()
+  @extend $base-style
+  color body-color
+  .pullquote
+    text-align left
+    width 45%
+    margin 0
+    &.left
+      margin-left 0.5em
+      margin-right 1em
+    &.right
+      margin-right 0.5em
+      margin-left 1em
+  .caption
+    color color-grey
+    display block
+    font-size 0.9em
+    margin-top 0.5em
+    position relative
+    text-align center
+  // http://webdesignerwall.com/tutorials/css-elastic-videos
+  .video-container
+    position relative
+    padding-top (9 / 16 * 100) % // 16:9 ratio
+    height 0
+    overflow hidden
+    iframe, object, embed
+      position absolute
+      top 0
+      left 0
+      width 100%
+      height 100%
+      margin-top 0
+
+.article-header
+  position relative
+  h1, h2
+    margin 0
+  .article-title
+    display block
+    font-size 1.8em
+    font-weight bold
+    margin-bottom 3rem
+    text-decoration none
+    color body-color
+    padding-left 2rem
+    border-left 4px solid body-color 
+
+.article-footer
+  clearfix()
+  margin-top 3rem
+
+// Tags
+.article-tag-list
+  list-unstyled()
+  margin 0
+  &:before
+    color: tag-color
+    content "\eec3"
+    font-family remixicon
+    margin-right .5rem
+  .article-tag-list-item
+    display inline-block
+    padding-right 1rem
+  .article-tag-list-link
+    font-size: 11px
+    text-decoration: none
+    display: block;
+    color: white;
+    float: left;
+    height 18px
+    line-height 18px
+    padding 0px 8px;
+    position: relative;
+    border-radius: 9px;
+    background-color tag-color
+
+.article-comment-link
+  float right
+  &:before
+    content "\ee0d"
+    font-family remixicon
+    padding-right 8px
+
+.article-share-link
+  cursor pointer
+  float right
+  margin-left 20px
+  &:before
+    content "\ef76"
+    font-family remixicon
+    padding-right 6px
+
+// Nav  Older & Newer
+.article-nav
+  clearfix()
+  position relative
+  padding-top 3rem
+  margin-top 5rem
+  border-top border-width border-color solid
+
+.article-nav-link
+  display block
+  text-decoration none
+  &:first-child
+    float left
+  &:last-child
+    float right
+    text-align right
+
+.article-nav-caption
+  color sea-lighter
+
+.article-nav-title
+  font-size inherit
+
+// Share
+.article-share-box
+  position absolute
+  display none
+  background white
+  border-radius(.4rem)
+  box-shadow 1px 2px 10px rgba(0, 0, 0, 0.2)
+  border-radius 3px
+  margin-left -145px
+  overflow hidden
+  z-index 1
+  &.on
+    display block
+
+.article-share-input
+  width 100%
+  background none
+  box-sizing border-box
+  padding 0 1.5rem
+  outline none
+  border none
+  border-bottom border-width border-color solid
+  height 3.6rem
+  line-height 3.6rem
+
+.article-share-links
+  clearfix()
+
+$article-share-link
+  position relative
+  display block
+  float left
+  width 5rem
+  height 3.6rem
+  color body-color
+  text-align center
+  text-decoration none
+  &:before
+    font-size 20px
+    font-family remixicon
+    absolute-center(font-size-base)
+  &:hover
+    color white
+
+.article-share-twitter
+  @extend $article-share-link
+  &:before
+    content "\f068"
+  &:hover
+    background twitter-color
+    text-shadow 0 1px darken(twitter-color, 20%)
+
+.article-share-facebook
+  @extend $article-share-link
+  &:before
+    content "\ec30"
+  &:hover
+    background facebook-color
+    text-shadow 0 1px darken(facebook-color, 20%)
+
+.article-share-pinterest
+  @extend $article-share-link
+  &:before
+    content "\eea8"
+  &:hover
+    background pinterest-color
+    text-shadow 0 1px darken(pinterest-color, 20%)
+
+.article-share-google
+  @extend $article-share-link
+  &:before
+    content "\ed15"
+  &:hover
+    background google-color
+    text-shadow 0 1px darken(google-color, 20%)
+
+
+@import "tocbot"
+@import "gallery"
+@import "albums"
+@import "justifiedGallery"
+
+@media (max-width: 768px)
+  .article-entry
+      font-size 120%
--- a/source/css/_partial/articles.styl
+++ b/source/css/_partial/articles.styl
@ -0,0 +1,21 @@
+.articles
+  .article
+    padding 4.5rem 0
+    &:not(:last-child)
+      border-bottom border-width border-color solid
+  .article-entry, .article-footer
+    margin-top 0
+  .article-entry
+    margin 1rem 0
+    padding 0 2rem 2rem
+    border 1px dashed lighten(tag-color,80%)
+    .article-more-link
+      display inline-block
+      float right
+      background-color body-color 
+      padding .5rem 1rem
+      border-radius 4px
+      color white !important
+      text-decoration none
+    .article-gallery
+      margin-top 1.5rem
--- a/source/css/_partial/ayer.styl
+++ b/source/css/_partial/ayer.styl
@ -0,0 +1,72 @@
+@keyframes down
+      0%
+        margin-bottom 0
+        opacity 1
+      100%
+        margin-bottom -15px
+        opacity .1
+//
+.cover-frame
+  position relative
+  min-width 100%
+  height 100vh
+  .bg-box
+    width 100%
+    height 100%
+    &>img
+      display block
+      width 100vw
+      height 100vh
+      object-fit cover
+      object-position center center
+.cover-inner
+  position absolute
+  top 50%
+  left 50%
+  transform translate(-50%, -100%)
+  h1
+    font-size 8rem
+    margin 0
+  h2 
+    font-size 3rem
+    margin .5rem 0 1.5rem
+  a, &
+    color white
+    text-decoration none
+  video, img
+    position relative
+  .cover-logo
+    width cover-logo-size
+
+
+.cover-learn-more
+  position absolute
+  z-index 1
+  bottom 10px
+  left 0
+  width 100%
+  a > i
+    font-size 3rem
+    color white
+    animation down 1s linear infinite
+    &:hover
+      color sea
+
+.to_top
+  position fixed
+  bottom 10rem
+  right 50px
+  z-index 9
+  text-align center
+
+// Media Query
+@media (max-width: 768px)
+  .cover-inner
+    transform: translate(-50%, -70%);
+    h1
+      font-size 6rem
+    h2
+      font-size 2.3rem
+  
+  .to_top
+    right 10px
--- a/source/css/_partial/categories.styl
+++ b/source/css/_partial/categories.styl
@ -0,0 +1,13 @@
+// Categories
+
+.category-list
+  list-unstyled()
+  margin-right -.5rem
+  margin-left -.5rem
+  > .category-list-item
+    display inline-block
+    padding .5rem 1rem
+    &:before
+      content "\efde"
+      font-family remixicon
+      margin-right .5rem
--- a/source/css/_partial/float.styl
+++ b/source/css/_partial/float.styl
@ -0,0 +1,9 @@
+
+.float-left
+  float: left !important;
+
+.float-right
+  float: right !important;
+
+.float-none
+  float: none !important;
--- a/source/css/_partial/footer.styl
+++ b/source/css/_partial/footer.styl
@ -0,0 +1,17 @@
+
+.footer
+  border-top border-width solid border-color 
+  padding 3rem 0
+  .outer
+    &>ul
+      position relative
+      display flex
+      justify-content space-between
+      &:first-child
+        border-bottom border-width solid darken(froth-light,10%)
+
+      li
+        display inline-block
+        padding .5rem 0
+      span
+        margin-right 6px
--- a/source/css/_partial/gallery.styl
+++ b/source/css/_partial/gallery.styl
@ -0,0 +1,20 @@
+
+.article-gallery
+  position: relative
+
+.article-gallery-photos
+  position: relative
+  overflow: hidden
+
+.article-gallery-img
+  display: none
+  max-width: 100%
+  &:first-child
+    display: block
+  &.loaded
+    position: absolute
+    display: block
+  img
+    display: block
+    max-width: 100%
+    margin: 0 auto
--- a/source/css/_partial/gitalk.styl
+++ b/source/css/_partial/gitalk.styl
@ -0,0 +1,7 @@
+.gitalk,.markdown-body
+  font-size font-size-base!important
+
+.gt-container
+  .gt-avatar.gt-comment-avatar
+    img
+      border-radius 50%!important
--- a/source/css/_partial/highlight.styl
+++ b/source/css/_partial/highlight.styl
@ -0,0 +1,148 @@
+highlight-background = #f6f8fa
+highlight-current-line = #efefef
+highlight-selection = #d6d6d6
+highlight-foreground = #4d4d4c
+highlight-comment = #8e908c
+highlight-red = #f2777a
+highlight-orange = #f99157
+highlight-yellow = #ffcc66
+highlight-green = #99cc99
+highlight-aqua = #66cccc
+highlight-blue = #6699cc
+highlight-purple = #cc99cc
+
+$code-block
+  background highlight-background
+  padding 1.5rem
+  margin 1.5rem 0
+  border-radius .4rem
+  overflow auto
+  color highlight-foreground
+
+$line-numbers
+  color highlight-comment
+
+.article-entry
+  pre, code
+    font-family inherit
+    text-shadow none
+  code
+    background highlight-background
+    padding .25rem
+    border-radius(.4rem)
+  pre
+    @extend $code-block
+    code
+      background none
+      padding 0
+  .highlight
+    @extend $code-block
+    pre
+      border none
+      margin 0
+      padding 0
+    table
+      margin 0
+      width auto
+      border none
+    td
+      border none
+      padding 0
+    figcaption
+      clearfix()
+      font-size 85%
+      color highlight-comment
+      line-height 1rem
+      margin-bottom 1rem
+      a
+        float right
+    .gutter
+      -webkit-user-select none
+      -moz-user-select none
+      -ms-user-select none
+      user-select none
+    .gutter pre
+      @extend $line-numbers
+      text-align right
+      padding-right 1.5rem
+    .line
+      height inherit
+    .line.marked
+      background highlight-selection
+  .gist
+    background highlight-background
+    .gist-file
+      border none
+      margin 0
+      .gist-data
+        background none
+        border none
+        .line-numbers
+          @extend $line-numbers
+          background none
+          border none
+        .line-data
+          padding 0 !important
+      .highlight
+        margin 0
+        padding 0
+        border none
+      .gist-meta
+        background highlight-background
+        color highlight-comment
+        padding 0
+        margin-top 1rem
+        a
+          font-weight normal
+          &:hover
+            text-decoration underline
+
+pre
+  .comment
+  .title
+    color highlight-comment
+  .variable
+  .attribute
+  .tag
+  .regexp
+  .ruby .constant
+  .xml .tag .title
+  .xml .pi
+  .xml .doctype
+  .html .doctype
+  .css .id
+  .css .class
+  .css .pseudo
+    color highlight-red
+  .number
+  .preprocessor
+  .built_in
+  .literal
+  .params
+  .constant
+    color highlight-orange
+  .class
+  .ruby .class .title
+  .css .rules .attribute
+    color highlight-green
+  .string
+  .value
+  .inheritance
+  .header
+  .ruby .symbol
+  .xml .cdata
+    color highlight-green
+  .css .hexcolor
+    color highlight-aqua
+  .function
+  .python .decorator
+  .python .title
+  .ruby .function .title
+  .ruby .title .keyword
+  .perl .sub
+  .javascript .title
+  .coffeescript .title
+    color highlight-blue
+  .keyword
+  .javascript .function
+    color highlight-purple
--- a/source/css/_partial/justifiedGallery.styl
+++ b/source/css/_partial/justifiedGallery.styl
@ -0,0 +1,73 @@
+/*
+ * Justified Gallery - v4.0.0-alpha
+ * http://miromannino.com/projects/justified-gallery/
+ * Copyright (c) 2019 Miro Mannino
+ * Licensed under the MIT license.
+ */
+
+.justified-gallery
+  width 100%
+  position relative
+  overflow hidden
+  > a, > div, > figure
+    position absolute
+    display inline-block
+    overflow hidden
+    background gray /* To have gray placeholders while the gallery is loading with waitThumbnailsLoad = false */
+    filter "alpha(opacity=10)"
+    opacity 0.1
+    margin 0
+    padding 0
+    > img, > a > img, > svg, > a > svg
+      position absolute
+      top 50%
+      left 50%
+      margin 0
+      padding 0
+      border none
+      filter "alpha(opacity=0)"
+      opacity 0
+    > .caption
+      display none
+      position absolute
+      right 0
+      bottom 0
+      left 0
+      padding 1rem
+      background-color rgba(black, .5)
+      background linear-gradient(to top, rgba(black, .5), transparent)
+      color white
+      &.caption-visible
+        display initial
+  > .jg-entry-visible
+    filter "alpha(opacity=100)"
+    opacity 1
+    background none
+    > img, > a > img, > svg, > a > svg
+      filter "alpha(opacity=100)"
+      opacity 1
+      -webkit-transition opacity 500ms ease-in
+      -moz-transition opacity 500ms ease-in
+      -o-transition opacity 500ms ease-in
+      transition opacity 500ms ease-in
+  > .jg-filtered
+    display none
+    > .spinner
+      position absolute
+      bottom 0
+      margin-left -24px
+      padding 10px 0 10px 0
+      left 50%
+      filter "alpha(opacity=100)"
+      opacity 1
+      overflow initial
+    > span
+      display inline-block
+      filter "alpha(opacity=0)"
+      opacity 0
+      width 8px
+      height 8px
+      margin 0 4px 0 4px
+      background-color #000
+      border-radius 6px
+      
--- a/source/css/_partial/layout.styl
+++ b/source/css/_partial/layout.styl
@ -0,0 +1,97 @@
+// Layout
+#app
+  height 100%
+  width 100%
+  position relative
+  overflow hidden
+
+.cover
+  position relative
+  padding 0
+  margin-bottom 3rem
+  text-align center
+
+.content, .sidebar
+  transition(transition-base)
+
+.content
+  position relative
+  z-index 1
+  margin-left 0
+  height 100%
+  width 100%
+  overflow-y scroll
+  overflow-x: hidden
+  -webkit-overflow-scrolling touch
+  &.on
+    transform translateX(aside-width)
+    margin-left 0 !important
+
+.sidebar
+  position fixed
+  z-index 9
+  left - aside-width
+  bottom 0
+  width aside-width
+  height 100%
+  background-color rgba(0,0,0,.8)
+  &.on
+    left 0
+
+.navbar-toggle
+  position absolute
+  top gutter-width
+  left: gutter-width + aside-width
+  border none
+  height 4rem
+  width 4rem
+  border-radius 50%
+  background-color rgba(black, .5)
+  color white
+  transition(transition-base)
+  opacity .5
+  &:hover
+    opacity 1
+  &::before
+    content '\ee09'
+    font-family remixicon
+    font-size larger
+
+.wrap, .outer
+  width 100%
+  padding-right gutter-width
+  padding-left gutter-width
+  margin auto
+  overflow-x hidden
+  clearfix()
+
+.local-search
+  width 100%
+
+
+// Media Query
+@media (min-width: 768px)
+  .cover
+    margin-bottom 0
+    height 100%
+
+  .wrap, .outer
+    width wrap-width
+    padding-right 0
+    padding-left 0
+
+  .local-search
+    width wrap-width
+  
+  .content
+    &.on
+      transform: none
+
+@media (max-width: 768px)
+  .content
+    &.on
+      margin-left -1px !important
+  .sidebar
+    background-color body-color
+  .navbar-toggle
+    transform: scale(1.1)
--- a/source/css/_partial/lists.styl
+++ b/source/css/_partial/lists.styl
@ -0,0 +1,2 @@
+.list-unstyled
+  list-unstyled()
--- a/source/css/_partial/mobile.styl
+++ b/source/css/_partial/mobile.styl
@ -0,0 +1 @@
+
--- a/source/css/_partial/navbar.styl
+++ b/source/css/_partial/navbar.styl
@ -0,0 +1,41 @@
+.navbar
+  position relative
+  padding-top 3rem
+  text-align center
+  .nav
+    list-unstyled()
+    .nav-item-link
+      display block
+      padding 1rem
+      color #bbb
+      text-decoration none
+      cursor pointer
+      &:hover
+        opacity .8
+        background-color body-color
+    &.nav-main
+      .nav-item-link
+        i
+          font-size 1rem
+          display block
+          line-height 1
+.navbar-bottom
+  position absolute
+  bottom 0
+  width 100%
+  font-size 2rem
+.logo
+  text-align center
+  margin-bottom 2rem
+  img
+    width logo-size
+
+// Media Query
+@media (max-width: 768px)
+  .navbar
+    .nav
+      .nav-item-link
+        &.nav-item-search
+          display: none
+
+  
--- a/source/css/_partial/pace.styl
+++ b/source/css/_partial/pace.styl
@ -0,0 +1,25 @@
+
+.pace
+  -webkit-pointer-events none
+  pointer-events none
+  -webkit-user-select none
+  -moz-user-select none
+  user-select none
+  .pace-progress
+    position fixed
+    z-index 2000
+    top 0
+    right 100%
+    width 100%
+    height .2rem
+    background-color sea-blue
+
+.pace-inactive
+  display none
+
+@media (max-width: 768px)
+  .pace
+    display none
+
+
+
--- a/source/css/_partial/search.styl
+++ b/source/css/_partial/search.styl
@ -0,0 +1,76 @@
+
+.search-form-wrap
+  width 100%
+  position fixed
+  top -100%
+  right aside-width
+  left 0
+  opacity 0
+  transition(.3s)
+  &.on
+    top 0
+    opacity 1
+
+//-------------
+.local-search
+  position relative
+  margin 0 auto
+  padding 1rem 3rem
+  background-color rgba(255,255,255,.5)
+  box-shadow 0 1rem 3rem rgba(sea, .05)
+  max-height 100vh
+  overflow-y auto
+
+.local-search-input
+  font-size 120%
+  border 0
+  border-radius(.4rem)
+  width 100%
+  padding 1rem 1.5rem
+  outline: none
+  &::-webkit-search-results-decoration
+  &::-webkit-search-cancel-button
+    -webkit-appearance: none
+
+.local-search-close
+  position absolute
+  top 1.85rem
+  right 4.25rem
+  display block
+  height 2rem
+  width 2rem
+  padding 0
+  border none
+  border-radius(50%)
+  color white
+  text-align center
+  cursor pointer
+  &::before
+    font-size: 150%
+    content '\eb52'
+    font-family remixicon
+
+// 搜索结果
+.local-search-result
+  text-align left
+
+.search-result-list
+  list-unstyled()
+  li
+    padding 1.5rem 0
+    &:not(:last-child)
+      border-bottom border-width border-color solid
+
+    .search-result-title
+      font-size 1.6rem
+      font-weight bold
+    .search-result
+      padding-top .5rem
+      margin 0
+      max-height 12rem
+      overflow hidden
+    em.search-keyword
+      color sand
+
+.search-result-empty
+  padding 3rem 0 0
--- a/source/css/_partial/sidebar.styl
+++ b/source/css/_partial/sidebar.styl
@ -0,0 +1,2 @@
+@import "navbar"
+@import "totop"
--- a/source/css/_partial/tag.styl
+++ b/source/css/_partial/tag.styl
@ -0,0 +1,13 @@
+// Tags
+
+.tag-list
+  list-unstyled()
+  margin-right -.5rem
+  margin-left -.5rem
+  > .tag-list-item
+    display inline-block
+    padding .5rem 1rem
+    &:before
+      content "\eec3"
+      font-family remixicon
+      margin-right .5rem
--- a/source/css/_partial/tocbot.styl
+++ b/source/css/_partial/tocbot.styl
@ -0,0 +1,56 @@
+
+.tocbot
+  position fixed
+  top 14rem
+  left calc((100vw - 70rem) / 2 + 70rem)
+  font-size 80%
+  opacity .8
+  > .toc-list
+    position relative
+    overflow hidden
+
+
+.toc-list
+  list-unstyled()
+  padding-left 1rem
+
+
+a.toc-link
+  height 100%
+  color sea-dark
+  text-decoration none
+  font-size 115%
+
+
+.is-collapsible
+  max-height 1000px
+  overflow hidden
+  transition all 300ms ease-in-out
+
+
+.is-collapsed
+  max-height 0
+
+
+.is-position-fixed
+  position fixed !important
+  top 0
+  right aside-width
+
+.is-active-link
+  font-weight 700
+
+// Left line before pseudo element.
+.toc-link::before
+  background-color water
+  content ' '
+  display inline-block
+  height inherit
+  left 0
+  margin-top -1px
+  position absolute
+  width 2px
+
+
+.is-active-link::before
+  background-color link-active-color
--- a/source/css/_partial/totop.styl
+++ b/source/css/_partial/totop.styl
@ -0,0 +1,31 @@
+
+@keyframes rocket {
+  0% {
+    transform translateY(0)
+    opacity 1;
+  }
+  45% {
+    transform translateY(-3.2rem)
+    opacity 0;
+  }
+  55% {
+    transform translateY(3.2rem)
+    opacity 0;
+  }
+  100% {
+    transform translateY(0)
+    opacity 1;
+  }
+}
+
+.totop
+  position relative
+  display inline-block
+  overflow hidden
+  cursor pointer
+  rounded-circle(3.2rem)
+  background-color froth-light
+  line-height 3rem
+  &:hover > i {
+    animation rocket .3s ease-in-out
+  }
--- a/source/css/_remixicon.styl
+++ b/source/css/_remixicon.styl
--- a/source/css/_variables.styl
+++ b/source/css/_variables.styl
@ -0,0 +1,76 @@
+// Config
+support-for-ie = false
+vendor-prefixes = webkit moz ms official
+
+// Fonts
+font-size-browser = 62.5%
+font-size-base    = 1.4rem
+font-family-base  = "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif
+font-line-height  = 1.7
+
+// Colors
+black         = #000000
+water         = #cce5ff
+water-green   = #9c9
+sea-blue      = #3d85c6
+sea-dark      = #172d3e
+sea           = #1e3e3f
+sea-light     = #253145
+sea-lighter   = #5c6b72
+gray          = #adb5bd
+froth-light   = #f4f4f4
+froth         = #999
+white         = #ffffff
+sand-light    = #9c8079
+sand          = #9e6a4d
+sand-dark     = #5c5858
+sand-gray     = #bbb
+red           = #ea434a
+
+// Share Colors
+twitter-color    = #00aced
+facebook-color   = #3b5998
+pinterest-color  = #cb2027
+google-color     = #dd4b39
+
+// Link Colors
+link-color         = darken(water,20%)
+link-hover-color   = lighten(link-color, 20%)
+link-active-color  = darken(link-color, 5%)
+disabled-color     = gray
+
+// Body Colors
+body-background = white
+body-color      = darken(sand-dark,30%)
+main-color      = darken(water,20%)
+tag-color       = lighten(body-color,15%)
+
+// Border
+border-radius   = 0.4rem
+border-width    = 0.1rem
+border-color    = froth
+
+// Lyout
+aside-width      = 7rem
+wrap-width       = 70rem
+years-width      = 6rem
+logo-size        = 4.2rem
+cover-logo-size  = 6rem
+
+gutter-width     = 1.5rem
+
+// Breakpoints
+breakpoints = (
+  xs = 0,
+  sm = 576px,
+  md = 768px,
+  lg = 992px,
+  xl = 1200px
+)
+
+// Transition
+transition-slow          = all .7s ease-in-out 0s
+transition-fast          = all .1s ease-in-out 0s
+transition-base          = all .3s ease-in-out
+transition-fade          = opacity .15s linear
+transition-collapse      = height .35s ease
--- a/source/css/remixicon/remixicon.eot
+++ b/source/css/remixicon/remixicon.eot
--- a/source/css/remixicon/remixicon.svg
+++ b/source/css/remixicon/remixicon.svg
--- a/source/css/remixicon/remixicon.symbol.svg
+++ b/source/css/remixicon/remixicon.symbol.svg
--- a/source/css/remixicon/remixicon.ttf
+++ b/source/css/remixicon/remixicon.ttf
--- a/source/css/remixicon/remixicon.woff
+++ b/source/css/remixicon/remixicon.woff
--- a/source/css/remixicon/remixicon.woff2
+++ b/source/css/remixicon/remixicon.woff2
--- a/source/css/style.styl
+++ b/source/css/style.styl
@ -0,0 +1,77 @@
+@import "_variables"
+@import "_mixins"
+@import "_remixicon"
+@import "_normalize"
+
+*,
+*::before
+*::after
+  box-sizing border-box
+
+html, body
+  height: 100%
+
+html
+  font-size font-size-browser
+  -webkit-text-size-adjust 100%
+  -ms-text-size-adjust 100%
+  -ms-overflow-style scrollbar
+  -webkit-tap-highlight-color transparent
+
+body
+  position relative
+  background-color body-background
+  font-family font-family-base
+  font-size font-size-base
+  line-height font-line-height
+  color body-color
+  padding 0
+  margin 0
+  overflow-x hidden
+  text-size-adjust: 100%
+  ::selection
+    background sea-lighter
+    color froth
+a
+  color link-color
+  &:hover
+    color link-hover-color
+  &:active
+    color link-active-color
+  &.disabled
+    color disabled-color
+ul, menu, dir
+  margin 0
+  padding 0
+img
+  max-width 100%
+
+button
+  outline: none
+  cursor pointer
+  
+@import "_extend"
+@import "_partial/layout"
+@import "_partial/lists"
+@import "_partial/categories"
+@import "_partial/tag"
+@import "_partial/ayer"
+@import "_partial/search"
+@import "_partial/article"
+@import "_partial/articles"
+@import "_partial/archive"
+@import "_partial/footer"
+@import "_partial/float"
+@import "_partial/highlight"
+@import "_partial/mobile"
+@import "_partial/pace"
+@import "_partial/gitalk"
+@import "_partial/apple"
+
+if sidebar
+  @import "_partial/sidebar"
+
+// Media Query
+@media (max-width: 768px)
+  html
+    font-size: 60%
--- a/source/fancybox/jquery.fancybox.min.css
+++ b/source/fancybox/jquery.fancybox.min.css
--- a/source/fancybox/jquery.fancybox.min.js
+++ b/source/fancybox/jquery.fancybox.min.js
--- a/source/favicon.ico
+++ b/source/favicon.ico
--- a/source/images/ayer-side.svg
+++ b/source/images/ayer-side.svg
--- a/source/images/ayer.svg
+++ b/source/images/ayer.svg
--- a/source/images/cover1.jpg
+++ b/source/images/cover1.jpg
--- a/source/images/cover2.jpg
+++ b/source/images/cover2.jpg
--- a/source/images/cover3.jpg
+++ b/source/images/cover3.jpg
--- a/source/images/cover4.jpg
+++ b/source/images/cover4.jpg
--- a/source/images/cover5.jpg
+++ b/source/images/cover5.jpg
--- a/source/images/cover6.jpg
+++ b/source/images/cover6.jpg
--- a/source/images/cover7.jpg
+++ b/source/images/cover7.jpg
--- a/source/images/forrestgump.png
+++ b/source/images/forrestgump.png
--- a/source/js/ayer.js
+++ b/source/js/ayer.js
@ -0,0 +1,209 @@
+(function ($) {
+  //
+  // Search ------------
+  var $searchWrap = $('.search-form-wrap'),
+    isSearchAnim = false,
+    searchAnimDuration = 200;
+
+  var startSearchAnim = function () {
+    isSearchAnim = true;
+  };
+
+  var stopSearchAnim = function (callback) {
+    setTimeout(function () {
+      isSearchAnim = false;
+      callback && callback();
+    }, searchAnimDuration);
+  };
+
+  $('.nav-item-search').on('click', function () {
+    if (isSearchAnim) return;
+    startSearchAnim();
+    $searchWrap.addClass('on');
+    stopSearchAnim(function () {
+      $('.local-search-input').focus();
+    });
+  });
+
+  $(document).mouseup(function (e) {
+    var _con = $('.local-search');
+    if (!_con.is(e.target) && _con.has(e.target).length === 0) {
+      $searchWrap.removeClass('on');
+    }
+  });
+
+  //
+  // 移动设备侦测
+  var isMobile = {
+    Android: function () {
+      return navigator.userAgent.match(/Android/i);
+    },
+    BlackBerry: function () {
+      return navigator.userAgent.match(/BlackBerry/i);
+    },
+    iOS: function () {
+      return navigator.userAgent.match(/iPhone|iPad|iPod/i);
+    },
+    Opera: function () {
+      return navigator.userAgent.match(/Opera Mini/i);
+    },
+    Windows: function () {
+      return navigator.userAgent.match(/IEMobile/i);
+    },
+    any: function () {
+      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
+    }
+  };
+
+  //
+  // 建议在移动端不初始化，其实 /search.xml 文件还挺大的，
+  if ($('.local-search').size() && !isMobile.any()) {
+    $.getScript('/js/search.js', function () {
+      searchFunc("/search.xml", 'local-search-input', 'local-search-result');
+    });
+  }
+
+  //
+  // Share
+  $('body').on('click', function () {
+    $('.article-share-box.on').removeClass('on');
+  }).on('click', '.article-share-link', function (e) {
+    e.stopPropagation();
+
+    var $this = $(this),
+      url = $this.attr('data-url'),
+      encodedUrl = encodeURIComponent(url),
+      id = 'article-share-box-' + $this.attr('data-id'),
+      offset = $this.offset();
+
+    if ($('#' + id).length) {
+      var box = $('#' + id);
+
+      if (box.hasClass('on')) {
+        box.removeClass('on');
+        return;
+      }
+    } else {
+      var html = [
+        '<div id="' + id + '" class="article-share-box">',
+        '<input class="article-share-input" value="' + url + '">',
+        '<div class="article-share-links">',
+        '<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
+        '<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
+        '<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
+        '<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
+        '</div>',
+        '</div>'
+      ].join('');
+
+      var box = $(html);
+      $('body').append(box);
+    }
+    $('.article-share-box.on').hide();
+
+    box.css({
+      top: offset.top + 25,
+      left: offset.left
+    }).addClass('on');
+  }).on('click', '.article-share-box', function (e) {
+    e.stopPropagation();
+  }).on('click', '.article-share-box-input', function () {
+    $(this).select();
+  }).on('click', '.article-share-box-link', function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
+  });
+
+  //
+  // fancybox
+  if ($.fancybox) {
+    $('[data-fancybox]').fancybox({
+      protect: true
+    });
+  }
+
+  //
+  // lazyload
+  $("img.lazy").lazyload({
+    effect : "fadeIn"
+  });
+
+  //
+  // justifiedGallery
+  $('#gallery').justifiedGallery({
+    rowHeight : 200,
+    margins : 5
+  });
+
+  //
+  $(document).ready(function ($) {
+    $('.anchor').click(function (event) {
+      event.preventDefault();
+      $('main').animate({scrollTop: $(this.hash).offset().top}, 'smooth');
+    });
+  });
+
+  // To top
+  (function($) {
+    // When to show the scroll link
+    // higher number = scroll link appears further down the page
+    var upperLimit = 1000;
+
+    // Our scroll link element
+    var scrollElem = $('#totop');
+
+    // Scroll to top speed
+    var scrollSpeed = 1600;
+
+    // Show and hide the scroll to top link based on scroll position
+    scrollElem.hide();
+    $('.content').scroll(function () {
+      var scrollTop = $('.content').scrollTop();
+      if ( scrollTop > upperLimit ) {
+        $(scrollElem).stop().fadeTo(300, 1); // fade back in
+      }else{
+        $(scrollElem).stop().fadeTo(300, 0); // fade out
+      }
+    });
+
+    // Scroll to top animation on click
+    $(scrollElem).click(function(){
+      $('.content').animate({scrollTop:0}, scrollSpeed); return false;
+    });
+  })(jQuery);
+
+  // Mobile nav
+  var $content = $('.content'),
+    $sidebar = $('.sidebar'),
+    isMobileNavAnim = false,
+    mobileNavAnimDuration = 200;
+
+  var startMobileNavAnim = function () {
+    isMobileNavAnim = true;
+  };
+
+  var stopMobileNavAnim = function () {
+    setTimeout(function () {
+      isMobileNavAnim = false;
+    }, mobileNavAnimDuration);
+  };
+
+  $('.navbar-toggle').on('click', function () {
+    if (isMobileNavAnim) return;
+    startMobileNavAnim();
+    $content.toggleClass('on');
+    $sidebar.toggleClass('on');
+    stopMobileNavAnim();
+  });
+
+  $($content).on('click', function () {
+    if (isMobileNavAnim || !$content.hasClass('on')) return;
+    $content.removeClass('on');
+    $sidebar.removeClass('on');
+  });
+
+})(jQuery);
+
+
--- a/source/js/busuanzi-2.3.pure.min.js
+++ b/source/js/busuanzi-2.3.pure.min.js
@ -0,0 +1 @@
+var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
--- a/source/js/jquery-2.0.3.min.js
+++ b/source/js/jquery-2.0.3.min.js
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`<%- partial('_partial/archive', {pagination: config.archive, index: true}) %>`
				`@ -0,0 +1 @@`
				var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a\|\|"interactive"===document.readyState\|\|"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a\|\|(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded\|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a\|\|document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};