博客園樣式美化

時間  2021-02-02
標籤 javascript css html 前端 java react git github json markdown 欄目 JavaScript 简体版
原文   原文鏈接

如今寫文都是用markdown，可是博客園markdown的樣式有些不合我意，通過一番折騰，順帶着把樣式美化了下，感謝博客園容許自定義樣式~
所涉及到的若干文件上傳在碼雲，有須要的能夠進行下載。
javascript

一：修改代碼高亮的樣式

博客園默認使用的是highlight.min.js，我們配合它進行修改markdown的代碼高亮樣式便可css

方式一：本身去highlight樣式預覽地址去尋找本身中意的樣式，在去GitHub樣式地址複製其CSS樣式，到記事本，注意直接複製到博客園會有坑，會出現樣式衝突的狀況，須要進行解決，解決方式可參考我給的示例CSS代碼(可直接加 ! improtant)html

我選用的樣式爲Atom One Dark前端

在github上選擇atom-one-dark.css,複製其CSS樣式並進行適當修改，防止衝突java

修改後的CSS樣式代碼以下：喜歡這款樣式的朋友能夠直接複製個人樣式。react

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;
}

方式二：我這裏分享了三款代碼高亮的樣式，黑色主題的，能夠直接前往碼雲進行下載git

二：給代碼塊增長一鍵複製

在CSS樣式添加github

/*添加按鈕*/
.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文件保存到本身的博客園文件去，防止原做者那裏刪除了json

<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

三：增長目錄導航

須要注意的是：目錄導航只支持二級目錄，即標題二，標題三支持生成(對應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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程