Typing+hitokoto+jinrishici - 卤蛋的自我修养

本文最后更新于：2020年6月5日凌晨

群里有个小哥想在首页slogen上显示一言，在Github上搜了搜，还真有Fluid主题的改造，我按照思路写下改造的步骤。

typed.ejs

修改layout\_partial\plugins目录下的typed.ejs

<% if(theme.fun_features.typing.enable && page.subtitle !== false){ %>
  <%- js_ex(theme.static_prefix.typed, "/typed.min.js") %>
  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "<%- theme.fun_features.typing.cursorChar %>",
            typeSpeed: <%- theme.fun_features.typing.typeSpeed %>,
            loop: <%- theme.fun_features.typing.loop %>,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }
    <% if(is_post()) { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } else if(theme.index.hitokoto.enable){ %>
        fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
           typing("hitokoto", data.hitokoto)
        })
        .catch(console.error)
    <% } else { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } %>
  </script>
<% } %>

将原来的功能放在typing函数里面，再判断打字机显示subtitle还是hitokoto
- 所有的post都显示subtitle，即markdown的title，page的title是网站的标题
- 除了post以外，判断theme.index.hitokoto.enable
  - 设置显示一言，则通过fetch调用hitokoto的API，这个部分官方说明^[1]和DIY教程^[2]都说的很详细了
  - 如果设置不显示一言，则显示subtitle
- hitokoto比subtitle优先级高，这会导致归档、分类、标签等页面的打字机显示hitokoto
- 如果只需要在首页显示hitokoto，但在非post的页面显示原subtitle，这需要判断页面的属性，据我观察，所有的非post的页面布局(layout)都会设置page.layout=”XXX“，但是index和page没有设置，因此，可以通过!page.layout判断来判断是否为首页，当然，post页面设定显示subtitle，就不在考虑范围内，这样只需将上面的else if条件修改如下

<% } else if(theme.index.hitokoto.enable && !page.layout) { %>

layout.ejs

修改layout目录下的layout.ejs，在<span class="h2" id="subtitle">和<% if(is_post()) { %>之间插入如下代码

<span class="h2" id="subtitle">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- subtitle %>
    <% } %>
</span>

<% if(!is_post()) { %>
<br>
<span class="h2" id="hitokoto">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitokoto %>
    <% } %>
</span>
<% } %>

<% if(is_post()) { %>
<%- partial('_partial/post-meta') %>
<% } %>
</div>

这个部分设置显示hitokoto的样式和位置，不设置这个会报关于typing("hitokoto", data.hitokoto)的错误

TypeError: Cannot read property 'tagName' of null

fluid_config.yml

在source\_data目录下修改主题配置文件fluid_config.yml，在index下设置hitokoto的开关

#---------------------------
# 首页
# Index Page
#---------------------------
index:
# 添加hitokoto
  slogan:  # 首页副标题的独立设置
    enable: true  # 为 false 则不显示任何内容
    text: 'More haste, less speed.'  # 为空则按 hexo config.subtitle 显示
  hitokoto:  # 非post页面显示一言
    enable: true  # slogan 和 hitokoto 不能同时启用，优先显示hitokoto

当theme.index.hitokoto.enable == true时，slogan里的text不在显示，因此只有关闭hitokoto才能在首页显示slogan的text或页面的subtitle

出处

如果想加入出处，可在打印data.hitokoto后加入data.from，以及相应的格式

typing("hitokoto", '『' + data.hitokoto + '』' + '<br /> <h5>'+ '——' + '「' + data.from + '」' + '</h5>')

另一种显示出处的方法是另起一行打印data.from，

fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
    typing("hitokoto", data.hitokoto)
    typing("hitofrom ", data.from)
})
.catch(console.error)

并在layout.ejs添加<%- hitofrom %>

<% if(!is_post()) { %>
<br>
<span class="h2" id="hitokoto">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitokoto %>
    <% } %>
</span>
<br>
<span class="h2" id="hitofrom">
    <% if(theme.fun_features.typing.enable == false) { %>
    <%- hitofrom %>
    <% } %>
</span>
<% } %>

第一种是打印一段话，从头到尾只有一个cursorChar，但样式不太好改
第二种是打印两段话，会出现视觉混乱(个人觉得)，样式方便调整

更新：添加今日诗词

仍然是改三样，今日诗词官网^[3]给了详细的API文档。

`typed.ejs`

<% if(theme.fun_features.typing.enable && page.subtitle !== false){ %>
  <%- js_ex(theme.static_prefix.typed, "/typed.min.js") %>
  <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>

  <script>
    function typing(id, title){
        var typed = new Typed('#' + id, {
            strings: [
              '  ',
              title + "&nbsp;",
            ],
            cursorChar: "<%- theme.fun_features.typing.cursorChar %>",
            typeSpeed: <%- theme.fun_features.typing.typeSpeed %>,
            loop: <%- theme.fun_features.typing.loop %>,
        });
        typed.stop();
        $(document).ready(function () {
            $(".typed-cursor").addClass("h2");
            typed.start();
        });
    }

    <% if(is_post()) { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } else if(theme.index.slogan.hitokoto && !page.layout) { %>
        fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
           typing("hitokoto", '『' + data.hitokoto + '』' + '<br /> <h5>'+ '——' + '「' + data.from + '」' + '</h5>')
        })
        .catch(console.error)
    <% } else if(theme.index.slogan.jinrishici && !page.layout) { %>
        jinrishici.load(function(result) { 
            typing("jinrishici", '『' + result.data.content + '』')
        });
    <% } else { %>
        typing("subtitle", "<%- data.subtitle %>")
    <% } %>

  </script>
<% } %>

需要使用官方给的JS-SDK（见第3行）
使用加载函数 jinrishici.load 并传入回调函数，每调用一次，会传入一个新的诗词
使用定制加载时，不要将标签的 id 或者 class 设置为 jinrishici-sentence ，否则SDK会自动加载一次
typing("jinrishici", result.data.content )会显示null
接口返回结果格式result里还有别的类型，详细见官方文档

layout.ejs

<% if(!is_post()) { %>
    <% if(theme.index.slogan.hitokoto) { %>
        <br>
        <span class="h2" id="hitokoto">
        <% if(theme.fun_features.typing.enable == false) { %>
        	<%- hitokoto %>
        <% } %>
        </span>
    <% } else if(theme.index.slogan.jinrishici) { %>
        <br>
        <span class="h2" id="jinrishici">
        <% if(theme.fun_features.typing.enable == false) { %>
        	<%- jinrishici %>
        <% } %>
        </span>
    <% } %>
<% } %>

fluid_config.yml

index:
  slogan:  # 首页副标题的独立设置
    enable: true  # 为 false 则不显示任何内容
    text: 'More haste, less speed.'  # 为空则按 hexo config.subtitle 显示
    hitokoto: false # 首页显示一言
    jinrishici: true # 首页显示今日诗词

这个与上面的fluid_config.yml不一样，现在将hitokoto和jinrishici归到slogan下了。
hitokoto与jinrishici两个优先级相同，但不要同时开启，只开一个即可
text优先级低，只有将hitokoto和jinrishici设置成false时才能显示自定义文本。

总结

当然这个还可以继续改下去，例如添加出处、设置循环(loop)、修改样式等。

最后也是最重要的，感谢tanxinzheng^[4] (虽然不认识，但是新知识get！😁)。

参考

博客技术

Fluid Hitokoto

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

Fluid-建站时间+Tabs 上一篇

基于L1范数的奇异谱分析下一篇