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.5-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">
@@ -67,10 +67,23 @@ let me know if you have any questions.
 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
@@ -138,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
 
@@ -208,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
@@ -241,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.
 

_config.yml

@@ -8,6 +8,17 @@ menu:
   摄影: 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

layout/_partial/after-footer.ejs

@@ -6,6 +6,20 @@
 <%- 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') %>
 <script>
@@ -16,11 +30,14 @@
     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;
     }
   });

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

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/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