Hexo-theme-Fluid 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
Hexo-theme-Fluid 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
Hexo-theme-Fluid 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
Hexo-theme-Fluid 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
Hexo-theme-Fluid 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !

软件简介

Fluid 是基于 Hexo 框架开发的一款 Material Design 风格的主题。

ScreenShot

该主题相较于其他主题的优势:

  1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作;
  2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式;
  3. 响应式页面,适配手机、平板等设备,包括极端的分辨率都能轻松应对;
  4. 主题中少有的整合了 LaTeX 和 mermaid 的支持

目前具有的功能特性:

  •  图片懒加载
  •  自定义代码高亮方案
  •  内置多语言
  •  支持多款评论插件
  •  支持使用数据文件存放配置
  •  自定义静态资源 CDN
  •  无比详实的用户文档
  •  内置文章搜索
  •  页脚备案信息
  •  网页访问统计
  •  支持 LaTeX 数学公式
  •  支持 mermaid 流程图

演示

快速开始

1. 搭建 Hexo 博客

如果你还没有 Hexo 博客,请按照 Hexo 官方文档 进行安装、建站。

2. 获取主题最新版本

方式一:

Hexo 5.0.0 版本以上,推荐通过 npm 直接安装,进入博客目录执行命令:

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml,将主题的 _config.yml 内容复制进去。

方式二:

下载 最新 release 版本 解压到 themes 目录,并将解压出的文件夹重命名为 fluid

3. 指定主题

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

theme: fluid  # 指定主题

language: zh-CN  # 指定语言,会影响主题显示的语言,按需修改

4. 创建「关于页」

首次使用主题的「关于页」需要手动创建:

hexo new page about

创建成功后,编辑博客目录下 /source/about/index.md,添加 layout 属性。

修改后的文件示例如下:

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文,支持 Markdown, HTML

更多信息

点击查看用户指南

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (4)

加载中
学习了
2019/11/01 20:42
回复
举报
不觉得这个是Material Design风格,可以去看官方的设计规范文档,只是类似MD风格。
2019/10/18 13:40
回复
举报
张凯强-zkqiang软件作者
我们用的是 mdbootstrap(Material Design for Bootstrap),咋就不是 Material Design 呢
2019/10/22 23:23
回复
举报
对的,类似而已
2020/08/13 08:16
回复
举报
更多评论
发表了资讯
09/30 14:35

Hexo Fluid 博客主题更新 1.8.12 版本

主要更新内容 增加 OpenGraph 配置项 增加字间距的配置项 暗色模式按钮悬停动效 字体在苹果系统下抗锯齿 评论图片支持缩放功能 备案信息不再强制对称居中 优化无障碍条件 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独...

0
6
发表了资讯
05/28 13:21

Hexo Fluid 博客主题更新 1.8.11 版本

主要更新内容 支持 Cusdis 评论插件 多语言增加世界语(Esperanto) 大部分评论插件的配置项现在可以自行追加 升级第三方库默认版本 优化搜索框代码 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页...

0
5
发表了资讯
04/26 16:27

Hexo Fluid 博客主题更新 1.8.10 版本

主要更新内容 增加文章图片放大后可加载原图片的配置 升级依赖库版本 优化放大字号后的样式 优化懒加载代码 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,包括极端的...

0
15
03/17 19:14

Hexo Fluid 博客主题更新 1.8.9 版本

主要更新内容 重构懒加载代码 FrontMatter 可以设置 keywords 参数 增加分类文章排序字段 增加评论插件配置字段 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,包括极...

0
5
发表了资讯
02/25 13:46

Hexo Fluid 博客主题更新 1.8.8 版本

主要更新内容 自定义页与关于页支持评论 友链页支持自定义区域和评论 友链页增加默认头像 多语言增加繁体中文 优化一些样式 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设...

2
6
2020/12/23 15:33

Hexo Fluid 博客主题更新 1.8.7 版本

