# markdown文档显示

## 1. content库的安装和使用

1. 安装content库

```bash
# 注意版本号，如果不指定版本号安装的是3.x的版本，3版本不支持自动路由
npm i @nuxt/content@2.13.4
```

1. 配置 `nuxt.config.ts`

```javascript
export default defineNuxtConfig({
  modules: ['@nuxt/content']
});
```

1. 创建 `content` 文件夹及目录结构，内容如下：

```bash
content
|-- docs
    |-- nuxt3 #文件夹
        |-- content.md #内容文件
```

1. 在pages目录下创建文件夹`docs`「对应content文件夹下的`docs`文件夹」，在此文件夹下创建nuxt3文件夹「对应content/docs/nuxt3」, 在此文件夹下创建`[...slug].vue`文件「此文件自动路由nuxt3文件夹下的所有目录和文件」，内容如下：

```xml
<template>
    <div>
      <ContentDoc />
    </div>
</template>

```

1. 此时可以在浏览器中访问`http://localhost:3000/docs/nuxt3/content`查看内容
2. 显示图片：
  - 图片目录放在/public/images/md 目录下，对应/conent/docs
    - 举例：
      - 物理路径：/public/images/md/nuxt3/log.png
      - 在/content/目录下做一个软链接：`ln -s /content/images /public/images`
      - md文件：/content/docs/nuxt3/content.md
      - 显示结果： 
      - ![](http://api.localhost-dev.com/www/wwwFile/TuqoYV_4pO3MR_cdc393b7-a494-4320-b405-fdf6a7b54175.png)
3. 文档目录显示：
  - 此处以/content/docs/nuxt3文件夹所有文件目录显示为例
    - 在/pages/docs/nuxt3目录下创建文件：cate.vue,具体内容如下：
    ```xml
    <script setup>
        const { data: articles } = await useAsyncData('docs-list', () =>
        queryContent('docs/nuxt3')
        .find()
        );

        console.log(articles);
    </script>

    <template>
    <ul>
        <li v-for="article in articles" :key="article._path">
        <!-- title 对应md文档的一级标题「# 一级标题」 -->
        <NuxtLink :to="article._path">{{ article.title }}</NuxtLink>
        </li>
    </ul>
    </template>
    ```

## 2.为「文档中心」增加栏目

```
1. 这里以增加「docker容器部署」为例 
2. 在/content/docs 目录下创建 docker-container 目录
3. 在docker-container目录下创建 1.index.md文件，是默认展示页面
4. 在/pages/docs/目录下创建docker-container目录
5. 在docker-container目录下创建「[...slug].vue」文件，内容如下：
```xml
<template>
    <div class="container">
    <div class="row">
        <div class=" mt-1 w-100">
        <h1 class="text-center">目录</h1> 
        <ul>
            <li v-for="article in articles" :key="article._path">
            <NuxtLink :to="article._path">{{ article.title }}</NuxtLink>
            </li>
        </ul>
        
        </div>
        <hr>
        <div class="w-100">
        <ContentDoc />
        </div>
    </div>
    </div>
</template>

<script setup>
const { data: articles } = await useAsyncData('docs-list', () =>
    queryContent('docs/docker-container')
    .find()
);
</script>

<style lang="scss" scoped>
    li {
    margin-bottom: 0.2rem;
    }
</style>
```
6. 修改/layouts/components/headerNav.vue 文件，内容如下：
```xml
 <li  calss="nav-item dropdown ">
    <a href="#" class="text-white nav-link dropdown-toggle "
        data-bs-toggle="dropdown" >文档中心</a>
    <ul class="dropdown-menu m3">
        <!-- 此处为增加 docker部署栏目 -->
        <li><NuxtLink class="dropdown-item" @click="clearClassShow()" to="/docs/docker-container">docker容器部署</NuxtLink></li>
        <li><NuxtLink class="dropdown-item" @click="clearClassShow()" to="/docs/nuxt3">nuxt3</NuxtLink></li>
        <li><NuxtLink class="dropdown-item" @click="clearClassShow()" to="/docs/gzh">微信公众号</NuxtLink></li>
    </ul>
    </li>
```
```

## 3.code代码高亮「这里使用highlight.js库」

1. 资料：
  - 官网：[https://highlightjs.org/](https://highlightjs.org/)
2. 安装highlight.js库

```bash
npm install highlight.js
```

1. 使用

```javascript
//导入核心库
import hljs from 'highlight.js/lib/core';
//导入支持各种code的样式
import yaml from 'highlight.js/lib/languages/yaml';
import javascript from 'highlight.js/lib/languages/javascript';
import bash from 'highlight.js/lib/languages/bash';
import shell from 'highlight.js/lib/languages/shell';
import nginx from 'highlight.js/lib/languages/nginx';
//加载github样式
import 'highlight.js/styles/github.css'; 
import 'highlight.js/styles/github-dark.css'; // 使用暗色主题

// 注册语言
hljs.registerLanguage('bash', bash);
hljs.registerLanguage('yaml', yaml);
hljs.registerLanguage('javascript', yaml);

onMounted(() => {
    //高亮所有code代码块
    document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
    });
});
```

1. 怎么查看支持哪些code语言
  - 查看：`node_modules/highlight.js/lib/languages` 目录里面有所有支持的语言