打扫博客

2022年08月28日

约2.7k字预计需要10分钟

打扫博客

打扫久未使用的房间非常累,整理久未使用的博客也一样

因为要把自己写的机器人的文档放上来,而且之前博客有一些东西/功能我想加,所以就决定重新打理打理这个博客
说着简单,其实打理了一整天,真的要命

1.万事开头难

说是万事开头难,其实后面也没有简单多少,主要是我的技术栈不在nodejs这类似的语言上面,所以真的有点要命

npm包处理

我刚建立这个博客的时候,用的这个主题还没有本地搜索的功能,当时就想着用各种方法来弄搜索功能,然而我当时对js啥的一窍不通 ~~(现在也一样)~~ ,所以就把搜索功能给搞残废了,到最后连修都修不回去,就直接放弃了

来打理的时候第一时间就想到这个,然后看到作者还在维护(作者人间之鉴),而且加了搜索和其他许多功能,一下子开心的不得了,以为之后会轻松许多 ~~(然而等待我的其实是地狱)~~ ,便开始按照文档安装:

npm i hexo-theme-nexmoe@3.2.13

安装完之后打开配置文件(_config.nexmoe.yml)一看,新特性呢?飞了?我直接whats up

于是我开始尝试包括但不限于以下方式,都没成功:

删掉主题重装
通过msi更新了nodejs
卸载重装了nodejs
~~重启电脑~~
…

就这样纠缠了接近两个小时,问题仍然没有解决,但浏览器标签页已经开了接近30页 ~~(内存:你清高)~~
我删掉了主题,删掉了同学的标签页,终于!~~(李纪哲&同学:你有事?)~~
在必应和谷歌之间反复横跳有了结果
这篇文章教会了我怎么升级,分析之后我才明白我之前是多么傻

npm包在某一区域内是根据package.json这个文件来安装本区域包的
意思就是我之前对这这个npm包管理器虚空打靶
npm一滴血没掉,我:好厚的血

我通过下面的指令成功更新了主题,顺便连hexo也一起更新了

npm install -g npm-check-updates
ncu // 查看可更新包
ncu -u // 更新package.json
npm install // 升级到最新版本

上面的指令是ncu这个插件自动检测package.json这个文件里的包信息,并查找更新,然后更改这个文件,最后重新安装一遍就好了

不过主题的最新版本是4.0.0,配置文件的内容有许多不同,不过我通过修改package.json里的版本信息,重新安装就安装到了目标版本

2.我超!二次元

我超!二次元!怎么会有人为了二次元捣鼓半天代码啊,妈妈让我不要跟傻卵二次元玩,啊,原来我就是啊,那没事了

其实是为了添加看板娘插件而一波三折,又研究挺久,还被迫捡回了一点~~我快忘光光了只学了一点点的~~js/html

live2d看板娘插件

在我原来的博客中,里面有我插入的live2d看板娘插件,不过由于上一节的一些操作 ~~(删掉主题重装的逆天操作)~~ ,这些插件已经不复存在,需要重新配置
然后我先上GitHub ~~(全球最大同性交友网站)~~ 搜了一下,最先看到的相关的插件是hexo的hexo-helper-live2d
然后就按照文档开始造
然后一个hexo g一个hexo s就开始部署,在本地就部署好了
打开一看,生效是生效了,但这样还不够!~~(渊薮_Crowd:你有事吗?)~~
功能确实太严重了,换模型,换衣,拍照等等功能都缺失了,真的就看板娘了,而且配置文件还不生效,无奈之下只能寻找其它办法

又在GitHub找了半天,中间还去必应找了几下,回到了起点
文档的底下写了相关项目live2d-widget.js,点进去存档了,不过有另一个链接
指向了现在仍在维护的live2d-widget(作者人间之鉴)

但是问题又随之而来,怎么添加
文档说的很简单:

将这一行代码加入 <head> 或 <body>,即可展现出效果:
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>

对js/html一窍不通的我:?
然后就开始搜索是什么意思,一开始还不太敢改,也不知道改哪里,怕跟上次一样改坏了
我披星戴月,我奋不顾身,终于!(你这荔枝太假了)
在node_modules文件夹中的文件夹海中找到了主题的文件夹,并且通过对比hexo生成的页面的html源码找到了主题的生成模板,依靠那渣都不剩的js/html知识成功添加了看板娘,并且功能齐全
~~嘿嘿,看板娘,小小的,香香的~~

修改后的代码如下:

<head>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
    <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    ...
</head>

看板娘可爱捏

3.代码高亮,没有你我怎么活啊

