主题样式与Markdown

Sukap2023-11-262024-02-17

Front-matter

Page Front-matter

写法	解释
title	【必需】页面标题
date	【必需】页面创建日期
type	【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated	【可选】页面更新日期
description	【可选】页面描述
keywords	【可选】页面关键字
comments	【可选】显示页面评论模块 (默认 true)
top_img	可选】页面顶部图片
mathjax	【可选】显示mathjax (当设置mathjax的per_page: false时，才需要配置，默认 false)
katex	【可选】显示katex (当设置katex的per_page: false时，才需要配置，默认 false)
aside	【可选】显示侧边栏 (默认 true)
aplayer	【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐配置
highlight_shrink	【可选】配置代码框是否展开 (true/false) (默认为设置中highlight_shrink的配置)
top_single_background	【可选】部分页面的顶部模块背景图片

Post Front-matter

写法	解释
title	【必需】文章标题
date	【必需】文章创建日期
updated	【可选】文章更新日期
tags	【可选】文章标签
categories	【可选】文章分类
keywords	【可选】文章关键字
description	【可选】文章描述
top_img	【可选】文章顶部图片
cover	【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空)
comments	【可选】显示文章评论模块(默认 true)
toc	【可选】显示文章TOC(默认为设置中toc的enable配置)
toc_number	【可选】显示toc_number(默认为设置中toc的number配置)
toc_style_simple	【可选】显示 toc 简洁模式
copyright	【可选】显示文章版权模块(默认为设置中post_copyright的enable配置)
copyright_author	【可选】文章版权模块的文章作者
copyright_author_href	【可选】文章版权模块的文章作者链接
copyright_url	【可选】文章版权模块的文章连结链接
copyright_info	【可选】文章版权模块的版权声明文字
mathjax	【可选】显示mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false )
katex	【可选】显示 katex (当设置 katex 的 per_page: false 时，才需要配置，默认 false )
aplayer	【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐配置
highlight_shrink	【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
aside	【可选】显示侧边栏 (默认 true)
sticky	【可选】设置文章置顶(值越大文章越靠前，例如100)
swiper_index	【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index	【可选】首页右侧卡片组配置, 数字越小越靠前
ai	【可选】文章ai摘要
main_color	【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff

首页轮播图配置: swiper_index, 数字越小越靠前
首页卡片配置: top_group_index, 数字越小越靠前
page 中top_single_background, 可配置部分页面的顶部背景图片

只需要在你的文章顶部的Front-matter配置这swiper_index和top_group_index两个字段即可显示轮播图和推荐卡片

代码高亮样式

darker

darker

pale night

pale-night

light

light

ocean

ocean

mac

mac

mac light

mac-light

Markdown笔记

标题

用#表示标题，注意#后面有一个空格
# 一级标题
## 二级标题
### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

字体格式

*这是斜体*

_这也是斜体_
 
**这是粗体**

 __这也是粗体__
 
~~这上面有删除线~~

_斜体**加粗**斜体_

效果：
这是斜体

这也是斜体

这是粗体

这也是粗体

~~这上面有删除线~~

斜体加粗斜体

列表

无序列表

无序列表使用-、+和*作为列表标记：

注意后面有一个空格：
- Red
- Green
- Blue

* Red
* Green
* Blue

+ Red
+ Green
+ Blue

效果：

Green

Blue

有序列表

注意1.后面有一个空格
1.  first
2.  second
3.  third

效果：

First
Second
Third

引用

> 引用一句名言：        
        //注意>号后面有一个空格
>     引用代码块形势      
        // 此处>号后面有五个空格
多级引用：
> 一级引用
> > 二级引用
> > > 三级引用

效果：

引用一句名言：

    //注意>号后面有一个空格

引用代码块形势

    // 此处>号后面有五个空格

多级引用：

一级引用

二级引用

三级引用

代码

1
2
3

分为代码块和行内代码块
行内``代码``块
普通代码块开头与结尾加三个`

效果：
行内代码块

图片

使用链接插入图片

前面有！号，注意区分，插入链接没有！
感叹号必须是英文状态下输入，看看中英文的符号区别！！!!
中括号内为图片描述，可不添加

小括号内为图片的链接地址，也可以是本地地址

1
2
3

![]()
![图片描述(可忽略)](图片地址)
![Site-Background](/img/banner_1.jpg)

效果：

链接

[]()
[本文地址](https://blog.sukap.cn/posts/2)  
//只显示[]内的内容
<https://blog.sukap.cn/posts/2>     
 //一般显示蓝色链接

效果：

本文地址
 https://blog.sukap.cn/posts/2

分隔线

在一行中用三个及以上的星号*、减号-、下划线_来建立一个分隔线
行内不能有其他内容，也可以在星号或是减号中间插入空格。
1
2
3
***
---
* * *
效果：

锚点

jump 可以用其他字符或字符串代替，id 一致即可
效果与脚注类似，可以跳转之文中任意位置
1
[说明文字](#官方文档)
效果：
说明文字点击跳转至链接界面

反斜杠

Markdown 可以利用反斜杠来插入一些在语法中有其它意义的符号
例如：你想要用星号加在文字旁边的方式来做出强调效果（为了避免冲突）
你可以在星号的前面加上反斜杠，如果不加 \，# 后就会变为一级标题

Markdown 支持以下这些符号前面加上反斜杠来帮助插入普通的符号：

\   反斜线
`   反引号
*   星号
_   下划线
{}  花括号
[]  方括号
()  括弧
#   井字号
+   加号
-   减号
.   英文句点
!   感叹号

对比效果：
# 不加\,表示一级标题
\#  加了\，表示#

表格

居左：:----
居中：:----:或-----
居右：----:

|标题|标题|标题|
|:---|:---:|---:|
|居左测试|居中测试|居右测试|
|居左测试1|居中测试1|居右测试1|
|居左测试2|居中测试2|居右测试2|
|居左测试3|居中测试3|居右测试3|

为了效果，我只能用HTML强制渲染了
|标题|标题|标题|
|:---|:---:|---:|
|居左测试|<center>居中测试</center>|<p align="right">居右测试</p>|
|居左测试1|<center>居中测试1</center>|<p align="right">居右测试1</p>|
|居左测试2|<center>居中测试2</center>|<p align="right">居右测试2</p>|
|居左测试3|<center>居中测试3</center>|<p align="right">居右测试3</p>|

效果：

标题	标题	标题
居左测试	居中测试	居右测试
居左测试1	居中测试1	居右测试1
居左测试2	居中测试2	居右测试2
居左测试3	居中测试3	居右测试3