Matery主题自定义(五)为一言和文章标题添加打字机效果

FLuid 主题拥有为网页标题和一言和副标题添加打字机的功能，我准备将这个效果移植到 Matery 主题中

前言

虽然 Matery 主题中有打字机的功能，但只能在标题中使用，我一开始想使用一些投机取巧的方法，让一言的内容显示在副标题中，结果导致连副标题都没有显示了，被逼无赖，只能转向开始研究 Matery 的源码。下面是我的研究成果

一言

通过layout.ejs 代码追溯，发现主题的打字机代码在 themes>hexo-theme-matery>layout>_partial>bg-cover-content.ejs 中

通过浏览器开发工具定位到副标题的 id ，Ctrl+F 查询一下

1
<span id="subtitle"></span>

就将一言的代码插在副标题代码下面，下面是一言代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span id="hitokoto" style="font-size: 20px;"></span>

<script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
<script>
document.getElementById('#hitokoto')innerHTML = fetch('https://v1.hitokoto.cn')
    .then(function (res) {
        return res.json();
    })
    .then(function (data) {
        return ('『' + data.hitokoto + '』' + '<br /> <strong>'+ '——' + '「' + data.from + '」' + '</strong>');
    })
    .catch(function (err) {
        console.error(err);
    })
</script>

通过上面的操作虽然实现了一言的效果，但并没有打字机，通过研究 Matery 主题的打字机的源码以及 Fluid 主题的打字机源码，算是了解怎么实现打字机的效果了，在这里非常感谢这两个主题的作者，让我又学会了一个插件。

实现一言打字机

下面是一言打字机的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!-- 一言 -->
<% if (theme.hitokoto.enable) { %>
    <span id="hitokoto" style="font-size: 20px;"></span>
    <!-- 打字机 -->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
    <script>
        var hitokotoContent = ''
        function typed(hitokotoContent) {
            var typed = new Typed("#hitokoto", {
                strings: [
                    hitokotoContent
                ],
                startDelay: <%= theme.hitokoto.startDelay %>,
                typeSpeed: <%= theme.hitokoto.typeSpeed %>,
                loop: <%= theme.hitokoto.loop %>,
                backSpeed: <%= theme.hitokoto.backSpeed %>,
                showCursor: <%= theme.hitokoto.showCursor %>
            });
        }
        async function hitokoto() {
            hitokotoContent = await fetch('https://v1.hitokoto.cn')
                .then(function (res) {
                    return res.json();
                })
                .then(function (data) {
                    return ('『' + data.hitokoto + '』' + '<br /> <strong>'+ '——' + '「' + data.from + '」' + '</strong>');
                })
                .catch(function (err) {
                    console.error(err);
                })
            await typed(hitokotoContent)
        }
        hitokoto()
    </script>
<% } else { %>
    <%= config.description %>
<% } %>

因为考虑到显示效果的问题，我将原来副标题打字机的代码进行微调，下面是修改完的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<% if (theme.subtitle.enable) { %>
    <!-- 打字机 -->
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <span id="subtitle"></span>
    <script>
        var typedObj = new Typed("#subtitle", {
            strings: [ 
            <% theme.subtitle.sub.forEach(function (item) {%>
                "<%= item %>",
            <% }) %>
        ],
            startDelay: <%= theme.subtitle.startDelay %>,
            typeSpeed: <%= theme.subtitle.typeSpeed %>,
            loop: <%= theme.subtitle.loop %>,
            backSpeed: <%= theme.subtitle.backSpeed %>,
            showCursor: <%= theme.subtitle.showCursor %>
        });
    </script>
<% } %>

最终代码

