Handsome主题使用文档
登录 / 注册
标签搜索
侧边栏壁纸
博主昵称
低调G

  • 累计撰写 291 篇文章
  • 累计收到 701 条评论
技术教程

Handsome主题使用文档

低调G
低调G
2020-07-09 / 0 评论 / 2,140 阅读 / 正在检测是否收录...

相册

创建相册

  • 新建分类：分类的缩略名称为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="奔跑的日子">

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

*相关问题：编辑器无法解析HTML代码*

内容加密

handsome已经支持很多种内容加密方式，用最灵活的方式保障写作者的写作隐私问题。这篇文章是一个综合介绍

全站加密

  • 加密后网站任何内容只有输入密码才能阅读，选择此种方式不知道密码的用户无法通过任何方式获取内容，包括无法通过feed订阅方式
  • 适合非常私密站点，比如日记本博客
  • 【加密方式】：外观设置——高级设置——全站访问密码

分类加密

v5.2.0及以上版本支持,必须配合最新版本主题插件

对于分类加密下面的文章，是不能有多个分类的！否则加密失效！！

  • 加密分类输入密码才能阅读内容

  • 【加密方式】：

    • 第一步：在分类设置里面按照下面格式填写分类描述（下面四种方式只能且只需要填一种！）：

      //第一种方式：只是配置加密和对应的密码“1234”
{"lock":true,"password":"1234"}</p><p>  //第二种方式：还可以继续配置分类描述
{"lock":true,"password":"1234","desc":"一个加密的分类，输入密码后可见内容"}</p></li></ul></li></ul><pre v-pre="" data-lang=""><code class="lang-">    //第三种方式：还可以继续配置分类的图标
  {"lock":true,"password":"1234","desc":"一个加密的分类，输入密码后可见内容","img":"https://i.loli.net/2019/05/01/5cc95872929ef.jpeg"}

  //第四种方式：也可以直接简单的填写文字表示分类描述，此时该分类不会加密
  一个普通的分类描述而已。
      • 第二步：在links插件设置里面填写需要加密的分类的mid，这一步不完成的时候别人仍然可以通过feed查看到加密内容

        分类隐藏

        v5.2.0及以上版本支持,必须配合最新版本主题插件

        • 在主题插件中填写需要隐藏的分类mid即可

        • 分类隐藏仅仅是在首页不显示该分类的文章，游客仍然可以根据文章地址查看内容，左侧边栏的分类列表仍然会显示隐藏分类

        • 【适用场景】：比较适合自己的一些小片段笔记，不希望直接显示在首页

        文章加密

        文章部分内容回复可见

        • 游客回复并且评论通过审核后可以可见
        • 一般可以用在资源分享的帖子，增加内容的参与度
        • 【加密方式】：文章部分内容隐藏

        文章部分内容登录用户可见

        • 对于单用户的博客，也就是博客主人可见，这里可以写一写比较隐私的内容。
        • 【加密方式】：文章部分内容登录可见

万物皆可RSS 配置

想法来源于熊猫小A的博客。

能做哪些事情？

可以把任何有RSS源网站内容可以聚合在时光机页面内。比如微博、微信公众号、（前两个需要RSShub的开源服务支持）另一个博客的内容等等。

对代码不了解的伙伴们直接看下一个说明（简单配置微博），后面的都不要看了！！

简单配置微博

{"id":"weibo","name":"微博","url":"https://rsshub.app/weibo/user/5631723091"}

直接把上面的代码复制到配置框中，https://rsshub.app/weibo/user/5631723091 最后的一串数字5631723091是你的微博UID，打开你的微博的主页的地址中有的

