博客文章规范 示例 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. 列表项1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    1. 子列表项1 In vel tellus semper, blandit velit id, luctus libero.
    2. 子列表项2 Morbi gravida dolor eu convallis interdum.
      1. 次子列表项A Suspendisse eu purus placerat, fermentum ligula pulvinar, blandit elit.
      2. 次子列表项B Cras vitae turpis faucibus, placerat ligula sit amet, tristique odio.
        1. 次子列表项C Aenean mollis ipsum et nisl elementum ornare.
    3. 列表项2 Duis eu nulla ac justo bibendum facilisis luctus ut purus.
  2. 列表项3 In volutpat arcu vel dolor placerat congue.
    1. 列表项3 In volutpat arcu vel dolor placerat congue.
      1. 列表项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
目录
一、序言
1.1 写在开始前
二、准备篇
2.1 计划线路
2.2 关于高反
2.3 关于行李
三、出发篇
目录2
3.1 广州出发
3.2 成都印象
3.3 人物介绍

text by Lipsum

评论已关闭。Comments are turned off for this article.