接上文,使用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.jpg
avatar: /resource/img/avatar.jpg
name: "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' }
欢迎大家参观
我的博客
终日乾乾,夕惕若厉。