配置项填写

  • id ：rss标识符，任何字母（id请勿重复）。

    • 比如微博，可以是weibo

  • name ：rss内容标题，一般是中文。如果是微博，就直接填微博

  • url ：rss源地址

    • 比如微博，就是https://rsshub.app/weibo/user/5631723091（这个源有时候不稳定，可以用另一个）或者https://rsshub.app/weibo/user2/5631723091
    • 比如别的博客内容：一般的博客系统都支持生成RSS订阅地址的，比如我的博客就是https://www.ihewro.com/feed/
    • 只要是RSS源地址，都是支持的

  • img （非必填项）：代表该栏目的图片，以头像形式显示。建议是正方形的。填写图片的url地址即可

  • type（非必填项）：显示的内容形式

    • discription 仅显示文章摘要（有的RSS源摘要中包含整个文章内容）（不填的话，默认是这个）
    • title 仅显示文章标题
    • mix 显示标题+摘要 （暂不支持）

RSS 源禁止跨域怎么办？

最简单的解决办法是：在原有的RSS源地址前面加上https://cors-anywhere.herokuapp.com/

举例：

https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss 该源是禁止跨域的，所有无法请求到（浏览器可以正常访问，但是无法通过代码获取数据），修改后的源地址为：

https://cors-anywhere.herokuapp.com/https://api.fanfou.com/statuses/user_timeline/~k40sgjV_6kg.rss

填url属性就填后者即可。（可能速度会有些影响）

独立页面

主题内置了五套自定义模板 时光机、文章归档、友情链接和留言板和豆瓣书单。

使用方法

在后台了撰写——创建页面的右下角的自定义模板选择相应的自定义模板即可。下面简单介绍自定义模板的使用方法。

时光机

关注微信公众号ihewro（我要起飞啦熬）按照微信公众号发送时光机 即可通过微信公众号同步发送到handsome主题的博客中

  • 填写地址的时候，必须填写为 cross.html（是地址，不是标题！！！标题随便写，但是地址要固定的，否则首页无法读取内容）

  • 外观设置——初级设置——首页左侧边栏头像的链接地址 默认是时光机页面的地址，你可以修改

  • 内容框里面不用填任何东西，这个页面在前台（就是直接打开这个独立页面，然后在登录的状态下）就可以发布“说说”，用来记录你的日常和心情的~

看不到输入框：请确保你已经登录了，并且该独立页面允许评论（只有管理员登录后才会显示输入框，游客是看不见的，请放心）

如何删除说说：在后台的评论管理中删掉该页面的对应评论即可。

说说不能发表图片： 见常见问题

文章归档

  • 地址随意填写。

  • 内容框不用填任何内容。这个页面会自动把你所有文章以时间树的形式显示出来。

友情链接

  • 地址随意填写。

  • 这个页面自动输出links插件里面设置的友情链接。（具体用法见插件设置）友情链接页面的本博信息在独立页面的输入框中填写即可，会和链接一起输出。

留言板

  • 地址随意填写。

  • 这个页面会自动输出评论数最多的前15名。如果需要填写自定义内容在输出框中填写即可，会一起输出。

豆瓣清单

  • 地址随意填写。

  • 这个页面会自动输出你的豆瓣书单（已读的书）、电影清单（已看的电影）。

  • 在自定义字段中填写：名称为doubanID,值为你的豆瓣ID。访问该网址以检查的ID是否正确：https://www.douban.com/people/你的豆瓣ID/，填写的是豆瓣ID，不是整个url地址

  • 因为需要写入缓存文件，请确保你的主题下的aseets/cache目录可写

  • 请确保的你的豆瓣有已看的电影和已读的书的数据，不然会显示错误。

  • 图书数据不能显示，一直显示“数据已添加成功，请刷新一次”，刷新了还是显示不了的话，一般是全站静态缓存了，请修改你的cdn缓存策略，不要全站静态缓存，缓存静态资源（.jpg .css .js）之类文件即可

![3.jpg][2]

github项目

  • 地址随意填写
  • 这个页面会输出你所想要输出的github项目名称

你有两种方式显示你的github项目：

输出所有的你的github项目

受限制与github提供的api限制，你只能显示30个你的github项目清单

  • 在自定义字段中填写：名称为github，值为你的github用户名
自定义输出项目（待开发，暂不能使用）

在编辑器中按照下面的格式填写：

[github="用户名/仓库名"] 
//举例：
[github="ihewro/typecho-theme-leaf"]

评论系统

主题内置Typecho原生评论系统，同样支持任何第三方评论服务（如：多说，disqus，畅言等）。

