Fluid-建站时间+Tabs - 卤蛋的自我修养

本文最后更新于：2020年6月8日上午

首先上效果

本站已运行天小时分秒

在Fluid主题里页脚加入建站时间有很多种方法，我在这提供一种通用的方式。

将显示的时间与访问量并排，因此在statistics.ejs修改，当然也可以在其他地方修改，只需注意相应的传输参数的设置。修改仅适用于Fluid主题，当前版本为1.8.1。

fluid_config.yml

修改配置文件

footer:
  statistics:  # 展示网站的 PV、UV 统计数和站点运行时间
    enable: true
    settime: "05/03/2020 10:00:00" # 建站时间
    time_format: "本站已运行 {} 天" #时间形式，完整为"本站已运行 {} 天 {} 小时 {} 分 {} 秒"
    source: "leancloud"

在statistics部分添加两个参数
- settime(建站时间)$\to$"dd/MM/YYYY HH:mm:ss"
- time_format(时间形式)，可自行选择如下格式，{}是数字的占位符（必须包含)
  - "本站已运行 {} 天 {} 小时 {} 分 {} 秒"
  - "本站已运行 {} 天 {} 小时 {} 分"
  - "本站已运行 {} 天 {} 小时"
  - "本站已运行 {} 天"

statistics.ejs

在统计PV前添加显示建站时间代码，参照^[1]

<% if (theme.footer.statistics.enable) { %>
  <div class="statistics">

    <!-- 统计网站运行时间 -->
    <% var time_texts = theme.footer.statistics.time_format.split('{}') %>

    <span id="showrunDate">
      <%- time_texts[0] %>
      <span id="dnum" style="display: none"></span>  
      <% if (time_texts.length >= 2){ %>
        <%- time_texts[1] %>
      <% } %>
      <span id="hnum" style="display: none"></span>
      <% if(time_texts.length >= 3){ %>
        <%- time_texts[2] %>
      <% } %>
      <span id="mnum" style="display: none"></span>
      <% if(time_texts.length >= 4){ %>
        <%- time_texts[3] %>
      <% } %> 
      <span id="snum" style="display: none"></span>
      <% if(time_texts.length >= 5){ %>
        <%- time_texts[4] %>
      <% } %>
    </span>
    
    <script type="text/javascript" defer=true>
      var now = new Date();
      length = <%- time_texts.length %>;
      function update() {
        var grt = new Date('<%- theme.footer.statistics.settime %>');
        now.setTime(now.getTime() + 250);
        var days = (now - grt) / 1000 / 60 / 60 / 24;
        if (length >= 2){
          var dnum = Math.floor(days);
          document.getElementById("dnum").innerHTML = dnum;
          document.getElementById("dnum").style.display = "inline";
        }
        if (length >= 3){
          hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
          hnum = Math.floor(hours);
          if (String(hnum).length == 1) {
            hnum = "0" + hnum;
          }
          document.getElementById("hnum").innerHTML = hnum;
          document.getElementById("hnum").style.display = "inline";
        }
        if (length >= 4){
          minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
          mnum = Math.floor(minutes);
          if (String(mnum).length == 1) {
            mnum = "0" + mnum;
          }
          document.getElementById("mnum").innerHTML = mnum;
          document.getElementById("mnum").style.display = "inline";
        }
        if (length >= 5){
          seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
          snum = Math.round(seconds);
          if (String(snum).length == 1) {
            snum = "0" + snum;
          }
          document.getElementById("snum").innerHTML = snum;
          document.getElementById("snum").style.display = "inline";
        }
      }
      setInterval("update()", 250);
    </script>

    <% var pv_texts = theme.footer.statistics.pv_format.split('{}') %>
    <% var uv_texts = theme.footer.statistics.uv_format.split('{}') %>

时间格式通过数字占位符{}分割开，判断个数来选择输出形式
setInterval("update()", 250);第二个参数250是每250毫秒刷新一次，如果显示结果不带秒部分可以适当调高这一参数
可添加适量的icon提高观感，具体详见图标用法^[2]，推荐阿里的iconfont^[3]
- font-class引用：用法比较固定，本质上还是使用的字体
- symbol引用：兼容性较差，未来的主流

多色图标通过设定样式实现

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

自适应水平选项卡菜单

逛大佬的博客vince时看到了一个Tabs，选项卡其实在别的Hexo主题都有tag实现，但是Fulid还没有，所以看到了就想着给俺的博客加一个，对着源码改了很久，终于ok了，现在把步骤贴出来，记录下。

首先感谢大佬vince的援助。

该选项卡是依赖一个github的项目Adaptive Horizontal Tab Menu实现的。

为选项卡菜单创建选项卡和选项卡内容，在.md或.ejs 添加下面代码

<div class="ah-tab-wrapper">
  <div class="ah-tab">
    <a class="ah-tab-item" data-ah-tab-active="true" href="">Personal data</a>
    <a class="ah-tab-item" href="">Contacts</a>
    <a class="ah-tab-item" href="">Tab item with long name</a>
    <a class="ah-tab-item" href="">Password change</a>
    <a class="ah-tab-item" href="">Tab item</a>
  </div>
</div>
<div class="ah-tab-content-wrapper">
  <div class="ah-tab-content" data-ah-tab-active="true">
    <h2>Personal data</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Contacts</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item with a long name</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Password change</h2>
  </div>
  <div class="ah-tab-content">
    <h2>Tab item</h2>
  </div>
</div>

设置用于激活自适应水平选项卡菜单的JS函数

$(function () {
  $('.ah-tab-wrapper').horizontalmenu({
    itemClick : function(item) {
      $('.ah-tab-content-wrapper .ah-tab-content').removeAttr('data-ah-tab-active');
      $('.ah-tab-content-wrapper .ah-tab-content:eq(' + $(item).index() + ')').attr('data-ah-tab-active', 'true');
      return false; //if this finction return true then will be executed http request
    }
  });
});

不过在本地直接将该函数写在Tabs后面会报错$(...). is not a function，可以将第一行改为，这一步看个人情况

jQuery(document).ready(function($) {

此外可以将JS函数写在JS文件中，通过引入外部的 JS来简化文档。

导入JS和CSS文件

<link rel="stylesheet" href="src/jquery.horizontalmenu.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="src/jquery.horizontalmenu.js"></script>

在Fluid主题内直接使用自定义CSS和JS，而且建议使用CDN引用资源，例如jsDelivr的使用格式是

https://cdn.jsdelivr.net/gh/user/repo@version/file

因此可以在fluid_config.yml添加如下JS和CSS

custom_js: 
  - //cdn.jsdelivr.net/gh/user/repo@version/js/horizontalmenu.js
  - //cdn.jsdelivr.net/gh/user/repo@version/js/tabs-menu.js
custom_css: 
  - //cdn.jsdelivr.net/gh/user/repo@version/css/horizontalmenu.css

其中第二个是上面的激活自适应水平选项卡菜单函数，其他的是选项卡的官方给的文件，当然也可以自己改改。

最后显示结果如下：

Personal data Contacts Tab item with long name Password change Tab item

Personal data

Contacts

Tab item with a long name

Password change

Tab item

在markdown里直接写Tabs时，注意代码<div>的位置，避免生成html时产生 <p>或者<pre>。
一个页面中只能放一个Tabs，放两个会有冲突，即点击一个ah-tab-item时两个都会反应。

小结

后面有点跑偏，学到老活到老

另外icon还有很多开源SVG图标库^[4]，可以看看。

参考

博客技术

Fluid

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

Trost课题组Bryostatin 3全合成(Science) 上一篇

Typing+hitokoto+jinrishici 下一篇