在51CTO中如何控制博文的排版格式

我想追求的目标：让博文的排版看起来简洁、淡雅，而不是杂乱无序。

可惜的是：一般而言在线编辑的功能总是有太多的限制，所以只能就简，根据这两天对51cto博客编辑器的了解，规划如下排版的约定，用尽可能简单的手段达到较为满意的结果。

1. 关于程序源代码的格式控制

一看就知道，51cto中使用的是fckeditor编辑器，该编辑器下其实可以集成syntaxhighlighter，动态在DOM内存中生成语法渲染的代码显示。

而现在51cto的编辑器实在是做得很低劣，可能由于安全的原因还不让用style（因为style中是可以搞点js代码的！），这使得我无法用Live Writer中InsertCode代码插件，该控件使用嵌入样式。使用其他一些插件可以生成行内样式，不过是在是太臃肿难看了，简直无法忍受。怎么办呢？

网页中源代码的语法渲染显示，其实最佳的方式就应该是syntaxhighlighter中的js实现方式。其他的纯样式实现（不论嵌入还是行内）面临的一个比较倒霉的问题是：在网页中选中代码部分的文本，复制粘贴到文本编辑器（不论是记事本、还是VisualStudio中），将没有换行，而是成了长长的一行。日后如果想整理博客文档，就会很不方便。

为此，反正现在51cto中的渲染效果就那么差，不如简单点，干脆就用div中包含一个pre加上几个简单行内样式显示算了。为了变换尖括号等成为实体，可以借用Live Writer中syntaxhighlighter插件，生成后手工在源代码中修改一下。

2. 文章篇章结构的控制

文章中的标题一般就使用h3/h4两级，标题如果需要编号，也不使用<ol>。

段落使用<p>，不使用缩两格，因为若用两个空格上传时会被过滤掉，而使用行内样式又太麻烦了。

一般情况下应该不使用<br/>和换行，文章中插入图表时，应该放在单独的<div>中，图的正上方和正下方的标题说明放在单独的<p>中，而不是用<br>换行。在div中设置水平居中，让图和文字居中显示。

对于需要强调文本使用<bold>即可，不需要设置过于花哨的颜色、字体的变化。

列表：只需指定编号和标记即可，目前直接使用ol和ul时，什么前缀都不显示，不太好看。

表格：合理使用表头、表尾、标题等标记即可，至于样式只需要边框线折叠和颜色设为灰色即可。

3. 关于图片和附件的存储

直接使用LiveWriter上传是很方便，用编辑器中的插入图片功能也很不错，但是这种方式生成的图片文件名可读性都很差，而且在Writer中还会丢失原始图片。对于附件有一个比较糟糕的问题是Writer的附件插件51cto不支持，本来在51cto中已经上传了附件，用writer编辑发布之后，附件的连接就不见了，估计文件还在，但是记不清url，也没办法在正文中建立连接了。

其实我自己原来改写过fckeditor的源代码，可以解决这些问题的，当时是在asp.net下做的，而51cto是用php搞得，不知道好不好改。

为了完全掌控图片和附件，我决定采用我在Windows Live帐号中的文件存储功能。自己手动建立连接。

4. 博客文章的个性化

整篇博客放在一个<div class=”ruandao”>的标记中，在改div中统一设定一些样式，比如背景，行间距，首行缩两个，字体颜色等等。

一般来说，可以直接在编辑视图中写，只要不随意乱点格式控制，切换到源代码视图后结构还是很清晰的，这时直接在源代码窗口中也可以放心的直接用标记编辑，而且Writer编辑按钮在源代码视图中也是可以工作的。为了方便书写，在桌面上可以放置一个包含基本标签的文本文件作为模板，书写时复制粘贴使用。