前言

这里有空更新吧,我实在是太懒了

主题更新后可能某些美化内容不再适用

搞怪恶搞网页标题特效

/root/myblog/themes/Butterfly/source/js中新建crash_cheat.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!--崩溃欺骗 + OriginTitle -->
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
$('[rel="icon"]').attr('href', "/joke.ico");
document.title = '╭(°A°`)╮ 我不爱你啦~';
clearTimeout(titleTime);
}
else {
$('[rel="icon"]').attr('href', "/favicon.ico");
document.title = '(ฅ>ω<*ฅ) 喵喵爱你哟~';
titleTime = setTimeout(function () {
document.title = OriginTitle;
}, 2000);
}
});

然后在 /root/myblog/themes/Butterfly/layout/includes/layout.pug引入代码
推荐 html => pug , 我把引入的代码放在了 layout.pug 最底部

1
script(type='text/javascript', src='/js/crash_cheat.js')

添加Aplayer全局音乐播放器

受恶搞标题特效启发,在/root/myblog/themes/Butterfly/source/js中新建music.js同时把项目文件APlayer.min.css添加进去,主要是方便

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: true,
theme: '#FADFA3',
audio: [
{
name: "纸短情长",
artist: '徐梦圆',
url: 'https://music.163.com/song/media/outer/url?id=516076896.mp3',
cover: 'https://p3.music.126.net/AAq1qOhfyrClGK1mg3mGYQ==/18776360067593424.jpg',
},
{
name: '风筝误',
artist: '刘珂矣',
url: 'https://music.163.com/song/media/outer/url?id=1434570079.mp3',
cover: 'http://oeff2vktt.bkt.clouddn.com/image/96.jpg',
}
]
});

然后在/root/myblog/themes/Butterfly/layout/includes/layout.pug引入代码

1
2
3
4
link(rel='stylesheet', href='/js/APlayer.min.css')
#aplayer
script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js')
script(type='text/javascript', src='/js/music.js')
如果要将Apalyer收入,请修改APlayer.min.css样式
1
2
3
4
5
6
7
8
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
width: 66px!important;
left: -66px !important
}

.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
left: 0px !important
}

参考图片

APlayer

这个方法我还不知道怎么设置音乐cover封面图片,只能是音乐默认图片
/root/myblog/themes/Butterfly/layout/includes/head.pug末行添加

1
include ./third-party/aplayer.pug

然后在/root/myblog/themes/Butterfly/layout/includes/third-party下新建aplayer.pug

1
2
3
4
5
6
7
8
<!-- 判断是否启用aplaye -->
if theme.aplayer && theme.aplayer.enable
<!-- 判断是否启用播放器容器 -->
.aplayer(data-id=theme.aplayer.id data-server=theme.aplayer.server data-type=theme.aplayer.type data-fixed=theme.aplayer.fixed data-mini=theme.aplayer.mini data-listFolded=theme.aplayer.listFolded data-order=theme.aplayer.order data-preload=theme.aplayer.preload)
each item in theme.aplayer.css
link(rel='stylesheet', href=item)
each item in theme.aplayer.js
script(src=item)

/root/myblog/source/_data/butterfly.yml中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  ##全局音乐
aplayer:
enable: true
js:
- https://cdn.bootcss.com/aplayer/1.10.1/APlayer.min.js
- https://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js
css:
- https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/03/13/APlayer.min.css
id: 501749278
server: netease
type: song
fixed: 'true'
order: random
preload: none
listFolded: 'false'
MetingJS

移动端独立背景图

/root/myblog/themes/Butterfly/source/css/_layout/pagination.styl末行添加

1
2
3
4
5
6
7
8
@media screen and (max-width: 768px)
.prev-post,
.next-post
width: 100% !important
@media screen and (max-width: $sm)
#web_bg
background: url(http://tu.yaohuo.me/imgs/2020/06/8ebec35e93e04611.png)
background-size: cover

查看图片

鼠标样式

butterfly.yml中引入以下css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
body {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/normal.cur),
default;
}
a,
img {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/ayuda.cur),
default;
}
p {
cursor: url(https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/cursor/texto.cur),
default;
}

查看图片

评论框美化

以下是评论框css样式,可以直接用我的css外链

