feat: Subtitle typed animation

README.md

@@ -14,7 +14,7 @@
   </a>
   <br>
   <a href="https://github.com/Shen-Yu/hexo-theme-ayer/releases" target="_blank" rel="noopener noreferrer">
-    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.3-blue.svg">
+    <img alt="GitHub release" src="https://img.shields.io/badge/release-v1.7-blue.svg">
   </a>
  <img alt="language" src="https://img.shields.io/badge/language-ejs--stylus-orange.svg">
   <a href="https://hexo.io/zh-cn/" target="_blank" rel="noopener noreferrer">
@@ -60,17 +60,30 @@ git pull
 
 ### Configuration
 
-let me know if you can’t find anything.
+let me know if you have any questions.
 
 ``` yml
 # Menu-Sidebar
 menu:
   Home: /
   Archives: /archives
+  Categories: /categories
+  Tags: /tags
   Gallery: http://shenyu-vip.lofter.com
   Travel: /tags/旅行/
   About: /2019/about
 
+# Subtitle and Typing animation
+# https://github.com/mattboldt/typed.js
+subtitle:
+  enable: true
+  text: a clean and elegant theme
+  startDelay: 0
+  typeSpeed: 200
+  loop: true
+  backSpeed: 100
+  showCursor: true
+
 # Favicon and sidebar logo
 favicon: /favicon.ico
 logo: /images/ayer-side.svg
@@ -102,6 +115,9 @@ nav_text:
 # Catalog in article
 toc: true
 
+# images in the article support click to fullscreen
+image_viewer: true
+
 # https://github.com/willin/hexo-wordcount
 word_count:
   enable: true
@@ -135,6 +151,7 @@ leancloud:
 # Valine Setting
 valine:
   enable: true 
+  verify: false # comment verify
   avatar: mp # (https://valine.js.org/avatar.html)
   placeholder: Add some comments to my article~ # placeholder
 
@@ -205,7 +222,7 @@ pageFooter: true
   Then add the plugin configuration in hexo's configuration file `_config.yml` (note: not the theme's configuration file):
   
   ```yml
-  feed:
+  feed:m 
       type: atom
       path: atom.xml
       limit: 20
@@ -238,19 +255,6 @@ layout: "categories"
 ### Tags
 Same as categories.
 
-### 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.
 
@@ -285,6 +289,5 @@ Use Tocbot to parse the title tags (h1~h6) in the content and insert the directo
 
 ---
 
