博客园主题设置
【更新】当前使用主题
直接用大佬@BNDong的模板(v2.1.2):
博客:https://www.cnblogs.com/bndong/p/9132439.html
教程:https://bndong.github.io/Cnblogs-Theme-SimpleMemory/v2/#/Docs/GettingStarted/install
1. 博客的主题设置
就是默认的设置加一些简单的修改,过多的特效会导致在网络质量差的情况下加载缓慢,且分散阅读注意力(其实是不会写😂)。
基本设置
博客皮肤: SimpleMemory
设置代码高亮及显示行号
修改默认样式
页面定制CSS代码
/*去掉引用时的图片*/
.postBody blockquote {
background:none;
}
/*使用 jetbrains mono 字体*/
.hljs .hljs-ln .hljs-ln-line {
font-family: jetbrains mono;
font-size: 13px;
}
/*屏蔽底层广告*/
.under-post-card,
#under_post_card1,
#under_post_card2 {
display:none; !important
}
/*返回顶部图标*/
.returnTop {
position: fixed;
_position: absolute;
right: 10px;
bottom: 20px;
_bottom: auto;
display: none;
width: 40px;
height: 40px;
border: 1px solid #abb8c3;
border-radius:4px;
background: #fff;
box-shadow: 0 0 5px #F5F5F5;
text-indent: -9999px;
cursor: pointer;
}
.returnTop .s {
position: absolute;
top: -2px;
_top: -20px;
left: 10px;
width: 0;
height: 0;
border-width: 10px;
border-color: transparent transparent #abb8c3;
border-style: dashed dashed solid;
}
.returnTop .b {
position: absolute;
top: 18px;
left: 16px;
height: 12px;
width: 8px;
background: #abb8c3;
}
页脚HTML代码
<!-- Back to the top START -->
<div class="returnTop" title="返回顶部">
<span class="s"></span>
<span class="b"></span>
返回顶部
</div>
<script type="text/javascript">
$(function(){
// 给 window 对象绑定 scroll 事件
$(window).bind("scroll", function(){
// 获取网页文档对象滚动条的垂直偏移
var scrollTopNum = $(document).scrollTop(),
// 获取浏览器当前窗口的高度
winHeight = $(window).height(),
returnTop = $("div.returnTop");
// 滚动条的垂直偏移大于 100 时显示,反之隐藏
(scrollTopNum > 100) ? returnTop.fadeIn("fast") : returnTop.fadeOut("fast");
// 给 IE6 定位
if (!-[1,]&&!window.XMLHttpRequest) {
returnTop.css("top", scrollTopNum + winHeight - 200);
}
});
// 点击按钮后,滚动条的垂直方向的值逐渐变为0,也就是滑动向上的效果
$("div.returnTop").click(function() {
$("html, body").animate({ scrollTop: 0 }, 100);
});
});
</script>
<!-- Back to the top END -->
2. 曾使用过的主题设置
页面定制CSS代码
对SimpleMemory默认样式稍作了修改
.catListTitle {
margin-top: 21px;
margin-bottom: 10.5px;
text-align: left;
border-left: 10px solid rgba(82, 168, 236, 0.8);
padding: 0px 0 0px 10px;
background:rgba(245,245,245,0.3);
}
#cnblogs_post_body h3{
border-left: 5px solid rgba(0, 235, 255, 0.3);
padding: 2px 5px;
background: rgba(247,247,247,0.3);
}
#cnblogs_post_body h4{
border-left: 5px solid rgba(222, 101, 114,0.3);
padding-left: 5px;
background: rgba(247,247,247,0.3);
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s cubic-bezier(0, 0, 0.12, 1) 0s;
}
#blog-calendar td {
font-size: 12px;
font-family: "Comic Sans MS";
}
.input_my_zzk {
border: 1px solid #ccc;
background: none;
height: 25px;
padding-right: 30px;
padding-left: 5px;
outline: 0;
}
.CalDayHeader {
background: rgba(245,245,245,0.3) !important;
font-weight: 100;
color: #5E5F63;
}
.CalTitle {
background: none;
width: 100%;
height: 25px;
text-align: center;
font-size: 14px;
font-weight: bold;
padding: 5px 0;
color: #FFF;
}
.CalTitle td {
background: rgba(245,245,245,0.3) !important;
border: 0px !important;
color: #5E5F63;
font-family: "Comic Sans MS";
}
a:link {
color: cornflowerblue;
}
a:visited {
color: cornflowerblue;
}
a:hover {
color:cadetblue;
}
a:active {
color:black;
}
div#cnblogs_c2 {
display: none;
}
div#cnblogs_c1 {
display: none;
}
div#under_post_news {
display: none;
}
div#ad_t2 {
display: none;
}
div#under_post_kb {
display: none;
}
.postBody blockquote {
background:none;
}
页首HTML代码
右键烟花特效 + 自定义返回顶部小火箭;
<!-- Right fireworks effect START -->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 100; pointer-events: none;" ></canvas>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/fireworks-anime.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/fireworks-fireworks-modify.js"></script>
<!-- Right fireworks effect END -->
<!-- Rocket back to the top START -->
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 5px;
z-index: 99;
}
#back-top span {
width: 50px;
height: 64px;
display: block;
background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
$("#div_digg").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
$('#div_digg').fadeIn();
} else {
$('#back-top').fadeOut();
$('#div_digg').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
<!-- Rocket back to the top END-->
页脚HTML代码
输入烟花效果
<!-- Input effects START-->
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/rustling/activate-power-mode.js"></script>
<script type="text/javascript">
POWERMODE.colorful = true;
POWERMODE.shake = false;
document.body.addEventListener('input', POWERMODE);
</script>
<!-- Input effects END-->
3. 其他可选的主题设置
1. fork me on github彩带
页首HTML代码
<!-- 修改为你的github地址-->
<a href="https://github.com/yourname">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
</a>
2. 刷新随机切换背景图片
页面定制CSS代码
body {
background-repeat:no-repeat;
background-attachment:fixed;
background-size:cover;
background-image: url(https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302);
}
二次元图片API
https://api.3ewl.cc/acg/img.php
风景图片API
https://unsplash.it/1600/900?random
返回必应图片
https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture
二次元环境背景
https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302
二次元人物背景
https://img.xjh.me/random_img.php?type=bg&ctype=acg&return=302
bing图片官方接口
官方教程 https://github.com/xCss/bing
https://bing.ioliu.cn/v1/rand/?w=1920&h=1080
3. 添加代码行号
使用自定义代码高亮,先禁用设置中的代码高亮。
<link href="https://cdn.bootcss.com/highlight.js/9.6.0/styles/atelier-lakeside-dark.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/highlight.js/9.11.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="//cdn.bootcss.com/highlightjs-line-numbers.js/1.1.0/highlightjs-line-numbers.min.js"></script>
<script>hljs.initLineNumbersOnLoad();</script>
参考资料