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

news2025/4/2 21:02:07

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

文章目录

  • 一、安装hexo-theme-fluid
    • 安装依赖
    • 指定主题
    • 创建「关于页」
    • 效果展示
  • 二、修改个性化配置
    • 1. 修改网站设置
    • 2.修改文章路径显示
    • 3.体验分类和标签
    • 4.左上角博客名称修改
    • 5.修改背景图片
    • 6.修改关于界面
  • 欢迎大家参观

一、安装hexo-theme-fluid

参考文档:Hexo Fluid 用户手册

安装依赖

  1. 使用IDEA打开之前创建的hexo项目,在Terminal中运行
npm install --save hexo-theme-fluid
  1. 然后在博客目录下创建 _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
---
# 正文

效果展示

pic1

二、修改个性化配置

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' }

欢迎大家参观

我的博客


终日乾乾,夕惕若厉。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2325950.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

黑盒测试的场景法(能对项目业务进行设计测试点)

定义: 通过运用场景来对系统的功能点或业务流程的描述,设计用例遍历场景,验证软件系统功能的正确性从而提高测试效果的一种方法。 场景法一般包含基本流和备用流。 基本流:软件功能的正确流程,通常一个业务只存在一个基本流且基本流有一个…

通过Anaconda Prompt激活某个虚拟环境并安装第三方库

打开 Anaconda Prompt 在Windows中,可以通过开始菜单搜索 Anaconda Prompt 来打开。(红色箭头指向的地方。) 激活虚拟环境 输入以下命令来激活您的虚拟环境(假设虚拟环境名称为 myenv): conda activate…

全长约8.3公里!宁波象山港跨海大桥南中塔柱云端合龙

快科技3月31日消息,据报道,由中国交建二航局承建的宁波象山港跨海大桥顺利完成南中塔柱合龙施工,标志着这一重大交通工程取得阶段性突破。 这座连接宁波鄞州区与象山县的跨海通道全长8.3公里,其标志性的南主塔采用创新"钻石…

使用 2 端口探头测量 40 uOhm(2000 安培)PDN 的挑战 – 需要多少 CMRR?

部分 1 / 3 本文是 3 部分系列的第一部分: 第 2 部分 - 测量结果! 第 3 部分 - 使用另一台 VNA 的测量结果 介绍 我们大多数人都知道 2 端口测量中的接地回路。我们大多数人也都知道,我们需要引入接地回路隔离器来纠正错误。如果没有&…

蓝桥杯——统计子矩阵

解法&#xff1a;二维前缀和双指针 代码&#xff1a; #include <iostream> using namespace std; typedef long long ll; ll prefix[505][505], a[250010]; int main() {ll n, m, k, ans 0; cin >> n >> m >> k;for(int i 1; i < n; i)for(int …

吾爱破解安卓逆向学习笔记(4p)

学习目标&#xff0c;了解安卓四大组件&#xff0c;activity生命周期&#xff0c;同时了解去除部分广告和更新提示。 广告类型 1.启动页广告 2.更新广告 3.横幅广告 安卓四大组件 组件描述Activity(活动)在应用中的一个Activity可以用来表示一个界面&#xff0c;意思可以…

stm32第十天外部中断和NVIC讲解

一&#xff1a;外部中断基础知识 1.STM32外部中断框架 中断的概念&#xff1a;在主程序运行过程中&#xff0c;出现了特点的中断触发条件&#xff0c;使得CPU暂停当前正在运行的程序&#xff0c;转而去处理中断程序&#xff0c;处理完成后又返回原来被暂停的位置继续运行 1&…

26考研——线性表_ 线性表的链式表示_单链表(2)

408答疑 文章目录 三、 线性表的链式表示单链表概念单链表的结构头结点 单链表上基本操作的实现单链表的初始化带头结点和不带头结点的初始化操作注意 求表长操作按序号查找结点按值查找表结点插入结点操作扩展&#xff1a;对某一结点进行前插操作 删除结点操作扩展&#xff1a…

MATLAB 控制系统设计与仿真 - 31

二次型最优控制 考虑到系统如果以状态空间方程的形式给出&#xff0c;其性能指标为&#xff1a; 其中F,Q,R是有设计者事先选定。线性二次最优控制问题简称LQ(Linear Quadractic)问题,就是寻找一个控制,使得系统沿着由指定初态出发的相应轨迹,其性能指标J取得最小值。 LQ问题分…

