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

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

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

前言

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

一言

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

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

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

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

<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 主题的打字机源码，算是了解怎么实现打字机的效果了，在这里非常感谢这两个主题的作者，让我又学会了一个插件。

实现一言打字机

下面是一言打字机的代码

<!-- 一言 -->
<% if (theme.hitokoto.enable) { %>
    <span id="hitokoto" style="font-size: 20px;"></span>
    <!-- 打字机 -->
    <script src="https://cdn.jsdelivr.net/npm/t