摘要:通过handsome主题文章内插入一些小按钮跟提示框可以极大美化文章的排版布局,下面就是handsome主题文章自带的常用操作。
文章中插入按钮
handsome支持以下类型的按钮:
- 矩形文字按钮
- 椭圆形文字按钮
- 矩形图标文字按钮
[button]矩形按钮文字[/button]
[button color="succees"]矩形按钮文字[/button]
[button type="round" color="success"]椭圆形按钮文字[/button]
[button color="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]
显示效果如下:
type
:选填,不填默认为矩形按钮。可选值:round
:椭圆形按钮
color
: 选填,不填默认为success(绿色),可选值:light
:白色info
:蓝色dark
:深色success
:绿色black
:黑色warning
:黄色primary
:紫色danger
:红色
icon
:选填,不填默认为文字按钮,可用按钮见图标列表url
:选填,填写点击的链接。举例:如果你的链接是http://www.tree.tech
,请手动将/
前面加一个反斜杆\
,即http:\/\/www.tree.tech
[button color="danger" icon="fontello fontello-gratipay" url="http:\/\/wpa.qq.com\/msgrd?v=3&uin=1837815696&site=qq&menu=yes"]点击QQ咨询购买(√推荐)[/button]
[button color="success" icon="glyphicon glyphicon-send" url="mailto:elec@tree.teech"]email#tree.tech[/button]
显示效果如下:
文章中插入短代码高亮文本
这是灰色的短代码框,常用来引用资料什么的
这是黄色的短代码框,常用来做提示,引起读者注意。
这是红色的短代码框,用于严重警告什么的。
这是浅蓝色的短代码框,用于显示一些信息。
这是绿色的短代码框,显示一些推荐信息。
效果如下:
文章中使用mathJax公式
- 需要在
后台外观设置——主题增强功能
中启用公式(MathJax)
选项。 - 语法格式:
//块级公式:
$$ 公式内容 $$
$$ x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$
// 行内公式:
$ 行内公式内容 $
\\( 行内公式内容 \\)
$\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$
\\( x = \dfrac{-b \pm \sqrt{b^2 - 4ac}}{2a} \\)
文章内插入音乐
点击编辑器的插入音乐图标可以在文章内可以插入音乐歌曲地址,支持云解析和本地MP3地址两种方式:
时光机的音乐插入按钮也是同样的操作
- 云解析歌曲:暂时支持解析单曲,不支持歌单,支持以下媒体:
- 网易云音乐:http://music.163.com/#/song?id=40147556
- QQ音乐:https://y.qq.com/n/yqq/song/000jDQWP4JiB3y.html
- 虾米音乐:http://www.xiami.com/song/bf08DNT3035f
- 酷狗音乐:http://www.kugou.com/song/#hash=09E8DE70A24C97B92A29F6A19F3528A2
- 百度音乐:http://music.baidu.com/song/268275324
- 本地mp3地址播放:
- 示例:直接在输入框中输入
.mp3
结尾的地址,并填写歌曲名
和歌手
的名称。
[hplayer title="歌曲名" author="歌手" url="http:\/\/xxx.com\/xxx.mp3" size="large" /]
文章页面插入播放器
size
默认为large
时光机插入播放器size
默认为small
,你也可以手动改动这个标签的内容以选择不同的播放器样式:)
文章内插入视频
点击编辑器的插入音乐图标可以插入视频,只支持本地的视频地址的播放
时光机的视频插入按钮也是同样的操作
直接在输入框中输入视频的地址即可,一般.mp4
结尾的资源地址。
示例:
[vplayer url="http://xxx.com/xxx.mp4" pic="http://xxx.com/xxx.png"]
url
:视频地址pic
:视频背景图片
文章内调用其他文章
点击编辑器的调用文章的按钮可以调用其他文章并显示。
<post cid="1" />
<post cid="1" cover="http://localhost/build/usr/themes/handsome/usr/img/sj/6.jpg"/>
< >
修改为 [ ]
效果如下:
cid
:必填,是文章的唯一编号,在后台的编辑文章的地址可以看到,比如
http://localhost/build/admin/write-post.php?cid=23
,值为23cover
:可选项,调用文章显示的封面,如果不填则默认显示随机缩略图。
文章中插入收缩框
示例代码:
<collapse title="标题" status="false">一些文字内容</collapse>
<collapse title="标题">一些文字内容</collapse>
< >
修改为 [ ]
效果如下:
其中status
为false
表示默认不显示文字内容,为true
表示默认显示内容。
不写status
属性,默认是展开内容的。
版权属于:TreeTech(除特别注明外)
本文使用「署名-非商业使用-禁止演绎 4.0 国际」创作共享协议,转载或使用请遵守署名协议。