Handsome主题使用文档

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

相册

创建相册

  • 新建分类:分类的缩略名称为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/fontelloconfig.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]

其中statusfalse 表示默认不显示文字内容,为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.phpen.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

评论 (0)

取消