有园友问我的博客园的主题怎么弄的，我答应了要发一篇博文分享一下我的博客主题配置。其实是很简单的，相信懂 CSS 的人都能自己搞，但如果你懒得花时间，正好可以直接复制我写好的配置代码。

PS：按照博客园首页文章筛选的规则，这篇文章不应该放在首页，毕竟没有什么技术含量，几乎只是分享我写好的 CSS 代码。但还是希望博客园管理员例外一次，让有需要的人看到。

1、先择模板

先进入博客园的设置页面：https://i.cnblogs.com/Configure.aspx ，博客皮肤选择SimpleMemory。这个主题比较简约，我们在这个皮肤上做一些个性化调整。

2、页面定制 CSS 代码

主题采用主流的上左右的布局，最大内容宽度可以限制为 1140px。除了阅读区域，其它区域都去掉皮肤自带的白色背景，这有助于让读者在阅读内容的时候集中注意力。

在设置页面中的“页面定制 CSS 代码”贴入我写好的 CSS 代码：

/* ********************** * 整体布局 * **********************/

/* 整体布局 */body {background: #e6ecf0;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica      Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;}

#home {max-width: 1140px;padding: 15px;background: transparent;box-shadow: none;margin-top: 0;width: auto;}

#main {margin-top: 15px;}

#mainContent .forFlow {padding-right: 20px;}

/* 非阅读区域去掉白色背景 */.newsItem,.catListEssay,.catListLink,.catListNoteBook,.catListTag,.catListPostCategory,.catListPostArchive,.catListImageCategory,.catListArticleArchive,.catListView,.catListFeedback,.mySearch,.catListComment,.catListBlogRank,.catList,.catListArticleCategory {background-color: transparent;}

/* ********************** * 博客页首 * **********************/

/* 隐藏系统标题 */#blogTitle {display: none;}

/* 顶部通告条 */.c-notice {padding: 10px 0;background: tan;font-size: 0.9em;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.23);font-size: 15px;}

.c-notice > div {max-width: 1140px;margin: 0 auto;padding: 0 15px;}

.c-notice a {color: blue;}

/* 头像和社交 */.c-portrait {text-align: center;padding: 50px 0;background: #39424b;color: #fff;margin-bottom: -40px;}

/* 头像 */.c-portrait > img {display: inline-block;height: 80px;border-radius: 50%;}

/* 标题和签名 */.c-portrait h1 {font-size: 25px;font-weight: bold;margin: 5px 0;}

.c-portrait h1 a {color: #fff;}

.c-portrait h2 {font-size: 16px;margin: 7px 0 10px;color: #ccc;}

/* 社交图标 */.c-social a {color: #959da5;display: inline-block;vertical-align: middle;}

/* ********************** * 导航栏 * **********************/

#navigator {padding: 0 10px;border-bottom: 2px solid #ccc;}

#stats_article_count {display: none;}

/* ********************** * 侧边栏 * **********************/

#sideBar {width: 250px;margin-top: 0;}

#sideBar a {color: inherit;}

/* 隐藏侧边公告标题 */.newsItem .catListTitle {display: none;}

/* 增加列表项间距 */.sidebar-block li {margin-bottom: 5px;}

/* ********************** * 文章列表 * **********************/

/* 文章列表 */#topics .postTitle {font-size: 28px;margin: 35px 0 30px;padding-left: 0;}

#mainContent .day {padding: 15px 20px;background: #fff;}

#mainContent .day .postTitle a {display: inline-block;}

/* ********************** * 文章详情 * **********************/

pre {margin-bottom: 1.35em;}

pre code {padding: 10px 16px !important;}

.post {background: #fff;padding: 0 60px 60px;box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);}

/* 文章标题 */.postTitle {border-left: 8px solid #21759b;margin-bottom: 5px;font-weight: bold;line-height: 1;box-sizing: border-box;}

.postTitle a:hover {margin-left: 0;}

/* 去除首行缩进 */.postBody p,.postCon p {text-indent: 0;}

/* 重写引用块样式 */.postBody blockquote {min-height: auto;border-top: none;border-bottom: none;border-right: none;padding: 0 0 0 1em;}

/* 增加底部留白 */#cnblogs_post_body {padding-bottom: 5px;}

/* 防止图片溢出 */#cnblogs_post_body img {max-width: 100%;}

/* 文章底部信息 */.postDesc {margin-top: 0;}

/* ********************** * 评论 * **********************/

#comment_form_container .comment_textarea {width: 100%;}

.comment_vote {padding-right: 2px;font-size: 14px;margin-top: 10px;}

.comment_vote a.comment_digg {color: #f80;}

.feedbackItem {margin: 20px 0 25px;background: #fff;padding: 10px 15px;}

.feedbackCon {font-size: 13px;border-bottom: 0;padding: 10px 5px 0 5px;text-align: justify;}

/* ********************** * 文章评价 * **********************/

#div_digg {position: fixed;right: 30px;bottom: 50px;background: #fff;padding: 20px 20px 15px;border-radius: 5px;border: 1px solid #888;box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);}

/* ********************** * 隐藏广告 * **********************/

#ad_t2,#opt_under_post,.c_ad_block,#under_post_news,#under_post_kb {display: none !important;}

/* ********************** * 适配手机 * **********************/

@media (max-width: 767px) {#home {padding-left: 0;padding-right: 0;}#div_digg {width: auto;padding: 0;right: -25px;bottom: 3px;box-shadow: none;}#div_digg .buryit {display: none;}#mainContent .forFlow {padding-right: 0;}#mainContent .post {padding: 0 20px;}

#sideBar,#blog-comments-placeholder {padding: 0 15px;}}

3、页首 Html 代码

页首主要放头像、博客名称和一句话介绍（或签名）等，还可以在顶部放一个通告条或广告条。在设置页面的“页首 Html 代码”处贴入以下代码：

<div class="c-notice"><div>    这里是你的通告内容</div></div>

<div class="c-portrait"><img src="这里是你的头像URL" alt="" />

<h1><a href="你的博客园地址">你的博客名称</a></h1><h2>你的一句话介绍</h2>

<div class="c-social"><!-- 这里放你所拥有的社交图标 --></div></div>

上面的代码请根据个人情况进行替换其中内容。由于系统标题不好控制布局，所以上面写了标题的 HTML 代码，原来的系统标题在 CSS 中隐藏了。另外，选一张你帅气的照片，上传到博客园相册，然后复制相片的 URL 路径，替换上面代码。如果你懒得上传，你也可用使用其它网站（比如 GitHub）的头像的 URL 进行替换。

4、博客侧边栏公告

在设置页面的“博客侧边栏公告”自定义侧边栏的 Html 内容，这个是可选的，建议放个人的信息。比如像我这样：

<!-- (省略其它部分，如个人公众号二维码) --><p style="margin-bottom:15px;line-height:2">  微信号：<b style="color:#1aad19;font-size:16px;">willick</b>（请备注博客园）<br />  头条号：<b style="color:#f85959;font-size:13px;">码农老王</b>（不仅仅是编程）<br />  所在地：上海 闵行区</p>

这就基本上完成了。你还可以在博客签名设置页面为你的文章添加转载授权说明。

如果遇到问题请在评论区留言。