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

出处

  1. 如果想加入出处,可在打印data.hitokoto后加入data.from,以及相应的格式
typing("hitokoto", '『' + data.hitokoto + '』' + '<br /> <h5>'+ '——' + '「' + data.from + '」' + '</h5>')
  1. 另一种显示出处的方法是另起一行打印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不一样,现在将hitokotojinrishici归到slogan下了。
  • hitokotojinrishici两个优先级相同,但不要同时开启,只开一个即可
  • text优先级低,只有将hitokotojinrishici设置成false时才能显示自定义文本。

总结

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

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

参考


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