126 lines
2.7 KiB
Markdown
126 lines
2.7 KiB
Markdown
|
---
|
||
|
|
# 這是文章的標題
|
||
|
|
title: 頁面配置
|
||
|
|
# 你可以自定義封面圖片
|
||
|
|
cover: /assets/images/cover1.jpg
|
||
|
|
# 這是頁面的圖標
|
||
|
|
icon: file
|
||
|
|
# 這是側邊欄的順序
|
||
|
|
order: 3
|
||
|
|
# 設置作者
|
||
|
|
author: Ms.Hope
|
||
|
|
# 設置寫作時間
|
||
|
|
date: 2020-01-01
|
||
|
|
# 一個頁面可以有多個分類
|
||
|
|
category:
|
||
|
|
- 使用指引
|
||
|
|
# 一個頁面可以有多個標籤
|
||
|
|
tag:
|
||
|
|
- 頁面配置
|
||
|
|
- 使用指引
|
||
|
|
# 此頁面會在文章列表置頂
|
||
|
|
sticky: true
|
||
|
|
# 此頁面會出現在星標文章中
|
||
|
|
star: true
|
||
|
|
# 你可以自定義頁尾
|
||
|
|
footer: 這是測試顯示的頁尾
|
||
|
|
# 你可以自定義版權資訊
|
||
|
|
copyright: 無版權
|
||
|
|
---
|
||
|
|
|
||
|
|
`more` 註解之前的内容被視為文章摘要。
|
||
|
|
|
||
|
|
<!-- more -->
|
||
|
|
|
||
|
|
## 頁面標題
|
||
|
|
|
||
|
|
The first H1 title in Markdown will be regarded as page title.
|
||
|
|
|
||
|
|
Markdown 中的第一個 H1 標題會被視為頁面標題。
|
||
|
|
|
||
|
|
你可以在 Markdown 的 Frontmatter 中設置頁面標題。
|
||
|
|
|
||
|
|
```md
|
||
|
|
---
|
||
|
|
title: 頁面標題
|
||
|
|
---
|
||
|
|
```
|
||
|
|
|
||
|
|
## 頁面資訊
|
||
|
|
|
||
|
|
你可以在 Markdown 的 Frontmatter 中設置頁面資訊。
|
||
|
|
|
||
|
|
- 作者設置為 Ms.Hope。
|
||
|
|
- 寫作日期為 2020 年 1 月 1 日
|
||
|
|
- 分類為 “使用指引”
|
||
|
|
- 標籤為 “頁面配置” 和 “使用指引”
|
||
|
|
|
||
|
|
## 頁面内容
|
||
|
|
|
||
|
|
你可以自由在這裡書寫你的 Markdown。
|
||
|
|
|
||
|
|
::: tip 圖片引入
|
||
|
|
|
||
|
|
- 你可以將圖片和 Markdown 文件放置在一起使用相對路徑進行引用。
|
||
|
|
- 對於 `.vuepress/public` 文件目錄的圖片，請使用絕對連結 `/` 進行引用。
|
||
|
|
|
||
|
|
:::
|
||
|
|
|
||
|
|
## 元件
|
||
|
|
|
||
|
|
每個 Markdown 頁面都會被轉換為一個 Vue 元件，這意味著你可以在 Markdown 中使用 Vue 語法：
|
||
|
|
|
||
|
|
{{ 1 + 1 }}
|
||
|
|
|
||
|
|
<!-- markdownlint-disable MD033 -->
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
<li v-for="i in 3">{{ i }}</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<!-- markdownlint-enable MD033 -->
|
||
|
|
|
||
|
|
你也可以創建並引入你自己的元件。
|
||
|
|
|
||
|
|
<MyComponent />
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { defineComponent, h, ref } from 'vue';
|
||
|
|
|
||
|
|
const MyComponent = defineComponent({
|
||
|
|
setup() {
|
||
|
|
const input = ref('Hello world!');
|
||
|
|
const onInput = (e) => {
|
||
|
|
input.value = e.target.value;
|
||
|
|
};
|
||
|
|
|
||
|
|
return () => [
|
||
|
|
h('p', [
|
||
|
|
h('span','輸入: '),
|
||
|
|
h('input', {
|
||
|
|
value: input.value,
|
||
|
|
onInput,
|
||
|
|
}),
|
||
|
|
]),
|
||
|
|
h('p', [h('span','輸出: '), input.value]),
|
||
|
|
];
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
主題包含一些有用的元件。這裡是一些例子:
|
||
|
|
|
||
|
|
- 文字結尾應該有深藍色的 徽章文字 徽章。 <Badge text="徽章文字" color="#242378" />
|
||
|
|
|
||
|
|
- 一個卡片:
|
||
|
|
|
||
|
|
```component VPCard
|
||
|
|
title: Mr.Hope
|
||
|
|
desc: Where there is light, there is hope
|
||
|
|
logo: https://mister-hope.com/logo.svg
|
||
|
|
link: https://mister-hope.com
|
||
|
|
background: rgba(253, 230, 138, 0.15)
|
||
|
|
```
|