markdown文档显示

1. content库的安装和使用

安装content库

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

配置 nuxt.config.ts

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

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

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

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

<template>
    <div>
      <ContentDoc />
    </div>
</template>

此时可以在浏览器中访问http://localhost:3000/docs/nuxt3/content查看内容
显示图片：
- 图片目录放在/public/images/md 目录下，对应/conent/docs
- 举例：
  - 物理路径：/public/images/md/nuxt3/log.png
  - 在/content/目录下做一个软链接：ln -s /content/images /public/images
  - md文件：/content/docs/nuxt3/content.md
```
![alt text](../../images/md/nuxt3/logo.png)
```
  - 显示结果：

文档目录显示：

此处以/content/docs/nuxt3文件夹所有文件目录显示为例
在/pages/docs/nuxt3目录下创建文件：cate.vue,具体内容如下：

<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库」

资料：
- 官网：https://highlightjs.org/
安装highlight.js库

npm install highlight.js

使用

//导入核心库
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);
    });
});

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

本页目录

1. content库的安装和使用
2.为「文档中心」增加栏目
3.code代码高亮「这里使用highlight.js库」