使用原生评论系统

你可以通过后台外观设置中这些开关来加强原生评论系统：

  • 「评论系统——原生评论框的背景图片」设置评论框的背景图片。
  • 「评论系统——默认评论者头像」设置默认的gravatar头像。
  • 「主题增强功能——启用ajax评论」获取无刷新评论体验。

Q：如何更好的防止垃圾评论？

A：推荐SmartSpam

使用畅言

在后台外观设置——评论设置 选择 畅言，填写畅言appid和填写畅言conf参数。

使用其他第三方评论系统

在后台外观设置——评论设置 选择 其他第三方评论系统。

找到主题目录下的usr/third_party_comments.php，增加第三方评论系统的代码。（不推荐，第三方评论不仅不稳定，而且不一定与主题的pjax兼容，如果不兼容，请在后台外观设置中关闭pjax！）

关闭评论

适用于部分特殊情况需要关闭。

增强功能

博文头图

分为两种：

  • 首页头图：首页每篇文章顶部的图片
  • 文章头图：每篇文章详情页面顶部的图片

具体见上图指示。

  1. 在文章的编辑页面可以对单篇文章的头图进行控制
  2. 在后台的外观设置中可以对这两部分进行整体个性化设置：

1. 个性化首页头图样式：

  • 大版式头图
  • 小版式头图
  • 图片版式头图

在后台外观设置——外观设置开关中选择。缩小版头图显示即所有文章默认显示小版式头图。

每篇文章的编辑页面都可以选择首页头图样式，这里的设置会无视掉上面设置中的效果（仅对该篇文章有效），这样就实现大版式和小版式头图交叉的效果。

2. 个性化头图来源：

在后台主题增强功能——博客头图来源设置中选择。提供四种方式：

  • 只显示随机图片
  • 显示顺序：thumb自定义字段——文章第一个附件——文章第一张图片
  • 显示顺序：thumb自定义字段——文章第一个附件——文章第一张图片——随机图片(推荐)
  • 显示顺序：thumb自定义字段——随机图片

以第三种为例，当thumb字段为空的时候，会寻找文章的第一个附件，附件不是图片，会继续寻找文章中第一张图片，文章中如果没有图片的话再去加载随机图片。

其他选项亦是同理。

文章的随机头图的图片存放位置为： 主题目录下的usr/img/sj
右侧边栏的随机图片的存放位置为：usr/img/sj2

3. 个性化头图显示：

  • 不显示文章页面头图
  • 不显示首页头图

在后台外观设置——外观设置开关选择文章页面不显示头图或首页不显示头图，将会默认不显示文章页面或者首页文章顶部的头图。

每篇文章的编辑页面底部的自定义字段中，字段名为thumb,当值为no的时候，会不显示当前文章的头图（首页头图和文章头图）（仅对当前文章有效）,这里的设置同样会无视上面的设置。

灯箱插件

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

<img nogallery src="">

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

<img max src="">

DNS预解析

这个功能即将被删除

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

更多详细信息，请戳这个

文章目录树

文章中的目录树已经内置代码，仅当文章有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="success" icon="glyphicon glyphicon-eur"]图标按钮文字[/button]

  • type：选填，不填默认为矩形按钮。可选值：

    • round：椭圆形按钮

  • color： 选填，不填默认为success（绿色），可选值：

    • light：白色
    • info：蓝色
    • dark：深色
    • success：绿色
    • black：黑色
    • warning：黄色
    • primary：紫色
    • danger：红色

  • icon：选填，不填默认为文字按钮，可用按钮见图标列表

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

举例：

[button color="danger" icon="fontello fontello-gratipay" url="http:\/\/wpa.qq.com\/msgrd?v=3&uin=535425690&site=qq&menu=yes"]点击QQ咨询购买（√推荐）[/button]

[button color="success" icon="glyphicon glyphicon-send" url="mailto:ihewro@163.com"]ihewro#163.com[/button]

文章内插入音乐

点击编辑器的插入音乐图标可以在文章内可以插入音乐歌曲地址，支持云解析和本地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：视频背景图片

