基于Fluid的优化
上一篇已经介绍了Hexo+Fluid的使用,该篇会一直记录我的个人博客在不断的改进成我想要的样子,所做的优化修改方法。有的会符合你的需求,可参考使用。
tips:我的优化也是基于网上的各位大神的进行的,因为查询的资料较多,就不列举哪些大神了。。
在底部增加网站运行时长
- 查看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脚本。
- 在/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等方式的书写,根据上一条的注意点就可以知道意思了。
- 在主题的配置文件_config.fluid.yml中添加running_time的控制,这是为了方便控制网站是否需要显示网站的运行时间
代码:
# 网站运行时间,格式形如:“本站已安全运行 101 天 12 小时 13 分 41 秒”
# Runing Time
running_time:
enable: true
create_time: '03/18/2021 8:00:00' #此处修改你的建站时间或者网站上线时间
通过enable修改是否需要显示,这样方便些
- 最后,在footer.ejs中引入running_time.ejs,这样就可以了
这样,就显示了网站的运行时长了。
添加天气情况
因为在上面已经做了详细介绍,这里就不一步步讲了,直接开始。
效果:
-
_config.fluid.yml添加weather配置
-
到中国天气的网站上登录使用插件,进入“自定义插件”选择“创建”即可,我这里用的是第二款网页简约插件,然后设置好相应参数,点击“生成代码”,拷贝相应的代码
在themes\fluid\layout_partial下新建weather.ejs,将拷贝的代码粘贴到里面,在里面做一个是否显示的配置即可
3.最后一步就是引用该weather.ejs了,在同目录 \themes\fluid\layout_partial下,找到nav.ejs(这个就是导航栏了,里面可以看到blog.title就可以知道做什么的),添加引入weather.ejs
这样,就成功显示了天气情况
后续的优化都会在这里继续记录。
可以看看我的学习——基于Hexo的个人博客:
网站:https://liwangc.gitee.io/
—————————————————————————
作为初学者,很多知识都没有掌握,见谅,如有错误请指出,以期进步,感谢!。后续有新的学习,继续补充上来。