hexo-cactus魔改笔记+bug修复记录

本文最后更新于:几秒前

hexo+cactus魔改笔记+bug修复记录(自22.10.15始)

1、目录跳转功能失效

mongodb+srv://yaowenjin:wsywj990226@blog.ipmgc19.mongodb.net/?retryWrites=true&w=majority

找到【…\blog\node_modules\hexo-toc\lib】中的filter.js,将28-31行修改成以下代码

1
2
3
4
$title.attr('id', id);
//$title.children('a').remove();
//$title.html( '<span id="' + id + '">' + $title.html() + '</span>' );
//$title.removeAttr('id');

2、添加版权提醒

在post主页的前端渲染代码【…\blog\themes\cactus\layout\post.ejs】中的页面末尾加入一个div,写入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div>    
<ul class="post-copyright">
<li class="post-copyright-link">
<strong>本文作者:</strong>
<a href="/"><%= config.author %></a>
</li>
<li class="post-copyright-link">
<strong>本文标题:</strong>
<a href="{{ url_for(config.permalink) }}"><%- partial('_partial/post/title', { post: page, index: true, class_name: '' }) %></a>
</li>
<li class="post-copyright-link">
<strong>本文链接:</strong>
<a title="<%- page.title %>"><%- config.url %>/<%- page.path %></a>
</li>
<li class="post-copyright-license">
<strong>版权声明: </strong>
本文由 <%- config.author %> 原创,采用 <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh" title="Attribution-NonCommercial-NoDerivatives 4.0 International" rel="license" target="_blank">CC BY-NC-ND 4.0</a>, 转载请保留以上声明信息!
</li>
</ul>
</div>

然后在网页的样式文件中加入样式设置,这里我偷了个懒直接加到了总文件

【…\blog\themes\cactus\source\css\style.styl】中

1
2
3
4
5
6
7
.post-copyright {
margin: 2em 0 0;
padding: 0.5em 1em;
border-left: 3px solid #FF1700;
background-color: #F9F9F9;
list-style: none;
}

3、添加图片放大功能

这里参考了cactus使用上fancybox图片放大的实现步骤。

首先在【…\blog\themes\cactus\layout_partial\head.ejs】中加入css的引入文件

1
2
3
<% if (theme.fancybox.enabled) {%>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css" />
<% } %>

并在同级的script.ejs中加入调取代码

1
2
3
4
<!-- FancyBox -->
<% if (theme.fancybox.enabled) {%>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<% } %>

写到这里,网页可以通过在每个img加上标签属性调用,在这里我们直接在渲染引擎hexo-renderer-marked中对img加入fancybox的渲染引擎。

找到【..\node_modules\hexo-renderer-marked\lib/renderer.js】,搜索”img”并将img相关的代码修改如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 原代码
let out = `<img src="${encodeURL(href)}"`;
if (text) out += ` alt="${text}"`;
if (title) out += ` title="${title}"`;
if (lazyload) out += ' loading="lazy"';

out += '>';

// 修改后
let out = `<a data-fancybox="gallery" data-src="${href}" data-caption="${text}"><img src="${encodeURL(href)}"`;
if (text) out += ` alt="${text}"`;
if (title) out += ` title="${title}"`;
if (lazyload) out += ' loading="lazy"';

out += '></a>';

最后,在blog的配置文件_config.yaml中打开开关即可

1
2
3
# Enable FancyBox
fancybox:
enabled: true

image-20221015162949197

4、添加gittalk评论功能

gittalk是github可提供的一种application,其设置相对比较简单。

首先确定一个github的仓库用于保存评论,这里可以直接使用博客的库,比如我的库(paopao0226.github.io),然后打开github,按照Setting–>Developing settings–>OAuth application的过程进行

image-20221016143600395image-20221016143629825image-20221016143834201

如果没有用过OAuth的朋友应该是需要创建一个新的。
image-20221016143934779

1
2
3
4
Application name: 应用的名字,可以随便取(其他人想要评论的话,需要登录Github授权,授权的时候显示的就是这里的Application name)
Homepage URL: 应用主页的完整URL,如: https://pyihe.github.io/
Application description: 应用描述,选填项
Authorization callback URL: 登录授权后回调的页面,直接填成与Homepage URL一样

完成OAuth Application的申请,并申请创建密钥之后,就会得到如下界面,其中Client ID和Client Sercets记住,之后要用到。
image-20221016144134192

下面我们继续设置gittalk,在【…\blog\themes\cactus\_config.yml】

1
2
3
4
5
6
7
8
9
10
11
disqus:
enabled: false # 关闭官方的disqus
shortname: paopao0226

gitalk:
enabled: true # 开关开启
owner: paopao0226 # 你的 github 用户名
repo: paopao0226.github.io # 保存评论的 repo 库,注意不要加https,网站导航会直接到paopao0226/paopao0226.github.io访问仓库
admin: paopao0226 # 管理员,你的 github 用户名
clientID: XXX # 你的Client ID
clientSecret: XXX # 你的Client Sercets

