博客改装第一步，随机子标题
前言
这篇文章算是一个事后记录吧，当时做的时候没有同步记录过程
我记得我是看了谁的博客才有的这个想法，但是当时实现这个功能的时候忘记保存链接了…
成品效果
涉及文件
1
2
| - /themes/landscape-plus/layout/_partial/header.ejs
- _config.yml
|
简要思路
在生成博客子标题时，JS脚本以特定字符切割设置里的subtitle字符串，
同时产生随机数随机选择一条进行显示
详细步骤
(其实就两个地方有小改动而已…)
原有代码（第8行开始）:
1
2
3
4
5
| <% if (theme.subtitle){ %>
<h2 id="subtitle-wrap">
<a href="<%- url_for() %>" id="subtitle"><%= theme.subtitle %></a>
</h2>
<% } %>
|
可以看见生成出来的子标题即为设置中的字段。
为了达到随机子标题的效果，我们需要在设置中想办法填写所有可能的值，
并在这里随机显示一个。
由于Hexo是静态博客，不能实现服务端随机，故我的实现方法为：博客生成一个数组嵌入HTML，
加载页面时随机抽取一个进行显示。
在博客设置中按如下方式填写:
1
2
3
4
| subtitle: |-
Someone is climbing.
Someone is learning.
Someone is waiting.
|
关于yaml多行字符串，可以参考这里。
更改后的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <% if (theme.subtitle){ %>
<h2 id="subtitle-wrap">
<a href="<%- url_for() %>" id="subtitle"></a>
</h2>
<script>
(function () {
var subtitles = [
<% for(var i = 0, s = theme.subtitle.split("\n");
i < s.length; ++i) { %>
"<%- s[i] %>",
<% } %>
];
document.getElementById("subtitle").innerText =
subtitles[Math.floor(Math.random() * subtitles.length)];
})();
</script>
<% } %>
|
有关EJS语法可以参考这里。
添加动态打字效果
动态打字效果可以使用typed.js完成。
首先在页面内引入typed.js(在header.ejs中，subtitle上方添加)
1
2
3
4
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="/js/typed.js"></script>
|
然后简单调一下设置就好啦，把上一节的js代码更换为下方所示即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
(function () {
var typed = new Typed("#subtitle", {
typeSpeed: 40,
backSpeed: 10,
backDelay: 2000,
startDelay: 500,
shuffle: true,
loop: true,
strings: [
<% for(var i = 0, s = theme.subtitle.split("\n");
i < s.length; ++i) {
%>
"<%= s[i] %>",<% } %>]});
})();
</script>
|
有关Typed.js的更多用法，可参考这里的Demo或文档.
更新日志
