建站过程中遇到的一些问题的总结

创建 更新 分类 本文字数： 7.9k 阅读时长约 ≈ 7 分

用的next8

0.远古时期的忘掉了……

0.1.这个是next的网址QAQ: https://theme-next.js.org/

0.2.悲伤的故事：Markdown语法在HTML区块标签中将不会被进行处理。例如，无法在HTML区块内使用Markdown形式的*强调*。

使用了自己的域名，更新后页面找不到github pages。

hexo d后仓库被强行覆盖，原先的CNAME就没有了。 在source文件夹里加一个CNAME再更新就好了。 CNAME里填写自己的域名名字。

使用next主题，出现% extends '_layout.swig' %等等

hexo在5.后删除了swig，需要自己手动安装

1
npm i hexo-renderer-swig

想要播放歌曲。

参考了很多不同站点的做法，其实大同小异。 最后发现还是去官网最快。 但是没能将云音乐红心歌单加进来还是不太开心，metingjs没解析出来。 aplayer：https://aplayer.js.org/#/zh-Hans/?id=%E5%85%A5%E9%97%A8 MetingJS：https://github.com/metowolf/MetingJS 首先根据APlayer教程安装：

1
npm install aplayer --save

然后到主题配置文件_config.yml改custom_file_path: 将head和sidebar加上（也就是去掉前边的#） 同时分别到hexo下source/_data里新建这两个njk文件

siderbar.njk里的内容直接参考MeetingJS主页的教程就好了

1
2
3
4
5
6
7
8
9
10
11
<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="playlist"
	id="3744805">
</meting-js>

BUT， jsdelivr不好用了，可以改成（具体见这里：jsdelivr不稳定，替代品，pjax那里同理，自己改一下吧： 

1
2
3
4
5
6
7
8
9
10
11
<!-- require APlayer -->
<link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://gcore.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://gcore.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js
	server="netease"
	type="playlist"
	id="3744805">
</meting-js>

meting-js里的参数除了这三个还有APlayer里的，反正具体看官网吧，我这里没必要多复制了。 上述是加云音乐的，还有藤子，酷狗，虾米，百度的可以改。

具体来说就是APlayer负责播放器的部分，MetingJS负责解析各大网站id。 但是autoplay真的能autoplay吗。→发现是浏览器限制了，唔，也好吧

最后在head.njk里写上

1
2
<!--pjax：防止跳转页面音乐暂停-->
<script src="https://cdn.jsdelivr.net/npm/pjax@0.2.8/pjax.js"></script>

可以跨页面放歌。 接着到主题配置文件_config.yml里把pjax改为true就好了。

添加sitemap，网站地图

安装搜索引擎插件：

1
2
npm install hexo-generator-sitemap --save 
npm install hexo-generator-baidu-sitemap --save

在站点配置文件中把url改为自己的域名

hexo cl -g后public会生成sitemap和baidusitemap两个xml文件

分别到谷歌、bing站点地图输入 域名/sitemap.xml

百度是专用的 域名/baidusitemap.xml

百度还可以手动提交：

安装插件：

1
npm install hexo-baidu-url-submit --save

在站点配置文件添加：

1
2
3
4
5
baidu_url_submit:
  count: 3 ## 提交最新的链接数量
  host: 域名
  token: 在百度站长平台看
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里

到普通收录_加快网站内容抓取，快速提交数据工具_站长工具_网站支持_百度搜索资源平台 (baidu.com)看自己的host和token

在站点配置文件更改deploy：

1
2
3
4
5
deploy:
      - type: git
        repo: git@github.com:zcxake/zcxake.github.io.git
        branch: master
      - type: baidu_url_submitter

注意repo和branch的缩进

这样以后hexo d的时候就自动提交url到百度了。 更新：但是后来发现这个baidu_url_submit可能会导致一些问题，hexo s后出现warning，虽然对提交后的成品网页没影响，但是无法预览也很麻烦，所以把nodejs退到了12……