1
.v[data-class=v] .vwrap{padding:0px 0 42px;}.vheader.item3{width:80%;bottom:0;position:absolute;background:transparent;border-top:1px solid #f7f7f7;}input.vnick.vinput,input.vmail.vinput,input.vlink.vinput{width:33.33% !important;}.v[data-class=v] .vwrap .vheader .vinput{border-bottom:none !important;}svg.markdown{display:none;}.v .vwrap .vrow{position:absolute;right:0;bottom:5px;width:20%;font-size:0;border-radius:0;vertical-align:bottom;}.v .vbtn{width:100%;border-radius:0 !important;height:43px;line-height:43px !important;padding:0 !important;font-size:14px !important;font-family:Arial;position:relative;top:0px;}.v[data-class=v] .vinput{padding:10px 15px !important;}.v[data-class=v] .vrow .vcol.vcol-70{width:100% !important;}.vwrap>.vrow{height:43px;margin-bottom:-5px;}.v[data-class=v] .vrow{padding:0;}.v[data-class=v] .vrow .vcol.vcol-40{width:90%}.v[data-class=v] .vrow .vcol.vcol-30{width:0;height:0;}.v svg{vertical-align:text-bottom;}textarea#veditor{resize:none;}textarea#veditor::-webkit-input-placeholder{color:#a5e3f6;text-align:center;line-height:4;}textarea#veditor:-moz-placeholder{color:#a5e3f6;text-align:center;line-height:4;}textarea#veditor::-moz-placeholder{color:#a5e3f6;text-align:center;line-height:4;}textarea#veditor:-ms-input-placeholder{color:#a5e3f6;text-align:center;line-height:4;}

/root/myblog/themes/Pjax/layout/includes/comments/valine.pug末行引入外链调用今日诗词

1
2
3
4
5
6
7
8
9
10
11
link(rel='stylesheet' href='https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/06/15/test05.css')
script(src='https://sdk.jinrishici.com/v2/browser/jinrishici.js' charset='utf-8')
script.

function diyValine() {
jinrishici.load(function(result) {
var jrsc_plac = result.data.content + "\n「" + result.data.origin.title + "」" + result.data.origin.dynasty + " · " + result.data.origin.author
document.getElementById("veditor").setAttribute("placeholder", jrsc_plac);
});
}
setTimeout(diyValine, 10);

查看图片

BotUI 对话机器人

BotUI是一个用于创建对话式UI的JavaScript框架,可以通过添加消息,问题,甚至可以为用户填写输入字段来配置对话流程

BotUI页面需要引入以下css文件。您可以直接在页面中使用这些链接

1
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui-theme-default.css">

<bot-ui>标签是魔术开始的地方

1
2
3
4
5
6
7
8
9
10
11
12
<div class="sang" id="my-botui-app" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px">
<center>
<h4>与 山河 对话中...</h4>
</center>
<bot-ui>
<center>
<div style=" background-image: url(https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@1.7/botui/loading.svg);background-repeat: no-repeat;background-size: 10em; background-position: center;height: 10em;"></div>
<p>Loading</p>
</center>
</bot-ui>

</div>

引入botui.jsvue.js文件

1
2
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/06/15/botui.min@0.3.7.js"></script>

/root/myblog/themes/Pjax/source/js下新建botui.js

查看代码

1
var botui=new BotUI("my-botui-app");botui.message.add({delay:500,content:"Hi, there"}).then(function(){botui.message.add({delay:610,content:"这里是山河"}).then(function(){botui.message.add({delay:700,content:"一个可爱的蓝孩子~"})}).then(function(){botui.action.button({delay:2000,action:[{icon:'play',text:'然后呢',value:'next'},{icon:'stop',text:"给爷爬",value:"skip"}]}).then(function(a){"next"==a.value&&next();"skip"==a.value&&end()})});var next=function(){firstpart()},firstpart=(function(){botui.message.add({content:'你叫什么名字 😃 '}).then(function(){return botui.action.text({addMessage:false,action:{placeholder:'Your name'}})}).then(function(res){botui.message.add({human:true,content:'我叫 '+res.value+' 😘 '})}).then(function(){botui.message.add({delay:400,content:'这个名字难听极了,听好了'})}).then(function(){botui.message.add({type:'html',content:"<img style='margin: 0 auto;vertical-align: middle;width: 100%;height: 100%;' src='https://p.ananas.chaoxing.com/star3/origin/6ae821dfdede10f3d16a6611dfaffb90.gif'>"})}).then(function(){botui.message.add({type:'html',delay:800,content:'<span>我是你爹</span> ! '})}).then(function(){botui.message.add({type:'html',delay:800,content:'<span>我是你爹</span> ! '})}).then(function(){botui.message.add({type:'html',delay:800,content:'<span>我是你爹</span> ! '})}).then(function(){botui.message.add({human:true,type:'html',delay:1800,content:"<img style='margin: 0 auto;vertical-align: middle;width: 100%;height: 100%;' src='https://cdn.jsdelivr.net/gh/HCLonely/valine-face@1.0.1/bilibili_tv/baiyan.png'>"})}).then(function(){botui.action.button({delay:2000,action:[{icon:'play',text:'就这呀',value:'sure'},{icon:'stop',text:"给爷爬",value:"skip"}]}).then(function(a){"sure"==a.value&&sure();"skip"==a.value&&end()})})})});var sure=function(){botui.message.add({type:'html',content:"<img style='margin: 0 auto;vertical-align: middle;width: 100%;height: 100%;' src='https://p.ananas.chaoxing.com/star3/origin/64bcee5ca671c7c0e3e9504f0e1f22df.gif'>"}).then(function(){botui.message.add({delay:1000,content:'打我呀,笨蛋 ! '})}).then(function(){botui.message.add({human:true,delay:1000,content:'就这就这就这啊,我还以为多狠呢装什么大哥逞什么英雄'})}).then(function(){secondpart()})},end=function(){botui.message.add({type:'html',content:"<img style='margin: 0 auto;vertical-align: middle;width: 100%;height: 100%;' src='https://p.ananas.chaoxing.com/star3/origin/54b2a42b67aa53d565956458a27716b8.jpg'>"})},secondpart=function(){botui.message.add({delay:1400,content:"一名计算机专业的应届生"}).then(function(){botui.message.add({type:'html',content:"<img style='margin: 0 auto;vertical-align: middle;width: 100%;height: 100%;' src='https://p.ananas.chaoxing.com/star3/origin/6cb13d96b430b10b203e260db452625c.jpg'>"})}).then(function(){botui.message.add({delay:1400,content:"对于HTML/CSS/JavaScript/Node.js都会一丢丢 😐"}).then(function(){botui.message.add({delay:1400,content:"对于C、C#、易语言、PHP也会,就是忘记了 🙄"})}).then(function(){botui.message.add({delay:1500,content:"热爱游戏,精通英雄联盟"}).then(function(){botui.message.add({delay:1500,content:"鄙人不才,巅峰时期至少也有白银三的实力"}).then(function(){botui.message.add({delay:1500,content:"你艾希我奶妈"}).then(function(){botui.action.button({delay:1700,addMessage:false,action:[{text:"爱吗",value:"why-mashiro"}]}).then(function(a){thirdpart()})})})})})})},thirdpart=function(){botui.message.add({human:true,content:"爱 "}).then(function(){botui.message.add({delay:1000,content:"只要妹妹长得乖,这把团战我来开"})}).then(function(){botui.action.button({delay:1000,action:[{text:"为什么叫山河呢",value:"why-cat"}]}).then(function(a){fourthpart()})})},fourthpart=function(){botui.message.add({delay:1000,content:"想到这个就是这个,没有为什么"}).then(function(){botui.action.button({delay:1100,action:[{text:"域名有什么含义吗",value:"why-domain"}]}).then(function(a){fifthpart()})})},fifthpart=function(){botui.message.add({content:"某妖友转卖给我的域名,这个比较便宜"}).then(function(){botui.message.add({delay:1600,content:"你都看到这里了,快给我打钱"}).then(function(){botui.message.add({type:'html',delay:2000,content:"<button style=\"cursor: pointer;line-height: normal;border: 0;color: #fff;font-size: 14px;margin-top: 10px;margin-bottom: 10px;padding: 7px 15px;border-radius: 4px;background: #777979;box-shadow: 2px 3px 4px 0 rgba(0, 0, 0, .25) \" onclick=\"window.location.href='http://zyan.gq'\">点我</button>"})})})}

/root/myblog/source/about/index.md中添加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/botui/build/botui-theme-default.css">


<div class="sang" id="my-botui-app" style="min-height:300px; padding:2px 6px 4px 6px; background-color: rgba(242, 242, 242,0.5); border-radius: 10px">
<center>
<h4>与 山河 对话中...</h4>
</center>
<bot-ui>
<center>
<div style=" background-image: url(https://cdn.jsdelivr.net/gh/Fog-Forest/cdn@1.7/botui/loading.svg);background-repeat: no-repeat;background-size: 10em; background-position: center;height: 10em;"></div>
<p>Loading</p>
</center>
</bot-ui>

</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/gh/haikesikejiqiang/picred@master/2020/06/15/botui.min@0.3.7.js"></script>
<script src="/js/botui.js"></script>

参考图片

关于我