写文档

简介

NuxtBase 帮助开发者引入了 Nuxt 官方提供的@nuxt/content，并且封装好了完整的渲染和 UI。

能够非常方便的支持你编写文档内容，你可以在content/contents目录下编写你的文档内容

创建文档

NuxtBase 封装了<DocMenu/>组件，会默认的读取/content/docs/目录下的所有md文件，然后生成侧边栏文档目录。

如果你的文档具有多级，你的文件夹名称应该使用英文目录名称。然后在[...slug].vue中，修改pahtMap变量，将英文目录名称映射成为中文目录名称。

const pathMap = {
  start: "快速开始",
  tutorial: "教程",
};

文档渲染

文档渲染逻辑是在[...slug].vue中，文档目录和博客的渲染都是使用的该组件，NuxtBase 会根据isDoc变量判断这到底是博客渲染还是文档渲染。

Markdown 内容的渲染逻辑是在<ContentDoc/>组件中

<template>
  <!-- 博客 -->
  <Layout :hiddenFooter="true" v-if="!isDoc">
    <div class="max-w-4xl m-auto mt-4">
      <div
        class="flex justify-end font-semibold text-gray-800 hover:text-gray-700"
        @click="onBack"
      >
        <ArrowLeftCircleIcon class="w-6 h-6 mr-2" />返回
      </div>
      <div class="pb-16">
        <!-- markdown主体 -->
        <div
          class="markdown-body max-w-full"
          :class="{
            'pl-52': isDoc,
          }"
        >
          <ContentDoc>
            <template #not-found> <noFound></noFound></template>
          </ContentDoc>
        </div>
      </div>
    </div>
  </Layout>
  <!-- 文档 -->
  <div class="flex" v-else>
    <!-- 文档目录 -->
    <DocMenu :data="menuData" :pathMap="pathMap"></DocMenu>
    <div class="markdown-body max-w-full pl-52 pr-9 pb-16">
      <ContentDoc>
        <template #not-found> <noFound></noFound></template>
      </ContentDoc>
    </div>
  </div>
</template>

如果你对文档渲染的的前端 UI 不满意，你可以修改改组件的逻辑。

如果修改 Markdown 的样式

NuxtBase 默认提供了一套 markdown 的渲染 css 样式，你可以查看browser/assets/css/markdown.css。

.markdown-body {

}

如果你对于这个样式不满意，你可以在 Github 上找到你满意的 Markdown 样式，并且替换类名为.markdown-body