博客园皮肤设置

自己手动制作的样式(没有采用)

博客皮肤

SimpleMemory

页面定制 CSS 代码

#home {  1165px}
#main {  1165px}

#sideBarMenu{ 235px; height: 800px; overflow: auto; position: fixed; top: 90px; margin-left: 90px }
#sideBarMenu li { height: 30px; line-height: 30px; font-size: 13px; }
#sideBarMenu li a {  100%; height: 30px; display: block;  }

#mainContent {  930px; margin-left:0}
#mainContent .forFlow{ margin-left:0 }

#mainContent #sideBar{ float:right }

禁用模板默认CSS

未勾选

博客侧边栏公告(支持HTML代码) (支持 JS 代码)

<script>
        $('.has-navbar').prepend('<div id="sideBarMenu"></div>');
        
        // 获取所有的h1,h2,h3
        var allH2 = $('h2');
        console.log(allH2);
        
        var htmlStr = '<ul>';
        allH2.each(function(i,item){
            if( i==0 || i==1 ){
                return true;
            }
            console.log(item.innerHTML);
            htmlStr += '<li><a href="#'+item.id+'">'+item.innerHTML+'</a></li>';
        });
        htmlStr += '</ul>';
        $('#sideBarMenu').append(htmlStr);
</script>

页首 HTML 代码

页脚 HTML 代码

别人制作好的皮肤(最终采用)

基础皮肤

SimpleMemory

页面定制 CSS 代码

https://gitee.com/meRay/Cnblogs-Theme-SimpleMemory
或者
https://bndong.github.io/

以下CSS代码放在复制过来的css代码最后

/* 自定义样式 */
#cnblogs_post_body h1{font-size:1.65rem;color:#807dd4;border-left: 3px solid #807dd4!important;padding-left: 10px!important;}
#cnblogs_post_body h2{font-family:'Microsoft YaHei'!important;font-size:1.65rem;color:#807dd4;}
#cnblogs_post_body>p{font-size:1.45rem}
.postBody {font-size:1.45rem;font-family:'Microsoft YaHei'!important;}
.code-pre {font-size:13px;border:1px solid #ccc;font-family:'Consolas'}
.postBody .cnblogs-markdown code:not(.language-env), .postBody .cnblogs-post-body code:not(.language-env) {font-family:'Microsoft YaHei'!important;}
.postBody .cnblogs-markdown code:not(.language-env), 
.postBody .cnblogs-post-body code:not(.language-env) { font-weight:400; }
#sideCatalog li.h2Offset {padding: 3px 0 3px 60px!important;}

版本:v1.3.3

路径:src/style/base.min.css

将上面的css文件中的内容复制到博客园设置中的“页面定制css代码”里面

禁用模板默认CSS

勾选

博客侧边栏公告(支持HTML代码) (支持 JS 代码)

<script type="text/javascript">
    window.cnblogsConfig = {
        GhVersions    : 'v1.3.3', // 版本
        blogUser      : "皮卡丘本丘", // 用户名
        blogAvatar    : "https://xxxx.png", // 用户头像
        blogStartDate : "2016-11-17", // 入园时间,年-月-日。入园时间查看方法:鼠标停留园龄时间上,会显示入园时间
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/BNDong/Cnblogs-Theme-SimpleMemory@v1.3.3/src/script/simpleMemory.min.js" defer></script>

页首 HTML 代码

页脚 HTML 代码

原文地址:https://www.cnblogs.com/pikachu/p/14669180.html