Hexo Fluid主题安装部署与美化博客指南

一、Fluid主题安装

1. 安装Fluid主题

Hexo 5.0及以上版本推荐通过npm直接安装：

1
npm install --save hexo-theme-fluid

安装完成后，在博客根目录下创建 _config.flu  id.yml 文件，将主题默认配置复制到此文件中。

2. 指定Fluid主题

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

1
2
theme: fluid  # 指定主题 
language: zh-CN  # 指定语言

二、基础配置

1. 导航栏设置

在 _config.flu  id.yml 中配置导航栏：

1
2
navbar:  
    blog_title: "你的博客名称"

2. 首页Banner设置

1
2
3
4
5
6
index:  
   banner_img: /img/default.png  # 背景图片路径
   banner_img_height: 70  # 背景图高度百分比 
   slogan:    
     enable: true
     text: "你的博客标语"

3. 打字机效果

1
2
3
4
5
6
7
8
9
fun_features:

typing:

enable: true

typeSpeed: 70

cursorChar: "_"

三、页面美化

1. 关于页设置

创建关于页：

1
hexo new page about

Bash

编辑 source/abou  t/index.md ：

1
---title: 关于layout: about---

Markdown

在 _config.flu  id.yml 中配置：

1
about:  enable: true  avatar: /img/avatar.png  name: "你的名字"  intro: "个人简介"  icons:    - { class: "iconfont icon-github-fill", link: " https://github.com ", tip: "GitHub" }

YAML

2. 文章页设置

1
post:  meta:    date:      enable: true      format: "YYYY年MM月DD日"    wordcount:      enable: true      format: "{}字"    min2read:      enable: true      format: "阅读约{}分钟"

YAML

四、功能扩展

1. 评论系统

推荐使用Valine评论系统：

1
2
post:  comments:    enable: true    type: valine
valine:  appId: "你的LeanCloud App ID"  appKey: "你的LeanCloud App Key"  placeholder: "留下你的评论..."

YAML

2. 访问统计

使用不蒜子统计：

1
statistics:  enable: true  source: "busuanzi"  pv_format: "总访问量 {} 次"  uv_format: "总访客数 {} 人"

YAML

3. 代码高亮

1
code:  highlight:    enable: true    line_number: true    lib: "highlightjs"    style: "github-dark"

YAML

五、高级美化

1. 添加网站运行时间

在 footer.cont  ent 中添加：

1
<div>  <span id="timeDate">载入天数...</span>  <span id="times">载入时分秒...</span>  <script src="/js/duration.js"></script></div>

HTML, XML

创建 source/js/d  uration.js 文件，内容参考文档。

2. 添加一言

在 custom_head 中添加：

1
custom_head: '  <script src=" https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>'

YAML

在页面中添加：

1
<p id="hitokoto">:D 获取中...</p>

HTML, XML

3. 添加音乐插件

安装APlayer：

1
npm install --save hexo-tag-aplayer

Bash

在文章中插入：

1
{% meting "歌单ID" "tencent" "playlist" %}

Markdown

六、优化建议

1. 静态资源压缩

安装hexo-neat插件：

1
npm install hexo-neat --save

Bash

配置：

1
neat_enable: trueneat_html:  enable: trueneat_css:  enable: trueneat_js:  enable: true

YAML

2. 文章加密

安装hexo-blog-encrypt：

1
npm install --save hexo-blog-encrypt

Bash

在文章Front-matter中添加：

1
password: 你的密码

Markdown

总结

通过以上步骤，你可以完成Hexo Fluid主题的基本安装和美化。Fluid主题功能丰富，支持高度自定义，建议根据个人需求逐步调整配置。记得每次修改配置后，使用 hexo clean   && hexo g 重新生成静态文件，并通过 hexo s 本地预览效果后再部署。