主要更新内容 全新的文章便签配色 限制 TOC 的最大高度(超出可以滚动) 优化移动端下显示样式 进度条关联图片加载 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,包括...

1
13
2020/12/02 15:46

Hexo Fluid 博客主题更新 1.8.6 版本

主要更新内容 代码可以显示行数 增加 Waline 评论插件 默认字体族优先使用系统字体 不蒜子和 LeanCloud 统计可以共用 修复上个版本中一些 BUG 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,...

4
10
2020/11/06 11:36

Hexo Fluid 博客主题更新 1.8.5 版本

主要更新内容 加载进度条 自定义页面支持在 Front-matter 里设置 comment: true 开启评论 首页打字机支持通过 API 获取内容(详情) 支持不生成一些页面(分类页、标签页、404页等) twikoo 评论插件 重构 JS 代码,使生成的页面体积缩小约 10% ~ 30% 配置文件增加英文注释 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次...

0
4
2020/10/19 21:05

Hexo Fluid 博客主题更新 1.8.4 版本

主要更新内容 支持自定义页脚内容 文章通过 sticky 排序后增加一个图标 多语言新增德语 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,包括极端的分辨率都能轻松应对;...

0
5
2020/09/05 23:25

Hexo Fluid 博客主题更新 1.8.3 版本

主要更新内容 增加对 prismjs 高亮库的支持 增加 remark42 评论插件 文章页支持显示作者 修复新版 Chrome 导致滚动闪屏 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,...

3
1
2020/08/12 20:02

Hexo Fluid 博客主题更新 1.8.2 版本

主要更新内容 暗色主题模式 更多 Web 语义化 修复评论插件的BUG 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,适配手机、平板等设备,包括极端的分辨率都能轻松应对; 4. 主题中少有的整合了...

1
2
2020/06/09 15:10

Hexo Fluid 博客主题更新 1.8.1 版本

主要更新内容 导航栏增加二级菜单功能 加入 LeanCloud 用于统计访问数据 支持 Markdown 脚注语法 重写了分类页(category)的页面样式 懒加载采用新机制,大幅提高性能 优化多处样式细节 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该...

4
10
2020/05/02 21:54

Hexo 博客主题 Fluid 发布 1.8.0 版本

主要更新内容 增加多款内置 Tag 功能 顶部菜单支持自定义图标 支持 mermaid 代码渲染 懒加载可在自定义页面单独开启 主题新版本自动检测 增加大量配置项 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响...

1
8
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2018/10/09 20:03

hexo-theme-next主题设置

### 前言 > 由于hexo已经搭建好,并且是用的next主体。这里主要介绍下,next主题相关的一些优化配置。 读者可以在 https://hexo.io/themes/ 可以查看你喜欢的主题。 这里主要介绍NexT主题的相关配置。其他主题可以多看看官方文档。 ### 安装主题 安装的过程就一行代码,你需要在博客根目录出打开命令行输入以下命令: ``` git clone https://github.com/iissnan/hexo-theme-next themes/next ``` ### 启用主题 修改站点配置文件...

0
0
发表于程序人生专区
2014/07/13 21:29

Wixo - a wiki theme for Hexo

介绍我为 Hexo 编写的第二个主题 Wixo 。 自从我将博客的主题 Freemind 开源了之后,我收到了很多朋友的来信,希望我也能把博客里的 Wiki 部分也开源。 当初没有将 Wiki 的部分放进博客,主要是考虑到主题的简单性。原来的主题包含了很多我个人的特殊定制,虽然自己用着方便,但对别人就不见得适用了。比如,由于我的博客有 post 和 wiki 两套主要的 layout,为了创建草稿的时候有所区分,原来的 hexo new 就不适用了,于是我都...

0
0
发表了博客
2018/01/24 21:53

hexo-theme-yilia使用遇到的问题