希望某些文件夹不渲染

到站点配置文件检索skip，在skip_render后加上想不被渲染的，可使用glob表达式来匹配路径

如我这里的是：

1
2
3
4
5
6
7
8
9
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: "_ing/**"

表示source/_ing/里的所有东西都不会被渲染

next主题偶尔打开会变成空白（2022.5.20）next 8

先甩上参考： 感谢分享 用同样的思路发现我也是这个原因，因为不太懂所以还是上next theme官网vendors下瞅了一下，直接复制翻译一下好了，反正我是看这个搞定的。

plugins: jsdelivr is used to set how to load the third-party plugins, e.g. anime.js. Third-party plugins are loaded from jsDelivr CDN by default.

And we also provide other optional CDNs, including the famous UNPKG and CDNJS. These CDN providers are chosen to deliver our third-party plugins because they are fast and reliable. Set plugins to unpkg or cdnjs to load them from different CDN provider.

Particularly, if you are a Chinese blogger or most of your visits come from China, please note that the CDNJS is blocked in some parts of China, don't use it as your CDN provider.

If your would like to load all third-party plugins from your site, please set plugins to local and install the @next-theme/plugins package: https://github.com/next-theme/plugins

plugins: 默认设置是jsdelivr，用来设置加载第三方插件（如anime.js）。
但我们也留了其他选项，比如著名的unpkg和cdnjs，选择这几个因为他们可靠且迅速，设置一个你想用的吧。
但是，如果您老在中国或者你访问者大多数在中国的话，注意cdnjs在中国部分地区禁了，谨慎选用。
虽然官网这么写了，但是实测是jsdelivr不稳定，另外两个可用，反正这种瞬息万变的东西自己看情况吧
但你要是想从自己网站加载第三方插件的话，把plugins项设置local然后安装@next-theme/plugins package: https://github.com/next-theme/plugins

Custom CDN URLs Sometimes you may need to use CDNs other than jsdelivr, unpkg or cdnjs. For example, users can get faster loading speed in certain areas using the mirror site of jsDelivr.

To enable custom CDN URL, you need to set internal: custom and / or plugins: custom in the vendors section, and then specify a CDN URL with the custom_cdn_url option.

Remember to use the HTTPS protocol of CDN links when you enable HTTPS on your site.

自定义CDN链接
有时候，或许上边三个满足不了你，比如在某些特定的地方用JSDelivr的镜像站会快一些。
这时候你需要将internal和/或plugins设为custom，具体看你情况，然后填上底下的custom_cdn_url。
如果你的网站开启了HTTPS协议注意也要用CDN链接的HTTPS协议。

我目前是先改成unpkg了，如果之后还是经常空白就换成镜像站，还是不行的话就本地吧。

添加对公式的支持

再更新：

katex别的都挺好，能自动换行，能复制，可是在复杂一点的html语言里就会无法解析，懒得折腾跟着next官网又换成了mathjax，然后手动换行了。

看了mathjax官网，确实v3还不支持自动换行，摊手，就先这样吧。

但确实katex更好看……

更新： 看都推荐用mathjax，但用了之后长公式不能换行，换成katex感觉这个更好，还可以选中。 主题config.yml中math下开启katex， 然后前边差不多，先卸载原先的 

1
npm uninstall hexo-math --save
再安装 
1
npm i @upupming/hexo-renderer-markdown-it-plus --save
目前katex是0.15.6了，已经很好用了。 下面是过去mathjax的，上面的如果好用就不用看了。

mathjax： 完全参考了这一篇文章 完全可行，但以防万一给自己备一份吧：

1.在hexo目录下使用下面的命令查看你是否已经安装了hexo-math插件 