-Inspired by [Ocean](https://github.com/zhwangart/hexo-theme-ocean)
+<br/>
-
+<a src="https://github.com/Shen-Yu/hexo-theme-ayer">Ayer</a> by <a  href="https://github.com/Shen-Yu">Eric-Shen</a> is licensed under  <a rel="license" href="https://www.mit-license.org/">MIT</a>.
-<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>.

_config.yml

@@ -1,12 +1,24 @@
 # 侧边栏菜单
 menu:
   主页: /
-  目录: /archives
+  归档: /archives
+  分类: /categories
   标签: /tags
   旅行: /tags/旅行/
   摄影: http://shenyu-vip.lofter.com
   关于我: /2019/about
 
+# 站点次标题和打字动效
+# https://github.com/mattboldt/typed.js
+subtitle:
+  enable: true  # 是否开启动效
+  text: 面朝大海，春暖花开  # 显示的文字
+  startDelay: 0   # 延迟时间
+  typeSpeed: 200  # 打字速度
+  loop: true  # 是否循环
+  backSpeed: 100  # 回退速度
+  showCursor: true  # 是否显示光标
+
 # 网站图标和侧边栏logo
 favicon: /favicon.ico
 logo: /images/ayer-side.svg
@@ -36,6 +48,9 @@ nav_text:
 # 文章页是否显示目录
 toc: true
 
+# 文章中的图片是否支持点击放大
+image_viewer: true
+
 # https://github.com/willin/hexo-wordcount
 # 是否开启字数统计(关闭请设置enable为false)
 # 也可以单独在md文件里Front-matter设置`no_word_count: true`属性，来自定义关闭字数统计
@@ -71,6 +86,7 @@ leancloud:
 # Valine配置
 valine:
   enable: true # 是否启用
+  verify: false # 是否启用防垃圾验证
   avatar: mp # 头像样式(https://valine.js.org/avatar.html)
   placeholder: 给我的文章加点评论吧~ # placeholder
 

layout/_partial/after-footer.ejs

@@ -3,12 +3,26 @@
 <%- js('/js/lazyload.min') %>
 <%- js('/js/busuanzi-2.3.pure.min') %>
 <% if (theme.fancybox){ %>
-  <%- js('fancybox/jquery.fancybox.min') %>
+<%- js('fancybox/jquery.fancybox.min') %>
+<% } %>
+
+<% if (theme.subtitle.enable){ %>
+<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>
+<script>
+  var typed = new Typed("#subtitle", {
+    strings: ['<%= theme.subtitle.text %>'],
+    startDelay: <%= theme.subtitle.startDelay %>,
+    typeSpeed: <%= theme.subtitle.typeSpeed %>,
+    loop: <%= theme.subtitle.loop %>,
+    backSpeed: <%= theme.subtitle.backSpeed %>,
+    showCursor: <%= theme.subtitle.showCursor %>
+    });
+</script>
 <% } %>
 
 <% if (theme.toc && is_post()){ %>
-  <%- js('/js/tocbot.min') %>
+<%- js('/js/tocbot.min') %>
-  <script>
+<script>
   // Tocbot_v4.7.0  http://tscanlin.github.io/tocbot/
   tocbot.init({
     tocSelector: '.tocbot',
@@ -16,15 +30,18 @@
     headingSelector: 'h1, h2, h3, h4, h5, h6',
     hasInnerContainers: true,
     scrollSmooth: true,
+    scrollContainer:'main',
     positionFixedSelector: '.tocbot',
     positionFixedClass: 'is-position-fixed',
     fixedSidebarOffset: 'auto',
     onClick: (e) => {
-      	document.getElementById(e.target.innerText).scrollIntoView()
+      $('.toc-link').removeClass('is-active-link');
+      $(`a[href=${e.target.hash}]`).addClass('is-active-link');
+      $(e.target.hash).scrollIntoView();
       return false;
     }
   });
-  </script>
+</script>
 <% } %>
 
 <script>
@@ -38,10 +55,12 @@
 <script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
 
+<% if (theme.image_viewer){ %>
+<%- partial('viewer') %>
+<% } %>
+
 <% if (theme.mathjax){ %>
-  <%- partial('mathjax') %>
+<%- partial('mathjax') %>
 <% } %>
 
 <script type="text/javascript" src="https://js.users.51.la/20544303.js"></script>
-  
-  

layout/_partial/ayer.ejs

@@ -12,7 +12,13 @@
     </div>
     <div class="cover-inner text-center text-white">
       <h1><a href="<%- url_for() %>"><%= config.title %></a></h1>
-      <h2><%= config.subtitle %></h2>
+      <div id="subtitle-box">
+        <% if (theme.subtitle.enable) { %>
+        <span id="subtitle"></span>
+        <% }else{ %>
+          <span id="subtitle"><%= theme.subtitle.text %></span>
+        <% } %>
+      </div>
       <div>
         <% if (theme.cover.logo) { %>
         <img

layout/_partial/post/valine.ejs

@@ -10,7 +10,7 @@
     new Valine({
         el: '#vcomments',
         notify: false,
-        verify: false,
+        verify: '<%- theme.leancloud.verify %>',
         app_id: '<%- theme.leancloud.app_id %>',
         app_key: '<%- theme.leancloud.app_key %>',
         path: window.location.pathname,

layout/_partial/viewer.ejs

@@ -0,0 +1,106 @@
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+    <!-- Background of PhotoSwipe. 
+         It's a separate element as animating opacity is faster than rgba(). -->
+    <div class="pswp__bg"></div>
+
+    <!-- Slides wrapper with overflow:hidden. -->
+    <div class="pswp__scroll-wrap">
+
+        <!-- Container that holds slides. 
+            PhotoSwipe keeps only 3 of them in the DOM to save memory.
+            Don't modify these 3 pswp__item elements, data is added later on. -->
+        <div class="pswp__container">
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+            <div class="pswp__item"></div>
+        </div>
+
+        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+        <div class="pswp__ui pswp__ui--hidden">
+
+            <div class="pswp__top-bar">
+
+                <!--  Controls are self-explanatory. Order can be changed. -->
+
+                <div class="pswp__counter"></div>
+
+                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+
+                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>
+
+                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+
+                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+                <!-- element will get class pswp__preloader--active when preloader is running -->
+                <div class="pswp__preloader">
+                    <div class="pswp__preloader__icn">
+                        <div class="pswp__preloader__cut">
+                            <div class="pswp__preloader__donut"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+                <div class="pswp__share-tooltip"></div>
+            </div>
+
+            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+            </button>
+
+            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+            </button>
+
+            <div class="pswp__caption">
+                <div class="pswp__caption__center"></div>
+            </div>
+
+        </div>
+
+    </div>
+
+</div>
+
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
+
+<script>
+    function viewer_init() {
+        let pswpElement = document.querySelectorAll('.pswp')[0];
+        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))
+
+        $imgArr.forEach(($em, i) => {
+            $em.onclick = () => {
+                // slider展开状态
+                // todo: 这样不好，后面改成状态
+                if (document.querySelector('.left-col.show')) return
+                let items = []
+                $imgArr.forEach(($em2, i2) => {
+                    let img = $em2.getAttribute('data-idx', i2)
+                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
+                    let title = $em2.getAttribute('alt')
+                    // 获得原图尺寸
+                    const image = new Image()
+                    image.src = src
+                    items.push({
+                        src: src,
+                        w: image.width || $em2.width,
+                        h: image.height || $em2.height,
+                        title: title
+                    })
+                })
+                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
+                    index: parseInt(i)
+                });
+                gallery.init()
+            }
+        })
+    }
+    viewer_init()
+</script>

