自定义软件包

March7th UI 设计为轻量工具包，推荐按照实际需要裁剪组件，避免引入用不到的代码。有两种方式可以生成定制包。

为什么需要自定义？ 完整加载所有 45 个组件约 133KB（min），而典型的博客页面通常只用到其中 8–12 个。 使用定制包可以将脚本体积缩减 60–80%。

方式一：使用 Builder 可视化构建

推荐

Builder 工具

勾选需要的组件，点击"下载定制包"，即可获得仅包含所选组件的 march7th-custom.js 和 march7th-custom.css。

  1. 在下方 Builder 中勾选项目所需的组件（核心工具库已默认必选）
  2. 右侧摘要面板会实时显示已选组件数量和预估包体积
  3. 点击"下载定制包"，浏览器将自动下载 march7th-custom.js 和 march7th-custom.css
  4. 将两个文件上传至项目的静态资源目录，按下方代码引入即可
<!-- 设计 Token（始终需要） -->
<link rel="stylesheet" href="/assets/march7th-tokens.css">
<!-- 定制样式 -->
<link rel="stylesheet" href="/assets/march7th-custom.css">
<!-- 主题运行时（仅需主题切换时引入） -->
<script src="/assets/march7th-theme.js"></script>
<!-- 定制组件包 -->
<script src="/assets/march7th-custom.js"></script>

在线 Builder 新标签页打开

方式二：手动按需加载

进阶

逐文件引入

无需任何构建工具，直接在 HTML 中按需引入所需组件的单独 JS 文件。 适合已知固定组件集、不想走 Builder 下载流程的场景。

  1. m7-core.js 必须在所有其他组件之前加载，它提供公共工具方法
  2. 按需添加其他组件文件，顺序不限（核心已就绪后即可并行）
  3. CSS 始终引入完整的 march7th-tokens.css 和 march7th-ui.css（合计约 38KB，无法再拆分）
<link rel="stylesheet" href="node_modules/@mar7th/march7th-ui/src/march7th-tokens.css">
<link rel="stylesheet" href="node_modules/@mar7th/march7th-ui/src/march7th-ui.css">
<script src="node_modules/@mar7th/march7th-ui/src/march7th-theme.js"></script>

<!-- 核心（必须最先） -->
<script src="node_modules/@mar7th/march7th-ui/src/components/m7-core.js" defer></script>
<!-- 按需引入 -->
<script src="node_modules/@mar7th/march7th-ui/src/components/m7-theme-switch.js" defer></script>
<script src="node_modules/@mar7th/march7th-ui/src/components/m7-post-card.js" defer></script>
<script src="node_modules/@mar7th/march7th-ui/src/components/m7-toc.js" defer></script>
<script src="node_modules/@mar7th/march7th-ui/src/components/m7-toast.js" defer></script>

两种方式对比

对比项 Builder 构建 手动按需加载
HTTP 请求数 1 个（单文件） N 个（每组件一请求）
浏览器缓存 整包失效 单组件独立缓存
操作复杂度 低（可视化选择） 低（直接写标签）
更新组件 需重新下载 修改标签即可
适用场景 静态托管、CDN 本地开发、快速迭代