自用博客园皮肤配置
页面自定义CSS代码
@keyframes spin3D{from{transform:rotate3d(0.5,0.5,0.5,360deg)}to{transform:rotate3d(0deg)}}#loading{height:100%;background-color:#1d2630;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;right:0;overflow:hidden;z-index:99999999}.spinner-box{width:300px;height:300px;display:flex;justify-content:center;align-items:center;background-color:transparent}.leo{position:absolute;display:flex;justify-content:center;align-items:center;border-radius:50%}.blue-orbit{width:165px;height:165px;border:1px solid #91daffa5;animation:spin3D 3s linear .2s infinite}.green-orbit{width:120px;height:120px;border:1px solid #91ffbfa5;animation:spin3D 2s linear 0s infinite}.red-orbit{width:90px;height:90px;border:1px solid #ffca91a5;animation:spin3D 1s linear 0s infinite}.white-orbit{width:60px;height:60px;border:2px solid #fff;animation:spin3D 10s linear 0s infinite}.w1{transform:rotate3D(1,1,1,90deg)}.w2{transform:rotate3D(1,2,0.5,90deg)}.w3{transform:rotate3D(0.5,1,2,90deg)}
博客侧边栏公告
<script src="https://guangzan.gitee.io/awescnb/index.js"></script>
<script>
$.awesCnb({
theme: {
name: 'geek',
avatar: 'https://pic.cnblogs.com/avatar/2174121/20201006194007.png',
headerBackground: 'https://guohaomeng.gitee.io/cnblog/image/002.jpg'
},
imagebox: {
enable: true,
},
darkMode: {
enable: true,
autoDark: true,
autoLight: true
},
signature: { //个性签名
enable: true,
contents: [
"这是一条完全没有个性的<b style='color:#ff6b81'>个性签名</b>.",
"<b>console.log(🍺);</b>",
],
},
qrcode: { //二维码
enable: false,
img: '',
desc: '',
},
bodyBackground: { //背景
enable: false,
value: //图片链接或颜色值
'https://guohaomeng.gitee.io/cnblog/image/background/wallhaven-2em38y.jpg',
opacity: 0.85,
repeat: false,
},
notice: { //自定义通知
enable: true,
text: ['你好呀>_<'],
},
lock: { //博客锁屏
enable: true,
background: 'https://guohaomeng.gitee.io/cnblog/image/background/wallhaven-xle22d.jpg',
strings: [
'你好呀~',
'这是博客的锁屏界面',
'点击右上角 🔑 解锁哦',
],
},
emoji: { //表情输入
enable: true,
showRecents: true, //是否展示最近使用
recentsCount: 20, //展示最近使用的个数
showPreview: true, //是否预览表情
showSearch: true, //是否展示搜索框
},
live2d: { //live2d看板娘
enable: false,
page: 'all',
agent: 'pc',
model: 'haru-01', //选择模型
width: 150,
height: 200,
position: 'left',
gap: 'default',
},
musicPlayer: { //音乐播放器
enable: false, //获取音乐链接以及歌词:https://music.liuzhijin.cn/
autoplay: false,
lrc: {
enable: true, // 启用歌词
type: 1, // 歌词类型 1 -> 字符串 3 -> url
color: '#10ac84', // 颜色
},
audio: [
{
name: '404 not found',
artist: 'REOL',
url:
'http://music.163.com/song/media/outer/url?id=436016480.mp3',
cover:
'http://p2.music.126.net/cu1sEIDxXOJm5huZ3Wjs0Q==/18833534672880379.jpg?param=300x300',
lrc:
"",
},
],
},
github: {
enable: true,
color: '#ffb3cc',
url: 'https://github.com/guohaomeng/',
},
catalog: { //随笔目录
enable: true,
position: 'left',
},
tools: { //按钮工具
enable: true,
initialOpen: true,
},
barrage: { //弹幕
enable: false,
opacity: 0.6,
colors: [],
barrages: [],
indexBarrages: [],
postPageBarrages: [],
},
//markdown画笔
notation: {
enable: true,
},
// 顶部加载进度条
topProgress: {
enable: true,
page: 'all',
agent: 'pc',
background: '#FFB3CC',
height: '5px',
},
// 自定义链接链接
links: [
{
name: '自定义链接',
link: '',
},
],
//随笔头图
postTopimage: {
enable: true,
imgs: [],
},
})
</script>
<script src="https://cdn.jsdelivr.net/gh/guohaomeng/live2d-widget@1.0.0/autoload.js"></script>
<script>
$(document).ready(function(){
$( ".custom-searchbar" ).attr( "placeholder" , "在此键入以搜索" );
$( "#q" ).attr( "placeholder" , "在此键入以搜索" );
$("#cnblog-nav h3").html("菜单");
$(".favourite h3").html("收藏");
$(".fa-lg").css("font-size","1em");
});
</script>
<script language="javascript">
function printdiv(printpage) {
var headstr = '<html><head><title>meng</title></head><body>';
var footstr = "</body>";
var newstr = document.getElementsByClassName(printpage)[0].innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr + newstr + footstr;
console.log(headstr + newstr + footstr)
window.print();
document.body.innerHTML = oldstr;
return false;
}
console.log("div打印功能加载完成")
</script>
页首html代码
<div id="loading">
<div class="spinner-box">
<div class="blue-orbit leo"></div>
<div class="green-orbit leo"></div>
<div class="red-orbit leo"></div>
<div class="white-orbit w1 leo"></div>
<div class="white-orbit w2 leo"></div>
<div class="white-orbit w3 leo"></div>
</div>
</div>
页脚html代码
无