Hexo主题搭建

1. 安装依赖包

1
npm install -g hexo-cli

2. 初始化

1
2
hexo init
npm install

3. 关联Github

上传文章封面图不显示

设置如下：

1
2
3
tags: [fluid, js, css,Hexo]
categories: [Hexo]
index_img: /source/img/cover/fluid.png

问题：
设置路径错误，修正如下：

1
2
categories: [Hexo]
index_img: /img/cover/fluid.png

TODO：文章底部生成链接修正
TODO：头像旋转
TODO：引入一言
TODO：引入PV UV

4. 关于页优化

第一步

利用hexo新建一个页面。输入以下命令。

1
hexo new page about

在根目录下的 source 文件夹中找到 about 文件夹，并打开里面的index.md文件。

第二步

在头部里面添加以下代码：

1
layout: about

第三步

找到主题配置文件，在对应处添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: avter.png
  banner_img_height: 60
  banner_mask_alpha: 0.3
  subtitle: 关于写者 # 打字机内容
  avatar: avter.png # 头像图片
  name: "墨水的记忆"
  introduce: "青春是用来奋斗的。如果有理想，就努力去实现T。"
  icons:
    - { class: "iconfont icon-qq-fill", link: "", tip: "顽强" }
    - { class: "iconfont icon-wechat-fill", link: "", tip: "拼搏" }
    - { class: "iconfont icon-alipay-fill", link: "", tip: "奋斗" }
    - { class: "iconfont icon-map", link: "", tip: "坚持" }

添加自定义icon

Hexo
#fluid #js #css #Hexo
Hexo主题搭建
http://bloomivy.github.io/2025/01/18/Fluid主题美化/
作者
Bloom
发布于
2025年1月18日
许可协议