Hexo+NexT博客搭建及美化(一)

该篇章主要讲解我的博客搭建的过程和主题美化流程（上）。

Hexo依赖环境安装

安装nodejs查看是否安装成功

如图：

安装 Git

安装 Hexo

先创建一个空仓库（文件夹）作为你的博客，然后终端进入该仓库

# 安装 hexo 框架
npm install -g hexo-cli
# 初始化文件夹
hexo init
# 安装 hexo 依赖包
npm install

如果以上安装出现错误的，请更换镜像源或者选择科学上网(请自行查阅)

检测Hexo

hexo clean && hexo g && hexo s

hexo  clean:
hexo g:
hexo s

更换主题

这里以NexT主题为例

在你的仓库文件夹下clone(选择好自己的版本，版本之间的设置有差别)

git clone https://github.com/next-theme/hexo-theme-next themes/next

根配置_config.yml

GitHub部署

Install hexo-deployer-git.

// 需要安装插件
npm install hexo-deployer-git --save

配置站点 _config.yml

deploy:
  type: git
  repo: <repository url> #https://xxxx/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

Hexo主题配置

说明

我的主题版本NexT8.19.2，点击查看最终效果

注意：

NexT主题拥有不同的版本，GitHub开源地址也不同

主要版本：NexT5.0+；NexT7.0+；NexT8.0+

参考文献：Hexo+Next配置博客¹

添加背景

主题配置文件的custom_file_path选项取消style注释

custom_file_path: 
  #style: source/_data/styles.styl // 修改前
  style: source/_data/styles.styl // 取消后

站点新建文件夹_data/和文件styles.styl，即： /source/_data/styles.styl

// styles.styl中添加内容
body {
    background: url(/images/background.png); //是主题NexT的images
    background-repeat: no-repeat; //不重复
    background-attachment: fixed; // 滚动后背景也填充
    background-size: cover;      //是否填充，cover填充
    background-position: center; //背景图片位置
}

文章

• 公式：参考文献：hexo博客next主题添加对数学公式的支持²

  这种我对行间的不成功，所以用了官方文档提供的panco

• 主题字体：参考文献： Hexo Next 主题字体相关配置³

• 样式：

  • 主题一些很nice的自定样式官网

  • 好看的post字样：官网Note (Bootstrap Callout)

    next主题美化——背景图片、页面透明化、阴影、圆角、动画⁶

• 文章加密：文章加密Next 7.0+ 实现文章加密⁴ Hexo博客技巧：对文章进行加密⁵

• 复选框：Hexo Stellar 和 Next 主题支持 KaTex 公式与 Markdown 复杂表格⁶，这个在我上面会有冲突，所以我卸载了，打算以后需要使用复选框再想办法弄

  复选框效果：

• NexT 主题行内代码背景颜色设置：行内代码单独设置⁷

主题配置

• 缓存

# Remove unnecessary files after hexo generate.
minify: true

• PDF支持：PDF

• 站点地图

npm install hexo-generator-sitemap --save

这个相当于是对指定浏览器收录自己文章，这里按照官网的操作执行就行，我选择了Bing的配置设置

README.md跳过

新增导航栏

这里我以自己的Love导航设置为例

站点source文件添加Love文件夹并配置index.md

Hexo new page Love/
 //进入Love文件夹，修改index.md内容
title: 我和珠珠
date: 2024-04-11 23:29:36
categories: Love
type: Love   

主题配置文件下的menu菜单添加：

Love: /categories/Love/ || fas fa-heart

source/_posts/下添加love/`文件夹

// 主要是用于文章整理分类
cd source/_posts/
mkdir love
cd love
touch XXX.md

XXX.md`配置并写入内容

title: 每日记录2024-04-13
date:
categories: Love
tags: 
  - 日记
  - love

注意:

如果在_post/之外的markdown文件配置有togs时候，会报错，在GitHub的issues里有人解释

例如：

issues分析：

参考资料