ccruiの博客

ccruiの博客

handsome主题使用方式

109
2020-07-11

以下内容是从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字。

<!--more-->

添加自定义图标

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

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

方法一:傻瓜式扩充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地址两种方式:

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

云解析歌曲:暂时支持解析单曲,不支持歌单,支持以下媒体:

本地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]`

标签包裹住你想要隐藏的内容,游客必须先回复后才能查看隐藏内容。

文章内部分内容登录可见

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

在文章中使用

`

该部分仅登录用户可见

该部分仅登录用户可见

`

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

这是灰色的短代码框,常用来引用资料什么的
这是黄色的短代码框,常用来做提示,引起读者注意。
这是红色的短代码框,用于严重警告什么的。
这是浅蓝色的短代码框,用于显示一些信息。
这是绿色的短代码框,显示一些推荐信息。

文章中插入收缩框

示例代码:

        
    标题
      
      
        
        
          一些文字内容
        
 

        
    标题
      
      
        
        
          一些文字内容
        
 

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

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

本文章转载来自于 https://www.529i.com/archives/190.html