如果有人能用Windows自带的记事本写下几百行代码,那我可能会叫他爹
黑底白字对于写代码来说有点难受,但对于看代码来说,也一样难受

代码高亮

处理完上面的事情之后,我发现了一个严重的问题
代码高亮没了,不仅没了,因为字体颜色和背景一样,就跟黑幕一样

继续翻文档,在常见问题里发现了这一条:

代码高亮
自2.9.0版本后,需要在 _config.yml 文件中进行如下配置使用高亮
highlight:
 enable: true
 hljs: true
 auto_detect: true
更多内容:代码高亮 | Hexo

修改了配置文件,然而并没有什么卵用,只是变成了黑底白字,而且能看得更清楚了
多了一些没对齐的行号

地狱又来了,为了解决搜了各种办法,什么装第三方插件啦,换另一个官方支持的代码高亮啦
都没用

写入绝望中看到了希望,这篇文章的作者对于官方的highlight.js使用很失望,所以决定自己嵌入使用这个js脚本~~(我:作者你一定要幸福啊)~~
~~搜索n小时,highlight.js治好了我的精神内耗~~
不过由于与上一节一样的原因,并且加上搜索了半天脑子已经有点不清醒了,我还是找了十几分钟在哪修改
~~?怎么跟看板娘的地方一样啊~~

修改后的代码如下:

<head>
    <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css">
    <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/styles/vs2015.min.css">
    <script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
    <script src="https://unpkg.com/@highlightjs/cdn-assets@11.6.0/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js"></script>
    <script>
        hljs.initHighlightingOnLoad();
        hljs.initLineNumbersOnLoad();
    </script>
     ...
 </head>

顺便加了行号显示(参考博客),这个问题也是我后面才发现的,跟高亮一样的路线,不过搜索没花那么长时间就是了 ~~(主要是我懒得再写一遍了)~~
行号显示也有问题,有一些代码快和行号黏在一起了 ~~(贴贴好耶)~~ 不过我在修改article.styl之后就好多了:

/* for block of numbers */
.hljs-ln-numbers {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: center;
    color: #ccc;
    border-right: 10px solid #8000000F;
    vertical-align: top;
    padding-right: 20px;

    /* your custom style here */
}

/* for block of code */
.hljs-ln-code {
    padding-left: 20px;
}

上面的代码是通过在代码和行号之间加了一条10px的透明线来实现分离的 ~~(竟然拆散他们,24k你坏事做尽😡)~~

下面是效果图,感觉非常滴不戳:
代码效果图

还有一些小插曲,但是我懒得写了,简单描述下吧:
使用完代码高亮后似乎和后面的背景颜色不同,然后通过修改styl文件解决了

4.can can need

我的图片很大,你要忍一下↗~~

图片大小

在编写帮助文档的时候,发现一个问题
图片太大在网站中似乎并不美观,于是我先用网上搜的办法尝试 ~~(没错又是搜索地狱)~~
先是这篇知乎回答,在markdown代码块后面追加css代码
我的编辑器是显示有更改了,但生成代码后令人眼前一黑
页面竟然把css源码原封不动的显示了出来

于是我开始寻求另一种解决方式,找到了一个脚本
按照里面的方式部署完代码如下:

<body>
	...
   <script src="https://gcore.jsdelivr.net/gh/bobcn/hexo_resize_image.js@latest/hexo_resize_image.js"></script>
</body>

然后再按照他的写法,引用图片这样引用:图片链接?缩放百分比
生成!
终于成功了,脚本作者,你做得好,你做的好啊

5.世界很大,我想要看看

由于一些众所周知的原因,一些网站无法访问,或者访问困难
而去年年底jsdelivr的备案被注销后,jsdelivr的资源获取便成了困难,他的链接也被DNS污染了
而我写的文档面向的受众有很多都是没有科学上网知识的同学,所以打破这道阻碍也是很重要的事

更换CDN

这件事情很简单,换CDN嘛
不过GitHub库的CDN还真没几个,无奈之下,试了下fastly.jsdelivr.net
不太行,随后又试了几个二级域名,最后发现gcore.jsdelivr.net可以使用,vscode全局替换就ok了

尾声

这篇文章写了两天,在写这篇文章的时候还遇到了一些小瑕疵,左下的版权信息不是在指定位置换行,看的很难受,不过在经历历练之后,好好的修改了主题文件,就好了
这篇文章也算是我重拾这个博客之后第一篇正经文章,要开学了,不知道这篇博客还有没有机会更新
不过题材还是有的,是两个审核的故事,如果我有时间的话可能会继续写
两个审核:工信部和腾讯机器人运营部

~~另:石蒜好看,千1是神~~