hexo-Fluid主题使用手册

hexo-Fluid主题使用手册

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

前言

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

文章内容

熟悉 Markdown 语法

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

表格

站点地址介绍
Fluid Docshttps://hexo.fluid-dev.com/docs/Fluid 官方文档
Hexo-theme-fluidhttps://github.com/fluid-dev/hexo-theme-fluidFluid Github Repo
Fluid Bloghttps://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 官方博客
Copy

脚注

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

脚注演示[^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

页内跳转

点击到达跳转位置演示

<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 页面镶套可以帮助我们更好的展示一个页面。比如以下演示页面。

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

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

善用 Tag 组件

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

配图

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

Wallpaper Hub

Wallpaper Hub

Wallpaper Hub

点击跳转到 Wallpaper Hub

Wallhaven

Wallhaven

Wallhaven

点击跳转到 Wallhaven

Unsplash

Unsplash

Unsplash

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

本文作者:Vince 原文地址:https://i.vince.pub/posts/14677127/

点击跳转到 Wallhaven

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

怎么用python做战斗机_关于python文件操作

总是记不住API。昨晚写的时候用到了这些&#xff0c;但是没记住&#xff0c;于是就索性整理一下吧&#xff1a;python中对文件、文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块。得到当前工作目录&#xff0c;即当前Python脚本工作的目录路径: os.getcwd()返回指定目…

Hexo-fluid主题设置统计博客阅读量

Hexo-fluid主题设置统计博客阅读量 开始小插曲&#xff1a; 我使用的是sublime文本编辑器&#xff1a; [官网] https://www.sublimetext.com/ 正戏开始 查找关键字&#xff1a;web_analytics (快捷键ctrlF) 这里我使用一个第三方服务Leancloud来统计文章的阅读量。 首先…

使用Hexo写博客

尽管 Hexo 支持 MarkDown&#xff0c;但是我们却不能像写单独的 MarkDown 文档时那样肆无忌惮。由于我们所写的文档是需要被解析为静态网页文件的&#xff0c;所以我们必须严格遵从 Hexo 的规范&#xff0c;这样才能解析出条理清晰的静态网页文件。新建文档 假设我们的文章名为…

mysql过滤效率和java过滤效率_如何合理选择初中高效过滤器的效率?

利菲尔特环保科技点击蓝字 关注我们 各种型号的空气过滤器有不同的标准和使用效率&#xff0c;今天利菲尔特为您介绍各种类型的空气过滤器在不同地方的应用。一般情况下&#xff0c;最末一级过滤器决定空气净化的程度&#xff0c;上游的各级过滤器只起保护作用&…

宝塔面板搭建autoPicCdn:一款基于jsdelivr-Github的免费CDN图床

autoPicCdn是白嫖Github的存储空间&#xff0c;通过jsdelivr全球加速(含有国内节点)。实现图床加速的目的。加速效果非常不错&#xff0c;用站长工具检测&#xff0c;也是一片绿油油&#xff0c;所以用来存储一些静态文件是最合适不过了。 相关文章&#xff1a;GithubjsDelivrP…

物流设计大赛优秀作品_中国外运杯第七届全国大学生物流设计大赛案例专家评审会在京召开...

2020年9月10日&#xff0c;“中国外运杯”第七届全国大学生物流设计大赛案例专家评审会在京召开。中国物流与采购联合会副会长任豪祥、中国物流与采购联合会原副会长、中国物流与采购联合会专家委员会主任戴定一、中国外运股份有限公司首席数字官高翔等有关领导及来自行业企业、…

WordPress博客网站搬家和换域名方法

WordPress博客网站搬家和换域名方法方案一 开设个人博客的朋友使用WordPress不在少数&#xff0c;那么也难免不了更换空间和域名的情况&#xff0c;由于笔者亲历了一次更换空间和域名的情况&#xff0c;将博客从AAA.com 更改为 BBB.com&#xff0c;所以本文就分享一下更换域名…

Hexo部署出现错误err-Error-Spawn-failed解决方式

Hexo部署出现错误err: Error: Spawn failed解决方式部署过程中可能会出现错误 fatal: unable to access https://github.com/a956551943/a956551943.github.io/: Encountered end of file FATAL {err: Error: Spawn failedat ChildProcess.<anonymous> (/usr/local/src/h…

python输出国际象棋棋盘_python输出国际象棋棋盘的实例分享

国际象棋是当今国际上最流行的智力体育运动项目。青年人下棋可以锻炼思维、增强记忆力和培养坚强的意志&#xff1b;中年人下棋可以享受美学&#xff1b;老年下棋可以很好的休息娱乐。国际象棋游戏有自己的规则&#xff0c;需要两个人将棋子落在棋盘上。棋子落在棋盘上事件&…

细思极恐---十年生死两茫茫,通信人,意欲亡。

每一位通信人&#xff0c;都可能面对过来自亲友的“灵魂三问”。 “通信究竟是什么&#xff1f;” “通信从哪里来&#xff1f;” “通信要往哪里去&#xff1f;” 讲真的&#xff0c;我不知道。。。。本篇博文是模仿codesheep羊哥写的&#xff0c;因为我们都学的通信&#x…

python矩阵运算dot_numpy中的dot矩阵乘法

本来以为这辈子都和数学没啥关系了&#xff0c;结果遇到了np.dot()。numpy中的“*”和“dot”运算是完全不同的&#xff0c;前者是直接计算&#xff0c;后者是矩阵相乘。(venv) [rootlocalhost tf]# pythonPython 3.4.5 (default, May 29 2017, 15:17:55)[GCC 4.8.5 20150623 (…

归并排序--Java

归并排序&#xff1a; 排序原理&#xff1a; 1、尽可能的一组数据拆分成两个元素相等的子组&#xff0c;并对每一个子组继续拆分&#xff0c;知道拆分后的每个子组的元素个数是1为止。 2、将相邻的两个子组进行合并成一个有序的大组 3、不断重复步骤2&#xff0c;直到最终只…

9008刷机模式写入超时刷机帮_刷机时没有成功,然后变成黑砖,usb接口直接变成未知设备~希望大神救助!...

线刷宝用户协议本协议是用户 (自然人、法人或社会团体)与杭州登先网络科技有限公司(以下简称"登先网络")之间关于"线刷宝"软件产品(以下简称"本软件产品")的法律协议。一旦安装、复制或以其他方式使用本软件产品&#xff0c;即表示同意接受协议各…

希尔排序--Java

希尔排序 排序原理&#xff1a; 1、选定一个增量h&#xff0c;按照增长量h作为数据分组的依据&#xff0c;对数据进行分组 2、对分好组的每一组数据完成插入排序 3、减小增长量&#xff0c;最小减为1&#xff0c;重复第二步操作 其中&#xff0c;希尔排序确定增长量h的规则…

插入排序--Java

插入排序&#xff1a; 原理&#xff1a; 1、把所有的元素分为两组&#xff0c;已经排序的和未排序的 2、找到未排序的组中的第一个元素&#xff0c;向已经排序的组中进行插入 3、倒叙遍历已经排序的元素&#xff0c;依次和待插叙的元素进行比较&#xff0c;直到找到一个元素…

redis 缓存预热_Redis:缓存雪崩、缓存穿透、缓存预热、缓存更新、缓存降级

一、缓存雪崩缓存雪崩我们可以简单的理解为&#xff1a;由于原有缓存失效&#xff0c;新缓存未到期间(例如&#xff1a;我们设置缓存时采用了相同的过期时间&#xff0c;在同一时刻出现大面积的缓存过期)&#xff0c;所有原本应该访问缓存的请求都去查询数据库了&#xff0c;而…

用接口写冒泡排序

用接口写冒泡排序&#xff1a; package demo02.maopaoapi.Bubble; public class Bubble {/***对数组a中的元素进行排序*/public static void sort(Comparable[] a){for (int i a.length-1; i >0; i--) {for (int j 0; j < i; j) {//比较索引j和索引j1处的值if (greate…

vue 根据swagger 生成接口_采用vue编写的功能强大的swagger-ui页面

think-swagger-ui-vueleswagger-ui有非常多的版本&#xff0c;觉得不太好用&#xff0c;用postman&#xff0c;每个接口都要自己进行录入。所以在基于think-vuele进行了swagger格式json的解析&#xff0c;自己实现了一套swaggerui界面。swagger分为后端数据提供方方和前端页面展…

选择排序--Java

选择排序&#xff1a;合适的元素放在合适的位置 1、每一次遍历的过程中&#xff0c;都假定第一个索引处的元素是最小值&#xff0c;和其他索引处的值依次进行比较&#xff0c;如果当前索引处的值大于其他某个索引处的值&#xff0c;则假定其他某个索引处的只为最小值&#xff…

python re正则查找_python正则表达式 - re

1&#xff0c;匹配符号基本元字符. : 任意字符&#xff0c;除了\n&#xff0c;flags设置为DOTALL(S)可以让.匹配\n|&#xff1a;逻辑或\&#xff1a;转义()&#xff1a;捕获组空白字符[\b] : 回退\f : 换页\n : 换行\r : 回车\t : 制表tab\v : 垂直制表特定字符\d : 数字&#…