文章效果演示
编写规范
1、略缩图
在编辑页面的“特色图像”选项中设定，在没有设定的情况下，略缩图会自动选取文章中的第一张图片，但这会首页载入速度变慢，因此我们要手动选择一张大小为320px*200px的图片做为略缩图, 图片最好命名为"cover数字.jpg", 数字可以在地址栏中得到。
2、固定链接
默认情况下固定链接会与标题一样, 但这对于SEO非常不利, 所以我们需要手动改写固定链接, 可以是拼音, 也可以是英文, 不要求与标题完全一致。
3、超链接
在文章中插入超链接的代码为: <a href="链接" target="_blank">锚文本</a>, target="_blank" 表示点击链接后会在新标签页打开。
4、图片
经测试使用图床@贴图库比网站自身的图床打开速度要快，建议新建一个帐户。要想图片上的文字能清晰地显示, 图片的最大宽度不要超过760px. 插入图片的代码为: <a href="http://www.xxx.com/1.jpg"><img src="http://www.xxx.com/1.jpg" data-fancybox="gallery" alt="" /></a>, 图片过大会影响加载速度, 图片尺寸最好不要超过300kb, 可以使用TinyPNG来压缩图片, gif可以使用GifCam来截取。
5、表格
在网站后台左侧的"TablePress"选项中设置，点击新建表格设置行数和列数即可. 想要鼠标移到链接上显示一段文字的效果代码为：
<a target="_blank" href="网页链接" class="tooltip">链接锚文本<span>鼠标移到链接上显示的文字</span></a>
6、视频
插入视频有两种方法, 代码分别为:[vide.o]视频地址.swf格式[/vide.o] (去掉vide.o中的点) 和 [sw.f]Flash文件地址[/sw.f] (去掉sw.f中的点)
7、按钮
让链接变成按钮的代码为: <a class="button green" href="链接" target="_blank">锚文本</a> (green可以改成yellow, red, blue)
8、特效
在编写文章界面右侧的"自定义简码"中设置, 选择简码, 下面即可显示其代码, 比如常见的点击标题显示/隐藏文本框的代码为:
[toggl.e_box]
[toggl.e_item title="标题 1
内容 1 (加上active="true", 则文本框默认显示打开)
[/toggl.e_item]
[toggl.e_item title="标题 2"]
内容 2 (去掉toggl.e中的点)
[/toggl.e_item]
[/toggl.e_box]
9、弹窗Lightbox效果
图片弹窗：必须选择链接到图像URL中，在a标签中需要添加“title=图片名称”，则在图片弹窗中会显示图片名称。
视频弹窗：可以为文本、图片等添加链接，视频地址需要是绝对地址：http://player.youku.com/player.php/sid/XMjAxMTM4MTQw/v.swf，需要在a标签中手动添加：class="boxer"，点击查看效果
网址弹窗：可以为文本、图片等添加链接，链接地址为需要显示的网址：http://www.weibo.com，需要在a标签中手动添加：class="boxer"，点击查看效果
10、文章不显示在首页
如果不想某篇文章显示在博客首页的话, 只需要在文章分类中勾选 "不置顶首页" 即可。
11、代码
如果可以, 编辑文章时尽量使用文本模式, 可视化模式用于检查排版, 可视化模式会带来很多不必要的沉余代码, 文章编写的代码模版可在 这里 下载, 效果演示点击 这里.
图片
表格
视频
[swf]http://player.youku.com/player.php/sid/XMjAxMTM4MTQw/v.swf[/swf]
按钮
列表
- 红点列表
- 可改成黄点, 蓝点, 绿点
- 修改red为yellow, blue, green
段落
- 段落一
- 段落二
- 段落三
标签页切换