目录视图 摘要视图 订阅
自定义博客园Markdown样式.超简单!
[-]
前言
实现方式
我的样式表中那些选择符是怎么来的
前言
写笔记就喜欢用Markdown, 轻量, 直观, 易保存. 但是博客园自带的Markdown样式, 实在惨不忍睹.
不说别的, 多行代码样式看起来, 实在别扭, 字体太小. 虽然不排斥其它等宽字体作为代码字体, 但
是我个人已经习惯Consolas字体.
博客园官方最早的样式设置教程, 我看了下基本能追溯到2008年, 而且常年没跟新了, 在网上看了其
它大牛分享的样式设置, 又感觉特别麻烦, 索性自己研究个简单的分享给大家.
实现方式
在博客园上写过博客的朋友都知道, 博客园前台基本就两个界面: 首页, 文章页. 分别在这两个页面
上查看源代码可以看到, 所有应用在文章中的CSS样式表. 如下图:
上图第8行和第11行的样式表, 是博客园自带的样式表, 我们不用管它. 而第9行样式表是皮肤样式表
也就是我们选择的皮肤对应的样式表, 第10行是关键, 我们图中href地址也可以想到, 这正是
用户自定义样式所存放的位置.
大家可以在这里, 看到我自己定义的样式表.
OK, 现在问题来了, 我们应该在哪写该样式呢. 很简单管理->设置里就有. 如下图所示:
我的样式表中那些选择符是怎么来的
很简单, 用浏览器自带开发者工具1个1个选中查看, 并不太多, 因为组成Markdown的基本语法本身就
不多, 为此我专门在博客园上写了篇包含Markdown基本元素的博客, 供大家测试.博客链接是:
http://www.cnblogs.com/asheng2016/p/7462731.html
【分享】博客美化(2)自定义博客样式细节
阅读目录
1.公共的页面头部
2.首页内容主体
3.公共侧边栏
4.查看文章内容主体
5.资源
博客园美化相关文章目录：博客园博客美化相关文章目录
这一篇将根据我的博客目前使用的SimpleMemory模版和自己的理解来分析下，CSS文件的一些内容。如果不当，还请大家指正，因为我本身也不是很懂CSS，加上博客园这个CSS文件还挺大，内容挺多，搞错了，还请大家理解。我自己都是改好后，上传到博客，看效果，不满意再改。
进入主题之前，先感谢博客园团队，sevennight，marvin，博皮小组以及@Newlife群-长沙老猪，以及其他博客园关于样式设计制作文章的作者，没有一一列出，也记不清了。本文是在很多文章和现有博客模版的基础上，自己磕磕碰碰，总结下来的。
本文原文地址：博客美化(2)自定义博客样式细节
回到目录
1.公共的页面头部
1.1 博客标题样式
上面讲到的其实只是一些常规的东西，希望对大家有帮助，但其实更核心的东西，还是如何定义博客园样式及其细节。其实我这里说的自定义样式，是针对你使用的模版来的，模版使用的css文件可以通过网页的源码找到链接，然后下载下来，针对性的修改。下面将通过本博客的模版对应的css文件对几个重点位置的地方进行注释和说明，其他可以下载我的资源里面的文件，自己研究。为了便于理解，直接对照代码和注释来看吧：
按 Ctrl+C 复制代码
/home和头部开始*********************/
home {
margin: 0 auto;
72%;/*原始65*/
min- 980px;/*页面的最低宽度,也就是页面顶部的宽度*/
background-color: #fff;
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
按 Ctrl+C 复制代码
上面就是头部的主要样式，以前我用的博客模版，那个宽度非常宽，我不知道怎么修改，直到用这个模版，根据原作者的CSS文件和博客园官方团队的提示，才知道要在width这个地方修改。我稍微增加了一点，65%看起来是稍微窄了点，当然大家可以根据自己的需要来。
我们在上一篇的后台设置中也提到了，可以设置博客园的主标题和次标题文字，而文字的格式就可以在下面的代码中设置：
按 Ctrl+C 复制代码
/博客标题/
blogTitle {
height: 60px; /*高度*/
clear: both;
}
/主标题格式/
#blogTitle h1 {
font-size: 26px;
font-weight: bold;
line-height: 1.8em;/原始 1.6em/
margin-top: 10px;/*原始 15px */
}
#blogTitle h1 a {
color: #515151;
}
/*超链接颜色*/
#blogTitle h1 a:hover {
color: #21759b;
}
/*次标题格式*/
#blogTitle h2 {
font-weight: normal;
font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color: #757575;
float: left;
}
按 Ctrl+C 复制代码
上面的代码也很明显，主标题和次标题是2个标题样式，可以定义大小颜色，我都有一些改动，大家也可以对照现在页面的顶部，字体稍微比原作者的要大了一些，大小了，感觉看起来难受。其实懂CSS，经常搞这个的人看定义也基本能看懂，我注释是为了自己方便理解，毕竟不经常搞，万一哪天要用，免得又去回忆和搜集。当然还可以添加logo图片，大家可以看看完整的CSS文件以及我后面提供的Excel资料。
1.2 导航栏样式
我在上一篇文章的2.4节页脚Html代码中，提到过导航栏设置的代码，那一段代码是Js来修改博客的栏目和链接，至于其他栏目我移到“公告”中去了，毕竟这个链接作用不大。下面这里就要讲解导航栏的格式，如何在CSS中设置。
按 Ctrl+C 复制代码
/头部导航栏/
navigator {
font-size:15px;
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
height: 60px;/*导航栏高度，原始50*/
clear: both;
margin-top: 25px;
}
/导航栏设置,可以自定义导航栏的目录/
navList {
min-height: 35px;
float: left;
}
#navList li { /每一个栏目节点/
float: left;
margin: 0 5px 0 0; /这里原来是0 40px 0 0 /
}
#navList a { /栏目文字的格式/
display: block;
5em;
height: 22px;
float: left;
text-align: center;
padding-top: 19px;
}
按 Ctrl+C 复制代码
注意导航栏的栏目太多的话，栏目之间的间隔需要修改下，应该是li里面的margin，我修改为5了，所以看起来比较挤一点，没办法栏目有点多，而且我还把字体及高度都修改了下。至于超链接的颜色和效果之类的，我都没有改动，也不贴代码了。还有一个就是博客统计，就是导航栏右边的那个信息，“随笔-XX 文章-XX 评论-XX ” 的格式也可以设置。可以让它的字体稍变小点，不要和导航栏的栏目字体一样大：
按 Ctrl+C 复制代码
/博客统计/
.blogStats {
float: right;
font-size:13px;
color: #757575;
margin-top: 19px;
margin-right: 2px;
text-align: right;
}
按 Ctrl+C 复制代码
回到目录
2.首页内容主体
博客首页的内容主体，主要就是博客首页的文章列表，包括置顶文章以及按时间顺序排列的文章【如果不希望文章显示在首页，可以在文章编辑和发表的页面进行设置】，如下图：
而文章列表的标题，内容简介以及尾部的发表备注信息的格式都是可以设置的。有的博客好像是按日期进行列举，所以有下面这个东西，不过这个模版好像没什么用，也可以设置日期标题的格式。代码如下，进行了注释：
按 Ctrl+C 复制代码
mainContent {
min-height: 200px;
padding: 0px 0px 10px 0;
padding-top: 10px;/*原始10*/
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
margin-left: -22em;
100%;
font-family:"微软雅黑" , "宋体" , "黑体" ,Arial;/*比较钟爱微软雅黑*/
font-size: 14px;/*自己加的，不知道有冲突没有？*/
}
.day { /每日文章列表/
min-height: 10px;
_height: 10px;
margin-bottom: 20px;
padding-bottom: 5px;
position: relative;
}
/日期标题，有的博客按照日期进行排列/
.dayTitle {
display: none;
border: 1px solid #21759b;
background: azure;
border-radius: 50%;
font-size: 14px;
height: 65px;
line-height: 1.5;
margin: 15px;
text-align: center;
63px;
margin-left: -100px;
clear: both;
position: absolute;
top: -15px;
}
.dayTitle a { /日期标题的文字格式/
display: inline-block;
color: #21759b;
margin-top: 15px;
60px;
}
按 Ctrl+C 复制代码
而主要的还是发表的文章的标题以及内容的格式，看下面：
按 Ctrl+C 复制代码
/发表文章的标题/
.postTitle {
border-left: 3px solid #21759b;
margin-bottom: 10px;
font-size: 20px;
float: right;
100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
/文章内容（简介内容）/
.postCon {
float: right;
line-height: 1.5em;
100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
/文章附加信息/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/5px padding-left: 90px;posted 发表时间左边距离/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
按 Ctrl+C 复制代码
这里我主要是修改了一下字体，优先使用微软雅黑，再就是对那个发表的时间，进行了移位，让它靠近右边一点。貌似没什么效果，不知道是不是没改对地方？文章摘要内容的格式也比较简单，我没有做什么修改。
回到目录
3.公共侧边栏
公共侧边栏就是当前右边这部分，包含的内容很多，也是按功能进行分块，如公告栏，日历，找找看搜索框，谷歌站内搜索等等。如下面是侧边栏的总体样式，而对每个部分还可以单独设置：
按 Ctrl+C 复制代码
/侧边栏开始***************************/
sideBar {
margin-top: -15px;
250px;/*侧边栏宽度*/
min-height: 200px;
padding: 0px 0 0px 5px;
float: right;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
#sideBar a {
color: #757575;
}
}
#sideBar a:hover {
color: #21759b;
text-decoration: underline;
}
按 Ctrl+C 复制代码
侧边栏的其他部分我没有过多的设置，都是采用模版原始的，由于组件太多，大家可能很不清楚，如果想要详细了解。可以看看下面这张表 组件和class,id的对照表。这个是貌似是博客园官方测试页面找到的，后面也提供一个下载。大家要对照相应的模块和标签，去修改样式。
对于那些不需要的模块，可以看前一篇的文章，关于后台的设置，为了简单，我就把很多部件给隐藏了。
回到目录
4.查看文章内容主体
单篇文章内容的主题也是另外一个比较重要的，和首页的文章列表显示稍微有些不同。文章内容主要分为 一级标题h1，二级标题h2，三级标题h3以及正文，图片，表格等格式都是模版的格式，没有变化。h1，h2的格式我是单独采用以前的，也是从一个博客园网友分享的代码里面抄过来的，有1，2年了，也找不到原出处，在此表示感谢。下面贴出h1，h2的格式，这个格式我是直接放在 后台设置的“ 页面定制CSS代码”框中的，本来想和现在的模版CSS文件合并，但技术太菜，合并之后总会有问题，所以也没有去折腾。应该是会把模版的覆盖掉。
按 Ctrl+C 复制代码
按 Ctrl+C 复制代码
这个样式还是非常显眼和漂亮的，大家可以用一下，设置合理的标题可以让文章思路更加清晰，还可以为后面的生成文章目录做准备。目录就是提取这些h1,h2组合而成的。
回到目录
5.资源
其他的如评论框，评论按钮，标签的设置也都可以在CSS文件中设置。在这里提供我博客的CSS文件以及博客园模版设计的一个Excel文件给大家，希望能用得上。
本博客的CSS文件：bundle-SimpleMemory-A5.css
博客园模版设计Excel文档：博客皮肤开发文档.zip
阅读目录
1.博客园后台设置
2.自定义样式的设置
博客园美化相关文章目录：博客园博客美化相关文章目录
一直都拜膜那些博客园的皮肤设计高手，由于本人对前端研究甚少，所以js,css这种东西只能看得懂最基本的，会简单改改。然后一直对自己的博客皮肤不满意，也找不到好的文章例子来对应修改。博客园虽然有一些文章，但不全面，没办法，只能自己慢慢钻研。上周，博客园官方团队又发布了一款新的皮肤：SimpleMemory ，作者是sevennight。这款皮肤个人感觉非常高大上，而且一扫本人心中的疑惑，以前很多不能实现或者想要实现的，都满足了，所以果断将自己的博客模版切换到了SimpleMemory模版(也就是你当前看到的博客页面)，但同时也碰到了很多问题，所以一起记录下载，并搜集了相关资料，一起分享给大家，同时也是自己折腾的一个总结，以后忘记了也可以翻出来学习学习。接下来将循序渐进，介绍博客园后台设置与样式设置的相关内容。
进入主题之前，先感谢博客园团队，sevennight，marvin，博皮小组以及@Newlife群-长沙老猪，以及其他博客园关于样式设计制作文章的作者，没有一一列出，也记不清了。本文是在很多文章和现有博客模版的基础上，自己磕磕碰碰，总结下来的。
本文原文地址：博客美化(1)基本后台设置与样式设置
回到目录
1.博客园后台设置
在设置样式之前，其实还是了解一下博客园后台的相关设置比较好，毕竟后台设置里面提供了很多功能，可以解决问题。本人之前使用的是SimpleBlue模版，所以当初不会自定义css，也只能从后台设置找一些办法了。
1.1博客标题与子标题
博客标题文字的设置在 “博客后台管理”->“设置”中，如下图，本文的设置：
效果就是本博客顶部的效果，而至于标题的格式如大小，颜色可以在自定义的css中修改，将在后面介绍。
1.2控制博客控件显示
博客园的博客是按照功能分为很多个部件（子控件）的，例如 公告栏，日历，收藏夹，随笔分类，阅读排行榜等等，具体你可以看看本文当前页面右侧的部件，很丰富这些控件非常多，根据个人需要，可以自定义进行显示或者不显示。同时订阅博客的条数，以及博客首页显示的博客数目等等都可以进行设置。这样就可以显示重点内容，重点文章给读者。具体设置页面在： “博客后台管理”->“选项”页面中，如下图所示：
看看上图的一些功能，很直观，如可以选择默认的编辑器，可以设置列表的数量，一起其他一些附加设置，如评论等等还是比较有用。特别是首页，经过合理的设置，首页就可以简单一些，而不是一眼看来，多，杂，乱。下面也是这个页面的设置，可以对部件的显示进行设置：
如上图所示，本博客就将一些部件去掉了，如收藏夹，相册等等。这样空间就多了，也让人感觉好一点。
特别要提示的是，每个博客的默认页面上的 “导航栏”，并且基本都会有“首页”，“订阅”，“联系”等栏目。这几个栏目是可以在这里通过设置而不显示的，只有一个栏目比较特殊 ：“管理”，无法直接设置取消，需要自定义css，或者js来移除。这里也是邮件咨询了“博客园团队”，顺便赞一个，博客园团队的回复速度很快，也很耐心。这个移除方法我在后面的样式设置里面介绍。
回到目录
2.自定义样式的设置
注意，自定义样式要用到css和js文件，需要有js权限，如果没有js权限，需要自己发邮件向管理员申请开通，邮箱：contact@cnblogs.com。介绍自定义样式的细节，按照博客园后台设置提供的“设置”细节先后顺序来。
2.1 页面定制CSS代码
页面定制就是用来修改当前页面的，当然可以基于当前页面，你也可以完全的自己编写。如下图我的博客后台“页面定制CSS代码”的界面：
上面的CSS代码主要是设置正文的 标题的样式的，也就是你现在看到的 h1,h2标题的格式。注意如果你点击了“禁用模版默认CSS”的话，那就要求你自己编写或者借鉴其他人编写一个符合博客园规范的CSS文件，否则会乱码。当然也支持通过文件的方式添加。你可以把你的CSS文件上传到“文件”中，这样可以直接通过上传文件的地址来引用对应的CSS文件。这样更方便。如我的后台就就很多这样的CSS和js文件：
这里就是设置CSS样式的主要地方，当然具体的设置方法还是没有讲到，参考下一篇的内容。
2.2 公告栏设置
公告栏如本博客右上方所示，可以在后台的“设置”中的“博客侧边栏公告（支持HTML代码）”进行设置，公告栏的格式可以在CSS进行，这里只需要输入文字和简单的链接就够了，例如，本文就将 “管理”，“订阅”等菜单栏目移到了 “公告栏”，同时增加了博客统计的代码(统计代码需要自己去http://histats.com/网站申请帐号，自己获取自己博客的代码)：
至于内容的显示和统计按钮的情况，大家可以对照当前页面右上角的公告栏目。特别是 联系，订阅 和管理 3个栏目，其实就是3个链接而已。
2.3 页首Html代码
这里可以自定义一些页首的Html代码，例如引入外部功能的js,Css文件等。也可以添加一些自定义的JS代码，当然要对JS比较精通啊，像我就不懂JS，为了删除个元素还是请人远程解决的。呵呵，不过没关系，人生在于折腾，折腾来折腾去，也折腾得差不多了。我的页首主要是加载了一个外部分享的js和自定义的CSS文件，在模版CSS的基础上对格式进行了简单的修改。更加符合我的品味吧，不过大家有啥意见，也可以提出来。如下图所示：
其中bootstrap.min.js和marvin.nav.my1502.css是一个自动生成目录的css文件，要感谢博客园@marvin，当初调试这个生成目录的功能也花了1天时间，在修改为现在的模版后，出现了一点问题，还没来得及去修改，暂时搞不清楚到底问题在哪里。
2.4 页脚Html代码
由于很多外部功能需要等待在页面最后才能引入或者才能运行，所以部分的js和css文件需要在这里引入。例如上面提到的，我把“管理”栏目去掉了，就是通过在页脚添加js代码删掉的(博客园团队给的方法是设置#MyLinks1_Admin{display: none;})。然后手动通过js添加了几个本博客的自定义栏目，相当于一个目录，就是页面顶部大家看到的：
用的代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
当然还可以生成目录等其他功能，也可以在这里添加对应的代码或者文件，来完成你要的功能。由于自定义样式的内容比较多，特意放到了下一篇文章，将于近期发布。请关注或收藏本博客。下一篇文章网址：【分享】博客美化(2)自定义博客样式细节 ，3.20-3.21发布，敬请关注。