相关问题：默认的播放器比较简单，复杂需求可以尝试DPlayer-Typecho，主题已经内置适配代码。

文章内调用其他文章

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

[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：可选项，调用文章显示的封面，如果不填则默认显示随机缩略图。

文章内调用外链网站

v5.0及其以上版本支持调用外链

[post url="https:\/\/www.ihewro.com" title="友人C" intro="一个个人博客" cover="http://www.ihewro.com/img/xxx.jpg" /]
  • title：必填，外链的名称/标题
  • url：必填，外链的地址（请填写绝对地址，就是浏览器地址栏什么样的就填什么样的）
  • intro：（可选）外链网站的简介/介绍
  • cover：（选填）外链网站的介绍图片地址

文章内插入相册

v5.1 版本及其以上支持

使用方法：

[album](插入图片，支持图片的HTML格式或者是markdown语法都可以，支持外链或者附件上传均可)[/album]

举例：

//方式1（markdown语法）
[album]
![图片描述1][1]
![图片描述2][2]
[/album]
  [1]: http://xxx.com/xxx1.jpg
  [2]: http://xxx.com/xxx2.jpg

//方式2（markdown语法）
[album]
![图片描述1](http://xxx.com/xxx1.jpg)
![图片描述2](http://xxx.com/xxx2.jpg)
[/album]

//方式3（HTML语法）
[album]
<img src="http://xxx.com/xxx1.jpg" alt="图片描述1" />
<img src="http://xxx.com/xxx2.jpg" alt="图片描述2" />
[/album]

相关问题：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][/hide]

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

文章内部分内容登录可见

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

在文章中使用

[login]需要加密的内容[/login]

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

[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 属性，默认是展开内容的。

文章内插入标签卡

示例代码：

[tabs]
[tab name="标签页 1" active="true"]内容 1[/tab]
[tab name="标签页 2"]内容 2[/tab]
[/tabs]

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

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

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

文章内插入标签

示例代码：

[tag]默认白色文字[/tag]
[tag type="primary"]紫色文字[/tag]
[tag type="info"]蓝色文字[/tag]
[tag type="warning"]黄色文字[/tag]
[tag type="danger"]红色文字[/tag]
[tag type="success"]绿色文字[/tag]
[tag type="dark"]黑色文字[/tag]

文章内插入图集

示例代码：

  • 默认样式是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: 简单描述（不要太长）

最后一个}后面不要加上英文逗号

评论表情

只需要修改主题目录下面的usr/OwO.json文件

修改表情

主题内置三个栏目颜文字和阿鲁和推特

直接在原有的代码上面做一些修改即可，比如图片替换，文字替换等。（具体代码含义见下面 ）

增加新的表情栏目

"新的表情栏目名称": {
    "name": "表情包文件夹名称",//只有图片表情类型才需要加这一项
    "type": "emoticon/emoji/image",
    "container": [
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
        {
            "icon": "OωO",
            "text": "Author: DIYgod"
        },
    ]
}

评论表情图片存储在主题目录下的usr/img/emotion

表情名称name：

  • 该项只有当表情类型为图片表情时候才需要添加
  • name的值对应了emotion文件夹下的表情包文件夹名称。如值为aru，文件夹名称对应为aru。
  • 建议填写英文

表情类别type有三种:

  • emoticon: 颜文字
  • emoji: emoji表情（比如这些图标，typecho的数据库类型默认不支持emoji编码）
  • image: 图片表情，只支持.png 后缀的图片

container下存储的是表情的具体内容：

  • icon：表示的表情具体内容：
    • 颜文字就填具体的颜文字
    • emoji表情就填具体的emoji图标
    • 图片表情填写对应图片的文件名，如angry.png，填angry
  • text:指的是鼠标悬停在表情上面显示的提示文字，一般为中文提示

图标列表

主题内置了大量的网页图标 (非图片格式)，方便在 自定义栏目中使用。

可用图标

handsome v4.3.1 由原来的fa fa- 修改为fontello fontello-，是为了避免与fontawesome库冲突，你可以自行引入该图标库，以便使用更多图标，但是会带来一定的加载体积。引入更多图标

1. 主题内置的iconfont图标：

2. 主题内置的fontello图标：

3. bootcss自带的Glyphicons字体图标： 详细见Glyphicons 字体图标

4. 主题内置的feather图标

支持 feather的所有图标。

第一项和第二项的图标很少，如果找不到相应图标，建议在第三项的图标库中寻找

相关问题：自定义栏目的图标使用

使用方法

举个例子：


<!--首页名称左侧的图标设置项，直接填写class的内容即可，如：-->

<!--iconfont图标-->
iconfont icon-xxx

<!--Glyphicons图标-->
glyphicon glyphicon-eur

<!--fontello图标-->
fontello fontello-xxx

<!--feather图标-->
xxx

<!--下面三种是一般的HTML用法，一般是使用不到的-->

<!--iconfont图标-->
<i class="iconfont icon-xxx"></i>

<!--Glyphicons图标-->
<i class="glyphicon glyphicon-eur"></i>

<!--fontello图标-->
<i class="fontello fontello-xxx"></i>

<!--feather图标-->
<i data-feather="xxx"></i>

使用用途：

  • 直接修改主题内的图标，主题的所有图标都是使用的是网页图标，你可以更换图标的类名来更换图标。 （不推荐，因为更新后会覆盖修改内容）

  • 在 自定义左侧边栏栏目 和 自定义顶部导航按钮 和 首页名称左侧的图标设置项 中使用。

具体见：自定义栏目

速度优化

本地图片云存储(镜像)加速

4.3.0 进行了升级，请务必重新更新配置

在配置框按照格式填写

（镜像空间的自定义域名）| (域名商)

如：http://assets.ihewro.com | UPYUN

实现思路就是：将博客服务器本地图片资源地址都转换为镜像空间的地址，访问云服务商的镜像空间，通常能获得更快的速度。

下面分别写下又拍云和七牛云的配置过程：

又拍云举例：

  • 创建服务——CDN
  • 按照下图配置

  • 创建完成后，需要在域名解析中，将刚才的加速域名解析到给定分配的cname地址
  • 在服务配置的——回源管理——开启源站资源迁移

七牛云举例：

选择对象存储——镜像存储——填写镜像空间地址

注意：你的七牛空间必须在镜像存储的设置项中填写你的博客地址(例如：https://www.ihewro.com/)，这样才能达到加速的效果。

云存储选项

其实主题外观设置那里写的比较清楚了。

webp格式目前主要是Chrome支持，所以一般正确的用法是，不要在后台启用webp图片格式。

而是去云服务器商的图片处理设置里开启webp的自适应（比如又拍云的就是在性能优化——WebP自适应选项，开启了就可以了），会自动根据浏览器支持情况来是否转换为webp格式。

将本地静态资源上传到你的cdn上

如果设置了本地图片云存储(镜像)加速，这个选项无需再配置了。因为上面的选项就相当于全站镜像到云服务器商，博客的静态资源会直接访问镜像空间的资源。

请在你的云存储服务商设置允许资源的跨域访问，否则会导致字体文件无法访问而显示页面图标。如果不知道如何设置，可以发工单问客服（这是最简单的方法，因为不同服务器提供商具体设置我也不是很清楚），一般能够得到解决方法。

  • 需要在后台外观设置——将本地静态资源上传到你的cdn上中配置：

  • 使用该项设置前，你必须有自己搭建的cdn服务器（不是指当前服务器）

  • 主题目录下的/assets/目录下有 css、js、fonts、img四个静态资源文件夹。

  • 你需要把asset目录上传到你的cdn服务器上，比如CDN服务器的 handsome目录里，地址即为 https://cdn.ihewro.com/handsome/assets/

  • 在当前框中就填入该地址，主题就会引用你搭建的cdn上面的资源，而不再引用当前服务器上的资源

热心用户提供的静态资源服务器地址

星路博客

为了提高各位使用Handsome主题的用户的加载速度，星路博客的博主将Handsome主题的静态文件全部处理后存放在阿里云CDN上，未设置防盗链。供各位博主使用。

为了节约钱财（博主穷），请不要大量访问。

Handsome主题的后台设置-速度优化-将本地静态资源上传到你的cdn上中填写：

//格式：
https://asset.starroad.top/handsome/{版本号}/

//举例：
https://asset.starroad.top/handsome/5.0.0
https://asset.starroad.top/handsome/5.1.0
https://asset.starroad.top/handsome/5.1.1

提供5.0.0-5.1.1的静态文件。

如有其他问题，请参见本博客博文。

Peter Peng

//格式：
https://ufile.goldpetergood.top/HandSome/版本号/assets

//举例：
https://ufile.goldpetergood.top/HandSome/5.2.0
https://ufile.goldpetergood.top/HandSome/5.3.0

多语言设置

主题内置了多语言包，默认选择根据浏览器自动选择语言，后台外观设置可以手动修改语言。

多语言分为两部分：

  • 主题默认集成多语言文件（在主题的根目录的lang文件夹下）
  • 用户自定义语言文件（在主题的根目录usr/lang文件夹下）

用户自定义语言文件优先级最高，请勿修改默认翻译文件（lang/目录下面的语言文件），只要修改usr/lang下的语言文件即可。

通过修改相应的语言文件，可以更改主题里面**任何词组**和**时间格式**。在本文最后会举几个例子方便大家自行修改。

语言显示规则

  • Auto ：自动根据用户浏览器的语言设置显示相应的语言文件。

  • 简体中文 ：显示顺序依次是：usr/lang/zh_CN.php —> lang/zh_CN.php，其他的语言文件（如zh_TW.php）则不会生效。其他语言设置同理。

修改主题默认翻译

以语言设置中选择了使用简体中文为例

比如：文章页面的「浏览次数」默认显示为「200次浏览」，希望改成「200次小伙伴来过」

在usr/lang/zh_CN.php修改如下：

/**
* @return array 返回包含翻译文本的数组
*/
    public function translated() {
        return array(
            '次浏览' => '次小伙伴来过'
            //添加翻译的词汇,每两组之间，用英文逗号隔开
        );
    }

注意，语言文件的翻译，是针对**已存在的词组**进行重新翻译，**而不是对任意汉字或不存在的词组翻译**。打开`lang/zh_TW.php` 可以看到所有可以翻译的词组。（目前所有翻译词组没有分类，有些凌乱，v4.0.0会进行整理）

再比如：文章顶部的「最后修改时间的时间格式」，默认为：「Y 年 m 月 d 日 h : i A」，想要修改为24进制时间

在相应的语言文件的翻译函数里面增加：

'Y 年 m 月 d 日 h : i  A' => 'Y 年 m 月 d 日 G : i "

修改其他语言同上所述，是完全一样的。

增加自定义语言文件

主题默认集成了中文简体、中文繁体、英语三种语言设置。

首先需要了解多语言文件的命名规则：

多语言文件名称 = Locale Code + .php。如 zh_CN.php和en.php

一些常见语言的Local Code：

zh_CN: 中文简体
zh_HK: 中文繁体，港澳
zh_TW: 中文繁体，台湾
en   : 英语
en_US: 英语，美式
en_CA: 英语，加拿大
en_AU: 英语，澳洲
ja   : 日语
ko   : 韩语

如果你想再增加一份新的语言文件，比如 日语

首先在usr/lang目录下创建语言文件：ja.php

文件初始化内容如下：

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;

/**
 * ja.php
 * Author     : Your name
 * Date       :
 * Version    :
 * Description:
 */
class Usr_Lang_ja extends Lang {

    /**
     * @return string 返回语言名称
     */
    public function name() {
        return "日语";
    }


    /**
     * @return array 返回包含翻译文本的数组
     */
    public function translated() {
        return array(
            '首页' => '家',
            '分类' => '分類'
        );
    }

    public function dateFormat() {
        return "月のM Y D日";
    }

}

在文件中的translated函数里面，按照格式填写翻译内容即可。

最后在后台语言设置中选择日语即可。

自己创建的语言文件中，需要对所有的**已存在的词组进行翻译**，否则将默认返回简体中文默认的词组。这项工作量要远远大于修改主题默认翻译。

自定义栏目

主题外观设置中提供了非常简单的自定义设置，无需修改主题源码即可配置以下自定义栏目。

配置中可以实现两个功能，一种是 添加自定义栏目/按钮，另一种是隐藏主题默认栏目/按钮。

1. 左侧导航栏目

2. 顶部导航按钮

3. 时光机的社会化图标

4. 时光机的联系方式内容

下面配置中所有的可用网页图标列表，参考[图标列表](/icons)

左侧边栏导航

添加自定义栏目：

  • name：代表显示栏目/按钮的名称
  • class：使用图标库中的第1-3种的图标的class
  • feather：使用图标库第4种图标使用该属性
  • link：代表栏目/按钮的链接
  • target（可选）: 代表定在何处打开链接文档，如_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。_self:代表在当前窗口打开。不填则为：_blank。更多介绍
{"name":"音乐","class":"glyphicon glyphicon-music","link":"xxx.com"},
{"name":"音乐2","feather":"music","link":"xxx.com"},
{"name":"笔记","class":"glyphicon glyphicon-book","link":"xxx.com"},
{"name":"相册","class":"fontello fontello-picture","link":"xxx.com","target":"_self"}

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

检查配置语法是否正确的方法：将配置内容复制到json校验 网站中，可以检查你的填写配置语法是否正确。

不显示图标，原因可能是语法错误或者图标根本就不在图标列表中，只能使用图标列表中的图标。

如果想要链接ajax（无刷新）的点击效果，确保你的链接是绝对地址（浏览器地址栏什么样的就是怎么填）而且是本站地址，并且target属性为_self。

隐藏默认栏目：

左侧边栏目默认加载首页按钮。隐藏方法：

{"name":"home","status":"hide"}

顶部导航栏目

添加自定义栏目：

与左侧边栏导航配置的书写规则完全相同：

{"name":"音乐","class":"fa fa-music","link":"xxx.com"},
{"name":"相册","class":"fontello fontello-picture","link":"xxx.com","target":"_self"}

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号。

检查配置语法是否正确的方法：将配置内容复制到json校验 网站中，可以检查你的填写配置语法是否正确。

不显示图标，原因可能是语法错误或者图标根本就不在图标列表中，只能使用图标列表中的图标。

如果想要链接ajax（无刷新）的点击效果，确保你的链接是绝对地址（浏览器地址栏什么样的就是怎么填）而且是本站地址，并且target属性为_self。

隐藏默认栏目：

顶部导航按钮默认加载闲言碎语按钮。隐藏方法：

{"name":"talk","status":"hide"}

时光机社会化图标

默认已经填入了配置，书写规则和上面基本类似：

  • name：代表显示按钮的名称
  • class：表示按钮的网页图标的样式
  • link：代表按钮的链接
  • status：当status值为single时，特指页面中的绿色文字按钮，此时无需填写class项。
{"name":"twitter","class":"fa fa-twitter","link":"#"},
{"name":"facebook","class":"fa fa-facebook","link":"#"},
{"name":"googlepluse","class":"fa fa-google-plus","link":"#"},
{"name":"github","status":"single","link":"#"}

简单配置，只需要修改"value"和"link"的值（修改# 那个位置的值，不要修改错位置！！）。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号！！

时光机联系方式

默认已经填写email、QQ、微博以及网易云音乐的配置：

  • name：代表显示栏目的名称
  • img：表示该联系方式的图标（图片格式）
  • link：代表联系方式的地址
{"name":"email","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pmtjbaej201s01s0aw","value":"ihewro@163.com","link":"#"},
{"name":"QQ","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pnirhr2j201s01va9u","value":"535425690","link":"#"},
{"name":"微博","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pofbz5fj201s01swe9","value":"@i超级男孩","link":"http://weibo.com/hewro"},
{"name":"网易云音乐","img":"https://ww4.sinaimg.cn/large/a15b4afegy1fg2pouholzj201s01s0ja","value":"@许多年以后我依然是我","link":"http://music.163.com/#/user/home?id=83271175"}

简单配置，只需要修改"value"和"link"的值（修改# 那个位置的值，不要修改错位置！！）。高级配置，模仿上面的写法，增加或者删除相应的项目即可。

每两项之间，用英文逗号(,)隔开，最后一项请勿加上逗号！！

个性化修改

以下模块由勤劳的使用者提供的关于handsome主题的自定义修改内容，你可以应用到自己的主题中来。

欢迎投稿，感谢！

handsome用户分享社区

用户可以在「handsome自助授权平台」中添加教程，可以添加任何你觉得不错的教程

typecho相关

以下内容与主题无关，是为了方便typecho新手更快熟悉这个博客系统而创建的。

以下内容不断补充，如果你有更好的推荐和建议，欢迎一起充实。

好用的编辑器插件

插件名称 介绍
Editor.md for Typecho Markdown 编辑器，主要是支持markdown语法的
UEditor-for-Typecho 这款是html编辑器，适合新手用，简单方便，功能强大
MyEditor:MyEditor 是一款采用TinyMCE核心，支持切换编辑器、插入图片的Typecho编辑器插件。

邮件通知插件插件

插件名称 介绍
Mailer typecho 创始人对typecho1.1 适配的插件，必须是1.1+版本才可以，因为文字中给的是Mailer.tar.gz 后缀，我解压了上传到百度云的是zip包，直接下载百度云那个即可。
CommentToMail（羽飞原版） 老牌的typecho评论通知插件，可是很多小伙伴们说后台怎么配置都无法发信，韩红听了都想打人，我用的可以。
CommentToMail（更新版1） 王忘杰更新版本： 更新了PHP Mailer版本关闭了使用SMTP发信的证书认证（QQ邮箱证书加密级别太低）
CommentToMail（更新版2） 致远博客更新版本：使用网址监控方法避免异步触发失败

个人喜欢的其他插件

插件名称 介绍
SmartSpam 非常强大的一款Typecho智能评论过滤插件，就此别过垃圾评论的入侵者吧。
AutoTags 标签自动生成插件，避免了手动填写Tag，对我这种懒得填tag的人很有帮助。
Parsedown Plugin 弥补了typecho1.0正式版本md语法不支持表格的缺陷。
Sticky 一个小巧的文章置顶插件。
APlayer 是在原作者ZGQ394基础上由FaithPatrick修改而来。一款很好看的音乐播放器插件。

主题外观配色指南

主题支持单栏、双栏、三栏。

主题布局非常丰富，通过后台的外观设置，轻松搭配不一样的博客风格。

布局

单栏——极简模式

截屏2019-12-0321.22.38

  • 外观设置——置顶导航 开启（最侧边栏置顶）
  • 外观设界面——页面元素显示设置——右侧边栏元素控制——不显示整体（不显示右侧边栏）

双栏模式

上面的两个操作执行一个即可

三栏模式

默认，显示更多的信息

配色

选择

在外观设置——主题色调选择，可以看到主题默认内置了14种配色。

如默认的dark-white-dark分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」。

自定义

主题色调自定义搭配

已有的颜色（后续考虑提供更多的配色）:

  • black纯黑色
  • white白色
  • info蓝色
  • success绿色
  • danger深红色
  • dark深色
  • light灰白色
  • primary紫色

其中dker 表示当前颜色增强

搭配样例：

全白配色即填写：

white-white-white

其他配色举例：

white-white-white 
white dker-white-white
dark-light-light

分别代表：「左侧边栏和上导航栏的交集部分（logo位置）」、「上导航栏」、「侧导航栏」的颜色。

0
Handsome
版权属于： 低调G
本文链接： https://ddg.ink/180.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
相关推荐
Handsome主题静态资源加速 - 星路博客
Handsome主题静态资源加速 - 星路博客
 自定义Handsome主题默认头图（支持多站点）
自定义Handsome主题默认头图（支持多站点）
 Typecho代码高亮插件Code Prettify
Typecho代码高亮插件Code Prettify
 安利一款Hansome主题专用的UserAgent插件
安利一款Hansome主题专用的UserAgent插件

评论 (0)

取消