写博客

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

能够非常方便的支持你编写博客内容，你可以在content/blogs目录下编写你的博客内容，访问对应的路径，就能查看你的博客内容了

编写你的博客

在content/blogs目录下新建一个md文件，比如hello-nuxtbase.md，然后在文件中编写你的博客内容

# Hello NuxtBase

欢迎使用 NuxtBase

然后访问前端地址/blogs/hello-nuxtbase，就能看到你的博客内容了。

博客列表

当你访问/blog页面时，这里展示了你对应的博客页面的入口。NuxtBase 不会自动读取你的博客内容，因为这个页面我期望留给开发者，实现高度可配置。

你可以访问/pages/blog.vue，修改博客列表的展示 UI 逻辑，以及填写你期望展示的博客内容和访问链接

博客渲染

博客的渲染逻辑是在[...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