博客园页面定制html代码,博客园代码定制

博客园代码定制

版本：2019-08-11

本文基于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

数学公式支持。(页首代码定制)

1

还可以增加JS部件，以及更多内容。

Copyright ©2019 阆苑祁寒

博客园的源代码可自行查看。

原文链接:https://www.cnblogs.com/sxwlttsd/p/11324517.html

如有疑问请与原作者联系

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com

特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有