自动添加 git commit 作为博客更新记录

我曾尝试过使用 github api来获取 commit logs, 可能是因为我技术太菜了, 总是出现各种各样难以解决的问题, 最终我还是选择了通过 git log 补充记录的形式来获取, 目前自测了几次没有发现有什么问题, 凑活用吧, 如果后续有什么问题再尝试修复…

效果预览

创建更新记录页面

source/updates/ 路径下创建 index.md 文件, 给文件中添加以下内容

1
2
3
4
5
6
7
---
title: 更新记录
type: "updates"
comments: false
top_img: false
aside: true
---

创建页面结构

themes/anzhiyu/layout/includes/page/ 创建 updates.pug 文件并添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#article-container
#update-log.timeline.red
if site.data.updates
each item in site.data.updates
if item.year
.timeline-item
.timeline-item-title
.item-circle
p=item.year
each day in item.day_list
.timeline-item-title
.item-circle
p=day.day
.timeline-item-content
ol
each log in day.log_list
li=log.content
- var time = log.time.split(' ')[1]
i.fa-solid.fa-code-commit=time
a(href=log.url, style="position: absolute; right: 10px;")=log.short_id

添加页面

themes/anzhiyu/layout/page.pug 添加如下代码

1
2
3
4
5
6
      when 'books'
include includes/page/books.pug
+ when 'updates'
+ include includes/page/updates.pug
when 'games'
include includes/page/games.pug

添加脚本

themes/anzhiyu/scripts/_custom/创建commit_logs.js文件, 并添加如下代码

  • _custom为自己创建的文件夹
  • hexo 在执行hexo generate命令时, 会执行 themes/anzhiyu/scripts/ 下的所有 js 脚本

以下内容需要修改成自己的:

  • create: 修改为你的仓库名称
  • 添加完成 js 脚本后需要运行一次hexo generate, 以初始化updates.yml
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
112
113
114
115
116
117
118
const { exec } = require("child_process");
const fs = require("fs");
const yaml = require("js-yaml");

const filePath = "source/_data/updates.yml";
const create = "Pupper0601/HexoNote";
let sinceId = "";
let data = [];

async function updateLogs() {
if (fs.existsSync(filePath)) {
const fileContent = fs.readFileSync(filePath, "utf8");
data = yaml.load(fileContent);
if (data !== undefined) {
if (
data.length > 0 &&
data[0].day_list.length > 0 &&
data[0].day_list[0].log_list.length > 0
) {
sinceId = data[0].day_list[0].log_list[0].short_id;
}
}
}

const command = sinceId
? `git log --pretty=format:"%ad||%s||%h||%H" --date=format:"%Y-%m-%d %H:%M:%S" ${sinceId}..HEAD`
: 'git log --pretty=format:"%ad||%s||%h||%H" --date=format:"%Y-%m-%d %H:%M:%S"';
console.log(command);
exec(command, (error, stdout) => {
if (error) {
console.error(`执行的错误: ${error}`);
return;
}

const newLogs = stdout
.split("\n")
.map((log) => {
const [date, content, short_id, id] = log.split("||");
const year = date.split(" ")[0].split("-")[0];
const day = date.split(" ")[0].split("-").slice(1).join("-");

return {
year,
day,
commit: {
content,
short_id,
id,
url: `https://github.com/${create}/commit/${id}`,
time: date,
},
};
})
.sort((a, b) => {
// 按照年份和日期进行倒序排序
if (a.year !== b.year) {
return b.year - a.year;
}
return b.day.localeCompare(a.day);
});

console.log("更新数量: " + newLogs.length + " ---> " + newLogs);

newLogs.forEach((log) => {
let yearObj = data.find((item) => item.year === log.year);
if (!yearObj) {
yearObj = {
year: log.year,
day_list: [],
};
data.push(yearObj); // 添加到数组末尾
}

let dayObj = yearObj.day_list.find((item) => item.day === log.day);
if (!dayObj) {
dayObj = {
day: log.day,
log_list: [],
};
yearObj.day_list.push(dayObj); // 添加到数组末尾
}

// 检查 short_id 是否已经存在
if (
!dayObj.log_list.some((item) => item.short_id === log.commit.short_id)
) {
dayObj.log_list.push(log.commit); // 添加到数组末尾
}
});

// 对年份进行倒序排序
data.sort((a, b) => b.year.localeCompare(a.year));

// 对每个年份中的日期进行倒序排序
data.forEach((yearObj) => {
yearObj.day_list.sort((a, b) => b.day.localeCompare(a.day));

// 对每个日期中的提交按照时间进行倒序排序
yearObj.day_list.forEach((dayObj) => {
dayObj.log_list.sort((a, b) => new Date(b.time) - new Date(a.time));
});
});

const yamlStr = yaml.dump(data);
fs.writeFileSync(filePath, yamlStr);
console.log("更新 updates.yaml 成功");
});
}

// updateLogs()

// 如果需要调试, 需要注销以下代码
hexo.extend.filter.register("before_generate", async () => {
if (hexo.env.cmd !== "server") {
updateLogs();
console.log("博客修改记录更新成功!");
}
});

添加样式

themes/anzhiyu/source/css/_custom/custom.css添加以下样式

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
/* 更新记录样式 */
#update-log .timeline-item .timeline-item-content a:hover {
color: #eaeffe !important;
}

#update-log li i {
opacity: 0;
}

#update-log li:hover > i {
opacity: 1;
font-size: 13px;
color: #cccaca;
letter-spacing: 3px;
font-family: "FontAwesome";
font-weight: 700;
margin-left: 10px;
position: absolute;
right: 124px;
top: 14px;
}

#update-log li > i:before {
position: absolute;
right: -34px;
font-size: 18px;
top: -2px;
}

大功告成, over~~~