我想追求的目标:让博文的排版看起来简洁、淡雅,而不是杂乱无序。
可惜的是:一般而言在线编辑的功能总是有太多的限制,所以只能就简,根据这两天对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编辑按钮在源代码视图中也是可以工作的。为了方便书写,在桌面上可以放置一个包含基本标签的文本文件作为模板,书写时复制粘贴使用。
本文出自 “软件之道” 博客,请务必保留此出处http://ruandao.blog.51cto.com/3168808/591499
转载于:https://blog.51cto.com/bjutmameng/1742992