在 Fluid 主题首页上加入一言

本文由 Fluid 用户授权转载,版权归原作者所有。

本文作者:pxxyyz

原文地址:https://pxxyyz.com/posts/30454/

群里有个小哥想在首页 Slogan 上显示一言,在 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

修改配置

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,但样式不太好改
  • 第二种是打印两段话,会出现视觉混乱(个人觉得),样式方便调整

总结

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

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

参考