Hexo自定义主题(六)

标签: Hexo 分类: 前端 创建时间:2019-11-30 01:22:56 更新时间:2023-10-20 11:23:25

1.文章置顶

只需要重写index生成器就可以了,在主题的scripts文件夹下的某个js文件中添加(hexo启动时会自动执行该文件夹下的所有js文件)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var pagination = require('hexo-pagination');
// 重写主页生成器,添加置顶功能
hexo.extend.generator.register('index', function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义,那么将有top的排在前面(这里用异或操作居然不行233)
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
});

然后在需要置顶的文章中,添加top属性,top值的大小决定了置顶的顺序。

或者直接修改scaffolds文件夹中的post.md,添加top属性,为所有新建的文章添加top属性。

2.添加视频功能

音频就用aplayer,视频就用dplayer,dplayer还支持弹幕功能。

3.简化文章地址

使用hexo这么长时间以来,终于受不了了,默认的路由了。默认的文章路由,是以文章标题来命名的,所以在分享或者是再浏览器中输入的时候,都是会有一长串的百分号,因为文章的中文标题被转义了。
刚开始想到的是以文章的id号为永久链接的默认格式,但是好像会有问题,在执行hexo clean时,文章的id号会被清空,重新生成新的id号了。
后来尝试了新的方式,hexo-abbrlink 插件。

(1) 安装插件

1
npm install hexo-abbrlink --save

(2) 修改站点配置文件

1
2
3
4
5
6
# permalink: :year/:month/:day/:title/
# permalink_defaults:
permalink: posts/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex

(3) 执行清理->生成->部署

1
2
3
4
5
6
## 清理
hexo clean
## 生成
hexo g
## 部署
hexo d

结果可以看出文章的链接已经变成了一串数字了。

查看文章,发现它会在每一篇文章中添加一个属性:abbrlink,通过这个来,生成自定义的路径,其实和使用id号作为文章的永久链接的原理差不多吧,也是需要这么一个唯一值属性。不过,这个插件,就是将需要手动添加的abbrlink属性改成了自动添加的。

注意,安装了这个插件之后,vscode中编辑文章,有时候会文件会突然抽风,编写的文件内容全部都没有了,只剩下了一个abbrlink,刚开始我还以为是我不小心动了触摸板,就用Ctrl+Z恢复了文件,后来多次之后,才发现,原来不是我操作失误,是有人在搞鬼。特别是在同时编辑文件,及开启了hexo s 的情况下

4.新建文章时自动执行脚本

这个需求主要是这么产生的,就是我使用了hexo-abbrlink为每一篇文章生成唯一id号,但是我使用了azure devops 进行自动部署,也就是说,我的hexo g,hexo clean命令都是在远程服务器执行的,这个时候,新建的文章就有可能还没有生成这个abbrlink属性,但是我又需要这个属性,所以我就想,在每一篇文章新建的时候,就自动为其生成abbrlink标签,而不是在执行hexo g的时候再生成。在主题的scripts文件夹下新建hexo_init.js(叫什么无所谓,hexo都会执行到) 具体代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
var rf=require("fs");
var grey_matter=require("gray-matter");
var abbrlinkCreator=require("hexo-abbrlink/lib/logic");

// 新建文章时生成abbrlink
/**
* 一个hexo文章的大致内容如下:
{
title: 'test6',
abbrlink: '14d64941',
date: Moment<2021-06-26T22:12:34+08:00>,
_content: '\n<!--more-->\nsdfs\n',
source: '_posts/test6.md',
raw: '---\n' +
'title: test6\n' +
'abbrlink: 14d64941\n' +
'date: 2021-06-26 22:12:34\n' +
'tags:\n' +
'categories:\n' +
'---\n' +
'\n' +
'<!--more-->\n' +
'sdfs\n',
slug: 'test6',
published: true,
updated: Moment<2021-06-26T22:22:11+08:00>,
_id: 'ckqduqqu000031p75dkw667v5',
comments: true,
layout: 'post',
photos: [],
link: '',
path: [Getter],
permalink: [Getter],
full_source: [Getter],
asset_dir: [Getter],
tags: [Getter],
categories: [Getter],
content: '<a id="more"></a>\n<p>sdfs</p>\n',
site: {
data: {
book: [Array],
daily: [Object],
donor: [Array],
english: [Object],
links: [Array],
gallery: [Array],
movie: [Array],
anime: [Array]
}
},
excerpt: 'sdfs......',
more: '<p>sdfs</p>'
}
*/

