制作博客的过程中遇到的一部分问题及其解决办法

#启动本地服务器，用于预览主题。Hexo 会监视文件变动并自动更新，除修改站点配置文件外,无须重启服务器,直接刷新网页即可生效。

#以静态模式启动

#更改访问端口 (默认端口为4000，'ctrl + c’关闭server)

#自定义 IP

#清除缓存 ,网页正常情况下可以忽略此条命令,执行该指令后,会删掉站点根目录下的public文件夹

#生成静态网页 (执行 $ 后会在站点根目录下生成public文件夹, hexo会将"/blog/source/" 下面的.md后缀的文件编译为.html后缀的文件,存放在"/blog/public/ " 路径下)

#自动生成网站静态文件，并将本地数据部署到设定的仓库(如github)

文件夹名称 #初始化XX文件夹名称

#升级

#安装

#查看node.js版本号

#查看npm版本号

#查看git版本号

#查看hexo版本号

hexo n "我的第一篇文章"hexo new "我的第一篇文章"hexo new post “我的第一篇文章” hexo phexo publish hexo ghexo generate hexo shexo server hexo dhexo deploy hexo g -dhexo generate --deploy 注: 没有 简写, 没有简写

找到添加如下代码：

然后部署上传即可！

在目录下新建文件，将内容复制粘贴到sakura.js即可：

然后再文件内添加下面的内容：

在目录下新建文件，将内容复制粘贴到cursor.js即可：

然后再文件内添加下面的内容：

首先在里面建一个叫fireworks.js的文件，代码如下：

打开,在上面写下如下代码：

打开主题配置文件，最后填上：

、在目录下新建文件，将内容复制粘贴到即可：

然后再文件内添加下面的内容：

打开文件，将下面的代码复制到文件最后：

在中输入以下代码

然后在 NexT 的配置文件 中取消 的注释：

将 back-to-top 按钮添加图片背景，并添加 CSS3 动效即可。

首先，找到自己喜欢的图片素材放到 sourceimages 目录下。

下载图片

然后在自定义样式文件中添加如下代码：

点击下方按钮下载相应的脚本，并置于 themes extsourcejs 目录下：

在主题自定义布局文件中添加以下代码：

如果 custom.swig 文件不存在，需要手动新建并在布局页面中 body 末尾引入：

在主题配置文件中添加以下代码：

安装插件

给需要置顶的文章加top参数！

添加置顶标志

打开：/bolg/themes/next/layout/_macro/post.swig 文件 在 标签下，插入以下代码：

再使用 在本地预览加密的文章.

title: VNCTF2022—WP date: 2022-02-12 13:27:31 tags: - wp - CTF categories: CTF-wp password: 1111111111111111 wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试. abstract: 有东西被加密了, 请输入密码查看.

加密主题

~~

对于next主题的fancybox插件我找了很多资料发现都不能正常安装插件，总是显示克隆的错误的字典，想必应该是fancybox插件的地址换了吧，然后我就找到了fancybox的GitHub地址，直接用这个地址下载，顺利成功使用fancybox插件！

当然也可能会失效，我把官网放出来

fancybox官网：

~~

上面这个方法退休了，国内访问如果用上面这个方法会影响站点加载速度，有更好的方法麻烦评论区告诉我，谢谢哦

这点需要注意，输入这个指令后会在根目录/source下生成一个links文件夹，打开其中的index.md文件，注意一定要在头部写上如下，尤其注意type！

如果不想让这个页面有评论，就再加一个comment。

主题配置文件下在下添加

在 文件中 下增加中文描述

在 新建 links.swig，内容如下：

修改 文件，在开头附近添加如下代码：

大概位置如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fNBLrXPG-1648815291377)(博客制作遇到的问题/image-20220118100857169.png)]

接着在 中 内部，引入刚才新建的 :

添加位置不唯一，我添加的是这：

到这里关于友链的配置就完成了，接下来，在 文件中配置友链，末尾处新增 ，如下

在主题文件夹找到文件 , 然后添加如下代码：

博文置在next主题根目录，找到 配置文件然后在最后添加如下的配置项，可以自定义标签云的字体和颜色，还有突出高亮:

安装插件

在根目录Blog打开Git Bash，执行下面的命令：

设置置顶标志

打开blog/themes/next/layout/_macro目录下的post.swig文件，定位到

标签下，插入如下代码：

在文章中添加top

然后在需要置顶的文章的Front-matter中加上top: true即可，如下：

在写博客的过程中难免需要插图，而有时候在插图时在博客中无法正常显示图片，这个时候就需要以下几个步骤：

post_asset_folder: true

完成此设置后，当你通过新建博客后，会产生一个和文件同名的文件夹。

（回到博客根目录下在空白部分点右键，进入）

完成以上步骤后就可以正常插图了！在这里再强调一下插图的语法是

然后选择对路径之后就会正常显示图片！

安装插件，在博客根目录执行命令

修改根目录下的

修改主题配置文件https://cloud.tencent.com/developer/article/themes/next下的文件

hexo搭建博客，发现文章目录点击无反应，f12看一下会发现toc-link后面没有href属性

点击测试出现报错

进入根目录的 中，把 28 行～31 行修改为：

然后部署一下就可以了

有的人可能没有hexo-toc，就像我，这个时候下载一下就可以了 npm install hexo-toc --save

首先用命令测试是否连接，如果不能连接的话，在存放key的目录下新建config文件

填入以下内容

如果可以正常连接的话，回到博客的根目录，打开_config.yml配置文件

修改以下内容

其中的repo修改为

博客上线后，需要关注页面的加载速度。 可用于帮助分析网页加载速度瓶颈，该网站将会针对指定域名进行在线测试，并提供一份详细的页面加载分析报告，报告中还会根据页面资源加载情况给出合理的优化建议及预期优化效果，因此用户可以有的放矢的进行性能优化专项整改。

虽然可以从报告中了解到站点的加载性能瓶颈，但是，报告中仅是提供优化建议，具体的落实还须自己实施。本章节主要介绍 CDN 加速和代码合并压缩两种比较常见的优化方案。

在控制台的 Network Tab 页中可以查看到页面加载瀑布流。在此需要勾选 Disable cache 以避免缓存干扰分析。另外，在所有静态资源中，对加载速度影响较大且存在大幅优化空间的主要还是 JS 脚本，所以我们先拿它开刀。

首先理解一下底部信息栏中的这行文字：

21 / 50 requests | 518 KB / 818KB transferred | Finish: 8.44 s | DOMContentLoaded: 4.36 s | Load: 6.80 s

主要包括以下几条信息：

关于 Finish / DOMContentLoaded / Load 的讨论请参见 和 ，两者说法不一致，我倾向于认同后者的观点。

分析以上页面加载瀑布流可知，DOM 树的解析渲染主要是被从 VPS 本地下载 jquery、velocity、fancybox 等脚本所滞后，所以对症下药，我们可以改为从开源公共 CDN 加载脚本。

对于在站点中用到的三方插件，在主题配置文件中为其添加 CDN 加载源：

如果开启了 Live2D 看板娘，一样可以通过将脚本来源改为 CDN 来完成性能优化：[](// 修改选中字符的颜色 ::-moz-selection { background: #06d633; color: #f7f7f7; }

// 代码块选中颜色 .highlight *::selection { background: #06d633; })

这样可以加快进入博客的速度！

接入这个玩意的时候有个大坑，网上也有其他网友反应这个问题，但是直接搜这个问题网上目前是没有任何解决方法的，我在这里记录一下吧

刚开始就是注册个号

注册之后找到这里，安装到网站，找到app_id的值，后面会用到

在这个路径之下的这个文件里加入如下代码 hemes extlayout_partialsheadhead.swig

然后进入到主题配置文件，最后加上

最重要的坑来了，这个时候如果直接部署上去就会发现虽然这个功能出来了但是博客白页了，不显示文章了，原因其实是velocity这个next插件与这个在线聊天功能不兼容

在主题配置文件中找到之后关上再部署上去就可以了，而且也不会有啥影响，这个插件就是动画效果，其实开着也是摆设，基本用不上

这个时候再部署上去就没问题了

推荐：

[hexo 主题 next7.8 版本配置美化]()