Front-matter

!!!这个重要!!!
带有着重号的表示必填,请务必留意

参数 详细解释
title 页面标题
date 页面创建日期,一般会自动生成
type 页面链接,很重要哦
updated 页面更新日期
description 页面描述
keywords 页面关键字
comments 页面页面评论模块
top_img 页面顶部图片
aside 显示侧边栏 (默认 true)
highlight_shrink 配置代码框是否展开 (true/false)
sticky 文章置顶优先级
categories 分类
swiper_index(安装插件才有) 顶轮播图顺序,非负整数,数字越大越靠前

既然看到这个表格了,那我就随便讲讲这个是怎么画的吧
代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| 参数 | 详细解释 |
| :---: | :----: |
| {% emp title %} | 页面标题 |
| {% emp date %} | 页面创建日期,一般会自动生成 |
| {% emp type %} | 页面链接,很重要哦 |
| updated | 页面更新日期 |
| description | 页面描述 |
| keywords | 页面关键字 |
| comments | 页面页面评论模块 |
| top_img | 页面顶部图片 |
| aside | 显示侧边栏 (默认 true) |
| highlight_shrink | 配置代码框是否展开 (true/false)|
其中要注意| :---: | :----: |很重要哦,我们一般使用三个以上的---表示表格
当你不需要对文字位置设置时不需要加 :
居中就 :---: 向左对其 :--- 向右对齐---:
里面的文字样式就可以按照自己的心情去改写
不一定都有用,具体情况要具体分析

Markdown 标题语法

要创建标题,请在单词或短语前面添加井号 (#) 。# 的数量代表了标题的级别,一共有6级。

Markdown 段落语法

在一行的末尾添加两个或多个空格,然后按回车键,即可创建一个换行(
)。
当然你也可以直接按回车键(这个表示你已经完成这段的编辑要开始下一段了)。
但是你可不要小瞧这个换行,有的时候你的bug就很可能是一共小小的换行 导致的

Markdown 强调语句

用左右两个星号或下划线包裹着你要强调的对象(加粗方法)

tmd 累死我了

用左右一个星号或下划线包裹着你要强调的对象(斜体)

tmd 累死我了

用左右三个星号或下划线包裹着你要强调的对象(斜体加粗)

tmd 累死我了

Markdown 引用语法

要创建块引用,请在段落前添加一个 > 符号。
效果如下:

hello! welcome!

块引用可以包含多个段落。为段落之间的空白行添加一个 > 符号。
效果如下:

他好

我也好

当然了,肯定少不了套娃(嵌套)
效果如下:

他好

  • 我也好(-表示点)

Markdown 列表语法

  • 当我们需要创建有序列表时可以在每个列表项前添加数字并紧跟一个英文句点。数字不必按数学顺序排列,但是列表应当以数字 1 起始
  • 要创建无序列表,请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+) 。缩进一个或多个列表项可创建嵌套列表。
  • 代码块通常采用四个空格或一个制表符缩进。当它们被放在列表中时,请将它们缩进八个空格或两个制表符。
    代码如下:
1
2
3
4
1. First item
2. Second item
3. Third item
4. Fourth item

Markdown 代码语法

当你要将单词或者短语表示为代码的时候可以用(``)也可以用html
效果如下:

i love you

<code>i love you </code>
so easy

Markdown 分隔线语法

  • 要创建分隔线,请在单独一行上使用三个或多个星号 (***)、破折号 (—) 或下划线 (___) , 并且不能包含其他内容

为了兼容性,请在分隔线的前后均添加空白行。




Markdown 链接语法

超链接Markdown语法代码:[超链接显示名](超链接地址 "超链接title")
对应的HTML代码:<a href="超链接地址" title="超链接title">超链接显示名</a>
使用尖括号可以很方便地把URL或者email地址变成可点击的链接。如下:
https://2021dt.github.io/欢迎来玩
强调链接, 在链接语法前后增加星号。 要将链接表示为代码,请在方括号中添加反引号。

Markdown 图片语法

这个和超链接的写法大同小异

  • 插入图片Markdown语法代码:![图片alt](图片链接 "图片title")。
  • 对应的HTML代码:<img src="图片链接" alt="图片alt" title="图片title">
是不是很简单!

Markdown 内嵌 HTML 标签

这个没什么好讲的,看看官方文档怎么说:

  • HTML 的行级內联标签如 <span>、<cite>、<del> 不受限制,可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯,甚至可以不用 Markdown 格式,而采用 HTML 标签来格式化。例如:如果比较喜欢 HTML 的 <a> 或 <img> 标签,可以直接使用这些标签,而不用 Markdown 提供的链接或是图片语法。当你需要更改元素的属性时(例如为文本指定颜色或更改图像的宽度),使用 HTML 标签更方便些。
  • Markdown设置字体大小、颜色、类型、加粗

<font size=1 color=red face="华文彩云">字体大小size=1</font>
size 范围在1-7

既然都支持html那我整点花活也可以吧

  • 想要达到这种和鼠标联动的字体显示,你只需要用以下代码就可以实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.hover-text {
opacity: 0;
transition: opacity 0.3s ease;
}

.hover-text.active {
opacity: 1;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
const hoverTextElements = document.querySelectorAll('.hover-text');

hoverTextElements.forEach(function(element) {
element.addEventListener('mouseenter', function() {
element.classList.add('active');
});

element.addEventListener('mouseleave', function() {
element.classList.remove('active');
});
});
});
</script>

<p>这是一段正常的文本,<span class="hover-text">将你要联动的文字填写在这里</span></p>
  • 当你需要口是心非的时候你可以试试 我,我,我才没有这样想呢
    代码如下:

<s>我,我,我才不想教你呢!</s> 或者 ~~那,那你就拿去吧!~~

  • 当然你也可以发个小牢骚,试试将鼠标移到这里看看?😏
    代码如下:

<div title="鼠标显示文本">直接显示文本</div>

当然Markdown的玩法语法肯定不止这些,但是只要掌握基础的语法一样可以写的很好看。不过看完这篇文章我还是推荐你去看看官方文档,这个真的很重要。
👉https://markdown.com.cn/intro.html👈
对了扔个表情包链接👉https://gist.github.com/rxaviers/7360908👈