// 监听创建文章时的动作
hexo.on('new', function(postdata){
let path=postdata.path; // 文章路径
let hexoGlobal=this; // hexo 配置

if(path.indexOf("_posts")>=0){ // 只针对生成post文章时进行操作
// 读取标题内容
var obj=grey_matter(postdata.content);
var titleObj=obj.data;
// 构建虚拟文章内容
postdata.source=""; // 文章路径
postdata.layout="post"; // 布局
postdata.title=titleObj.title; // 标题
postdata.raw=postdata.content; // 标题内容
postdata.full_source=path; //文章的全路径
// 生成abbrlink
abbrlinkCreator.call(hexoGlobal,postdata);
}

});
参考文章:
1.Hexo添加文章时自动打开编辑器 这里提供了监听new事件的方法,创建完文件后,直接打开该文件
2.事件 除了new事件,还有其他的事件:deployBefore、deployAfter、exit、generateBefore、generateAfter

5.随机图片

我网页上加了一个滚动轮播点图片,于是就想着用些好用的获取Bing图片的接口。 我尝试了

  • api.vvhan.com (失效了)
  • picsum.photos
  • source.unsplash.com
参考文章:
1.随机图片API 我暂时用这个进行了配置,出了必应,还有其他的类型比如:美女、风景和动漫。但是我使用这个的时候,总是出不了,或者说带宽很慢,我只能换地址了。
2.一些好的随机图API
3.Bing Pictures Interface | 必应壁纸接口 这个接口返回比较慢
4. 墨涩 / 获取每日必应壁纸的api源码服务
5.Bing每日图片API接口 这个地址也挺快的,可以随机显示不同的照片,最后我选择了这个作为动态图片来使用。(后来失效了)
6.Lorem Picsum 这个接口也挺好的
7.十五个免费随机图片api接口网站[超详细](不定时更新)
8.调用文档 这里有很多的调用接口,我这里选取了Bing的接口。
9.[更新中]随机图片API接口

6.添加广告

自己的博客已经有十几万的阅读量了,虽然很少有人会二次光顾,但是我觉得还是接一个广告吧。

(1) 登陆Adsense

(2) 获取代码
点击广告,获取广告代码,插入到博客的 head 里面就可以了。

(3) 等待审核
我这里审核了好几天,一直没有动静。审核通过之后,也不会有通知的。

(4) 之后就会出现广告了,有些浏览器会屏蔽掉这个广告,或者是自己安装了屏蔽插件,看不到。

7.网站统计

网站统计,就是统计网站的整个的访问情况,比如PV/UV,独立IP等。

1.卜算子
刚开始的时候,我用的是卜算子,直接加入js代码就可以了。

1
2
3
4
<!--- 引入 -->
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!--- 添加 -->
访客数<span id="busuanzi_value_site_uv"></span>人次

2.百度统计
(1) 登录百度统计平台

(2) 点击使用设置

(3) 创建站点

(4) 获取站点代码,放到自己的网站中即可

3.谷歌统计
(1) 登录谷歌分析平台

(2) 选择行业和其他的信息

(3) 添加媒体资源

(4) 获取代码,并放置到自己的网站中

参考文章:
1.一分钟!不写代码!给网站添加【统计分析】 这是百度统计的接入,但是新版本之后,略微有些区别。
2.百度站长平台和百度统计的区别在哪里?
3.自己建网站怎么添加Google Analytics统计代码查看每日流量 这个挺简单的,写了谷歌统计加入
4.使用入门 百度统计账户类型:站长版账户、站长版账户、客户版账户、移动统计版账户
小额赞助
本人提供免费与付费咨询服务,感谢您的支持!赞助请发邮件通知,方便公布您的善意!
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别?

1.函数 isNaN 接收参数后,会尝试将这个参数转换为数值,任何不能被转换为数值的的值都会返回 true,因此非数字值传入也会返回 true ,会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字,如果是数字再继续判断是否为 NaN ,不会进行数据类型的转换,这种方法对于 NaN 的判断更为准确。

每日二省
为什么0.1+0.2 ! == 0.3,如何让其相等?

一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对JavaScript来说,这个值通常为2-52,在ES6中,提供了Number.EPSILON属性,而它的值就是2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为0.1+0.2 ===0.3。

每日三省
== 操作符的强制类型转换规则?

1.首先会判断两者类型是否**相同,**相同的话就比较两者的大小。

2.类型不相同的话,就会进行类型转换。

3.会先判断是否在对比 null 和 undefined,是的话就会返回 true。

4.判断两者类型是否为 string 和 number,是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean,是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol,是的话就会把 object 转为原始类型再进行判断。

每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀,微笑是寂寞的悲伤。