Hexo 安装 Fluid 主题

本文最后更新于 2023年12月5日 11:55

详细操作请看官方文档

这里记录一下我的安装过程

一 安装主题

进入博客目录执行命令：

1
npm install --save hexo-theme-fluid

image.png

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

现在目录下有这三个 yml 文件：
image.png

可删除 _config.landscape.yml , 它是 hexo 默认的主题文件。

二 修改 hexo 配置

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

1
2
3
theme: fluid  
  
language: zh-CN

此时我们从新生成在本地预览页面就可以看到新主题了

1
hexo clean && hexo g && hexo s
  1. hexo clean: 清除 Hexo 生成的静态文件和缓存，通常在生成新的静态文件之前执行，以确保旧文件被删除。
  2. hexo g (或 hexo generate 的缩写): 生成 Hexo 博客的静态文件，包括 HTML、CSS、JavaScript 等。
  3. hexo s (或 hexo server 的缩写): 启动 Hexo 的本地服务器，以便在本地预览博客内容。
    image.png

三 创建「关于页」

执行以下命令：

1
hexo new page about

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

添加后如下

1
2
3
4
5
6
7
---  
title: about  
date: 2023-12-05 17:13:01  
layout: about  
---  
这里写关于页的正文，支持 Markdown, HTML
	hello World

然后不出意外你就可以看到关于页了。
输入

1
hexo clean && hexo g && hexo s -o

-o: 在启动服务器后自动在默认浏览器中打开博客

后访问 http://localhost:4000/about/ 即可看到效果。
image.png

可以跟着文档把关于页面的几个 icon 一起改了

四 修改主题配置

官方文档
官方文档还算比较完善，耐心看完即可。

五 修改网站图标

修改网站图标 文档好像没提到，我这里写一下
首先把你的图标放到 /source/images/ 目录下，然后
打开 _config.fluid.yml 找到这个配置：

1
2
3
4
5
6
7
# 用于浏览器标签的图标  
# Icon for browser tab  
favicon: images/hedgehog.png
  
# 用于苹果设备的图标  
# Icon for Apple touch  
apple_touch_icon: images/hedgehog.png

将 hedgehog.png.png 改为你的图标路径即可。

从新清除缓存之后生成本地查看就可以看到已经修改了
hexo clean && hexo g && hexo s -o
image.png

六 修改 slogan 为 api 语录

效果如图所示：
image.png

在主题配置 _config.fluid.yml 中开启：

1
2
3
4
5
6
7
8
9
10
index:  
slogan:  
enable: true  
text: 欢迎来到我的博客 
api:  
enable: true  
url: "https://v1.hitokoto.cn/"  
method: "GET"  
headers: {}  
keys: ["hitokoto"]

把 url 改为你想要的 api 地址，keys 改为你想要的字段。具体参数可以看官方文档

七 修改背景图片 为 api 图片

既然可以改 slogan 为 api 语录，那么背景图片当然也可以改为 api 图片

效果如图所示：
image.png

在主题配置 _config.fluid.yml 中搜索

1
banner_img:  /images/infinity-51500798.jpg

将其改为你想要的 api 地址即可。
这里提供一个 Bing 每日图片
感谢接口提供者！！！

八 博客如何使用霞鹜文楷字体

字体介绍

霞鹜文楷字体仓库

使用方法

直接引用

直接将文后提供的链接以 <link> 的形式添加到网页的 <head> 内即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>  
<head>  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/lxgwwenkaiscreen/result.css" />  
<style>  
body {  
font-family: "LXGW WenKai Screen";  
font-weight: normal;  
}  
</style>  
</head>  
<body>  
  
</body>  
</html>

Hexo 博客

如果你使用的是 Hexo 博客，可以采用注入的方式，将字体 css 注入到你的博客中。
首先在根目录创建一个 scripts 文件夹，然后在 scripts 文件夹中创建一个 font.js 文件，内容如下：

1
2
3
hexo.extend.injector.register('head_end',  
'<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/lxgwwenkaiscreen/result.css" />',  
'default');

然后修改你的主题配置文件

1
2
3
4
5
font:  
font_size: 17px  
font_family: "LXGW WenKai GB"  
letter_spacing: 0.02em  
code_font_size: 85%

Fluid 主题

如果你使用 Hexo 的 Fluid 主题，那么恭喜你，替换字体很简单，只需要在主题的配置文件里加上一行 custom_css: https://xxxx代码就可以了，再修改 font_family。比如我的是 fontFamily: LXGW WenKai GB

1
2
3
4
5
6
7
8
9
# 主题字体配置  
font:  
font_size: 17px  
font_family: "LXGW WenKai GB"  
letter_spacing: 0.02em  
code_font_size: 85%  
  
custom_js:  
custom_css: https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-web/lxgwwenkaiscreen/result.css

效果展示

image.png

此文章部分参考于https://blog.ovvv.top/posts/5eba38dc/

#Hexo #个人博客 #部署
Hexo 安装 Fluid 主题
http://example.com/posts/7a4d60b5/
作者
帅蛋同学_
发布于
2023年12月5日 00:00
更新于
2023年12月5日 11:55
许可协议