网站添加标题状态、二次元人物(宠物)、诗词
一、前因
前啥因,接着以前那篇来。
二、监听标题状态
找到主题的head.html。
themes\dream\layouts\partials\head.html
添加下列代码
<!--listen title -start-->
<script>
document.addEventListener('visibilitychange',function(){
if( document.visibilityState == 'hidden' ){
normal_title = document.title;
document.title = 'ヽ(`Д´-)ノ瞎跑啥,回来!';
}else{
document.title = 'ヾ(Ő∀Ő3)ノ有点听话哦!';
setTimeout(function(){
document.title = normal_title;
}, 1200)
}
});
</script>
<!--listen title -end-->
效果如下:
三、添加二次元人物
找到主题的baseof.html
themes\dream\layouts_default\baseof.html
添加下列两行搞定,如果你的网站有了font-awesom就不用添加了
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
效果如下:
没啥用,想调教的更好的话参考官方文档:https://github.com/stevenjoezhang/live2d-widget
四、今日诗词
来点文艺范。两行搞定,找到放置的位置加入span标签,找到head.html加入script。
<span id="jinrishici-sentence">正在加载今日诗词....</span>
<script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
网址:https://www.jinrishici.com/doc/#json-fast
效果:
五、线条背景
head.html中加入
<!--动态线条背景-->
<script type="text/javascript"
color="#030000" opacity='0.6' zIndex="-2" count="222" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js">
</script>
color : 线条颜色 count : 线条数量
效果:
六、总结
慢慢整。