feat: Subtitle typed animation

This commit is contained in:
shenyu 2020-01-30 14:14:35 +08:00
parent 7fcdbf8722
commit da20d7b3c9
5 changed files with 50 additions and 17 deletions

View File

@ -14,7 +14,7 @@
</a> </a>
<br> <br>
<a href="https://github.com/Shen-Yu/hexo-theme-ayer/releases" target="_blank" rel="noopener noreferrer"> <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> </a>
<img alt="language" src="https://img.shields.io/badge/language-ejs--stylus-orange.svg"> <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"> <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: menu:
Home: / Home: /
Archives: /archives Archives: /archives
Categories: /categories
Tags: /tags
Gallery: http://shenyu-vip.lofter.com Gallery: http://shenyu-vip.lofter.com
Travel: /tags/旅行/ Travel: /tags/旅行/
About: /2019/about 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 and sidebar logo
favicon: /favicon.ico favicon: /favicon.ico
logo: /images/ayer-side.svg logo: /images/ayer-side.svg
@ -242,19 +255,6 @@ layout: "categories"
### Tags ### Tags
Same as categories. Same as categories.
### Post poster
``` md
---
title: Post name
photos: [
["img_url"],
["img_url"]
]
---
```
### Gallery ### 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. 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.

View File

@ -8,6 +8,17 @@ menu:
摄影: http://shenyu-vip.lofter.com 摄影: http://shenyu-vip.lofter.com
关于我: /2019/about 关于我: /2019/about
# 站点次标题和打字动效
# https://github.com/mattboldt/typed.js
subtitle:
enable: true # 是否开启动效
text: 面朝大海,春暖花开 # 显示的文字
startDelay: 0 # 延迟时间
typeSpeed: 200 # 打字速度
loop: true # 是否循环
backSpeed: 100 # 回退速度
showCursor: true # 是否显示光标
# 网站图标和侧边栏logo # 网站图标和侧边栏logo
favicon: /favicon.ico favicon: /favicon.ico
logo: /images/ayer-side.svg logo: /images/ayer-side.svg

View File

@ -6,6 +6,20 @@
<%- 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()){ %> <% if (theme.toc && is_post()){ %>
<%- js('/js/tocbot.min') %> <%- js('/js/tocbot.min') %>
<script> <script>

View File

@ -12,7 +12,13 @@
</div> </div>
<div class="cover-inner text-center text-white"> <div class="cover-inner text-center text-white">
<h1><a href="<%- url_for() %>"><%= config.title %></a></h1> <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> <div>
<% if (theme.cover.logo) { %> <% if (theme.cover.logo) { %>
<img <img

View File

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