Hello World

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment

优雅的写文章

Fluid 是一款很十分优雅的主题，那么写一篇优雅的文章搭配它呢？以下会从几个方面来简述，主要还是做几个推荐。

熟悉 Markdown 语法

对于使用 Hexo 的大多数人来说，相信对 Markdown 的语法不会陌生。熟练掌握 Markdown 语法对我们的写作拥有极大的帮助，这里用少用的表格和脚注来举个例子。至于为什么有些公式、流程图无法渲染，是因为 Markdown 追求简洁式写作，默认渲染器不支持复杂渲染。

表格
站点 地址 介绍
Fluid Docs https://hexo.fluid-dev.com/docs/ Fluid 官方文档
Hexo-theme-fluid https://github.com/fluid-dev/hexo-theme-fluid Fluid Github Repo
Fluid Blog https://hexo.fluid-dev.com/ Fluid 官方博客

站点 地址 介绍
Fluid Docs https://hexo.fluid-dev.com/docs/ Fluid 官方文档
Hexo-theme-fluid https://github.com/fluid-dev/hexo-theme-fluid Fluid Github Repo
Fluid Blog https://hexo.fluid-dev.com/ Fluid 官方博客

脚注

默认渲染器下正常显示，不同渲染器显示效果不同，写法如下：

1
2
脚注演示[^1]
[^1]: 脚注内容演示

脚注演示<span class=”hint–top hint–rounded” aria-label=”脚注内容演示

善用 HTML

我们可以在 Markdown 中插入一些简单的 HTML 代码或 CSS 片段来获得更多扩展，使得文章内容更具有多样性。以下演示几个简单功能。”>[1]

跳转位置演示（跳转位置设置点）

文字颜色

#519D9E颜色演示

1
<span  style="color: #519D9E; ">#519D9E颜色演示</span>

#519D9E颜色演示

文字大小

0.7em 文字大小演示

1
<span  style="font-size:0.7em;">0.7em 文字大小演示</span>

0.7em 文字大小演示

文字位置

内容居中演示

1
<p style="text-align:center">内容居中演示</p> # 可以修改 text-align 参数来设置文字位置。

内容居中演示

页内跳转 点击到达跳转位置演示

点击到达跳转位置演示 # 在需要跳转的地方添加此代码。
跳转位置演示（跳转位置设置点） # 在跳转位置添加次代码。

综合演示

1
2
3
4
5
<p style="text-align:center;color:#8EC0E4;font-size:1.5em;font-weight: bold;">
综合演示
<br>
优雅使用 Fluid 写文章
</p>

综合演示
优雅使用 Fluid 写文章

iframe 页面镶套
iframe 页面镶套可以帮助我们更好的展示一个页面。比如以下演示页面。

1
<iframe src="https://hexo.fluid-dev.com/" width="100%" height="500" name="topFrame" scrolling="yes"  noresize="noresize" frameborder="0" id="topFrame"></iframe>

一些参数说明，width=”100%” 为宽度自适应，高度请根据实际需求跳转，注意移动端页面是否匹配。 scrolling 为滚动条参数。frameborder 为边框参数。noresize 属性规定用户无法调整框架的大小。

details 标签

用于展示代码较多需要折叠或折叠相关内容，以下为演示，summary 填写显示名称。

Demo

Demo 
1
2
3
4
5
6
type Map struct {
  mu Mutex
  read atomic.Value
  dirty map[interface{}]*entry
  misses int
}
对应的实现代码： 
1
2
3
4
5
6
7
8
9
10
11
<details>
<summary>Demo</summary>
```go
type Map struct {
  mu Mutex
  read atomic.Value
  dirty map[interface{}]*entry
  misses int
}
\```
</details>
善用 Tag 组件 Fluid 内置了许多 Tag 组件，包含便签、行内标签（已知不会出现间隔，谨慎使用）、勾选框、按钮和组图，可以使用这些组件来丰富文章内容，具体点击查看官方文档查看，点击跳转到 Fluid Doc。

配图
众所周知，博客好不好看，配图占一半。这里给大家推荐几个我常用找配图的地方。另外，请遵循相关网站的版权协议。

Wallpaper Hub

Wallhaven

Unsplash

更多技巧，上网自行搜索。例如查阅官方 Wiki 或是 博客经验 STFM

又多互联网上的垃圾

  1. 脚注内容演示

善用 HTML

我们可以在 Markdown 中插入一些简单的 HTML 代码或 CSS 片段来获得更多扩展，使得文章内容更具有多样性。以下演示几个简单功能。 ↩