在圣诞节来临之前,记录一下我的博客修改记录,虽然博客上线的时间只有短短的一年,但是却折腾了很多很多,从最初的一脸懵逼的搭建lamp环境,到现在的宝塔面板,从最初的wordpress到现在的typecho,中间真的是经历了很多。

程序记录:

wordpress-zblogphp-emlog-wordpress-hexo-typecho

今天主要分享一下,在typecho下handsome主题的个性化修改以及配置,因为最近有很多朋友问我是怎么配置的。

准备

  • typecho
  • handsome6.0
  • 一颗爱折腾的心

配置

时光机

首先新建一个页面,在地址栏输入cross,标题是可以随意起名字的。

然后在右侧的自定义模板中选择时光机

新建时光机.png

然后发布就算是创建成功了,然后在前台点击头像,发布第一条动态,刷新一下就ok了。

时光机页面下的rss内容

时光机rss.png

文档介绍:https://handsome.ihewro.com/#/rss

我的这个页面其实就是使用了rss订阅(rss是简易信息聚合,基于xml格式,发布rss后rss的内容可以被其他站点调用。)

关于rss,如果你不知道从哪里找到订阅源的话,其实已经有大神解决了这个问题,@diygod的开源rsshub提出了万物皆可rss的概念。你可以使用rsshub提供的源进行订阅,也可以部署在自己服务器上面,当然你也可以参与rsshub为rsshub提供订阅源的支持。

RSS配置

主题文档:https://handsome.ihewro.com/#/rss

rsshub文档:https://docs.rsshub.app/

主题设置-时光机配置-RSS动态内容配置

首先贴出我的配置

{"id":"bilibili_rss","name":"哔哩哔哩","url":"https://cors-anywhere.herokuapp.com/https://www.moerats.com/bilibili/rss/?id=21462274"},
{"id":"qdysj","name":"前端艺术家","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/jskou/0"},
{"id":"guanzhi","name":"每日一文","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/guanzhi"},
{"id":"zgdxmooc","name":"慕课","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/icourse163/newest"},
{"id":"juejin","name":"掘金","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/juejin/category/frontend"},
{"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}

如果你觉得这个样子看着特别乱的话,我以哔哩哔哩的追番为例

{"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}

换一种方式呈现,这样就清晰明了

{
    "id":"bilibili_zf",
    "name":"追番","
    url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/21462274"}

id:唯一值,你可以自定义,只要不和其他冲突就行

name:在时光机页面显示的名称,例如这个就会显示【追番这两个字】

url:订阅的rss源链接,这里使用了rsshub的支持,感谢rsshub。

RSS源如何填写

还是以追番列表为例,我们在rsshub的文档处找到哔哩哔哩的源

用户追番列表
作者: @wdssmq

举例: https://rsshub.app/bilibili/user/bangumi/208259

路由: /bilibili/user/bangumi/:uid

参数:
uid, 必选 - 用户 id

我们只要把https://rsshub.app/bilibili/user/bangumi/208259这个链接复制出来,将后面的208259更换为自己的uid就可以了

假如我们的哔哩哔哩账号uid就是208259,接下来在时光机配置里应该这样填写

{
    "id":"bilibili_zf",
    "name":"追番",
    "url":"https://rsshub.app/bilibili/user/bangumi/208259"
}
将换行删掉就是:
{"id":"bilibili_zf","name":"追番","url":"https://rsshub.app/bilibili/user/bangumi/208259"}

填入保存,然后刷新时光机页面,如果出现获取失败,那就是跨域的问题了,参考作者文档,在订阅源前加上https://cors-anywhere.herokuapp.com/即可

{
    "id":"bilibili_zf",
    "name":"追番",
    "url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/208259"
}
将换行删掉就是:
{"id":"bilibili_zf","name":"追番","url":"https://cors-anywhere.herokuapp.com/https://rsshub.app/bilibili/user/bangumi/208259"}

然后就大功告成了。

时光机页面允许发送图片,音频和视频

时光机的动态页原理是基于评论的,所以每次发的动态其实就是在时光机页面下的评论。需要在 后台-设置-评论设置下的允许使用的HTML标签和属性一栏填入以下代码:

<img src="">
<audio class="" src="" preload>
<video src=""></video>

评论设置.png

导航栏

关于导航栏的配置,其实作者的文档不是特别的详细,所以很多人不知道如何进行图标的添加。

图标

使用文档:https://handsome.ihewro.com/#/icons

主题内置了四种图标库

  • iconfont
  • fontello
  • bootcss自带的Glyphicons
  • feather

前三种的方法都是class,而第四种feather的用法稍微有一点不一样

iconfont和fotello只支持主题文档中列出的图标,而Glyphicons和feather则支持的比较多。

前三种的用法:

iconfont:
{"name":"图床","class":"icon-kinds","link":"https://kaygb.top/image-cdn.html","target":"_self"},

fontello:
{"name":"图床","class":"fontello fontello-picture","link":"https://kaygb.top/image-cdn.html","target":"_self"},

glyphicon:
{"name":"监控","class":"glyphicon glyphicon-record","link":"https://kaygb.top/monitor.html","target":"_self"},

而feather图标则不同,上面的第二个属性为class,而feather替换了class属性

{"name":"云盘","feather":"hard-drive","link":"https://kaygb.top/kaygb-cloud.html","target":"_self"},

内嵌页面

也有朋友问我的内嵌页面是如何实现的

其实很简单,用来html的iframe标签

[button color="success" icon="glyphicon glyphicon-eur" url="这里是点击跳转独立标签页的链接地址"]独立页面访问[/button]

<iframe src="这里是内嵌的网页链接的地址" frameborder="0" width="100%" scrolling="yes" height="1000" leftmargin="0" topmargin="0">
</iframe>

贴一下我其中一个页面:

[button color="success" icon="glyphicon glyphicon-eur" url="https://cloud.kaygb.top/"]独立页面访问[/button]

<iframe src="https://cloud.kaygb.top/Login" frameborder="0" width="100%" scrolling="yes" height="1000" leftmargin="0" topmargin="0">
</iframe>
使用方法

新建页面,名称随意,地址随意

然后内容填入上方代码,填入内嵌链接的地址,如果想在侧边栏中的页面分类中隐藏,只需在右边自定义模板下面的高级选项选择隐藏。

隐藏页面.png

我使用的图床和网盘程序

图床使用的是: Lsky Pro

云盘使用的是: Cloudreve

网站背景漂浮的彩带

参考以下文章

网站点击烟花效果

整理代码,待补充 。。。

浏览器动态标题

参考以下文章

在主题设置-开发者设置的自定义输出body 尾部的HTML代码填入以下代码

<!--浏览器搞笑标题-->
<script>
 var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヽ(●-`Д´-)ノ别走啊!';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "//file.kaygb.top/static_image/tx.png");
         document.title = 'ヾ(Ő∀Ő3)ノ想我啦!' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });
</script>

自定义js.png

最后

很多内容可能暂时没有记起来,各位有需要或是内容有错误的都可以在下方给我评论,万分感谢!(部分内容稍后补充)

最后修改:2019 年 12 月 25 日 08 : 07 PM
如果觉得我的文章对你有用,请随意赞赏