这一部分来了解一下ArticlePage文章页组件。

一、page布局

当在 Markdown 文档将 frontmatter.layout 设置为 page，VitePress 不会对该 Markdown 生成的文章页应用任何样式，这对于需要创建一个完全自定义的页面时很有用。当没有设置frontmatter.layout时，默认使用的是doc布局，是这样的：

当改为page布局，会变成这样：

二、文章页组件应用

1. 基础用法

构建一个基础的文章页框架

一、一级标题

1. 二级标题

aaa

1.1 三级标题

bbb

二、一级标题

1. 二级标题

ccc

1.1 三级标题

ddd

<script setup lang="ts">
import { MtArticlePage } from "vitepress-theme-mist";
</script>

<template>
  <MtArticlePage class="demo-article-page-basic">
    <h1>一、一级标题</h1>
    <h2>1. 二级标题</h2>
    <p>aaa</p>
    <h3>1.1 三级标题</h3>
    <p>bbb</p>
    <h1>二、一级标题</h1>
    <h2>1. 二级标题</h2>
    <p>ccc</p>
    <h3>1.1 三级标题</h3>
    <p>ddd</p>
  </MtArticlePage>
</template>

<style>
/* 当前示例位于文章页内，自动应用文章页内的样式，因此这里需要取消父元素样式影响，实际不需要这段代码 */
.demo-article-page-basic {
  all: initial;
}
</style>

隐藏源代码

2. 使用doc配置项

此组件可以使用 doc 配置项来加载 VitePress 的默认文档样式。

<script setup lang="ts">
import { MtArticlePage } from "vitepress-theme-mist";
</script>

<template>
  <MtArticlePage doc>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>aaa</p>
    <h3>三级标题</h3>
    <p>bbb</p>
  </MtArticlePage>
</template>

隐藏源代码

在这个示例中：

• articlePage/doc-iframe.vue 是用于在文档中展示效果的 iframe 组件，它使用了 VitePress 的 withBase 函数来正确处理基础路径，显示的效果是layout为false的articlePage/doc.md文档中使用<MtArticlePage doc />组件的效果。

• articlePage/doc.vue 是展示<MtArticlePage doc />的语法源码文件，effect的articlePage/doc-iframe文件是Democode的效果展示，file是Democode中的源码展示。

3. 大纲栏

当存在 h1 到 h6 标题标签时，可以使用 aside 配置项来自动生成一个大纲栏。

<script setup lang="ts">
import { MtArticlePage } from "vitepress-theme-mist";
</script>

<template>
  <MtArticlePage doc aside>
    <h1 id="一级标题">
      一级标题
      <a class="header-anchor" href="#一级标题" aria-label="Permalink to '一级标题'" />
    </h1>
    <h2 id="二级标题">
      二级标题
      <a class="header-anchor" href="#二级标题" aria-label="Permalink to '二级标题'" />
    </h2>
    <p>Teek 是一个轻量、简洁高效、灵活配置的 VitePress 主题</p>
    <h3 id="三级标题">
      三级标题
      <a class="header-anchor" href="#三级标题" aria-label="Permalink to '三级标题'" />
    </h3>
    <p>Teek 是一个轻量、简洁高效、灵活配置的 VitePress 主题</p>
  </MtArticlePage>
</template>

隐藏源代码

API

配置项

名称	说明	类型	默认值
doc	是否是文档页（使用 VitePress 文档样式）	boolean	false
aside	是否使用大纲栏	boolean	false

使用 aside 配置项的前提是要有 h1 到 h6 标题标签，且标题标签里要有 a 标签，如：

<script setup lang="ts">
import { MtArticlePage } from "vitepress-theme-teek";
</script>

<template>
  <MtArticlePage doc aside>
    <h1 id="一级标题">
      一级标题
      <a class="header-anchor" href="#一级标题" aria-label="Permalink to '一级标题'" />
    </h1>
    <h2 id="二级标题">
      二级标题
      <a class="header-anchor" href="#二级标题" aria-label="Permalink to '二级标题'" />
    </h2>
    <p>VitePress-theme-mist</p>
  </MtArticlePage>
</template>