该项目的github地址:https://github.com/litten/hexo-theme-yilia 下面是该项目的README.md 在使用过中遇到这么一个问题。 文章不会自动的摘要,显示显示更多的按钮。本以为是自己的配置文件出了错误,或者自己少引入了css文件。但是,看了看作者的博客之后,才发现是在博客文章的内容中实现了这个功能。在文章内容中添加 <!-- more --> 这样一行代码之前的内容就是文章的摘要,之后的内容就是点击文章进入的内容。 title: 欢...

0
0
2020/12/04 07:20

【行业资讯】Hexo Fluid 博客主题更新 1.8.6 版本

主要更新内容 代码可以显示行数 增加 Waline 评论插件 默认字体族优先使用系统字体 不蒜子和 LeanCloud 统计可以共用 修复上个版本中一些 BUG 关于 Fluid Fluid 是一款基于 Hexo 框架的 Material Design 风格主题。 该主题相较于其他主题的优势: 1. 优雅的颜值,使用 Material Design 风格突出层次感,但又不失简约,让用户能专注于写作; 2. 提供大量定制化配置项,使每个用户使用该主题都能具有独特的样式; 3. 响应式页面,...

0
0
发表于服务端专区
2018/10/09 20:08

解决busuanzi_count突然失效的方法(hexo-theme-next)

> 2018-09月份的时候,还正常的使用不蒜子统计功能(不蒜子统计功能配置文件已经配置好:themes\next\_config.yml)。过完国庆后,看自己的博客突然不蒜子统计失效了,没有统计数量了。 ### 说明 我这里是使用的**hexo-theme-next**主题,主题版本为:5.1.4 ### 原因分析 由于定位到是[不蒜子](http://busuanzi.ibruce.info/)统计功能突然有问题了,所以前往[不蒜子官网](http://busuanzi.ibruce.info/)进行查看,发现官网有一段...

0
0
发表于程序人生专区
2016/01/31 11:11

hexo-theme-freemind主题重大更新

如果您是因为 freemind 主题关注本博客的,那么我将很兴奋地为您带来一个好消息。freemind 主题不再是一成不变的黑色主题了,这次新增了 33 种 color themes ! 先上图感受一下这 34 种 color themes 吧: 选择困难症终结者主题有木有?如果您觉得赞,赶紧升级下主题,然后在主题的 _config.yml 里增加两行即可: theme: bootstrap inverse: true 其中,theme 表示使用哪款主题,而 inverse 则表示是否使用该主题的 inverse 颜色...

0
0
发表了博客
2013/12/26 13:33

Theme Hooks and Theme Hook Suggestions

What Is a Theme Hook? In Drupal, theme hooks refer to template files and functions that have been specifically registered via hook_theme(). This may sound scary or over-technical to non-PHP developers, but honestly it’s not. You’ve already learned about template files and theme functions, so technically you already have a pretty good grasp on theme hooks. Whether a template file or function ...

0
0
发表了博客
2019/07/17 20:41

Hexo

# 文章目录默认展开 [参考文章](https://blog.csdn.net/wugenqiang/article/details/88609066) 对于想要通过点击目录来进行展开与收缩的,需要进行下面的操作,把 ``` //文章目录默认展开 .post-toc .nav .nav-child { display: block; } ``` 里面的`.nav-child`去掉即可通过点击来实现目录的展开与收缩。 # 新建菜单以及添加菜单图标 [next官网](http://theme-next.iissnan.com/getting-started.html#menu-settings) 在官网中查...

0
0
发表于大前端专区
2015/11/07 10:11

hexo

deploy的type 的github需要改成git npm install hexo-deployer-git --save 改了之后执行,然后再部署试试

0
0
发表了博客
2018/07/01 14:59

Hexo - ERROR Local hexo not found in xxx

1.出现的问题   执行 hexo d 和 hexo g 时报错。      此时可参考此链接或此链接 2.若上述链接不能解决问题,很可能是因为你的node.js的版本过低,请重新安装更新的版本。      

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
4 评论
104 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部