# 前言
这里有空更新吧,我实在是太懒了
# 搞怪恶搞网页标题特效
在 /root/myblog/themes/Butterfly/source/js
中新建 crash_cheat.js
<!--崩溃欺骗 + 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 最底部
script(type='text/javascript', src='/js/crash_cheat.js') |
# 添加 Aplayer 全局音乐播放器
在 /root/myblog/themes/Butterfly/source/js
中新建 music.js
同时添加项目文件 APlayer.min.css
到相应目录
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
引入代码
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 样式
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body { | |
width: 66px!important; | |
left: -66px !important | |
} | |
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover { | |
left: 0px !important | |
} |
参考图片
在 /root/myblog/themes/Butterfly/layout/includes/head.pug
末行添加
include ./third-party/aplayer.pug |
然后在 /root/myblog/themes/Butterfly/layout/includes/third-party
下新建 aplayer.pug
<!-- 判断是否启用 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) |
这个方法我还不知道怎么设置音乐 cover 封面图片,只能是音乐默认图片
在 /root/myblog/source/_data/butterfly.yml
中添加
## 全局音乐 | |
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' |
# 移动端独立背景图
在 /root/myblog/themes/Butterfly/source/css/_layout/pagination.styl
末行添加
@media screen and (max-width: 768px) | |
.prev-post, | |
.next-post | |
width: 100% !important | |
@media screen and (max-width: $sm) | |
#web_bg | |
background: url(https://cdn.jsdelivr.net/gh/mydracula/image@master/20210107/942c3f068cab3c2347ca21f53387c0f6.png) | |
background-size: cover |
参考图片
# 鼠标样式
在 butterfly.yml
中引入以下 css 样式
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 外链
.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
末行引入外链调用今日诗词
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 文件。您可以直接在页面中使用这些链接
<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>
标签是魔术开始的地方
<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.js
和 vue.js
文件
<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
参考代码
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
中添加
<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> |