[Mac]利用hexo-theme-fluid美化个人博客

接上文,使用Fluid美化个人博客

一、安装hexo-theme-fluid

参考文档:Hexo Fluid 用户手册

安装依赖

1. 使用IDEA打开之前创建的hexo项目，在Terminal中运行

npm install --save hexo-theme-fluid

2. 然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml 内容复制过去。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: 标题
layout: about
---
# 正文

效果展示

二、修改个性化配置

1. 修改网站设置

_config.xml:

# Site
title: '阿雅的个人博客'
subtitle: 'Ya Blog Using Hexo With Fluid'
description: '记录一些本人的想法以及日常'
keywords:
author: Ayaki Shi
language: zh-CN
timezone: ''

2.修改文章路径显示

url: https://shijizhe.github.io
permalink: :category/:title/

3.体验分类和标签

书写第一篇博客

---
title: 第一篇
date: 2025-03-30 23:51:00
categories:- Sports- Baseball
tags:- Injury- Fight- Shocking
---
我是一篇文章

如图：

4.左上角博客名称修改

以下修改在_config.fluid.xml进行：

# 博客标题
navbar:blog_title: 阿雅的个人博客

5.修改背景图片

# 文章默认图片
post:banner_img: /resource/img/bg/love_girl.jpg# 首页设置
index:banner_img: /resource/img/bg/love_girl.jpg# 归档设置
archive:banner_img: /resource/img/bg/love_girl.jpg# 分类设置
category:banner_img: /resource/img/bg/love_girl.jpg# 标签设置
tag:banner_img: /resource/img/bg/love_girl.jpg

6.修改关于界面

fluid竟然没有自带csdn图标，差评（csdn打钱啊！！！）
引入自定义图标，参照我的上一篇文章：Hexo + Fluid博客实现自定义图标

# 关于设置
about:banner_img: /resource/img/bg/love_girl.jpgavatar: /resource/img/avatar.jpgname: "Ayaki Shi"intro: "终日乾乾，夕惕若厉。"icons:- { class: 'iconfont icon-github-fill', link: 'https://github.com/shijizhe', tip: 'GitHub' }- { class: 'iconfont icon-weibo-fill', link: 'https://www.weibo.com/u/2514410023', tip: 'WeiBo' }- { class: 'iconfont icon-csdn1-copy', link: 'https://blog.csdn.net/shijizhe1', tip: 'CSDN' }

欢迎大家参观

我的博客

---

终日乾乾，夕惕若厉。