hexo-Fluid主题使用手册

痛定思痛。 2022-09-03 10:16 254阅读 0赞

hexo-Fluid主题使用手册

\[官网\] https://fluid-dev.github.io/hexo-fluid-docs/

## 前言 ##

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

## 文章内容 ##

### 熟悉 Markdown 语法 ###

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

表格

<table> 
 <thead> 
  <tr> 
   <th>站点</th> 
   <th>地址</th> 
   <th>介绍</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Fluid Docs</td> 
   <td><a href="https://hexo.fluid-dev.com/docs/" rel="nofollow">https://hexo.fluid-dev.com/docs/</a></td> 
   <td>Fluid 官方文档</td> 
  </tr> 
  <tr> 
   <td>Hexo-theme-fluid</td> 
   <td><a href="https://github.com/fluid-dev/hexo-theme-fluid" rel="nofollow">https://github.com/fluid-dev/hexo-theme-fluid</a></td> 
   <td>Fluid Github Repo</td> 
  </tr> 
  <tr> 
   <td>Fluid Blog</td> 
   <td><a href="https://hexo.fluid-dev.com/" rel="nofollow">https://hexo.fluid-dev.com/</a></td> 
   <td>Fluid 官方博客</td> 
  </tr> 
 </tbody> 
</table>

脚注

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

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

### 善用 HTML ###

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

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

文字颜色

\#519D9E颜色演示

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

--------------------

文字大小

0.7em 文字大小演示

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

--------------------

文字位置

内容居中演示

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

--------------------

页内跳转

[点击到达跳转位置演示][Link 1]

<a href="#demo">点击到达跳转位置演示</a> # 在需要跳转的地方添加此代码。
    <a id="demo">跳转位置演示（跳转位置设置点）</a> # 在跳转位置添加次代码。
    Copy

--------------------

综合演示

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

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

iframe 页面镶套

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

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

### 善用 Tag 组件 ###

Fluid 内置了许多 Tag 组件，包含便签、行内标签、勾选框、按钮和组图，可以使用这些组件来丰富文章内容，具体点击查看官方文档查看，**[点击跳转到 Fluid Doc][Fluid Doc]**。

## 配图 ##

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

### Wallpaper Hub ###

[![Wallpaper Hub][]][Wallpaper Hub 1]

[Wallpaper Hub][Wallpaper Hub 1]

**[点击跳转到 Wallpaper Hub][Wallpaper Hub 2]**

### Wallhaven ###

[![Wallhaven][]][Wallhaven 1]

[Wallhaven][Wallhaven 1]

**[点击跳转到 Wallhaven][Wallhaven 2]**

### Unsplash ###

[![Unsplash][]][Unsplash 1]

[Unsplash][Unsplash 1]

本文由 Fluid 用户创作，版权归原作者所有。

本文作者：Vince 原文地址：[https://i.vince.pub/posts/14677127/][https_i.vince.pub_posts_14677127]

**[点击跳转到 Wallhaven][Wallhaven 3]**

[Link 1]: https://aigisss.com/blog/posts/9604e2c7.html#demo
[Fluid Doc]: https://hexo.fluid-dev.com/docs/guide/#tag-%E6%8F%92%E4%BB%B6
[Wallpaper Hub]: /images/20220829/01cc296924224d3d85563915f69b802b.png
[Wallpaper Hub 1]: https://cdn.vince.pub/blog-file/photo/2020-04-17_175244.png
[Wallpaper Hub 2]: https://wallpaperhub.app/
[Wallhaven]: /images/20220829/dae234525a3d48b8a9775e34af97cb30.png
[Wallhaven 1]: https://cdn.vince.pub/blog-file/photo/2020-04-17_174841.png
[Wallhaven 2]: https://wallhaven.cc/
[Unsplash]: /images/20220829/03333e4bc9264993a6bdda9e5d480ed1.png
[Unsplash 1]: https://cdn.vince.pub/blog-file/photo/2020-05-14_000557.png
[https_i.vince.pub_posts_14677127]: https://i.vince.pub/posts/14677127/
[Wallhaven 3]: https://unsplash.com/