博客园html源码编辑出错,博客园小技巧

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

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

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

编辑器

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

博客园编辑器界面

1. 查询HTML

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

2. 插入代码

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

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

3. 格式与字体

格式

所谓的格式，实际上是html标签(tag)。比如，如果采用段落格式，那么内容就会被镶嵌在

。你可以通过查询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(如上图)。你也可以增加其他更加个性化的东西。

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