hexo-next博客建站经验（适用于next 8.17.0）

本博客只提供部分建站的小经验（以前建的博客，Next后面更新之后部分功能出了点问题，所以写个记录贴o(╥﹏╥)o）

Next更新之后，以前的.swig文件都变.njk了，而且有很多CSS文件拆分或者修改了。如果看以前的旧经验贴，.swig文件就是现在的.njk文件

Hexo-next官方帮助文档如下：

Hexo-next官方帮助文档

1.修改主题

1.1 修改图标

把图标放进hexo/themes/主题/source/img/里，图标可以到专门的网站下载（这里推荐：iconfont）

图标有三个大小的png，分别为16x16, 32x32, 原图大小，还有一个svg格式。

在/themes/主题/_config.yml中修改成自己的图标

favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/favicon.png
  safari_pinned_tab: /images/favicon.svg
  #android_manifest: /manifest.json

参考链接：

1. hexo更改网站图标

1.2 修改主题/链接/文本颜色

打开文件：\themes\next\source\css\_variables\base.styl

修改Color system中的颜色

链接请检索：link

按钮请检索：btn

2.侧边栏美化

2.1 自定义侧边栏用户社交链接小图标

1.在iconfont下载图标的svg格式，以 Bilibili 为例，将 SVG 文件放置在你自己博客文件夹下的 /source/images/bilibili.svg 中（不是next文件夹）。

2.自定义图标格式：在你自己博客文件夹中，在\source\ _data路径下新建styles.styl文件。 如果没有_data文件夹自行创建。在styles文件中添加如下样式：

/* sidebar social icon */
.fa-bilibili {
  background-image: url('/images/bilibili.svg');
  background-size: 1em 1em;
  opacity: 0.55;
  background-position: 0.05rem 0.2rem;
  background-repeat: no-repeat;
  height: 1rem;
  width: 1rem; 
  border-radius: 0rem;
  /*鼠标停留在图标上时，图标呈现发光效果*/
  &:hover {
      opacity: 1;
    }
}

3.进入next主题下的config配置文件，找到custom file paths，取消对styles的注释

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl

4.找到social link对小图标进行修改

 social:
   Lofter: 填自己的链接 || fab fa-lofter
   Bilibili: 填自己的链接 || fab fa-bilibili
   E-Mail: mail to:填自己的邮箱 || fa fa-envelope

参考链接：

1. hexo next 解决自定义侧边栏用户社交链接小图标 custom sidebar social icon

2. Hexo + NexT 通过自定义样式添加 Bilibili 图标

2.2 浏览文本显示进度

打开 themes/next/_config.yml ,搜索关键字 scrollpercent ,把 false 改为true

   # Scroll percent label in b2t button
   scrollpercent: true

然后打开themes/next/_config.yml ,搜索关键字b2t ,把false 改为true，在top按钮上加上进度显示。

如果想让top按钮显示在底部，把b2t属性设置为false即

  # Back to top in sidebar
   b2t: true

参考链接：

1. hexo博客-next主题美化、配置

3.评论

3.1 valine

基于valine的评论框不显示，控制台报错显示valine.main.js:12错误

valine更新后参量改变，比如说以前的参量名language现在改lang了，appid现在改appId了（注意大小写！），还有一些参量现在作废了。详情参见valine官方文档，在_config.yml文件下修改参量名称后问题解决。

评论需要魔法（泪目）不辛苦，命苦

3.2 waline

依然需要魔法，申请免费域名中

EU免费域名申请：EU.org: free domain names since 1996

参考文档：

1. Waline官方文档

2. 使用Hexo+NexT8+Waline搭建评论系统

3. 创建属于你自己的org永久域名

4. 使用自定义域名激活Vercel部署的Waline服务

5. 免费域名注册，轻松拥有您的eu.org域名！！！

 我的博客展示：兀孀的个人博客