[toc]
## 方法1：`vue3-markdown-it`
套件：[`vue3-markdown-it`](https://github.com/JanGuillermo/vue3-markdown-it)
### Single Use

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script>
import Markdown from 'vue3-markdown-it';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '# Hello World!'
    }
  }
}
</script>

#### vue3 寫法

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script lang="ts" setup>
import Markdown from "vue3-markdown-it";

const source = "# HI";
</script>

:::danger
備註：不知道該怎麼當作插件使用 :cry:
:::

### 讀取本地的 `.md` 檔

fetch("../docs/YOUR_MARKDOWN.md")
    .then((res) => res.text())
    .then((res) => {
      source.value = res;
    });

### 套件 props
#### source: `string`
要顯示的內容
#### html: `boolean`
是否使用 html tag，預設是 false。

### 可能會遇到的問題
- `.md` 要放在 `/public` 底下，這樣 nuxt 打包後才能用，`/public/OO.md` 的路徑仍是 `/OO.md`。
- 因為 nuxt 放在 `/assets` 下的圖片會經過 webpack 打包，所以 `/assets` 下的圖片時，檔案名會改變 (可以到 `.output` 查看 build 完的樣子)。
- 所以不是要另外寫轉譯圖片 url 的方法，不然就是圖片也放在 `/public` 底下。

## 方法2：`@nuxt/content`
[官方文件](https://content.nuxt.com)
### 參考文章
:::info
[Nuxt Content Components](https://ithelp.ithome.com.tw/articles/10338636)
:::
### 安裝
1. 下載套件：`npm install @nuxt/content`
2. 安裝完後輸入：`npx nuxi module add content`

### 可能遇到的問題
- 讀不到`axios`，但重新`npm install`就好了。
- export 或 import type 前面要加 `type`

### 使用
#### 在 `/content` 下放你的文件，套件會將檔案轉成元件

content     
 ┣ AAA	
 ┃  ┣ index.md		
 ┃  ┗ ABC.md 
 ┣ BBB.md 

1. 可以直接使用相同路徑的元件

// /pages/BBB.vue
<template>
  <div>
    <ContentDoc></ContentDoc> // 找到相同路徑下的檔案
  </div>
</template>

2. 直接指定路徑

// /pages/ABC.vue
<template>
  <div>
    <ContentDoc path="/aaa/abc"></ContentDoc> // 找到相同路徑下的檔案
  </div>
</template>

#### 添加圖片
一樣是要放在 `/public` 下，路徑是 `/public/aaa.png` ，在引用時仍是 `/aaa.png`即可；同理，路徑是 `/public/image/aaa.png`，則引用為 `/image/aaa.png` 。
#### `[toc]` 語法不支援
需透過 `queryContent()` 來抓 `.md` 的 toc data，例如：

const { data } = await useAsyncData(() => queryContent("/YOUR_MARKDOWN").findOne());

其中 `data.body.toc` 就包含 toc 的資訊，再自己寫個元件來製作目錄，例如：

<nav>
  <ol>
    <li v-for="node2 in props.data" :id="node2.id" :key="node2.id">
      <a :href="`#${node2.id}`">{{ node2.id }}</a>
      <ol v-if="node2.children && node2.children.length > 0">
        <li v-for="node3 in node2.children" :id="node3.id" :key="node3.id">
          <a :href="`#${node3.id}`">{{ node3.id }}</a>
        </li>
      </ol>
    </li>
  </ol>
</nav>

#### 又恨又愛的typescript
用 `queryContent` 得到的東西不知道為什麼不能用官方提供的type `ParsedContent`，所以目錄我是直接存 `toc.links`：

import type { TocLink } from "@nuxt/content/dist/runtime/types";

const data = ref<TocLink[] | null>(null);
onMounted(async () => {
  await useAsyncData(() => queryContent(userguideUrl).findOne()).then((res) => {
    data.value = res.data.value?.body?.toc?.links as TocLink[];
  });
});

目錄接收也使用 `TocLink[]` 就好了。

至於要存 `queryContent` 的回傳值要怎麼宣告暫時不清楚>_<