两分钟搞定博客园自定义样式
整体皮肤样式
选用的是在 SimpleMemory 基础上进行改造。所以注意：引用模板css样式取药取消勾选
将以下样式复制到 页面定制CSS代码 中：
#home h1{
font-size:45px;
}
body{
// background-image: url("https://www.cnblogs.com/images/cnblogs_com/lvonve/1497718/o_%e5%be%ae%e4%bf%a1%e5%9b%be%e7%89%87_20190706122237.jpg");
background-position: initial; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-origin: initial; background-clip: initial;
height:100%;
width:100%;
}
#home{
opacity:0.7;
}
.wall{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div#midground{
background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
z-index: -1;
-webkit-animation: cc 200s linear infinite;
-moz-animation: cc 200s linear infinite;
-o-animation: cc 200s linear infinite;
animation: cc 200s linear infinite;
}
div#foreground{
background: url("https://i.postimg.cc/z3jZZD1B/foreground.png");
z-index: -2;
-webkit-animation: cc 253s linear infinite;
-o-animation: cc 253s linear infinite;
-moz-animation: cc 253s linear infinite;
animation: cc 253s linear infinite;
}
div#top{
background: url("https://i.postimg.cc/PP5GtGtM/midground.png");
z-index: -4;
-webkit-animation: da 200s linear infinite;
-o-animation: da 200s linear infinite;
animation: da 200s linear infinite;
}
@-webkit-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@-o-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@-moz-keyframes cc {
from{
background-position: 0 0;
transform: translateY(10px);
}
to{
background-position: 600% 0;
}
}
@keyframes cc {
0%{
background-position: 0 0;
}
100%{
background-position: 600% 0;
}
}
@keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-webkit-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-moz-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}
@-ms-keyframes da {
0%{
background-position: 0 0;
}
100%{
background-position: 0 600%;
}
}然后在 页首Html代码中添加：
<div id="midground" class="wall"></div>
<div id="foreground" class="wall"></div>
<div id="top" class="wall"></div>添加看板萌娘
在 博客侧边栏公告（支持HTML代码）（支持JS代码） 中添加：
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
setTimeout(() => {
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "right",
"width": 100,
"height": 200,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 1,
"opacityOnHover": 0.2
}
});
}, 1000)
</script>
<!--
其他可选的模型：
黑猫：https://unpkg.com/live2d-widget-model-hijiki@1.0.5/assets/hijiki.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
白猫：https://unpkg.com/live2d-widget-model-tororo@1.0.5/assets/tororo.model.json
狗狗：https://unpkg.com/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json
小可爱：https://unpkg.com/live2d-widget-model-z16@1.0.5/assets/z16.model.json
小可爱：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
-->注意：如果没有开通js代码权限，需要发送邮件到博客园邮箱申请开通，否则无效。
增加鼠标点击样式
还是在 博客侧边栏公告（支持HTML代码）（支持JS代码） 中添加：
<script src="https://blog-static.cnblogs.com/files/e-cat/cursor-effects.js"></script>文章增加目录
在 页脚Html代码 中添加：
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{
var mainContent = $('#cnblogs_post_body');
var h2_list = $('#cnblogs_post_body h2');//如果你的章节标题不是h2,只需要将这里的h2换掉即可
if(mainContent.length < 1)
return;
if(h2_list.length>0)
{
var content = '<a name="_labelTop"></a>';
content += '<div id="navCategory" style="color:#152e97;">';
content += '<p style="font-size:18px;"><b>目录</b></p>';
content += '<ul>';
for(var i=0; i<h2_list.length; i++)
{
var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';
$(h2_list[i]).before(go_to_top);
var h3_list = $(h2_list[i]).nextAll("h3");
var li3_content = '';
for(var j=0; j<h3_list.length; j++)
{
var tmp = $(h3_list[j]).prevAll('h2').first();
if(!tmp.is(h2_list[i]))
break;
var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';
$(h3_list[j]).before(li3_anchor);
li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';
}
var li2_content = '';
if(li3_content.length > 0)
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';
else
li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';
content += li2_content;
}
content += '</ul>';
content += '</div><p> </p>';
content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';
if($('#cnblogs_post_body').length != 0 )
{
$($('#cnblogs_post_body')[0]).prepend(content);
}
}
}
GenerateContentList();
</script>至此，页面基本上效果已经达到我想要的效果，希望能帮助到你。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
腾讯云 BI
腾讯云 BI（Business Intelligence，BI）提供从数据源接入、数据建模到数据可视化分析全流程的BI能力，帮助经营者快速获取决策数据依据。系统采用敏捷自助式设计，使用者仅需通过简单拖拽即可完成原本复杂的报表开发过程，并支持报表的分享、推送等企业协作场景。