Hexo—主题Fluid的优化

[toc]

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

基于Fluid的优化

在底部增加网站运行时长

运行时长

  1. 查看fluid的底部layout文件:footer.ejs
    footer.ejs
    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脚本。

  1. 在/layout/_partial下新建ejs文件,running_time.ejs
    running_time.ejs
    代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--《添加网站运行时间 -->
<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等方式的书写,根据上一条的注意点就可以知道意思了。

  1. 在主题的配置文件_config.fluid.yml中添加running_time的控制,这是为了方便控制网站是否需要显示网站的运行时间
    主题配置文件
    代码:
1
2
3
4
5
# 网站运行时间,格式形如:“本站已安全运行 101 天 12 小时 13 分 41 秒”
# Runing Time
running_time:
enable: true
create_time: '03/18/2021 8:00:00' #此处修改你的建站时间或者网站上线时间

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

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

添加天气情况

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

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

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

可以看看我的学习——基于Hexo的个人博客:
网站:https://liwangc.gitee.io/
—————————————————————————
作为初学者,很多知识都没有掌握,见谅,如有错误请指出,以期进步,感谢!。后续有新的学习,继续补充上来。


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