Hexo Next 配置

发表于 2019-11-06 更新于 2022-05-05 分类于 Web 知识点，博客 Waline：阅读次数：本文字数： 3.1k 阅读时长 ≈ 3 分钟

Hexo Next 8+ 版本

评论系统由 valine 更改为 waline：Waline

Hexo Next 7+ 版本

hexo 升级

1、npm-check 检查更新

1 2	npm install -g npm-check npm-check

2、npm-upgrade 更新

1 2	npm install -g npm-upgrade npm-upgrade

3、更新全局包

1	npm update -g

4、更新生产环境依赖包

1	npm update --save

5、再次hexo version查看版本，发现已经更新为4.2.2了。

查看插件列表

npm list

卸载hexo插件（已安装的插件可在博客项目根目下的 package.json 中查看）

1	npm uninstall <你的插件名>

添加备案号

打开主题目录下\layout\_partials\footer.swig文件

修复 livd2d 看板娘与不蒜子统计的冲突

关闭原生不蒜子，在 layout/_partials/文件夹中修改 footer.swig，在最后一行前加入代码。

修复文章统计

可以通过开启 主题配置文件 - valine 评论中的 visitor 开关来替代不蒜子的统计功能。

添加文章的换肤按钮

在主题目录下的 _layout.swig 中添加代码。

<div class="skin_peeler" id="skin_peeler"></div>
<script>
  var sty = "rgb(199,237,204)";
  document.getElementById('skin_peeler').addEventListener('click',function(){
     var postBlock=document.getElementsByClassName("post-block");
     for (var i = 0;i<postBlock.length;i++) {
        postBlock[i].style.backgroundColor = sty;
     };
     if(sty == "rgba(255, 255, 255, 0.8)"){
        sty = "rgb(199,237,204)";
     }else {
        sty = "rgba(255, 255, 255, 0.8)";
     }
  })
</script>

note 共有 8 种 class 选择：

(省略不写) 无定义样式：白色，无图标
default 样式：灰色，➡
primary 样式：紫色，+
info 样式：蓝色，i
success 样式：绿色，√
warning 样式：橘色，！
danger 样式：红色，—
no-icon 样式：蓝色，无

在标签中加入 Font Awesome 图标

<div class="note info"> 
    在note标签中加入
    <a href="https://fontawesome.dashgame.com/">
        <i style="color:blue;">
            Font Awesome
        </i> 
    </a>
    <i>图标</i>
    <i class="fa fa-heart" style="color:red;"></i>
    <i>心</i>
</div>

hexo next 5.+ 版本

主要记录配置了哪些，以防后续修改找不到：

文章内链接文本样式：
Blog\blog\themes\next\source\css_common\components\post\post.styl

文章背景，阴影等效果：
Blog\blog\themes\next\source\css_custom\custom.styl

更改进度加载条样式：
Blog\blog\themes\next\source\lib\pace

更改主页背景颜色：
Blog\blog\themes\next\source\css_schemes\Mist\index.styl

更改主页动态粒子背景：
Blog\blog\themes\next\source\lib\canvas-nest

折叠块：
添加代码：themes/next/source/js/src/post-details.js
添加 js 文件：themes/next/scripts/tags.js
添加 js 文件：themes/next/scripts/fold.js
添加代码：themes/next/source/css/_custom/custom.styl
用法：

{% fold 点击显/隐内容 %}

// 内容

{% endfold %}

文章隐藏显示在首页：
修改next主题文件夹下的layout中的index.swig文件

// 添加了一个判断
{% if post.visible !== 'hide' %}
      {{ post_template.render(post, true) }}
    {% endif %}

图片存放在：
blog -> static-> images 中

上传七牛图床图片：hexo qiniu s

文章的个人 CSS 全局配置文件：

主题下的 next/source/css/_schemes/Mist/m_global_conf.styl

<p class="m_more_title_style">标题</p>

其它

1、解决端口被占用的问题：Port 4000 has been used. Try other port instead.

方法一：hexo s -p 5000

2、查询 SSH 的连接状态：ssh -T git@github.com

3、Github 只支持公开仓库用来做静态博客，私有仓库不可以（开会员好像可以）。

将 Github 的公开仓库切换为私有仓库后，页面无法打开，再切回公开的也不行，可能是需要重新配置下 SSH。

4、关于证书，当解析地址和提供的证书不一致时，会出问题。（比如博客是双地部署，国内优先使用 Coding，证书也应该是 Coding 提供的，如果证书是 GitHub 的，就会出问题。）。有时网站打不开，发现证书有问题时，很可能是 Coding 的证书没有续签成功，到域名解析里，先把 Github 的解析暂停，然后重新申请 Coding 的证书，当成功后再开启 GitHub 的解析。

5、因为 Coding 改版，目前博客部署在GitHub。对于 Gitee，普通版的需要手动更新。

备注

参考资料：

一些好看的博客：

Fluid