Hello Fluid

本文最后更新于：2023年10月7日晚上

欢迎体验 Fluid ，这是一款 Material Design 风格的 Hexo 主题，以简约的设计帮助你专注于写作，本篇文章可预览主题的样式及功能。

文字

文章大部分使用的是 github-markdown 样式，并加入了一些 Material 风格。

H3 标题

H4 标题

粗体

斜体

代码

行内代码：$ hexo new post "My New Post"

代码高亮使用的是 highlight.js，支持 185 种语言和 91 种高亮样式：

def fib(n):
    a, b = 0, 1
    while a < n:
        print(a, end=' ')
        a, b = b, a+b
    print()
fib(1000)

type Map struct {
    mu Mutex
    read atomic.Value
    dirty map[interface{}]*entry
    misses int
}

表格

Left	Center	Right
Key 1	Value 1	Comment 1
Key 2	Value 2	Comment 2
Key 3	Value 3	Comment 3

列表

有序列表

Fluid 相较于其他主题的优势：

设计遵循简洁至上，同时具有轻快的体验，和优雅的颜值；
提供大量定制化配置项，使每个用户使用该主题都能具有独特的样式；
响应式页面，适配手机、平板等设备；

无序列表

Fluid 功能特性：

无比详实的用户文档
页面组件懒加载
多种代码高亮方案
多语言配置
内置多款评论插件
内置网页访问统计
内置文章本地搜索
支持暗色模式
支持脚注语法
支持 LaTeX 数学公式
支持 mermaid 流程图

图片

这是图片描述

LaTex

基于 MathJax 引擎：

$$
\Gamma _ { \epsilon } ( x ) = [ 1- e ^ { - 2\pi \epsilon } ] ^ { 1- x } \prod _ { n = 0} ^ { \infty } \frac { 1- \operatorname{exp} ( - 2\pi \epsilon ( n + 1) ) } { 1- \operatorname{exp} ( - 2\pi \epsilon ( x + n ) ) }
$$

$$
\left( \begin{array} c t ^ { \prime } \ x ^ { \prime } \ y ^ { \prime } \ z ^ { \prime } \end{array} \right) = \left( \begin{array} { c c c c } { \gamma } & { - \gamma \beta } & { 0 } & { 0 } \ { - \gamma \beta } & { \gamma } & { 0 } & { 0 } \ { 0 } & { 0 } & { 1 } & { 0 } \ { 0 } & { 0 } & { 0 } & { 1 } \end{array} \right) \left( \begin{array} c t \ x \ y \ z \end{array} \right)
$$

$$
6 \mathrm { CO } _ { 2 } + 6 \mathrm { H } _ { 2 } \mathrm { O } \rightarrow \mathrm { C } _ { 6 } \mathrm { H } _ { 12 } \mathrm { O } _ { 6 } + 6 \mathrm { O } _ { 2 }
$$

流程图

基于 mermaid 语法：

sequenceDiagram
participant Alice
participant Bob
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts <br/>prevail...
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

gantt
dateFormat  YYYY-MM-DD
title Adding GANTT diagram to mermaid

section A section
Completed task            :done,    des1, 2014-01-06,2014-01-08
Active task               :active,  des2, 2014-01-09, 3d
Future task               :         des3, after des2, 5d
Future task2               :         des4, after des3, 5d

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label