接上文,使用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' }
歡迎大家參觀
我的博客
終日乾乾，夕惕若厲。
