Skip to content

浏览数:0

Markdown 常见用法

.md 文档头说明

---
title: 你的标题
description: 此份文档的描述
aside: false | true   //是否显示右侧导航列
outline: [2, 3]       // 导航列抓取标题深度
sidebar: false | true  //是否显示左侧侧边栏
borderless: true | false  //是否有边框
tags:
  - tag1
  - tag2
  - tag3
---

# {{ $frontmatter.title }}

首先当要创建页面时,新建一个 .md 档在 docs 底下,
请依您的需求放入对应的文件夹(若不清楚请参考 /readme.md 文件夹结构说明)
除了 /docs/event 底下可能有部分事件用英文取名稍嫌困难,
可以用 中文名称.md 的格式命名外,
其余文件名务必是纯英文、半角数字跟 - 组成,
例如

example-page.md

此文件名在 wiki 中不会对外显示

  • title
    填入你的标题(可以是中文, 英文与数字),此标题会对外显示。
    透过 runtime API 自动取得并显示在# Markdown 常见用法的位置。

  • description
    用来描述此页面的内容(不对外显示)。

  • tag
    用来指定您创作文章的特性,可以有多个类别,也可以超过 3 个。 一般来说tag是在不确定目标时辅助搜索使用, 所以建议别打太长。

  • aside: false
    默认为 true,设成 false 可以让右侧的标题导览消失,
    觉得页面不够大的时候可以加上这一行。

  • outline: [2, 3]
    决定右侧标题导览要抓取的标题区间, 默认为 2,也就是只抓前缀为 ## 的标题到导览
    如范例设置 [2, 3],则会将 ### 的标题放在 ## 底下。
    本页就有打开此选项, 如右侧的导览。

  • sidebar: false
    默认为 true,设成 false 可以让左侧的侧边栏消失,
    觉得页面不够大的时候可以加上这一行。

  • borderless: true 自定义
    默认为 false,设成 true 可以让文章的宽度呈现无边界样式,
    搭配上面的 asidesidebar 可以最大程度的拉伸内容,
    内容如果会变化的话,宽度也会动态改变。

💡提示

除此以外的表头属性,可参考官方文档

.md 文档头范例

---
title: 人物列传-唐默铃(小师妹)
description: 描述小师妹的人物故事、与展示小师妹的图片、特点、癖好等。
aside: false // 关闭右侧导览列
outline: [2, 3] // 由于导览列关闭了,该行无效
sidebar: true // 打开左侧侧边栏,如果该页面有侧边栏会显示
borderless: true // 内文宽度无边界(但会被导览列跟侧边栏挡住)
tags:
  - 唐门
  - 可攻略女角
  - girl0
  - 矮
  - 内向
  - 天下第一
  - 官方内定预设女主角
---

# {{ $frontmatter.title }}

Markdown 文章常用语法

📃内容

此处只列出常用语法,更多语法请参考官方文档

换行

在一个句子最后打上两个空白,即为 markdown 换行效果。
(万一不行, 可考虑 html 换行效果:<br>)


这是第一行
这是第二行


源代码
markdown
这是第一行  
这是第二行

超链接


wikilink
龙湘
内部链接
龙湘
外部链接
https://www.google.com


源代码
markdown
wikilink  
[[龙湘]]  
内部链接  
[龙湘](/people/characters/girl8)  
外部链接  
[https://www.google.com](https://www.google.com)

注解:关于 wikilink


标题

标题只会使用两种 ##, ###, 依序表示 H2, H3 等级标题。
且前须有空行、换行,标题后必须空一格,才会被认为是标题,否则会被视为一般文字。

markdown
## 二级标题

### 三级标题

纯文字块(内置可拷贝)

纯文字块与反引号有高度关联。
其中可拷贝的文字块,会在头尾加上 3 个反引号(```),方便拷贝。
markdown用来提示开发者,现在使用的是 md 文件,建议加上。


markdown
纯文字块(内置可拷贝)

源代码
markdown
<pre><code>```markdown
  纯文字块(内置可拷贝)
```</code></pre>

行内纯文字块(无内置拷贝)


hello 行内纯文字块test


源代码
markdown
`行内纯文字块`

图片


赵活的图片,完整路径龙湘大头贴, 相对路径


源代码
markdown
![赵活的图片,完整路径](https://i.imgur.com/WlPuE8U.png)
![龙湘大头贴, 相对路径](/images/characters/girl_8/icon_girl8.webp)

💡提示

注:本地图片放在docs/public下时,网址请使用相对路径。

⚠️警告

若确认有上传图片到正确位置,却显示不出来,通常是路径有问题。
请给出上传目标位置的图片路径,确认是否有上传成功后再发问。


表格


ID姓名
1微笑A
2微笑B
源代码

我们可以在 .md 档中使用 HTML5 的语法
比如说, Markdown 的表格是长这样的

| ID | 姓名  |
|----|-----|
| 1  | 微笑A |
| 2  | 微笑B |

这个表格可以替换成 HTML 如以下

<table>
    <tr>
        <td>ID</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td>1</td>
        <td>微笑A</td>
    </tr>
    <tr>
        <td>2</td>
        <td>微笑B</td>
    </tr>
</table>

当数据量增加时,
相比起 Markdown 原本的表格,HTML 的表格格式更易于维护。

vitepress 的自订 markdown

消息盒子

Markdown
::: info
这是消息盒子
:::

::: tip
这是提示盒子
:::

::: tip 改名
这是改变标题的提示盒子
此处列出的所有盒子都可以改变标题喔!
:::

::: warning
这是警告盒子
:::

::: danger
这是危险盒子
:::

::: details
这是可以收纳折叠的盒子
:::

效果:

📃内容

这是消息盒子

💡提示

这是提示盒子

改名

这是改变标题的提示盒子
此处列出的所有盒子都可以改变标题喔!

⚠️警告

这是警告盒子

☢️危险

这是危险盒子

📖详细内容

这是可以收纳折叠的盒子

外部工具