码迷,mamicode.com
首页 > 其他好文 > 详细

博客园代码定制

时间:2019-08-09 01:54:47      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:block   管理   源码   模板   基于   new   memory   visit   auto   

博客园代码定制


版本: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 阆苑祁寒


博客园的源代码可自行查看,备份暂不公开!

博客园代码定制

标签:block   管理   源码   模板   基于   new   memory   visit   auto   

原文地址:https://www.cnblogs.com/sxwlttsd/p/11324517.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!