自定义博客园样式

已本博客样式为例，如何自定义博客园的主题样式

代码仓库

github仓库

一、在管理项中设置好默认主题 "simpleMemory"

二、博客侧边栏公告

插入以下html代码

• 注：里面的头像可以到自己主页找链接

<!-- 自定义侧边栏公告 -->
<div id="cus_sider">
    <div class='cus_notice_box'>
        <div class='cus_avatar_box'>
            <a title="是大尧啊的博客" href="https://www.cnblogs.com/liyaocool/">
                <img alt='头像' src="https://pic.cnblogs.com/avatar/3087770/20230131102700.png" />
            </a>

        </div>
    </div>

    <ul class="cus_nav">
        <li>大尧</li>
        <li><a href="mailto:liyaoyes@qq.com" target="_blank"><i class="fa fa-envelope-o fa-fw"></i>: liyaoyes@qq.com</a></li>
    </ul>
</div>

三、页面定制css代码

插入一下css

/* 修改默认主题样式 */
.has-navbar {
    background-color: #fafdfa;
}
#home {
    width: 80%;
}
#blog-calendar {
    display: none !important;
}
#cnblogs_ch {
    display: none;
}
#under_post_card1 {
    display: none;
}
#under_post_card2 {
    display: none;
}
#navList>li:first-child {
    display: none;
}
#nav_left>li:first-child {
    display: none;
}
.comment_textarea{
    width:100% !important;
}
#sidebar_news>.catListTitle{
    display: none;
}



/* 自定义样式 */
.cus_sider{
    text-align: center;
}
.cus_notice_box {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 1rem;
}
.cus_nav{
    text-align: center;
    font-size: 16px;
}
.cus_avatar_box {
    width: 150px;
    height: 150px;
    border-radius: 25px;
    overflow: hidden;
}
.cus_avatar_box img {
    width:100%;
    height:100%;
}

四、页首HTML代码

插入一下html代码

<!-- 自定义页首-->
<header id="cus_header">

</header>

五、页脚HTML代码

插入以下html代码

<!-- 自定义页脚 -->
<footer id="cus_footer">

</footer>


<!-- 自定义js脚本 -->
<script>
    // 初始化
    function init() {

    }
</script>