From da20d7b3c9eae2c2df9d74b9760fdfb0ff9499a4 Mon Sep 17 00:00:00 2001
From: shenyu <448766534@qq.com>
Date: Thu, 30 Jan 2020 14:14:35 +0800
Subject: [PATCH] feat: Subtitle typed animation

---
 README.md                        | 28 ++++++++++++++--------------
 _config.yml                      | 11 +++++++++++
 layout/_partial/after-footer.ejs | 14 ++++++++++++++
 layout/_partial/ayer.ejs         |  8 +++++++-
 source/css/_partial/ayer.styl    |  6 ++++--
 5 files changed, 50 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 7ead439..5143f37 100644
--- a/README.md
+++ b/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.6-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
@@ -242,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.
 
diff --git a/_config.yml b/_config.yml
index 35e10b1..a891503 100644
--- a/_config.yml
+++ b/_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
diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
index 548613b..48b2f49 100644
--- a/layout/_partial/after-footer.ejs
+++ b/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>
diff --git a/layout/_partial/ayer.ejs b/layout/_partial/ayer.ejs
index 170de76..5dcf1c9 100644
--- a/layout/_partial/ayer.ejs
+++ b/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
diff --git a/source/css/_partial/ayer.styl b/source/css/_partial/ayer.styl
index 06017a6..3adebad 100644
--- a/source/css/_partial/ayer.styl
+++ b/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