将上面这些代码整合，下面的就是完整的代码，将下面的代码替换 <div class="description center-align"></div> 中的原来内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<div class="description center-align">
    <% if (theme.subtitle.enable) { %>
        <!-- 打字机 -->
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <span id="subtitle"></span>
        <script>
            var typedObj = new Typed("#subtitle", {
                strings: [ 
                <% theme.subtitle.sub.forEach(function (item) {%>
                    "<%= item %>",
                <% }) %>
            ],
                startDelay: <%= theme.subtitle.startDelay %>,
                typeSpeed: <%= theme.subtitle.typeSpeed %>,
                loop: <%= theme.subtitle.loop %>,
                backSpeed: <%= theme.subtitle.backSpeed %>,
                showCursor: <%= theme.subtitle.showCursor %>
            });
        </script>
    <% } %>
    
    <!-- 一言 -->
    <% if (theme.hitokoto.enable) { %>
        <span id="hitokoto" style="font-size: 20px;"></span>
        <!-- 打字机 -->
        <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
        <script src="https://cdn.jsdelivr.net/npm/bluebird@3/js/browser/bluebird.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/whatwg-fetch@2.0.3/fetch.min.js"></script>
        <script>
            var hitokotoContent = ''
            function typed(hitokotoContent) {
                var typed = new Typed("#hitokoto", {
                    strings: [
                        hitokotoContent
                    ],
                    startDelay: <%= theme.hitokoto.startDelay %>,
                    typeSpeed: <%= theme.hitokoto.typeSpeed %>,
                    loop: <%= theme.hitokoto.loop %>,
                    backSpeed: <%= theme.hitokoto.backSpeed %>,
                    showCursor: <%= theme.hitokoto.showCursor %>
                });
            }
            async function hitokoto() {
                hitokotoContent = await fetch('https://v1.hitokoto.cn')
                    .then(function (res) {
                        return res.json();
                    })
                    .then(function (data) {
                        return ('『' + data.hitokoto + '』' + '<br /> <strong>'+ '——' + '「' + data.from + '」' + '</strong>');
                    })
                    .catch(function (err) {
                        console.error(err);
                    })
                await typed(hitokotoContent)
            }
            hitokoto()
        </script>
    <% } else { %>
        <%= config.description %>
    <% } %>
</div>

最后在主题配置文件中进行配置 _config.yml

将副标题的打字机关闭

1
2
subtitle:
  enable: false

将一言打字的配置代码添加

1
2
3
4
5
6
7
8
# 一言
hitokoto:
  enable: true
  loop: false # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度

现在就完成了一言打字机的功能完成

文章

文章打字机的代码也差不多，照葫芦画瓢

定位到文章标题代码

1
<h1 class="description center-align post-title"><%= page.title %></h1>

文章标题代码替换成下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<h1 id="post-title" class="description center-align post-title"></h1>

<% if (theme.post.enable) { %>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        var typedObj = new Typed("#post-title", {
            strings: [ '<%= page.title %>' ],
            startDelay: <%= theme.post.startDelay %>,
            typeSpeed: <%= theme.post.typeSpeed %>,
            loop: <%= theme.post.loop %>,
            backSpeed: <%= theme.post.backSpeed %>,
            showCursor: <%= theme.post.showCursor %>
        });
    </script>
<% } %>

最后在主题配置文件中进行配置 _config.yml

1
2
3
4
5
6
7
8
# 文章标题
post:
  enable: true
  loop: false # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 500 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度

补充

看评论，有小伙伴想将首页的《我的梦想》也做成打字机的效果，那么就补充一下

在 theme>hexo-theme-matery>layout>_widget>dream.ejs中修改
将原来的代码替换成下面的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="dream">
    <% if (theme.dream.showTitle) { %>
    <div class="title center-align">
        <i class="far fa-lightbulb"></i>&nbsp;&nbsp;<%= theme.dream.title %>
    </div>
    <% } %>
    <div class="row">
        <div id="dream-content" class="col l8 offset-l2 m10 offset-m1 s10 offset-s1 center-align text"></div>
    </div>

    <% if (theme.dream.text) { %>
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
        var typedObj = new Typed("#dream-content", {
            strings: [ '<%= theme.dream.text %>' ],
            startDelay: <%= theme.post.startDelay %>,
            typeSpeed: <%= theme.post.typeSpeed %>,
            loop: <%= theme.post.loop %>,
            backSpeed: <%= theme.post.backSpeed %>,
            showCursor: false
        });
    </script>
    <% } %>
</div>

现在就完成了为一言和文章标题添加打字机效果

Matery 主题自定义持续更新中…

参考

hexo-theme-matery

在 Fluid 主题首页上加入一言