两分钟搞定博客园自定义样式

整体皮肤样式

选用的是在 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

至此，页面基本上效果已经达到我想要的效果，希望能帮助到你。