博客文章规范 示例 Example(825)
持续更新中..
标题一
一级标题 h1.
标题二
一级标题 h2.
标题三
一级标题 h3.
标题四
一级标题 h4.
备注: 文章内容最多采用至四级标题即可,不建议标题层级太多。
引用
普通引用
加粗标题 普通引用中加粗不换行。 单行段落引用
bq.
,多行段落引用标签bq..
文章内容区域总宽度 720px, 其中内容显示宽度 680px,两边边距 20px;
Note 引用
Note 加粗支持换行,作为引用内容标题使用。文章内容区域总宽度 720px, 其中内容显示宽度 680px,两边边距 20px,文章中所含图片支持显示最大为 680px(建议宽度),之前为640px,因为其中的6、4是具有特殊意义的数字。查看链接
为配合页面改版而扩大为680px。如涉及原始图片像素大小限制,可设置图片为 480px。 (update 2015.06.01)
段落
加粗
段落文字加粗使用星号标注 *这里是加粗文字 *
,效果文字 加粗一下 显示。
代码高亮
代码采用标签 bc.
进行标注。 如果是css代码则增加对应的Class bc(css).
,效果如下:
/*
Theme Name: Robinu Theme
URI: http://sheshui.me/
Version: 2.0
Author: Robin L. info@sheshui.net
Description: Responsive Web Design
*/
*,*:after,*::before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon/icomoon.eot?ibtkww');
src:url('../fonts/icomoon/icomoon.eot?#iefixibtkww') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.woff?ibtkww') format('woff'),
url('../fonts/icomoon/icomoon.ttf?ibtkww') format('truetype'),
url('../fonts/icomoon/icomoon.svg?ibtkww#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
表格
表格采用Textile标签进行标注编辑,代码如下:
|^.
|_. Table Header 1 |_. Table Header 2 |_. able Header 3 |
|-.
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
|~.
|\3=. A footer, centered & across three columns |
|-.
| Content Cell | Content Cell | Content Cell |
| Content Cell | Content Cell | Content Cell |
Table Header 1 | Table Header 2 | able Header 3 |
---|---|---|
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
Division 1 | Division 2 | Division 3 |
A footer, centered & across three columns | ||
Content Cell | Content Cell | Content Cell |
Content Cell | Content Cell | Content Cell |
图片
插入图片 !/path/filename!
, 比如 !{width:100%}/files/uploads/764.jpg(Alt及Title文描)!
效果如下:
根据SEO需要,插入图片时须提供Alt、Title文案描述。采用完整格式
!/path/filename(Alt及Title文描)!
使用 p(flex2col).
让图片分两列显示:
p(flex2col). !/files/uploads/764.jpg! !/files/uploads/764.jpg!
图片描述文字应采用段落换行的方式,不建议采用
<br>
换行方式。否则影响两列图片的展示布局。
列表
无序列表
- 列表项1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 列表项2 Duis eu nulla ac justo bibendum facilisis luctus ut purus.
- 列表项3 In volutpat arcu vel dolor placerat congue.
无序列表嵌套
- 列表项1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 子列表项1 In vel tellus semper, blandit velit id, luctus libero.
- 子列表项2 Morbi gravida dolor eu convallis interdum.
- 次子列表项A Suspendisse eu purus placerat, fermentum ligula pulvinar, blandit elit.
- 次子列表项B Cras vitae turpis faucibus, placerat ligula sit amet, tristique odio.
- 次子列表项C Aenean mollis ipsum et nisl elementum ornare.
- 列表项2 Duis eu nulla ac justo bibendum facilisis luctus ut purus.
- 列表项3 In volutpat arcu vel dolor placerat congue.
有序列表
- 列表项1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 子列表项1 In vel tellus semper, blandit velit id, luctus libero.
- 子列表项2 Morbi gravida dolor eu convallis interdum.
- 次子列表项A Suspendisse eu purus placerat, fermentum ligula pulvinar, blandit elit.
- 次子列表项B Cras vitae turpis faucibus, placerat ligula sit amet, tristique odio.
- 次子列表项C Aenean mollis ipsum et nisl elementum ornare.
- 列表项2 Duis eu nulla ac justo bibendum facilisis luctus ut purus.
- 列表项3 In volutpat arcu vel dolor placerat congue.
- 列表项3 In volutpat arcu vel dolor placerat congue.
- 列表项3 In volutpat arcu vel dolor placerat congue.
- 列表项3 In volutpat arcu vel dolor placerat congue.
Time box 列表
此布局待改版,且不推荐继续采用!
;(timeline-box). 目录
: 一、序言
:: "1.1 写在开始前":#preface
: 二、准备篇
:: "2.1 计划线路":#about-line
::: "2.2 关于高反":#altitude-sickness
::: "2.3 关于行李":#baggage
: 三、出发篇
; 目录2
: "3.1 广州出发":#from-guangzhou
: "3.2 成都印象":#chengdu
:: "3.3 人物介绍":#profiles
text by Lipsum