# Blog 搭建
无法白嫖阿里云 or 腾讯云的学生优惠后，用个人云服务器作为博客的花费属实有点不能承受，于是又回归了 Github Pages + Hexo 的白嫖之路，途中踩到了诸多坑，这里稍微记录一下：
# 主题
逛 themes 的时候偶然看见了 ShoKa 主题，除了有点太过二次元外特效和布局还是很对我胃口的，唯一一点在于作者两年前就不更新了，看到最后一次更新时间时，我就意识到，安装之旅一定时会踩坑的...，咬咬牙，还是踩一遍吧
# node 版本
作为一个两年前的项目，用最新 LTS 版本 18.17.1 果不其然会出问题，主要在于该项目所依赖的插件 hexo-renderer-multi-markdown-it 中依赖了 puppeteer ，在已经解决了网络问题的情况下，仍然会报一个错误：
TypeError [ERR_INVALID_PROTOCOL]: Protocol "https:" not supported. Expected "http:" |
最终解决方法为将 node 版本降至 12.x：
sudo n 12.22.12 |
# deploy 插件
hexo 官方的 deploy 插件为： hexo-deployer-git ，提供了一键部署功能，而官方文档给的不是特别详细，token 变量赋值为 github 的 access token 仍然无法认证成功，这里直接给出认证成功的配置：
deploy: | |
type: git | |
repo: https://Your_Access_Token@github.com/<Name>/<Name>.github.io | |
branch: main |
# 包管理器
不知道是不是因为 node 降级之后没有把 yarn 降级的原因，当我用 yarn add xxx 安装依赖后，再次使用 hexo 指令时，会出现报错 cannot find module 'hexo' ，这里没有继续探究下去了，直接放弃 yarn ，使用 npm 就没有问题了。
# LeanCloud + Valine
该主题默认支持了使用 valine+LeanCloud 的方式实现无后端评论功能，有问题的地方在于 leanCloud 现在做了默认策略，无法通过默认地址进行访问，必须通过 应用 -> 设置 -> 应用凭证 -> 域名白名单 中的 Request 域名进行访问，在 _config.yaml 中的配置项中，必须在 serverURLs 为上述域名 xxxx.api.lncldglobal.com 才可以正常使用
# 本地预览正常但部署后 404
刚开始遇见这个问题是在实现分类图片时，图片就在 github 的仓库对应位置，但是加载页面时却 404，用英文搜了好久但其实没有搜到点上，这个问题的本质在于，默认 njk 模版在引用图片时使用的是绝对路径 /MISC/cover.jpg ，本地没有问题，但是部署到 github 后会出现无法访问的情况，此时将模版更改为 MISC/cover.jpg 即可，对我来说，问题的复杂在于，刚开始没有定位到问题，以为是 url 路径大小写的问题，所以就把 MISC 改为了 misc ，这有导致了新的问题，这个才是更值得记录。
由于 URL 路径对于大小写是敏感的，所以如果服务器路径为 http://xx.com/misc/cover.jpg ，那么此时，用 http://xx.com/MISC/cover.jpg 是访问不到的，所以我在更改大小写后，仍然有 404 的问题，且此时，我注意到在本地的 public 文件夹中， MISC 文件夹已经变为了 misc ，但 hexo d 后，github 仓库中仍然为 MISC ，原因在于 git 本身是对大小写不敏感的，即 MISC 和 misc 对于 git 来说是一样的，而 hexo 本身又是差量更新，所以大小写的变动并没有记录更新，仍然用之前的大写版本，该问题的解决方法如下：
- 修改
<root>/.deploy_git/.git/config文件，将gnorecase = true改为false(使得 git 对大小写敏感) - 删除
<root>/.deploy_git下的MISC文件夹 (该文件夹内才是真正的 git 仓库) hexo clean && hexo g && hexo d重新部署
# Jsdelivr 加速及刷新缓存
对于 github 项目来说，配置 Jsdelivr 加速极其简单，直接将资源的访问链接替换成 CDN 链接即可，CDN 链接为：
https://cdn.jsdelivr.net/gh/您的Github用户名/项目仓库名@版本/文件路径 |
例如，我自己改过的 MiniValine 的地址为：https://github.com/Gality369/MiniValine ，项目内的目录为 dist/MiniValine.min.js ，发布了一个 release 版本为 “v4.2.2-beta11”。
那么我只需将地址替换为：https://cdn.jsdelivr.net/gh/gality369/MiniValine@v4.2.2-beta11/dist/MiniValine.min.js 就可以让 jsdeliver 抓取我的 js 文件并通过 CDN 加速传给我。
注意，这其中涉及到缓存问题，例如当我改变了上述 js 文件后，由于 jsdelivr 会存一份缓存文件便于加速获取过程，所以当我请求时可能只能获取老版本的 js，我们可以通过将 cdn 换成 purge 的方式来告诉 jsdelivr 重新获取文件并刷新缓存，例如：
//刷新前 | |
https://cdn.jsdelivr.net/gh/gality369/MiniValine@v4.2.2-beta11/dist/MiniValine.min.js | |
//强制刷新，返回 status: finished 代表刷新成功 | |
https://purge.jsdelivr.net/gh/gality369/MiniValine@v4.2.2-beta11/dist/MiniValine.min.js | |
//重新访问即可 | |
https://cdn.jsdelivr.net/gh/gality369/MiniValine@v4.2.2-beta11/dist/MiniValine.min.js |
jsdelivr 大幅提升了网站的访问速度，最重要的是免费！！！
再次由衷感谢这样的项目🙏
# markdown-it-prism 多行注释染色修复
shoka 代码染色的逻辑在 node_modules/hexo-renderer-multi-markdown-it/lib/renderer/markdown-it-prism/index.js ，代码如下：
... | |
if (prismLang) { | |
code = Prism.highlight(unescapeSwigTag(text), prismLang, langToUse); | |
} else if(lang == 'raw') { | |
code = escapeHTML(pangu.spacing(unescapeSwigTag(text))); | |
langShow = null; | |
} | |
if(code) { | |
code = escapeSwigTag(code); | |
const lines = code.split('\n'); | |
let content = ''; | |
for (let i = 0, len = lines.length; i < len; i++) { | |
let line = lines[i]; | |
// console.log("==" + line + "=="); | |
let append = ''; | |
let lineno = Number(firstLine) + i | |
if (mark && mark.includes(lineno)) { | |
content += `<tr class="marked">`; | |
} else { | |
content += `<tr>`; | |
} | |
content += `<td data-num="${lineno}"></td>`; | |
if (command) { | |
content += `<td data-command="${command[lineno]||""}"></td>`; | |
} | |
content += `<td><pre>${line}</pre></td></tr>`; | |
} | |
let result = `<figure class="highlight${langToUse ? ` ${langToUse}` : ''}">`; | |
result += `<figcaption data-lang="${langShow ? langShow:''}">${caption}</figcaption>`; | |
result += `<table>${content}</table></figure>`; | |
return result; | |
} | |
... |
导致染色出问题的主要原因是再经过 Prism.highlight 处理后，会给整个注释块的首尾添加 <span class="token comment">...</span> ，而后续代码按行处理时则会将行切开，每行当读包裹在 <td><pre>...</pre></td> 中，导致只有第一行可以正确着色，剩下的行都会当成普通字符串处理，要修复这个问题也很简单，只需要在按行处理对注释块的每一行分别添加 <span class="token comment">...</span> 即可。
// 添加 span 的函数 | |
function splitMultilineCommentSpans(code) { | |
return code.replace( | |
/<span class="token comment">([\s\S]*?)<\/span>/g, | |
(match, content) => { | |
const lines = content.split('\n'); | |
return lines.map(line => `<span class="token comment">${line}</span>`).join('\n'); | |
} | |
); | |
} |
然后调用该函数
code = escapeSwigTag(code); | |
code = splitMultilineCommentSpans(code); // 调用添加 span 函数 | |
const lines = code.split('\n'); |
# 修复 args.name 默认渲染为超链接
不太清楚是什么原因导致的，直接暴力修改代码了：
// node_modules/hexo/lib/hexo/post.js | |
data.content = cacheObj.restoreCodeBlocks(content); | |
+ // fix args.name hyper-link bug | |
+ data.content = data.content.replace(/<a href="http:\/\/args\.name">args\.name<\/a>/g, 'args.name'); | |
// Run "after_post_render" filters | |
return ctx.execFilter('after_post_render', data, { context: ctx }); |
# Hello World
仔细算算搭建个人博客已经有过大概 7、8 次了，每次总是因为各种各样的原因，最终都荒废了，记录的笔记，分享的技术也都遗失了，确实也有点遗憾。
本来计划等开学之后再重新搭博客来记录 & 激励自己，但是在认真看了 Sakura 师傅的博客之后，大受震撼，几经思索之后，不禁问自己为什么要等到 10 几天后呢？为什么不能现在开始呢？于是，说做便做，今天便将诸多坑都踩了踩，产出了新博客的第一篇文章。
博客将具体怎么发展，写那些内容，暂时还没有想好，但是一定会置顶一篇自己的每日进展作为激励，希望可以一直坚持下去，每天更新。
末了，写一句激励自己的话吧！
printf("泰山之管穿石，单极之绠断干。水非石之钻，索非木之锯，渐靡使之然也"); |
