专业编程基础技术教程

网站首页 > 基础教程 正文

个人博客美化2之二次元组件及背景特效

ccvgpt 2024-08-29 13:16:39 基础教程 49 ℃

一、前因

前啥因,接着以前那篇来。

二、监听标题状态

找到主题的head.html。

个人博客美化2之二次元组件及背景特效

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 : 线条数量

效果:

六、总结

慢慢整。

最近发表
标签列表