导入文件

大约 3 分钟Markdown导入文件

让你的 VuePress 站点中的 Markdown 文件支持导入其他文件。

配置

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        include: true,
      },
    },
  }),
});







 
 
 



语法

使用 @include(filename) 导入文件。

如果要部分导入文件,你可以指定导入的行数

  • @include(filename{start-end})
  • @include(filename{start-})
  • @include(filename{-end})

同时你也可以导入文件区域:

  • @include(filename#region)

文件区域

文件区域是 vscode 中的一个概念,区域内容被 #region#endregion 注释包围。

这里有些例子:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- region snippet -->
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi,
      repellendus. Voluptatibus alias cupiditate at, fuga tenetur error officiis
      provident quisquam autem, porro facere! Neque quibusdam animi quaerat
      eligendi recusandae eaque.
    </p>
    <!-- endregion snippet -->
    <p>
      Veniam harum illum natus omnis necessitatibus numquam architecto eum
      dignissimos, quos a adipisci et non quam maxime repellendus alias ipsum,
      vero praesentium laborum commodi perferendis velit repellat? Vero,
      cupiditate sequi.
    </p>
  </body>
</html>

演示

@include(./demo.snippet.md):

二级标题

内容包含加粗文字和一些其他增强内容:

提示

你最近怎么样了? 😄

@include(./demo.snippet.md{9-13}):

提示

你最近怎么样了? 😄

@include(./demo.snippet.md#snippet):

内容包含加粗文字和一些其他增强内容:

高级用法

你还可以设置一个对象来自定义包含文件路径和包含行为。

interface IncludeOptions {
  /**
   * 处理 include 文件路径
   *
   * @default (path) => path
   */
  getPath?: (path: string) => string;

  /**
   * 是否深度导入包含的 Markdown 文件
   *
   * @default false
   */
  deep?: boolean;
}

例如: 你可以使用 @src 作为源文件夹的别名。

// .vuepress/config.ts
import { getDirname, path } from "@vuepress/utils";
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

const __dirname = getDirname(import.meta.url);

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        // 添加 `@src` 别名支持
        include: {
          getPath: (file) => {
            if (file.startsWith("@src"))
              return file.replace("@src", path.resolve(__dirname, ".."));

            return file;
          },
        },
      },
    },
  }),
});












 
 
 
 
 
 
 
 




此外,如果你想将 Markdown 文件直接放在实际文件旁边,但不希望它们呈现为页面,你可以在 VuePress 配置中设置 pagePatterns 选项。有关详细信息,请参阅 pagePatternsopen in new window

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  pagePatterns: ["**/*.md", "!*.snippet.md", "!.vuepress", "!node_modules"],

  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        include: true,
      },
    },
  }),
});