然后在【…\blog\themes\cactus\layout_partial\comment.ejs】中加入以下代码

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
// disqus 评论系统部分
<% if(page.comments && theme.disqus.enabled){ %>
<div class="blog-post-comments">
<div id="disqus_thread">
<noscript><%= __('comments.no_js') %></noscript>
</div>
</div>
<% } %>
// 下面添加 Gitalk 部分
<% if(page.comments && theme.gitalk.enabled){ %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<div id="gitalk-container"></div>
<script type="text/javascript">
var gitalk = new Gitalk({
clientID: '<%= theme.gitalk.clientID %>',
clientSecret: '<%= theme.gitalk.clientSecret %>',
id: md5(window.location.pathname),
repo: '<%= theme.gitalk.repo %>',
owner: '<%= theme.gitalk.owner %>',
admin: '<%= theme.gitalk.admin %>',
distractionFreeMode: '<%= theme.gitalk.on %>'
})
gitalk.render('gitalk-container')
</script>
<% } %>

配置gittalk可能出现的两种错误可以参考Gridea 配置Gitalk 的异常:Error Bad credentials 和 Error Not Found

5、加入博客加密

下载encrypt插件

npm install –save hexo-blog-encrypt

在每个需要加密的文件头加入password字段

1
2
3
4
title: Hello World
...
password: 123456
...

可以在博客根目录的配置文件_config.yml中加入整体的文本配置

1
2
3
4
5
6
7
8
9
10
# 安全
encrypt: # hexo-blog-encrypt
abstract: 这里有东西被加密了,需要输入密码查看哦。
message: 您好, 这里需要密码.
tags:
- {name: tagName, password: 密码A}
- {name: tagName, password: 密码B}
template: <div id="hexo-blog-encrypt" data-wpm="{{hbeWrongPassMessage}}" data-whm="{{hbeWrongHashMessage}}"><div class="hbe-input-container"><input type="password" id="hbePass" placeholder="{{hbeMessage}}" /><label>{{hbeMessage}}</label><div class="bottom-line"></div></div><script id="hbeData" type="hbeData" data-hmacdigest="{{hbeHmacDigest}}">{{hbeEncryptedData}}</script></div>
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

6、加入类github活动日历

参考自Hexo主题美化 | 给你的博客加上GITHUB日历云和分类雷达图 - 腾讯云开发者社区-腾讯云 (tencent.com)

首先,将echarts.min.js下载到本地,并放到博客【…\blog\themes\cactus\source\js】位置,

image-20221029223233645

然后在【…\blog\themes\cactus\layout_partial】位置中新建一个文件【post-calendar.ejs】,将以下代码放进去。

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<div class="container archive-calendar">
<div class="card">
<div id="post-calendar" class="card-content"></div>
</div>
</div>

<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('post-calendar'));

<%
var nameMap = (config.language && config.language.indexOf('zh') >= 0) ? 'cn' : 'en';
var titleText = (config.language && config.language.indexOf('zh') >= 0) ? '文章日历' : 'Post Calendar';

// calculate range.
var startDate = moment().subtract(1, 'years');
var endDate = moment();
var rangeArr = '["' + startDate.format('YYYY-MM-DD') + '", "' + endDate.format('YYYY-MM-DD') + '"]';

// post and count map.
var dateMap = new Map();
site.posts.forEach(function (post) {
var date = post.date.format('YYYY-MM-DD');
var count = dateMap.get(date);
dateMap.set(date, count == null || count == undefined ? 1 : count + 1);
});

// loop the data for the current year, generating the number of post per day
var i = 0;
var datePosts = '[';
var dayTime = 3600 * 24 * 1000;
for (var time = startDate; time <= endDate; time += dayTime) {
var date = moment(time).format('YYYY-MM-DD');
datePosts = (i === 0 ? datePosts + '["' : datePosts + ', ["') + date + '", '
+ (dateMap.has(date) ? dateMap.get(date) : 0) + ']';
i++;
}
datePosts += ']';
%>
/*
title: {
top: 0,
text: '<%- titleText %>',
left: 'center',
textStyle: {
color: '#3C4858'
}
},
*/
let option = {
tooltip: {
padding: 10,
backgroundColor: '#555',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="font-size: 14px;">' + value[0] + ':' + value[1] + '</div>';
}
},
visualMap: {
show: true,
showLabel: true,
categories: [0, 1, 2, 3, 4],
calculable: true,
inRange: {
symbol: 'rect',
color: ['#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127']
},
itemWidth: 12,
itemHeight: 12,
orient: 'horizontal',
left: 'center',
bottom: 0
},
calendar: [{
left: 'center',
range: <%- rangeArr %>,
cellSize: [13, 13],
splitLine: {
show: false
},
itemStyle: {
color: '#196127',
borderColor: '#fff',
borderWidth: 2
},
yearLabel: {
show: true
},
monthLabel: {
nameMap: '<%- nameMap %>',
fontSize: 11
},
dayLabel: {
formatter: '{start} 1st',
nameMap: '<%- nameMap %>',
fontSize: 11
}
}],
series: [{
type: 'heatmap',
coordinateSystem: 'calendar',
calendarIndex: 0,
data: <%- datePosts %>
}]

};

