导入文件
大约 3 分钟
让你的 VuePress 站点中的 Markdown 文件支持导入其他文件。
配置
// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
export default {
plugins: [
mdEnhancePlugin({
// 启用导入支持
include: true,
}),
],
};
// .vuepress/config.js
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
export default {
plugins: [
mdEnhancePlugin({
// 启用导入支持
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>
## Hello world
<!-- #region snippet -->
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates
inventore iure quo aut doloremque, ipsum ab voluptatem ipsa, velit laborum
illo quae omnis reiciendis hic, ut dolorem non debitis in!
<!-- #endregion snippet -->
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.
import MarkdownIt from "markdown-it";
import { include } from "@mdit/plugin-include";
// #region snippet
const mdIt = MarkdownIt().use(include, {
// your options, currentPath is required
currentPath: (env) => env.filePath,
});
// #endregion snippet
mdIt.render("@include(./path/to/include/file.md)", {
filePath: "path/to/current/file.md",
});
const MarkdownIt = require("markdown-it");
const { include } = require("@mdit/plugin-include");
// #region snippet
const mdIt = MarkdownIt().use(include, {
// your options, currentPath is required
currentPath: (env) => env.filePath,
});
// #endregion snippet
mdIt.render("@include(./path/to/include/file.md)", {
filePath: "path/to/current/file.md",
});
html,
body {
margin: 0;
padding: 0;
}
/* #region snippet */
h1 {
font-size: 1.5rem;
}
/* #endregion snippet */
h2 {
font-size: 1.2rem;
}
html,
body {
margin: 0;
padding: 0;
}
/* #region snippet */
h1 {
font-size: 1.5rem;
}
/* #endregion snippet */
h2 {
font-size: 1.2rem;
}
html,
body {
margin: 0;
padding: 0;
}
/* #region snippet */
h1 {
font-size: 1.5rem;
}
/* #endregion snippet */
h2 {
font-size: 1.2rem;
}
public class HelloWorld {
// #region snippet
public static void main(String args[]){
System.out.println("Hello World");
}
// #endregion snippet
}
class MyClass:
msg = "world"
#region snippet
def sayHello(self):
print("Hello " + self.msg + "!")
#region snippet
def sayBye(self):
print("Bye " + self.msg + "!")
Imports System
Module Module1
# Region snippet
Sub Main()
Console.WriteLine("Hello World!")
Console.WriteLine("Press Enter Key to Exit.")
Console.ReadLine()
End Sub
# EndRegion
End Module
>nul 2>&1 "%SYSTEMROOT%\system32\cacls.exe" "%SYSTEMROOT%\system32\config\system"
if '%errorlevel%' NEQ '0' (
echo Requesting administrative privileges...
goto UACPrompt
) else ( goto gotAdmin )
::#region snippet
:UACPrompt
echo Set UAC = CreateObject^("Shell.Application"^) > "%temp%\getadmin.vbs"
echo UAC.ShellExecute "%~s0", "", "", "runas", 1 >> "%temp%\getadmin.vbs"
"%temp%\getadmin.vbs"
exit /B
::#endregion snippet
:gotAdmin
if exist "%temp%\getadmin.vbs" ( del "%temp%\getadmin.vbs" )
pushd "%CD%"
CD /D "%~dp0"
using System;
namespace HelloWorldApp {
class Geeks {
// #region snippet
static void Main(string[] args) {
// statement
// printing Hello World!
Console.WriteLine("Hello World!");
// To prevents the screen from
// running and closing quickly
Console.ReadKey();
}
// #endregion snippet
}
}
演示
@include(./demo.snippet.md):
二级标题
内容包含加粗文字和一些其他增强内容:
提示
你最近怎么样了? 😄
@include(./demo.snippet.md{9-13}):
提示
你最近怎么样了? 😄
@include(./demo.snippet.md#snippet):
内容包含加粗文字和一些其他增强内容:
高级用法
你还可以设置一个对象来自定义包含文件路径和包含行为。
interface IncludeOptions {
/**
* 处理 include 文件路径
*
* @default (path) => path
*/
resolvePath?: (path: string, cwd: string) => string;
/**
* 是否深度导入包含的 Markdown 文件
*
* @default false
*/
deep?: boolean;
}
例如: 你可以使用 @src 作为源文件夹的别名。
// .vuepress/config.ts
import { getDirname, path } from "@vuepress/utils";
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
const __dirname = getDirname(import.meta.url);
export default {
plugins: [
mdEnhancePlugin({
// 添加 `@src` 别名支持
include: {
resolvePath: (file) => {
if (file.startsWith("@src"))
return file.replace("@src", path.resolve(__dirname, ".."));
return file;
},
},
}),
],
};
// .vuepress/config.js
import { getDirname, path } from "@vuepress/utils";
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
const __dirname = getDirname(import.meta.url);
export default {
plugins: [
mdEnhancePlugin({
// 添加 `@src` 别名支持
include: {
resolvePath: (file) => {
if (file.startsWith("@src"))
return file.replace("@src", path.resolve(__dirname, ".."));
return file;
},
},
}),
],
};
此外，如果你想将 Markdown 文件直接放在实际文件旁边，但不希望它们呈现为页面，你可以在 VuePress 配置中设置 pagePatterns 选项。有关详细信息，请参阅 pagePatterns。
// .vuepress/config.ts
import { defineConfig } from "vuepress";
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
export default defineConfig({
// 现在任何带有 `.snippet.md` 扩展名的文件都不会呈现为页面
pagePatterns: ["**/*.md", "!*.snippet.md", "!.vuepress", "!node_modules"],
plugins: [
mdEnhancePlugin({
include: true,
}),
],
});
// .vuepress/config.js
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";
export default {
// 现在任何带有 `.snippet.md` 扩展名的文件都不会呈现为页面
pagePatterns: ["**/*.md", "!*.snippet.md", "!.vuepress", "!node_modules"],
plugins: [
mdEnhancePlugin({
include: true,
}),
],
};