hexo-next博客建站经验

发表于 更新于 分类于 Waline： 本文字数： 3k 阅读时长 ≈ 6 分钟

随便堆堆建站技巧（适用于next 8.17.0）

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

Hexo-next官方帮助文档

1.修改主题

1.1 修改图标

把图标放进hexo/themes/主题/source/img/里

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

1
2
3
4
5
6
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文件中添加如下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 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的注释

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 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对小图标进行修改

1
2
3
4
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

1
2
# Scroll percent label in b2t button
scrollpercent: true

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

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

1
2
# Back to top in sidebar
 b2t: true

参考链接：

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

3.评论

3.1 valine

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

valine更新后参量改变，详情参见valine官方文档，在_config.yml文件下修改参量名称后问题解决。

评论需要科学上网（泪目）不辛苦，命苦

3.2 w aline

依然被墙了，申请免费域名中

EU免费域名申请：https://nic.eu.org/

记录一下我的免费域名申请账号编码：JC2663-FREE

参考文档：

  1. Waline官方文档
  2. 使用Hexo+NexT8+Waline搭建评论系统
  3. 创建属于你自己的org永久域名
  4. 使用自定义域名激活Vercel部署的Waline服务
  5. 免费域名注册，轻松拥有您的eu.org域名！！！

4.博客无法访问问题

1.使用https://tools.ipip.net/dns.php网站查询博客DNS

2.随后修改本机电脑hosts文件：

  • 找到hosts文件位置（通常位于C:\Windows\System32\drivers\etc）。
  • 使用管理员权限打开hosts文件（建议使用Notepad++或Visual Studio Code等文本编辑器，避免使用记事本直接编辑可能导致的权限问题）。
  • 在hosts文件末尾添加查询到的IP地址和你的博客域名，格式为IP地址 域名（例如185.199.111.153 yourblog.github.io）。
  • 保存hosts文件。

3.清除DNS缓存

  • Windows系统：打开PowerShell（以管理员身份），输入ipconfig /flushdns命令并回车，以清除DNS解析缓存。
  • Mac/Linux系统：在终端中，Mac用户可以使用sudo killall -HUP mDNSResponder命令，Linux用户可以使用sudo systemd-resolve --flush-caches命令来清除DNS缓存。

4.访问博客，问题解决