myChart.setOption(option);
</script>

之后,找到【…\blog\themes\cactus\source\css】中的【style.styl】文件,这个文件是整个博客的总CSS样式。在文件末尾加入:

1
2
3
4
5
/*日历云*/
#post-calendar {
width: 90%;
height: 180px;
}

其中,日历的宽度和高度均可以自行调整。这样就调整好了整体的配置。最后,将配置语句放到博客的任何位置。

1
2
3
4
<span class="h2">
<%= __('Post Calender') %>
<%- partial('_partial/post-calendar') %>
</span>

比如,我是将日历放到了主页,因此在主页的ejs文件【…\blog\themes\cactus\layout\index.ejs】中加入此语句。

image-20221029224006328

这样就完成啦。

7、添加附件下载功能

hexo默认打开了文件的链接功能,只需找到blog的配置文件,搜索【post_asset_folder】,将开关都打开。

image-20221029225413450

然后在【…\blog\source】下新建一个文件夹download,将文件都放进去。

image-20221029225504580

在文件中使用

1
[点击下载](/download/文件名称.格式)

hexo会直接引导到download的位置访问文件。

8、添加文本复制批注

参考自CSDN新手如何给Hexo博客在复制时添加版权声明_只是学习学习的博客-CSDN博客

直接在post对应的ejs文件中写入js监听,找到【…\blog\themes\cactus\layout\post.ejs】,在其末尾加入以下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
29
30
31
32
<script>
function setClipboardText(event){
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
let clipboardData = event.clipboardData || window.clipboardData;
// 如果未复制或者未剪切,则return出去
if (!clipboardData) { return; }
event.preventDefault();
// Selection 对象,表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
let text = window.getSelection().toString();

if (text) {
// 如果文本存在则先取消文本默认事件
event.preventDefault();
// 通过调用常clipboardData对象的 setData(format, data) 方法;来设置相关文本
// format: 一个DOMString 表示要添加到 drag object的拖动数据的类型。
// data: 一个 DOMString表示要添加到 drag object的数据。
var copyright = '\n\n'
+ '——————————————————————'
+ '\n版权声明:本文为「Ywj226」的原创文章,遵循CC BY-NC-ND 4.0版权协议,转载请附上原文出处链接及本声明。'
+ '\n原文链接:<%= page.permalink %>'

clipboardData.setData('text/plain', text + copyright);

}
};
var contents = document.getElementsByClassName("content");
// 监听文章内容的copy事件
contents[0].addEventListener('copy',function(e){
setClipboardText(e);
});
</script>

重新启动即可。

9、添加追番页面(√)

参考自Hexo Bilibili Bangumi - hexo 番剧页面插件,可选数据源:Bilibili, Bangumi - (hexo-bilibili-bangumi) (opensourcelibs.com)

首先设置一个界面用来展示追番界面,这里不再赘述

然后,使用npm指令安装插件

1
npm install hexo-bilibili-bangumi --save

之后在博客配置文件中加入以下配置文件

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
bangumi: # 追番设置
enable: true
path: /bilibili/
vmid: # bilibili的uid
title: '追番'
quote: '生命不息,追番不止!'
show: 1
lazyload: true
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value

cinema: # 追剧设置
enable: true
path:
vmid:
title: '追剧列表'
quote: '生命不息,追剧不止!'
show: 1
lazyload: true
loading:
metaColor:
color:
webp:
progress:
extra_options:
key: value

在每次进行hexo cleanhexo g之后,再运行一步hexo bangumi -u来更新番剧数据即可。

若需要加入在b站上未上线的番剧,可以自行在【…\blog\source_data】文件夹中新建一个【extra_bangumis.json】文件,然后以json格式将数据自行写入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"watchedExtra": [
{
"title": "缘之空",
"type": "番剧",
"area": "日本",
"cover": "https://cdn.jsdelivr.net/gh/mmdjiji/bangumis@main/Yosuga-no-Sora/cover.jpg",
"totalCount": "全12话",
"id": 0,
"follow": "不可用",
"view": "不可用",
"danmaku": "不可用",
"coin": "不可用",
"score": "不可用",
"des": "远离都市的田园小镇,奥木染。春日野悠带着妹妹穹,来到了这座城镇。坐落在这里的是,儿时暑假经常造访的充满回忆的已故祖父的家。双亲因意外事故而丧生,变得无依无靠..."
}
]
}

这样就完成了。


hexo-cactus魔改笔记+bug修复记录
http://paopao0226.site/post/94815387.html
作者
Ywj226
发布于
2022年10月16日
更新于
2023年9月23日
许可协议