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

DNS预解析
这个功能即将被删除

DNS prefetching通过指定具体的URL来告知客户端未来会用到相关的资源,告诉客户端可以尽早的解析DNS。

更多详细信息,请戳这个

文章目录树
文章中的目录树已经内置代码,仅当文章有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支持以下类型的按钮:

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


type:选填,不填默认为矩形按钮。可选值:

round:椭圆形按钮
color: 选填,不填默认为success(绿色),可选值:

light:白色
info:蓝色
dark:深色
success:绿色
black:黑色
warning:黄色
primary:紫色
danger:红色
icon:选填,不填默认为文字按钮,可用按钮见图标列表

url:选填,填写点击的链接。举例:如果你的链接是http://www.baidu.com,请手动将/前面加一个反斜杆,即http://www.baidu.com

举例:


文章内插入音乐
点击编辑器的插入音乐图标可以在文章内可以插入音乐歌曲地址,支持云解析和本地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结尾的地址,并填写歌曲名和歌手的名称。

00:00
加载中……请稍等……

文章页面插入播放器size默认为large时光机插入播放器size默认为small
你也可以手动改动这个标签的内容以选择不同的播放器样式:)

文章内插入视频
点击编辑器的插入音乐图标可以插入视频,只支持本地的视频地址的播放

时光机的视频插入按钮也是同样的操作

直接在输入框中输入视频的地址即可,一般以.mp4结尾的资源地址。

示例:


url:视频地址
pic:视频背景图片
相关问题:默认的播放器比较简单,复杂需求可以尝试DPlayer-Typecho,主题已经内置适配代码。

文章内调用其他文章
点击编辑器的调用文章的按钮可以调用其他文章并显示。



cid:必填,是文章的唯一编号,在后台的编辑文章的地址可以看到,比如http://localhost/build/admin/write-post.php?cid=23,值为23
cover:可选项,调用文章显示的封面,如果不填则默认显示随机缩略图。
文章内调用外链网站
v5.0及其以上版本支持调用外链


title:必填,外链的名称/标题
url:必填,外链的地址(请填写绝对地址,就是浏览器地址栏什么样的就填什么样的)
intro:(可选)外链网站的简介/介绍
cover:(选填)外链网站的介绍图片地址
文章内插入相册
v5.1 版本及其以上支持

使用方法:

album[/album]
举例:

//方式1(markdown语法)

图片描述1
图片描述1
图片描述2
图片描述2

//方式2(markdown语法)

图片描述1
图片描述1
图片描述2
图片描述2

//方式3(HTML语法)

图片描述1
图片描述1
图片描述2
图片描述2

相关问题:typecho1.1版本编辑器无法解析HTML代码

文章中使用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
标签包裹住你想要隐藏的内容,游客必须先回复后才能查看隐藏内容。

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

在文章中使用

该部分仅登录用户可见

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

这是黄色的短代码框,常用来做提示,引起读者注意。

这是红色的短代码框,用于严重警告什么的。

这是浅蓝色的短代码框,用于显示一些信息。

这是绿色的短代码框,显示一些推荐信息。

文章中插入收缩框
示例代码:

标题
一些文字内容

标题
一些文字内容

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

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

文章内插入标签卡
示例代码:

内容 1
内容 2

每个tab 都必须包括name属性,只能有一个tab 添加active属性,表示默认显示该tab的内容。

此外tab支持更多css的属性,比如颜色,字体粗细等:

[tab name="标签页 2" color:"#000" font-weight="bold"]高级内容文本示例[/tab]
文章内插入标签
示例代码:

默认白色文字
紫色文字
蓝色文字
黄色文字
红色文字
绿色文字
黑色文字
文章内插入图集
示例代码:

默认样式是pc端一行最多显示3个,根据屏幕尺寸调整每行显示的图片个数

[alubm]
[普通的图片插入,支持markdown语法和html语法,混合也可以]
[/album]
增加type="photos" 则album下的图片排成一行,并根据图片的长高比自动排列

[alubm type="photos"]
[普通的图片插入,支持markdown语法和html语法,混合也可以]
[/album]
博客时间友好格式化
使用效果

几小时前
几天前
几月前
几年前
当时间不是整小时/天/月/年 时会显示默认的时间格式

开启方法

后台选择设置——评论——评论日期格式 内填写natural。

在这里同样可以修改博客的时间格式为你需要的时间格式,值为标准的php格式。

如标准时间格式:Y-n-j H:i:s

首页轮播图设置
样例代码:

{"title":"第一篇文章","link":"","cover":"","desc":""},
{"title":"第一篇文章","link":"","cover":"","desc":""}
{"title":"handsome —— 一如少年般模样","link":"http://www.ihewro.com", "cover":"xxx.jpg","desc":"在复杂中,保持简洁。 一款精心打磨后的typecho主题。"},
{"title":"Focus——不只是RSS订阅器","link":"","cover":"xxx.jpg","desc":"拒绝信息化的算法推送"}
属性介绍:

title: 文章标题
link: 文章的地址
cover: 文章图片地址,比例建议8:3,不要太小,否则显示的不清楚
desc: 简单描述(不要太长)
最后一个}后面不要加上英文逗号

Last modification:March 16th, 2020 at 11:38 pm
如果觉得我的文章对你有用,请随意赞赏