layout/categories.ejs

@@ -1,6 +1,17 @@
 <section class="outer">
   <% if (site.categories.length){ %>
     <h1 class="page-type-title"><%= __('categories') %></h1>
-    <%- list_categories({show_count: theme.show_count}) %>
+    <!-- <%- list_categories({show_count: theme.show_count}) %> -->
+    <ul class="category-list">
+      <% site.categories.sort('name').each(function(item){ %>
+        <% if(item.posts.length){ %> 
+          <a class="category-list-link" href="<%- config.root %><%- item.path %>" title="<%= item.name %>">
+            <li class="category-list-item">
+            <%= item.name %><i><%= item.posts.length %></i>
+            </li>
+          </a>
+        <% } %>
+      <% }); %>
+      </ul>
   <% } %>
 </section>

layout/layout.ejs

@@ -9,11 +9,7 @@
         <%- partial('_partial/totop') %>
       </div>
     </main>
-    <% if (theme.toc && is_post()){ %>
       <aside class="sidebar">
-      <% } else { %>
-      <aside class="sidebar">
-        <% } %>
         <%- partial('_partial/sidebar') %>
       </aside>
       <%- partial('_partial/modal') %>

source/css/_extend.styl

@@ -9,7 +9,7 @@ $block
 
 $base-style
   h1, h2, h3, h4, h5, h6
-    margin 1.5rem 0
+    margin 2.5rem 0 1.5rem
   hr
     height border-width
     background-color border-color

source/css/_partial/ayer.styl

@@ -25,10 +25,12 @@
   left 50%
   transform translate(-50%, -100%)
   h1
+    font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
     font-size 7rem
     margin 0
     opacity .95
-  h2 
+  #subtitle-box
+    font-family: Titillium Web,PingFang SC,Hiragino Sans GB,"Microsoft JhengHei","Microsoft YaHei",Helvetica Neue,Helvetica,Arial,sans-serif
     font-size 3rem
     margin .5rem 0 1.5rem
   a, &
@@ -84,7 +86,7 @@
     width 100%
     h1
       font-size 4.5rem
-    h2
+    #subtitle-box
       font-size 2rem
   
   .to_top

source/css/_partial/categories.styl

@@ -25,16 +25,20 @@
       margin-right .5rem
       display inline-block
       vertical-align middle
-    &:hover
+    i 
-      border: 1px solid darken(water,20%)
+      font-style normal
-      box-shadow:  0 3px 5px water
+      margin-left 10px
-      a
+      color: darken(water,20%)
-        color: darken(water,30%);
-      &:before
-        color: darken(water,30%);
   a 
     display inline-block
     vertical-align middle
     text-decoration: none 
     color: body-color
+    &:hover
+      .category-list-item
+        border: 1px solid darken(water,20%)
+        box-shadow:  0 3px 5px water
+        color: darken(water,30%);
+      &:before
+        color: darken(water,30%);
     

source/css/_partial/tocbot.styl

@@ -1,6 +1,6 @@
 
 .tocbot
-  position fixed
+  position absolute
   top 14rem
   left calc((100vw - 70rem) / 2 + 70rem)
   font-size 80%
@@ -47,3 +47,9 @@ a.toc-link
   margin-top -1px
   position absolute
   width 2px
+
+.is-active-link::before
+  background-color sea-blue
+
+.is-active-link
+  font-weight 700

source/css/_variables.styl

@@ -51,7 +51,7 @@ border-width    = 0.1rem
 border-color    = froth
 
 // Layout
-aside-width      = 7rem
+aside-width      = 8rem
 wrap-width       = 70rem
 years-width      = 6rem
 logo-size        = 4.2rem

source/js/ayer.js

@@ -176,30 +176,14 @@
 
   // Mobile nav
   var $content = $('.content'),
-    $sidebar = $('.sidebar'),
+    $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');
   });