Admin

handsome主题内置代码使用方式
以下内容是从handsome主题使用文档搬来的相册创建相册新建分类:分类的缩略名称为image(这个是固定的,标识...
扫描右侧二维码阅读全文
23
2019/02

handsome主题内置代码使用方式

以下内容是从handsome主题使用文档搬来的

463208952.png

以下内容是从handsome主题使用文档搬来的

相册

创建相册
新建分类:分类的缩略名称为image(这个是固定的,标识该分类是相册)。分类描述会输出到相册列表页面
创建属于该分类的一篇文章,即创建了一个新的相册。文章的标题即相册的标题。
在文章的自定义字段中添加字段名album,值为你的相册描述
上传相片
在属于相册分类新建一篇文章,在编辑器中添加图片即可。

添加图片:允许以下的几种方式:

使用自带的附件功能,上传并插入编辑器中
使用markdown的图片语法,支持外站链接
使用html语法,支持外站链接

举例:

![相片描述](图片地址)
<img src="图片地址" alt="图片描述">
![奔跑的日子](http://localhost/build/usr/uploads/2018/05/1374653827.png)
<img src="http://localhost/build/usr/uploads/2018/05/1374653827.png" alt="奔跑的日子">

主题代码会自动解析代码,并显示为相片格式,编辑器内多余的文字将不会显示

灯箱插件

文章中如果某个图片不想显示灯箱效果,可以给图片标签中加入nogallery属性:

<img nogallery src="">

如果某张图片高度很大,想折叠展示,可以给图片标签加入max属性:

<img max src="">

文章目录树

文章中的目录树已经内置代码,仅当文章有h2 h3 h4标题 才会生成目录树,并且手机端不显示目录树。

注意:如果文章中没有h2标题,只有h3 h4标题是不会生成目录树的。

自定义摘要字数

大版式头图默认摘要字数200字,小版式头图默认摘要字数80字。你可以在后台外观设置->自定义大版式头图摘要/自定义小版式头图摘要来改变这两个默认值。

你还可以使用摘要分隔符进行自主截断内容输出,但是自主生成的摘要不会超过默认摘要字数。

举例:你的默认摘要字数设置为200字,使用摘要分隔符截断的摘要为230字,则摘要只会显示200字。

添加自定义图标

主题已经内置的图标列表,详见图标列表

如果不能满足你的图标需求,可以使用以下方法扩充主题图标:

方法一:傻瓜式扩充fontawesome图标
直接引入全套的fontawesome图标:

在主题外观设置——开发者设置——自定义输出head 头部的HTML代码,填入:

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

上面的fontawesome 的css文件来自bootcdn.css 公共cdn提供,你可以替换成自己的文件。

方法二:自定义添加iconfont图标列表
主题内置fontello图标来自网站http://fontello.com/

你可以在该网站中导入主题目录下的assets/fonts/fontello的config.json,然后重新生成字体文件。

覆盖到assets/fonts/fontello下,并且需要修改assets/css/handsome.css中形如.fontello-*:before,替换为下载的新的标签。

(难度较大,不推荐……)

文章中插入按钮

handsome支持以下类型的按钮:

矩形文字按钮
椭圆形文字按钮
矩形图标文字按钮

[button]矩形按钮文字[/button]
[button color="succees"]矩形按钮文字[/button]
[button type="round" color="success"]椭圆形按钮文字[/button]
[button color="succees" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

type:选填,不填默认为矩形按钮。可选值:
round:椭圆形按钮
color: 选填,不填默认为success(绿色),可选值:
light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色
icon:选填,不填默认为文字按钮,可用按钮见图标列表

点击编辑器的插入音乐图标可以在文章内可以插入音乐歌曲地址,支持云解析和本地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,值为23
cover:可选项,调用文章显示的封面,如果不填则默认显示随机缩略图。

文章中使用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}  \\)

文章内部分隐藏回复可见

在文章使用使用

此处内容需要评论回复后(审核通过)方可阅读。
[@hide]需要隐藏的内容[/hide]
上面代码去掉@
标签包裹住你想要隐藏的内容,游客必须先回复后才能查看隐藏内容。

文章内部分内容登录可见

为什么增加这样的功能呢?因为有时候一篇文章并不想完全的加密,部分内容由于隐私问题需要加密。该部分内容仅登录用户(如果是个人博客就是仅博主)可见。

在文章中使用

该部分仅登录用户可见

文章中插入短代码高亮文本

[scode type="share"]这是灰色的短代码框,常用来引用资料什么的[/scode]
[scode type="yellow"]这是黄色的短代码框,常用来做提示,引起读者注意。[/scode]
[scode type="red"]这是红色的短代码框,用于严重警告什么的。[/scode]
[scode type="lblue"]这是浅蓝色的短代码框,用于显示一些信息。[/scode]
[scode type="green"]这是绿色的短代码框,显示一些推荐信息。[/scode]

文章中插入收缩框

标题
一些文字内容
标题
一些文字内容

[@collapse title="标题" status="false"]一些文字内容[/collapse]
[@collapse title="标题"]一些文字内容[/collapse]
上面代码去掉@
其中status为false 表示默认不显示文字内容,为true表示默认显示内容。

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

最后修改:2019 年 02 月 25 日 06 : 55 PM
南来北往的大爷们,可怜可怜我吧,赏几两碎银子吧!

5 条评论

  1. 有今生丶没来世

    学习学习

  2. 萧小七

    1. Admin
      @萧小七

      七哥,早呀~~

  3. 故南

    学习学习(☆ω☆)

    1. Admin
      @故南

      欢迎欢迎~ 一起交流!

发表评论

z