現在寫文都是用markdown,但是部落格園markdown的樣式有些不合我意,經過一番折騰,順帶著把樣式美化了下,感謝部落格園允許自定義樣式~
所涉及到的若干檔案上傳在碼雲,有需要的可以進行下載。
一:修改程式碼高亮的樣式
部落格園預設使用的是highlight.min.js,我們們配合它進行修改markdown的程式碼高亮樣式即可
方式一:自己去highlight樣式預覽地址去尋找自己中意的樣式,在去GitHub樣式地址複製其CSS樣式,到記事本,注意直接複製到部落格園會有坑,會出現樣式衝突的情況,需要進行解決,解決方式可參考我給的示例CSS程式碼(可直接加 ! improtant)
我選用的樣式為Atom One Dark
在github上選擇atom-one-dark.css,複製其CSS樣式並進行適當修改,防止衝突
修改後的CSS樣式程式碼如下:喜歡這款樣式的朋友可以直接複製我的樣式。
pre {
/*控制程式碼不換行*/
white-space: pre;
word-wrap: normal;
}
.cnblogs-markdown .hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #abb2bf;
background: #282c34 !important;
font-size:12px !important;
max-height: 700px;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #98c379;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
/*makedown行間程式碼樣式 */
.cnblogs-markdown code {
color: #c7254e;
border: none !important;
font-size: 1em !important;
background-color: #f9f2f4 !important;
font-family: sans-serif !important;
}
方式二:我這裡分享了三款程式碼高亮的樣式,黑色主題的,可以直接前往碼雲進行下載
二:給程式碼塊增加一鍵複製
在CSS樣式新增
/*新增按鈕*/
.cnblogs-markdown pre {
position: relative;
}
.cnblogs-markdown pre > span {
position: absolute;
top: 0;
right: 0;
border-radius: 2px;
padding: 0 10px;
font-size: 12px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
cursor: pointer;
}
.cnblogs-markdown pre > .copyed {
background: #67c23a;
}
在頁尾引入js檔案,建議將js檔案儲存到自己的部落格園檔案去,防止原作者那裡刪除了
<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/wuliytTaotao/cp.js"></script>
上傳方式如下,上傳完畢後將js引用的地址替換成自己的,這樣就不用擔心了。
三:增加目錄導航
需要注意的是:目錄導航只支援二級目錄,即標題二,標題三支援生成(對應markdown裡的##,###),其他標題生成不了。在平時寫作的時候需要注意
新增css樣式
/* 定製生成部落格目錄的CSS樣式 */
#uprightsideBar{
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align:left;
position:fixed;
/*
將div的位置固定到距離top:150px,right:0px的位置,
這樣div就會處在最右邊的位置,距離頂部150px,
當然這兩個值你可以自己改。
*/
top:150px;
right:0px;
width: auto;
height: auto;
}
#sideBarTab{
float:left;
width:25px;
box-shadow: 0 0 8px #877788;
border:1px solid #00DDC00;
border-right:none;
text-align:center;
background:#33FF66;
}
#sideBarContents{
float:left;
overflow:auto;
overflow-x:hidden;!important;
width:auto;
min-height:101px;
max-height:460px;
border:1px solid #e5e5e5;
border-right:none;
background:#FFFFCC;
font-size:16px;
}
#sideBarContents dl{
margin:0;
padding:0;
}
#sideBarContents dt{
margin-top:5px;
margin-left:5px;
}
#sideBarContents dd, dt {
cursor: pointer;
}
#sideBarContents dd:hover, dt:hover {
color:#A7995A;
}
#sideBarContents dd{
margin-left:20px;
}
在頁尾引入js樣式,js程式碼較多,我就將其以檔案形式儲存並上傳了。
<!--目錄導航js-->
<script src="https://blog-static.cnblogs.com/files/zengcongcong/daohang.js"></script>
四:遮蔽底部廣告
部落格園底部欄預設是有廣告的,我們們可以設定隱藏,在css樣式中新增
/*遮蔽底層廣告*/
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb {
display:none; !important
}
五:圖片點選放大
正文中的圖片有時候看不清楚,可以設定為點選放大,在頁尾處新增如下程式碼
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/zengcongcong/img.enlarge.js"></script>
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
<img id="bigimg" style="height: auto;width: 65%;border: 5px solid #7e8c8d;
margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div>
六:快速返回至頂部
追加css樣式,使用css繪製返回頂部的樣式
.box{
position:fixed;
right:10px;
bottom: 10px;
height:30px;
width: 50px;
text-align:center;
padding-top:20px;
background-color: lightblue;
border-radius: 20%;
overflow: hidden;
}
.box:hover:before{
top:50%
}
.box:hover .box-in{
visibility: hidden;
}
.box:before{
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%,-50%);
content:'回到頂部';
width: 40px;
color:peru;
font-weight:bold;
}
.box-in{
visibility: visible;
display:inline-block;
height:20px;
width: 20px;
border: 3px solid black;
border-color: white transparent transparent white;
transform:rotate(45deg);
}
在頁首新增一個div和js
<!--返回至頂部-->
<div id="box" class="box">
<div class="box-in"></div>
</div>
<script>
var timer = null;
box.onclick = function(){
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn(){
var oTop = document.body.scrollTop || document.documentElement.scrollTop;
if(oTop > 0){
scrollTo(0,oTop-50);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
}
</script>
七:小可愛看板娘
只需要在【頁首html程式碼】中引入L2Dwidget.js即可,但是會影響移動端的閱讀,所以移動端設定為不顯示。
<!-- 右下角live2d效果 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
"scale": 1
},
"display": {
"position": "left",
"width": 150,
"height": 300,
"hOffset": 0,
"vOffset": -20
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,
"opacityOnHover": 0.2
}
});
</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
-->
八:滑鼠點選特效
在頁尾引入即可
<!--滑鼠點選特效-->
<!--煙花特效-->
<!--<script src="https://blog-static.cnblogs.com/files/zengcongcong/click2.js"></script>-->
<script src="https://blog-static.cnblogs.com/files/zengcongcong/click.js"></script>
九:設定背景圖片
將圖片上傳至部落格園的檔案中,在css處進行引用設定背景圖片。
body{
background: url(https://files-cdn.cnblogs.com/files/zengcongcong/1.bmp
) fixed;
}
參考連結
生成目錄導航:https://www.cnblogs.com/xdp-gacl/p/3718879.html#2937655
五種回到頂部的寫法:https://www.cnblogs.com/xiaohuochai/p/5836179.html#anchor1
滑鼠點選特效:https://www.cnblogs.com/wkfvawl/p/9414180.html
前端小白也能快速學會的部落格園部落格美化全攻略:https://juejin.im/post/5c74d695f265da2d943f6fd4#heading-7
部落格園美化教程:https://www.cnblogs.com/shwee/p/9060226.html#dingzhi5