Включение файлов

Около 3 минMarkdownДемонстрация кодаВключение файлов

Пусть файл Markdown на вашем сайте VuePress поддерживает, включая другие файлы.

Конфиг

// .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})

Also you can include file region:

  • @include(filename#region)

File region

File region is a concept in vscode, where the region content is surrounded by #region and #endregion comments.

Here are some examples:

<!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):

Заголовок 2

Контент, содержащий жирный текст и некоторые функции Markdown Enhance:

Совет

Эй, как ты? 😄

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

Совет

Эй, как ты? 😄

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

Контент, содержащий жирный текст и некоторые функции Markdown Enhance:

Продвинутый

Вы также можете настроить объект для настройки пути к включаемому файлу и поведения включения.

interface IncludeOptions {
  /**
   * handle include filePath
   *
   * @default (path) => path
   */
  getPath?: (path: string) => string;

  /**
   * Whether deep include files in included Markdown files
   *
   * @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: {
        // Add `@src` alias support
        include: {
          getPath: (file) => {
            if (file.startsWith("@src"))
              return file.replace("@src", path.resolve(__dirname, ".."));

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












 
 
 
 
 
 
 
 




Кроме того, чтобы разместить ваши файлы Markdown непосредственно рядом с вашими реальными файлами, но не хотите, чтобы они отображались как страницы, вы можете установить параметры pagePatterns в конфигурации VuePress. Дополнительные сведения смотрите в 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,
      },
    },
  }),
});