接上文,使用Fluid美化个人博客
文章目录
- 一、安装hexo-theme-fluid
- 安装依赖
- 指定主题
- 创建「关于页」
- 效果展示
- 二、修改个性化配置
- 1. 修改网站设置
- 2.修改文章路径显示
- 3.体验分类和标签
- 4.左上角博客名称修改
- 5.修改背景图片
- 6.修改关于界面
- 欢迎大家参观
一、安装hexo-theme-fluid
参考文档:Hexo Fluid 用户手册
安装依赖
- 使用IDEA打开之前创建的hexo项目，在Terminal中运行
npm install --save hexo-theme-fluid
- 然后在博客目录下创建
_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' }
欢迎大家参观
我的博客
终日乾乾，夕惕若厉。
