博客园页面设置排版

作者：Vamei 出处：http://www.cnblogs.com/vamei 欢迎转载，也请保留这段声明。谢谢！

 

在博客园写博的半年中，我有时会纠结于一些诸如写作格式和显示效果之类的小问题。我想任何一个热衷于在这里写博客的人都可能会遇到类似的问题，所以就把自己遇到的一些状况和解决方法列出来，以便交流。

在博客园看到不少很绚的博客页面，我很想知道都是怎么实现的。:-) 希望大家不要客气，在评论区留下诀窍。谢谢！

 

编辑器

下面是博客园的编辑器界面：

博客园编辑器界面

1. 查询HTML

写一篇文章实际上是构建了一个HTML网页，内容和格式都最终保存在这个HTML网页中。如果格式上有什么不确定的地方，都可以查询和修改HTML本身。你可以通过下面的“HTML”按钮来查看：

 

2. 插入代码

对于技术博客来说，代码插入是必不可少的一个环节。常规的博客编辑器通常都没有这个功能。博客园的插入代码算是比较齐全。值得注意的是“全部折叠”选项：

如果代码过长，而文章的重心又不在于分析代码，那么可以勾选这个选项。代码会隐藏成一个”View Code“的按钮，只有在点击之后才展开。这样，可以让读者专心于文章的脉络。读者快速浏览一遍之后，觉得还有兴趣的话，可以自行展开代码阅读，而不会在一开始的时候就被超长的代码吓走。

 

3. 格式与字体

格式

所谓的格式，实际上是html标签(tag)。比如，如果采用段落格式，那么内容就会被镶嵌在<p></p>的标签之间。再比如标题1，实际上是<h1>。你可以通过查询HTML源码来找出每种格式对应的标签。采用格式的好处是可以通过CSS来统一管理每一种标签所标示的内容。

 

字体

最值得推荐的字体是Courier New。它是等宽字体，每一个字符的宽度相同，所以上下两行很容易对齐，比如：

TomIDNumber = 10

VivIDNumber = 22

如果是非等宽字体，字符宽度根据字符形状发生变化，比如i会比较窄，而o会比较宽，所以上下两行很难对齐。比如Arial：

TomIDNumber = 10

VivIDNumber = 22

等宽字体是程序员的首选字体。

 

 

4. 关于颜色

每一个人都有自己的颜色喜好，有人会比较偏爱黑白的页面。但从认知心理学的角度来说，人们更容易阅读标出要点的段落和文字。特别是网络和电子阅读时代，彩色相对黑白没有额外的印刷成本，所以利用颜色标记值得一试。下划线、粗体、斜体也是相同的道理。 (在黑白印刷时代，人们惯用这三种方式来区分重点。你甚至可以在机械打字机上见到它们)。用这些标记方式的时候，最好可以在每篇博文中保持统一。比如可以用粗体表示命令，用斜体标记引用，用红色表示重点。这样，人们连续阅读同一个博客的时候不会觉得混乱。

 

CSS定制

管理 -> 设置 -> “通过CSS定制页面风”中，我们可以定制自己的CSS风格。这是很实用的功能。

 

1. 定制标签(tag)

在编辑器部分，我们看到所谓的格式实际上是HTML标签。这些标签可以通过CSS定制来统一管理和控制。比如我们想设置标题2的格式为：

 

 

可以通过添加如下CSS实现：

h2 {
  text-align: center;
  box-shadow: 10px 10px 5px #888888;
  background-color: #5FBDCE;
  color: #015666;
}

 

 

2. Image溢出和解决

图像溢出是个常见的问题。在一个小的屏幕或者浏览器中，图片的像素可能超出div的区域。比如:

 

调整前

 

你可能会重新设定图片的大小。但是由于可能的读者所使用设备可能差别很大(比如手机和大屏幕)，我们并没法预估所应设定的大小。

我们可以在CSS定制中选择img，然后使用overflow属性：

 

img {
  overflow: scroll;
}

 

这样，溢出的图像会被隐藏在滚动条中。

 

我采用了另一个方法：

img {
 max-width: 80%;
}

这样，img的宽度不会超过div宽度的80%。图片会根据情况调整大小。

 

调整后

 

定制公告、页首、页脚HTML

在管理 -> 设置中，这三者可以添加自己想要显示的HTML元素。比如在公告栏中我添加了微博的图片和豆瓣的Javascript（如上图）。你也可以增加其他更加个性化的东西。

微博：我的工具 -> 签名档 -> 获得代码，然后将代码复制到博客园的公告栏。

豆瓣：到下面网址http://www.douban.com/service/badgemaker，生成代码，然后将代码复制到博客园的公告栏。