Hexo—主题Fluid的优化

上一篇已经介绍了Hexo+Fluid的使用，该篇会一直记录我的个人博客在不断的改进成我想要的样子，所做的优化修改方法。有的会符合你的需求，可参考使用。 tips：我的优化也是基于网上的各位大神的进行的，因为查询的资料较多，就不列举哪些大神了。。

基于Fluid的优化

在底部增加网站运行时长

1. 查看fluid的底部layout文件：footer.ejs 从上图可以看到footer.ejs中，包含theme.footer.content和其他各种的ejs文件，比如statustics.ejs，根据英文意思，想着底部的设计内容就在theme.footer.content中，这时候考虑将添加的运行时间在这里。

注意：

1、<%- theme.footer.content %>是表示在footer的div中引用了主题的配置文件_config.fluid.yml中的footer下的content，这个自己到配置文件中查看便知道。

2、<%- partial('文件路径') %>是表示引用了相对应文件路径下的ejs脚本。

2. 在/layout/_partial下新建ejs文件，running_time.ejs

   

   代码：

<!--《添加网站运行时间 -->
<br/>
<% if (theme.running_time && theme.running_time.enable && theme.running_time.create_time){ %>
<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
<script>
var now = new Date(); 

function createtime() {
    //此处修改你的建站时间或者网站上线时间
    var grt = new Date('<%- theme.running_time.create_time %>');
    now.setTime(now.getTime() + 250);
    days = (now - grt) / 1000 / 60 / 60 / 24;

    dnum = Math.floor(days);
    hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
    hnum = Math.floor(hours);
    if (String(hnum).length == 1) {
        hnum = "0" + hnum;
    }
    minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
    mnum = Math.floor(minutes);
    if (String(mnum).length == 1) {
        mnum = "0" + mnum;
    }
    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("timeDate").innerHTML = " 本站已各种夹缝中安全运行 " + dnum + " 天 ";
    document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
}
setInterval("createtime()", 250);
</script>
<% } %>
<!-- 添加网站运行时间》-->

在该脚本中，theme.running_time等方式的书写，根据上一条的注意点就可以知道意思了。

3. 在主题的配置文件_config.fluid.yml中添加running_time的控制，这是为了方便控制网站是否需要显示网站的运行时间 代码：

# 网站运行时间，格式形如：“本站已安全运行 101 天 12 小时 13 分 41 秒”
# Runing Time
running_time:
 enable: true
 create_time: '03/18/2021 8:00:00' #此处修改你的建站时间或者网站上线时间

通过enable修改是否需要显示，这样方便些

4. 最后，在footer.ejs中引入running_time.ejs，这样就可以了 这样，就显示了网站的运行时长了。

添加天气情况

因为在上面已经做了详细介绍，这里就不一步步讲了，直接开始。 效果：

1. _config.fluid.yml添加weather配置
2. 到中国天气的网站上登录使用插件，进入“自定义插件”选择“创建”即可，我这里用的是第二款网页简约插件，然后设置好相应参数，点击“生成代码”，拷贝相应的代码 在themes\fluid\layout_partial下新建weather.ejs，将拷贝的代码粘贴到里面，在里面做一个是否显示的配置即可 3.最后一步就是引用该weather.ejs了，在同目录 \themes\fluid\layout_partial下，找到nav.ejs(这个就是导航栏了，里面可以看到blog.title就可以知道做什么的)，添加引入weather.ejs 这样，就成功显示了天气情况

后续的优化都会在这里继续记录。

可以看看我的学习——基于Hexo的个人博客： 网站：https://liwangc.gitee.io/

—————————————————————————

作为初学者，很多知识都没有掌握，见谅，如有错误请指出，以期进步，感谢！。后续有新的学习，继续补充上来。