import.meta.glob 是 Vite 中批量导入静态资源的核心工具，适用于零后端、无数据库的轻量博客；通过 glob 模式匹配 Markdown 文件，结合 gray-matter 提取 Front Matter，动态生成路由与文章列表，并用 marked/DOMPurify 安全渲染 HTML。
在 Vite 中，import.meta.glob 是实现静态资源批量导入的利器，特别适合构建轻量级博客——无需后端、不依赖数据库，靠文件系统组织内容。关键在于正确配置 glob 模式、处理路径与元数据，并将 Markdown 渲染为 HTML。
匹配 Markdown 文件并读取内容
import.meta.glob 支持通配符，可精准抓取指定目录下的所有 .md 文件。假设你的文章放在 src/content/posts/ 下：
- 使用
**/*.md匹配子目录（如支持按年份/分类分文件夹） - 用
import.meta.glob('./posts/**/*.md', { eager: true })立即导入全部模块（含默认导出的 Markdown 字符串） - 若需按需加载（比如只渲染当前访问的文章），去掉
{ eager: true }，返回的是异步导入函数
提取 Front Matter 并解析元数据
每个 Markdown 文件开头可用 YAML Front Matter 声明标题、日期、摘要等信息。Vite 不自带解析能力，需搭配 gray-matter（轻量、无依赖）：
Telegram Markdown Adapter
下载
将 Markdown 格式的回复转换为适合 Telegram 的富文本，避免渲染错误。适用于用户偏好 Markdown 但目标平台为 Telegram 的场景。
- 安装：
npm install gray-matter - 导入后对每个文件内容调用
matter(content)，得到{ data: { title, date, ... }, content } - 注意：
import.meta.glob导入的是 ES 模块，默认导出为字符串，直接传给matter()即可
生成路由与文章列表
利用 glob 结果动态生成文章列表和对应路由（配合 vue-router 或 react-router）：
- 遍历 glob 对象的 key（即文件路径），用
path.basename(key, '.md')提取 slug - 结合 Front Matter 中的
date排序，生成首页文章卡片 - 路由路径可设为
/posts/:slug，在页面组件中通过useRoute().params.slug查找对应文件并渲染
安全渲染 Markdown 内容
直接 v-html 存在 XSS 风险，尤其当内容来自本地文件也需防范恶意脚本注入：
- 推荐使用
marked+DOMPurify组合：先用marked转 HTML，再用DOMPurify.sanitize()过滤危险标签 - 或选用更安全的解析器如
remark+rehype-stringify（支持插件链，天然可配置白名单） - 避免在 Markdown 中启用 HTML 标签解析（
marked默认关闭，remark默认不解析），进一步降低风险
整个流程不依赖构建时预生成，开发体验流畅；生产构建后仍保持零运行时服务，真正轻量。只要文件结构清晰、Front Matter 规范，几行代码就能撑起一个静态博客内核。
