handsome主题文章常用操作

摘要:通过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地址两种方式:

时光机的音乐插入按钮也是同样的操作

  1. 云解析歌曲:暂时支持解析单曲,不支持歌单,支持以下媒体:
  1. 本地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,值为23
  • cover:可选项,调用文章显示的封面,如果不填则默认显示随机缩略图。

文章中插入收缩框

示例代码:

<collapse title="标题" status="false">一些文字内容</collapse>
<collapse title="标题">一些文字内容</collapse>

< > 修改为 [ ]

效果如下:

标题
一些文字内容

其中statusfalse表示默认不显示文字内容,为true表示默认显示内容。

不写status属性,默认是展开内容的。


最后修改:2019 年 09 月 21 日 06 : 16 PM
如果觉得我的文章对你有用,请随意赞赏

发表评论