博客园代码定制
博客园代码定制
版本：2019-08-08
本文基于simple memory模板，且已获取css和js权限，此版本并非最终版本。
如有错误请指出，代码开源可以修改完善，仅用于学习交流，转载时请注明出处！
本文记录了对博客园主页优化的尝试过程以及相关的css源码。
在此之前默认已在“管理-选项”部分设定好了每页显示的内容，在“管理-设置”部分进行下列设置。
part 1 定制css代码（body部分）
首先应该解决网页端缩放和手机端图片显示不全的问题，这里采用手机端“强制使用网页端”的模式来修改body部分的设置。
通过dream weaver查看全大小下的(min-width, max-width)设置自适应格式，并设置宽度为100%。
1 body{
2 width: 100%;
3 min-width: 740px;
4 max-width: 865px;
5 }
其余部分的优化可以借助浏览器开发者模式下修改元素逐步完善（借助“选择元素”和“元素突出显示”可以节省阅览代码的时间），再将“修改”部分的属性复制到博客园相应位置。
设置博客主标题的字体格式（鼠标经过）。
1 /* bundle-simplememory.min.css (1, 561) */
2 a:link {
3 color: rgb(102, 8, 116);
4 text-decoration: none;
5 }
设置博客主标题的字体格式。
1 /* bundle-simplememory.min.css (1, 1047) */
2 #blogtitle h1 a {
3 color: rgb(102, 8, 116);
4 }
设置文章标题的字体格式，各页面将继承这个格式（鼠标经过）。
1 /* bundle-simplememory.min.css (1, 2597) */
2 .posttitle a:link, .posttitle a:visited, .posttitle a:active {
3 color: rgb(102, 8, 116);
4 transition: all .4s linear 0s;
5 }
设置文章标题的字体格式，各页面将继承这个格式。
1 /* bundle-simplememory.min.css (1, 2659) */
2 .posttitle a:hover {
3 margin-left: 30px;
4 color: rgb(102, 8, 116);
5 text-decoration: none;
6 }
设置post部分的字体样式，并取消原模板自带的“时钟”图案。
1 /* bundle-simplememory.min.css (1, 2833) */
2 .postdesc {
3 font-size: 13px;
4 background: none;
5 color: rgb(0,127,0);
6 float: left;
7 width: 100%;
8 clear: both;
9 text-align: left;
10 padding-left: 0px;
11 padding-right: 5px;
12 margin-top: 0px;
13 line-height: 1.5;
14 }
设置昵称、园龄等字体格式。
1 /* bundle-simplememory.min.css (1, 3410) */
2 #sidebar a {
3 color: rgb(255, 0, 255);
4 }
设置背景颜色（透明度）。
1 /* bundle-simplememory.min.css (1, 253) */
2 body {
3 color: #000;
4 background-color: rgba(255, 255, 0, 0.1);
5 min-height: 101%;
6 font-family: bold;
7 }
设置公告、标签等box的透明度。
1 /* bundle-simplememory.min.css (1, 722) */
2 #home {
3 margin: 0 auto;
4 width: 65%;
5 min-width: 950px;
6 background-color: rgba(255, 225, 255, 0.5);
7 padding: 30px;
8 margin-top: 50px;
9 margin-bottom: 50px;
10 box-shadow: 0px 6px 18px rgba(127,127,127,0.5);
11 }
设置公告、标签等box的阴影和位置。
1 /* bundle-simplememory.min.css (1, 4334) */
2 .newsitem, .catlistessay, .catlistlink, .catlistnotebook, .catlisttag, .catlistpostcategory, .catlistpostarchive, .catlistimagecategory, .catlistarticlearchive, .catlistview, .catlistfeedback, .mysearch, .catlistcomment, .catlistblogrank, .catlist, .catlistarticlecategory {
3 background: #f8f8f8 !important;
4 margin-bottom: 25px;
5 margin-top: 25px;
6 width: 225px;
7 word-wrap: break-word;
8 box-shadow: 0px 2px 6px rgba(127,127,127,0.5);
9 box-sizing: border-box;
10 border: 10pt solid #f8f8f8 !important;
11 border-top-width: 5pt !important;
12 }
去除广告（推荐文章）。
1 /* blog-common.min.css (1, 18665) */
2 .c_ad_block {
3 margin-top: 10px;
4 line-height: 1.5;
5 display: none;
6 }
设置文章“推荐”一栏位于头像和“支持”中间，节省空间。
1 /* blog-common.min.css (1, 18975) */
2 #green_channel {
3 padding: 10px 0;
4 position: absolute;
5 left: 180px;
6 margin-bottom: 10px;
7 margin-top: 10px;
8 border: #c0c0c0 1px solid;
9 font-size: 12px;
10 width: 350px;
11 text-align: center;
12 }
去除广告（最新it新闻）。
1 /* blog-common.min.css (1, 21519) */
2 #ad_t2 {
3 margin-top: 5px;
4 line-height: 1.8;
5 display: none;
6 }
去除引用部分的自带图案，因模板而异。
1 /* bundle-simplememory.min.css (1, 15084) */
2 .postbody blockquote {
3 background: url('images/comment.gif') no-repeat 25px 0;
4 background-image: none;
5 min-height: 35px;
6 _height: 35px;
7 line-height: 1.6em;
8 color: #333;
9 }
设置导航栏的字体，改变字体，增加阴影。
1 /* bundle-simplememory.min.css (1, 1589) */
2 #navlist a:link, #navlist a:visited, #navlist a:active {
3 color: rgb(0, 0, 0);
4 text-shadow: 0px 1px 1px rgba(255,255,0,0.5);
5 font-weight: bold;
6 }
页面仍有不完善之处，如部分图片在手机端显示不全，缩放后body部分是左对齐导致左右margin不对称不美观，title位置缺少背景图片，等等。（暂不打算完善）
part 2 公告栏优化（bar部分）
增加文字和图片。
1 欢迎来到阆苑祁寒的小屋，在这里可以尽情享受数学和物理的奇妙！ 2 <div><img src="https://images.cnblogs.com/cnblogs_com/sxwlttsd/1497926/o_33012779.jpg" width="100" height="100"></div>
还可以增加js部件，以及更多内容。
copyright ©2019 阆苑祁寒
博客园的源代码可自行查看，备份暂不公开！