蓝桥杯15届JAVA_A组

将所有1x1转化为2x2 即1x1的方块➗4 然后计算平方数 记得-1 2 import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.OutputStreamWriter; import java.io.PrintWriter;public class Main{static BufferedReader in new BufferedReader(new In…

deepseek v3 0324实现工作流编辑器

HTML 工作流编辑器 以下是一个简单的工作流编辑器的HTML实现&#xff0c;包含基本的拖拽节点、连接线和可视化编辑功能&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewp…

20250331-智谱-沉思

背景 收到GLM沉思的消息&#xff0c;立马试用下。感觉真的太及时了。 &#xff08;背景&#xff1a;为了客户的需求“AI辅助写作”实验了2款开源workflow&#xff0c;2款在线workflow&#xff0c;好几款多智能体框架后&#xff0c;心中无底之际。。。&#xff09; 1. GLM(开启…

Java EE(17)——网络原理——IP数据报结构IP协议解析(简述)

一.IP数据报结构 (1)版本&#xff1a;指明协议的版本&#xff0c;IPv4就是4&#xff0c;IPv6就是6 (2)首部长度&#xff1a;单位是4字节&#xff0c;表示IP报头的长度范围是20~60字节 (3)8位区分服务&#xff1a;实际上只有4位TOS有效&#xff0c;分别是最小延时&#xff0c;最…

26考研|高等代数:线性空间

线性空间这一章在整个高等代数学习过程中是非常精华的部分&#xff0c;在学习这一章的过程中会有部分的概念较为抽象&#xff0c;一定要抓紧抓牢对于概念的理解&#xff0c;反复阅读与感受&#xff0c;同时也可以根据已知的解析几何中介绍的二维空间或者三维空间进行类推比较&a…

【Linux】进程间通信(IPC)-- 无名管道、命名管道

IPC机制 实现进程间通信 在多个进程间传输数据或共享信息的机制。 数据交换&#xff0c;共享资源&#xff0c;进程同步&#xff0c;消息传递。 IPC实现原理&#xff1a;通信进程能够访问相同的内存区域。 方法&#xff1a; 管道&#xff1a;无名管道pipe、命名管道FIFO S…

每日一题-力扣-2278. 字母在字符串中的百分比 0331

字母在字符串中的百分比求解方案 | 力扣 2278 题解 问题描述 给定一个字符串 s 和一个字母 letter&#xff0c;我们需要计算 letter 在 s 中出现的百分比&#xff0c;并将结果向下取整。例如&#xff0c;如果字符串是 "foobar"&#xff0c;字母是 "o"&…

关于CodeJava的学习笔记——11

一、GUI 1、最简单的GUI 只有一个按钮的GUI import java.awt.*; import javax.swing.*; public class SimpleGUI{JFrame frame;Button bt;public SimpleGUI(){frame new JFrame("标题栏内容");bt new Button("点我啊");frame.add(bt);frame.setSize(8…

首个物业plus系列展 2025上海国际智慧物业博览会开幕

AI赋能服务升级&#xff01;首个“物业plus”系列展 2025上海国际智慧物业博览会盛大开幕 3月31日&#xff0c;2025上海国际智慧物业博览会&#xff08;简称“上海物博会”&#xff09;在上海新国际博览中心N4馆隆重开幕。本届展会由广州旭杨国际展览有限公司主办&#xff0c…

rk3586开发版新增系统调用(Android13)

一、前言 最近想学一下kernel和hal,所以买了一块板子,带了个摄像头和屏幕,1100,学习投资了。这个Android内核定一个系统调用感觉是真的麻烦&#xff0c;主要是有一层bionic C&#xff0c;一开始不熟悉的时候还是花了点时间去配置。 二、kernel修改 include/uapi/asm-generic…

OCR第三个方案:PP-OCRv4的初步探索

一、PP-OCR历史简要回顾 先请出PP-OCR官网&#xff0c;理解上有出入的&#xff0c;以官网为准。 1.1 PP-OCR系列历史 PP-OCRv1&#xff08;2020&#xff09;&#xff1a;首创3.5M超轻量模型&#xff0c;奠定两阶段架构基础&#xff08;检测方向分类识别&#xff09;PP-OCRv2…