兩分鍾搞定博客園自定義樣式

整體皮膚樣式

選用的是在 SimpleMemory 基礎上進行改造。所以注意：引用模板css樣式取葯取消勾選

將以下樣式復制到 頁面定制CSS代碼 中：

html {
    font-size: 14px !important;
}

#home h1 {
    font-size: 45px;
}
#blogTitle h1,
#blogTitle h2 {
    font-family: 'comic sans ms';
}

body {
    background-color: #f5f5d5 !important;
    font-family: Georgia, serif;
    word-spacing: 0.2rem;
    height: 100%;
    width: 100%;
}

#cnblogs_post_body h2 {
    color: #21759b;
}

#cnblogs_post_body h3 {
    margin: 1.5rem 0;
}

#home {
    width: 65% !important;
    min-width: 640px !important;
    max-width: 960px !important;
    border-radius: 1rem !important;
    background-color: #f5f5d5 !important;
    box-shadow: none;
    opacity: 0.95;
}

.catListEssay,
.catListLink,
.catListNoteBook,
.catListTag,
.catListPostCategory,
.catListPostArchive,
.catListImageCategory,
.catListArticleArchive,
.catListView,
.catListFeedback,
.mySearch,
.catListComment,
.catListBlogRank,
.catList,
.catListArticleCategory {
    background: none !important;
}

.newsItem {
    background: none !important;
}

#sideCatalog-catalog ul .active {
    background-color: #fff !important;
}

.postBody blockquote {
    margin: 1rem 0;
    padding: 0.5rem 1rem;
    border: 1px solid #d3d3d3;
    border-radius: 1rem;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #deebf7), color-stop(1, #aad2f0));
}

.cnblogs-markdown .hljs,
.cnblogs-post-body .hljs {
    border-width: 0.3rem !important;
    border-color: #e0dfcc !important;
    border-style: solid !important;
    text-shadow: 0 1px white;
    border-radius: 1rem !important;
    padding: 10px 20px !important;
    font-family: Consolas, monospace, Microsoft YaHei !important;
    font-size: 14px !important;
    margin: 20px 0 !important;
    background-color: #f5f2f0 !important;
}

img {
    border-width: 0.3rem !important;
    border-color: #e0dfcc !important;
    border-style: solid !important;
    text-shadow: 0 1px white;
    border-radius: 1rem !important;
    margin: 20px 0 !important;
    overflow: hidden;
}

#cnblogs_post_body p {
    margin: 1rem 0;
    line-height: 2rem;
    font-size: 1.2rem !important;
}

.cnblogs-markdown code,
.cnblogs-post-body code,
.cnblogs-markdown pre code,
.cnblogs-post-body pre code {
    display: inline-block;
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-family: monospace !important;
    background-color: pink !important;
    border-radius: 5px !important;
    font-size: 14px !important;
    margin: auto 3px;
    border: none !important;
}

添加看板萌娘

在 博客側邊欄公告（支持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代碼 中添加：

<!-- 目錄-->
<link href="https://blog-static.cnblogs.com/files/lvonve/jajian.catalog.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/lvonve/jajian.catalog.js"></script>

添加圖片放大鏡

很多時候圖片比較小，圖片文字在博文中不是很清楚，這時候如果可以點擊放大就很好了，推薦一個實現該功能的代碼，放在【頁腳Html代碼】中，具體的代碼如下：

<script type="text/javascript" src="https://blog-static.cnblogs.com/files/jajian/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>

添加 Github 絲帶鏈接

在【頁首HTML】代碼中填入如下內容：

<a href="https://github.com/Daotin"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>

更多絲帶樣式參考：更多絲帶樣式

還有一種三角形的 Github 樣式，參考鏈接：GitHub Corners

至此，頁面基本上效果已經達到我想要的效果，希望能幫助到你。