利用docs编辑并在cnblogs中快速发表的方法

2010年1月6日

利用docs编辑并在cnblogs中快速发表的方法 

    BlogJava 和 docs 的一个共同点是：两者都使用了 CSS 样式自定义功能，都是将用户编辑的主内容放在一个块内。BlogJava 中 div 块的 class 名为 postText (正文),postText2 (首页)；docs 中 div 块的 id 名为 doc-contents. 这样的话，可以将 docs 中的 CSS 样式稍加修改粘贴到 BlogJava 中，从而达到直接将 docs 中的 HTML 代码粘贴到 BlogJava 的编辑框中就能获得和在 docs 中一样满意的效果。

cnblogs' style    

/* --cs: Chinese Style-------------------------------- */ 

div.cs { 

     font-family: "宋体"; font-size: 12pt; 

     margin: 0px auto; padding: 0 0; 

} 

div.postText2 h1, 

div.postText2 h2, 

div.postText2 h3, 

div.postText2 h4, 

div.postText2 h5, 

div.postText2 h6 { font-family: "宋体"; padding: 16px 0; margin: 0px auto;} div.postText2 h1 { font-size: 18pt; } 

div.postText2 h2 { font-size: 14pt; } 

div.postText2 h3 { font-size: 12pt; } 

div.postText2 h4 { font-size: 11pt; } 

div.postText2 h5 { font-size: 8pt; } 

div.postText2 h6 { font-size: 8pt; } 

/* -- 设置行间距为 1.5 ------------------------ */ 

body { line-height: 1.5; }

docs' style    

/* --cf: Chinese Style-------------------------------- */
div.cs {
    width: 800px; margin: 0px auto; padding: 0 20px;
    font-family: "宋体"; font-size: 12pt;
}
h1, h2, h3, h4, h5, h6 {
    width: 800px; margin: 0px auto; padding: 16px 20px;
    font-family: "宋体";}
h1 { font-size: 18pt; }
h2 { font-size: 14pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11pt; }
h5 { font-size: 8pt; }
h6 { font-size: 8pt; }

    此样式表有几个说明：

1. 由于博客中的页面是按比例调整的，因此除去 docs 中 cs 块的宽度及边框的限制；
2. 为了区分 docs 中定义的标题和博客中非正文区域中的标题，利用 CSS 样式表的递归性，在每一个 docs 标题样式前加上 div.postText2 前缀；
3. docs 的 1.5 倍行距属性没有在自定义样式中，因此，在博客样式表中单独添加。