博客園美化
對博客園美化,基於博皮“SimpleMemor”進行的修改,首先要申請js權限。
博客側邊欄公告
<script type="text/javascript">
console.log=function(){};
window.cnblogsConfig = {
GhVersions : 'v1.1.5.1', // 版本
blogUser : "武培軒", // 用戶名
blogAvatar : "https://pic.cnblogs.com/avatar/1356806/20180320195124.png",
blogStartDate : "2018-3-20", // 入園時間,年-月-日。入園時間查看方法:鼠標停留園齡時間上,會顯示入園時間,
webpageIcon: "https://files-cdn.cnblogs.com/files/wupeixuan/blog_logo.gif",
fontIconExtend: "//at.alicdn.com/t/font_543384_ezv3l7gd9r7.css",
//主頁banner圖片
homeTopImg: [
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4ylgl0.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-ne7lr8.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-xl67ov.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-neqwon.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-lm2762.jpg",
],
//側邊欄
menuUserInfoBgImg: 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_menu_bg.gif',
//文章頁配置
essayTopImg: [
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-d5yzvg.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4d38m0.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-4gj334.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-j82g35.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-r2yjg1.jpg",
"https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wallhaven-wymo2p.jpg",
],
// ---- 頁面動效配置 ----
homeTopAnimationRendered: true, // true || false ,是否渲染主頁頭圖動效
homeTopAnimation: { // 主頁頭圖動效設置
radius: 15,
density: 0.2,
color: 'rgba(255,255,255, .2)', // 顏色設置,“random” 為隨機顏色
clearOffset: 0.3
},
essayTopAnimationRendered: true, // true || false ,是否渲染隨筆頁頭圖動效
essayTopAnimation: { // 隨筆頁頭圖動效設置
triW : 14,
triH : 20,
neighbours : ["side", "top", "bottom"],
speedTrailAppear : .1,
speedTrailDisappear : .1,
speedTriOpen : 1,
trailMaxLength : 30,
trailIntervalCreation : 100,
delayBeforeDisappear : 2,
colors: [
'#96EDA6', '#5BC6A9',
'#38668C', '#374D84',
'#BED5CB', '#62ADC6',
'#8EE5DE', '#304E7B'
]
},
bgAnimationRendered: true, // true || false ,是否渲染背景動效
backgroundAnimation : { // 背景動效設置
colorSaturation: "60%",
colorBrightness: "50%",
colorAlpha: 0.5,
colorCycleSpeed: 5,
verticalPosition: "random",
horizontalSpeed: 200,
ribbonCount: 3,
strokeSize: 0,
parallaxAmount: -0.2,
animateSections: true
},
homeBannerTextType: "one",
//代碼高亮配置
essayCodeHighlightingType: 'highlightjs', // 代碼主題插件類型:cnblogs || highlightjs || prettify
essayCodeHighlighting: 'idea', // 代碼高亮主題,具體主題參考文檔
//頁腳標語
bottomText: {
left : "既然選擇了遠方",
right: "便只顧風雨兼程"
},
//文章后綴配置
essaySuffix: {
codeImgUrl : 'https://images.cnblogs.com/cnblogs_com/wupeixuan/1186798/o_wechat.png', // >= v1.1.5 左側圖片設置,不配置使用 window.cnblogsConfig.blogAvatar
aboutHtml : '敲代碼,健身,讀書。', // 關於博主,不配置使用默認
copyrightHtml: '本文為博主原創文章,轉載請注明出處。', // 版權聲明,不配置使用默認
supportHtml : '' // 聲援博主,不配置使用默認
}
}
</script>
<script src="https://blog-static.cnblogs.com/files/wupeixuan/simpleMemory.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wupeixuan/mouse-click.js"></script>
<canvas width="1777" height="841" style="position: fixed; left: 0px; top: 0px; z-index: 2147483647; pointer-events: none;"></canvas>
頁面定制CSS代碼
頁腳Html代碼
<!--live2d-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Live2D</title>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/waifu.css"/>
<link rel="stylesheet" type="text/css" href="https://blog-static.cnblogs.com/files/wupeixuan/flat-ui.min1.css"/>
</head>
<body>
<div class="waifu" id="waifu">
<div class="waifu-tips" style="opacity: 1; font-size: 14px"></div>
<canvas id="live2d" width="300" height="300" class="live2d"></canvas>
<div class="waifu-tool">
<span class="fui-home"></span>
<span class="fui-chat"></span>
<span class="fui-eye"></span>
<span class="fui-user"></span>
<span class="fui-photo"></span>
<span class="fui-info-circle"></span>
<span class="fui-cross"></span>
</div>
</div>
<script src="https://blog-static.cnblogs.com/files/wupeixuan/live2d.js"></script>
<script src="https://blog-static.cnblogs.com/files/wupeixuan/waifu-tips1.js"></script>
<script type="text/javascript">initModel()</script>
</body>
</html>
<!--live2dend-->
