Matery主题自定义美化(五)实现文章标题和每日一言的打字机效果

文章标题

​ 打开 themes>hexo-theme-matery>layout>_partial>post-cover.ejs

​ 定位到文章标题代码

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 # 删除速度

每日一言

​ 打开 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>

​ 通过上面的操作虽然实现了一言的效果，但并没有打字机。

实现一言打字机

下面是一言打字机的代码

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="su
    <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 # 删除速度

​ 至此，就完成了为文章标题和一言添加打字机效果

参考

hexo-theme-matery

在 Fluid 主题首页上加入一言