1
npm list hexo-math
empty就是没有，出现版本号就是装了 卸载之： 
1
npm uninstall hexo-math --save
2.安装hexo-filter-mathjax： 
1
npm install hexo-filter-mathjax --save
检查是否安装成功： 
1
npm list hexo-filter-mathjax
显示了hexo-filter-mathjax版本号则说明安装成功。 安装成功后，进行一些全局配置，打开hexo目录下的_config.yml文件，在最后面添加如下的代码： 
1
2
3
4
5
6
7
mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter
3.hexo-math默认的公式渲染器是hexo-renderer-marked，它和markdown的语法有冲突，我们将其卸载，查看是否安装了hexo-renderer-marked公式渲染器： 
1
npm list hexo-renderer-marked
如果安装了将其卸载： 
1
npm uninstall hexo-renderer-marked  --save
然后安装一个新的公式渲染器，叫做hexo-renderer-kramed，它对hexo-renderer-marked进行了改进，在hexo目录下输入下面的命令安装： 
1
npm install hexo-renderer-kramed --save
检查hexo-renderer-kramed是否安装成功： 
1
npm list hexo-renderer-kramed
4.打开打开hexo主目录下的这个文件：_modules.js，然后修改下面的规则（大家最好不要删除原代码，只是将其注释掉）： 
1
2
3
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
//修改为：
escape: /^\\([`*\[\]()#$+\-.!_>])/,
1
2
3
//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
//修改为
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
保存并退出。 5.最后，打开next主题目录下的_config.yml，开启对mathjax的支持，设置为true。 6.行间输入是\[公式内容\]，行内公示是$公式内容$ 7.某篇文章不想渲染公式就在md文件开头加上： 
1
mathjax: false
### 谷歌字体访问不稳定 各种不稳定的问题嗯…… 感谢https://u.sb/css-cdn/ 。 next默认的是https://fonts.googleapis.com ，然后目前有个镜像可以用，在host改成自定义的：https://fonts.loli.net

这里要多提一嘴镜像站了，避免以后又有啥不能使的可以替换： CDNJS：原本的：cdnjs.cloudflare.com，可用替换：cdnjs.loli.net unpkg可作为jsdelivr的替换用

jsdelivr不稳定，替代品

替换法 cdn.jsdelivr.net选一个改： 

1
2
3
fastly.jsdelivr.net
gcore.jsdelivr.net
testingcf.jsdelivr.net

其他CDN站 https://cdn.bytedance.com/ 字节跳动 https://www.staticfile.org/ 七牛云 https://cdnjs.com/ https://unpkg.com/

替换背景

到next主题打开styles，在source _data.styl后加上： 

1
2
3
4
5
6
body {
    background-image: url(); 
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
背景图地址可以是链接或者路径，比如我放在.jpg，那就是/images/bk.jpg 和background相关的几个属性：https://www.w3school.com.cn/cssref/pr_background.asp 自己看着设置。 然后在后边再加上透明度设置： 
1
2
3
4
5
6
7
8
9
10
11
12
// 菜单栏
.header-inner {
    opacity: 0.75;
}
// 侧边框
.sidebar{
    opacity: 0.75;
}
// 文章
.post-block{
  opacity: 0.8;
}
值看着办吧。 我这个为了显出后边的canvas-nest，这个动态网调深了和背景重合，调浅了和文字白底重合，所以调成了以前不怎么喜欢的暗黑模式QAQ

框框圆角

到next主题打开variables，source _data.styl中添加 

1
2
$border-radius-inner     = 30px 30px 30px 30px;
$border-radius           = 30px;

添加鼠特效小爆炸

参考了https://www.smoe.top/2020/12/27/Hexo-click/ 但是版本不同，所以我稍微改了一下。 js找个source文件夹放，然后直接在_data.njk里加上想要的那个效果就好了，改一下相应路径，我也是放的，所以就抄原博文的了 

1
2
3
4
<!--点击爆炸-->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script async src="/js/cursor/explosion.min.js"></script>
然后我稍微改了下颜色，饱和度调低了点