魔改教程 hexo 自动添加 git commit 作为博客更新记录 Pupper 2024-05-27 2024-10-30 我曾尝试过使用 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); } 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 成功" ); }); } 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~~~