npm - @modern-js/main-doc - Versions diffs - 2.0.2 → 2.1.0 - Mend

@modern-js/main-doc 2.0.2 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (525) hide show

package/zh/guides/basic-features/html.md CHANGED Viewed

@@ -68,7 +68,7 @@ import {
   Head,
   Body,
   Scripts,
-  DocumentContext
+  DocumentContext,
 } from '@modern-js/runtime/document';
 export default function Document(): React.ReactElement {
@@ -103,41 +103,48 @@ export default function Document(): React.ReactElement {
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport"
-        content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="renderer" content="webkit">
-    <meta name="layoutmode" content="standard">
-    <meta name="imagemode" content="force">
-    <meta name="wap-font-scale" content="no">
-    <meta name="format-detection" content="telephone=no">
-    <script>...</script>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, shrink-to-fit=no, viewport-fit=cover, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="renderer" content="webkit" />
+    <meta name="layoutmode" content="standard" />
+    <meta name="imagemode" content="force" />
+    <meta name="wap-font-scale" content="no" />
+    <meta name="format-detection" content="telephone=no" />
+    <script>
+      ...
+    </script>
     <script defer src="/static/js/lib-react.js"></script>
     <script defer src="/static/js/lib-polyfill.js"></script>
     <script defer src="/static/js/lib-router.js"></script>
-    <script defer
-        src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"></script>
-    <script defer
-        src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"></script>
+    <script
+      defer
+      src="/static/js/vendors-node_modules_pnpm_loadable_component_5_15_2_react_18_2_0_node_modules_loadable_compon-3fb0cf.js"
+    ></script>
+    <script
+      defer
+      src="/static/js/packages_runtime_plugin-router-legacy_dist_js_treeshaking_runtime_index_js-packages_runtime_p-28f4c9.js"
+    ></script>
     <script defer src="/static/js/sub.js"></script>
     <link href="https://www.baidu.com" />
-</head>
+  </head>
-<body>
+  <body>
     <div id="root">
-        <!--<?- html ?>-->
-        <h1 style="color:red">以下为构建时传过来的参数：</h1>
-        <h2> entryName：sub</h2>
-        <h2> title：</h2>
-        <h2> rootId: root</h2>
+      <!--<?- html ?>-->
+      <h1 style="color:red">以下为构建时传过来的参数：</h1>
+      <h2>entryName：sub</h2>
+      <h2>title：</h2>
+      <h2>rootId: root</h2>
     </div>
     <h1>bottom</h1>
     <!--<?- chunksMap.js ?>-->
     <!--<?- SSRDataScript ?>-->
-</body>
+  </body>
 </html>
 ```
@@ -161,26 +168,27 @@ Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中
 ```html
 <!DOCTYPE html>
 <html>
-<head>
-  <%= meta %>
-  <title><%= title %></title>
-  <%= topTemplate %>
-  <script>
-    window.__assetPrefix__ = '<%= assetPrefix %>';
-  </script>
-  <%= headTemplate %>
-  <!-- webpack inject css -->
-</head>
-<body>
-  <noscript>
-    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.
-  </noscript>
-  <div id="<%= mountId %>"></div>
-  <%= bodyTemplate %>
-  <!-- webpack inject js -->
-  <!--<?- bottomTemplate ?>-->
-</body>
+  <head>
+    <%= meta %>
+    <title><%= title %></title>
+    <%= topTemplate %>
+    <script>
+      window.__assetPrefix__ = '<%= assetPrefix %>';
+    </script>
+    <%= headTemplate %>
+    <!-- webpack inject css -->
+  </head>
+  <body>
+    <noscript>
+      We're sorry but react app doesn't work properly without JavaScript
+      enabled. Please enable it to continue.
+    </noscript>
+    <div id="<%= mountId %>"></div>
+    <%= bodyTemplate %>
+    <!-- webpack inject js -->
+    <!--<?- bottomTemplate ?>-->
+  </body>
 </html>
 ```
@@ -220,7 +228,7 @@ Modern.js 也支持 HTML 语法。默认情况下，Modern.js 的应用工程中
 例如，如下设置的 HTML 片段仅对入口 `entry1` 生效：
-```html
+```bash
 .
 ├── config/
 │   └── html/

package/zh/guides/basic-features/index.md CHANGED Viewed

@@ -5,8 +5,3 @@ type: ref
 # 基础功能
 本节涵盖了使用应用工程的基础功能。

package/zh/guides/basic-features/mock.md CHANGED Viewed

@@ -50,15 +50,15 @@ const Mock = require('mockjs');
 module.exports = {
   '/api/getInfo': Mock.mock({
-     'data|1-10': [{ name: '@cname' }]
-   }), /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */
+    'data|1-10': [{ name: '@cname' }],
+  }) /* => {data: [{name: "董霞"}, {name: "魏敏"},  {name: "石磊"}} */,
 };
 ```
 :::info 更多随机数据生成库
-* [Chancejs](https://github.com/chancejs/chancejs)
-* [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
+- [Chancejs](https://github.com/chancejs/chancejs)
+- [Mock](https://github.com/nuysoft/Mock/wiki/Getting-Started)
 :::

package/zh/guides/basic-features/proxy.md CHANGED Viewed

@@ -7,8 +7,8 @@ sidebar_position: 5
 Modern.js 在 [`tools.devServer`](/docs/configure/app/tools/dev-server) 中提供了配置开发环境代理的方式。例如，将本地开发接口，代理到线上某个地址：
-```typescript title="modern.config.ts"
-import { defineConfig }  from '@modern-js/app-tools';
+```ts title="modern.config.ts"
+import { defineConfig } from '@modern-js/app-tools';
 export default defineConfig({
   tools: {
@@ -40,7 +40,7 @@ import GlobalProxy from '@site-docs/components/global-proxy.md'
 通过配置 [`bff.proxy`](/docs/configure/app/bff/proxy) 可以代理 BFF API 请求到指定的服务上，上述两种代理不同，它同样可以用在生产环境：
-```typescript title="modern.config.ts"
+```ts title="modern.config.ts"
 export default defineConfig({
   bff: {
     proxy: {
@@ -53,8 +53,7 @@ export default defineConfig({
 例如代码中使用一体化 BFF 调用时，最终请求 `http://localhost:8080/api/v1/topics` 会自动代理到 `https://cnodejs.org/api/v1/topics`：
 ```js
-import getTopics from '@api/v1/topics'
+import getTopics from '@api/v1/topics';
 getTopics();
 ```

package/zh/guides/basic-features/routes.md CHANGED Viewed

@@ -26,7 +26,6 @@ Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使
 +------------------+                  +-----------------+
 ```
 ### 路由文件约定
 在`routes/` 目录下，目录名会作为路由 url 的映射，Modern.js 有两个文件约定 `layout.[jt]sx` 和 `page.[jt]sx`（后面简写为 `.tsx`）。这两个文件决定了应用的布局层次，其中 `layout.tsx` 中作为布局组件，`page.tsx` 作为内容组件，是整条路由的叶子节点（一条路由有且仅有一个叶子节点，且必须以叶子节点结尾）。
@@ -42,6 +41,7 @@ Modern.js 支持了业界流行的约定式路由模式：**嵌套路由**，使
 ```
 会产出下面两条路由：
 - `/`
 - `/user`
@@ -91,8 +91,8 @@ export default () => {
     <>
       <Outlet></Outlet>
     </>
-  )
-}
+  );
+};
 ```
 :::note
@@ -122,6 +122,7 @@ export default () => {
 ```
 2. 当路由为 `/blog` 时，`routes/layout.tsx` 中的 `<Outlet>` 代表的是 `routes/blog/page.tsx` 中导出的组件，生成以下 UI 结构：
 ```tsx
 <Layout>
   <BlogPage />
@@ -165,7 +166,7 @@ export default () => {
 ### 无路径布局
-当目录名以 __ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
+当目录名以 \_\_ 开头时，对应的目录名不会转换为实际的路由路径，例如以下文件目录：
 ```
 .
@@ -180,7 +181,7 @@ export default () => {
     └── page.tsx
 ```
-Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组件会作为 `login/page.tsx` 和 `signup/page.tsx` 的布局组件，但__auth 不会作为路由路径片段。
+Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组件会作为 `login/page.tsx` 和 `signup/page.tsx` 的布局组件，但`__auth` 不会作为路由路径片段。
 当需要为某些类型的路由，做独立的布局，或是想要将路由做归类时，这一功能非常有用。
@@ -202,11 +203,11 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx
 <RootLayout>
-   <UserProfileEdit />   // routes/user.profile.[id].edit/page.tsx
+  <UserProfileEdit /> // routes/user.profile.[id].edit/page.tsx
 </RootLayout>
 ```
-### Loading
+### (WIP)Loading
 `routes/` 下每一层目录中，开发者可以创建 `loading.tsx` 文件，默认导出一个 `<Loading>` 组件。
@@ -225,6 +226,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```
 当定义 `loading.tsx` 时，就相当于以下布局：
 ```tsx title="当路由为 / 时"
 <Layout>
   <Suspense fallback={<Loading/>}>
@@ -235,7 +237,7 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx title="当路由为 /blog 时"
 <Layout>
-  <Suspense fallback={<Loading/>}>
+  <Suspense fallback={<Loading />}>
     <BlogPage />
   </Suspense>
 </Layout>
@@ -243,11 +245,12 @@ Modern.js 会生成 `/login` 和 `/sign` 两条路由，`__auth/layout.tsx` 组
 ```tsx title="当路由为 /blog/123 时"
 <Layout>
-  <Suspense fallback={<Loading/>}>
+  <Suspense fallback={<Loading />}>
     <BlogIdPage />
   </Suspense>
 </Layout>
 ```
 :::info
 当目录的 layout 组件不存在时，该目录下的 loading 组件也不会生效。
 Modern.js 建议必须有根 layout 和根 loading。
@@ -257,7 +260,6 @@ Modern.js 建议必须有根 layout 和根 loading。
 同理，当路由从 `/` 或者 `/blog` 跳转到 `/blog/123` 时，如果 `blog/[id]/page` 组件的 JS Chunk 还未加载，也会先展示 `loading.tsx` 中导出的组件 UI。
 ### 错误处理
 `routes/` 下每一层目录中，开发者同样可以定义一个 `error.tsx` 文件，默认导出一个 `<ErrorBoundary>` 组件。
@@ -267,6 +269,7 @@ Modern.js 建议必须有根 layout 和根 loading。
 `<ErrorBoundary>` 可以返回出错时的 UI 视图，当前层级未声明 `<ErrorBoundary>` 组件时，错误会向上冒泡到更上层的组件，直到被捕获或抛出错误。同时，当组件出错时，只会影响捕获到该错误的路由组件及子组件，其他组件的状态和视图不受影响，可以继续交互。
 <!-- Todo API 路由-->
 在 `<ErrorBoundary>` 组件内，可以使用 [useRouteError](/docs/apis/app/runtime/router/#useparams) 获取的错误的具体信息：
 ```tsx
@@ -275,14 +278,98 @@ const ErrorBoundary = () => {
   const error = useRouteError();
   return (
     <div>
-        <h1>{error.status}</h1>
-        <h2>{error.message}</h2>
+      <h1>{error.status}</h1>
+      <h2>{error.message}</h2>
     </div>
-  )
-}
+  );
+};
 export default ErrorBoundary;
 ```
+### 运行时配置
+在每个根 `Layout` 组件中(`routes/layout.ts`)，可以动态地定义应用运行时配置：
+```ts title="src/routes/layout.tsx"
+// 定义运行时配置
+import type { AppConfig } from '@modern-js/runtime';
+export const config = (): AppConfig => {
+  return {
+    router: {
+      supportHtml5History: false
+    }
+  }
+};
+```
+### 渲染前的钩子
+在有些场景下，需要在应用渲染前做一些操作，可以在 `routes/layout.tsx` 中定义 `init` 钩子，`init` 在客户端和服务端均会执行，基本使用示例如下：
+```ts title="src/routes/layout.tsx"
+import type { RuntimeContext } from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  // do something
+};
+```
+通过 `init` 钩子可以挂载一些全局的数据，在应用的其他地方可以访问 `runtimeContext` 变量：
+:::note
+该功能在应用需要页面前置的数据、自定义数据注入或是框架迁移（如 Next.js）时会非常有用。
+:::
+```ts title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  return {
+    message: 'Hello World',
+  }
+}
+```
+```tsx title="src/routes/page.tsx"
+import { useRuntimeContext } from '@modern-js/runtime';
+export default () => {
+  const { context } = useRuntimeContext();
+  const { message } = context.getInitData();
+  return <div>{message}</div>;
+}
+```
+配合 SSR 功能时，浏览器端可以获取到 SSR 时 `init` 返回的数据，开发者可以自行判断是否要在浏览器端重新获取数据来覆盖 SSR 数据，例如：
+```tsx title="src/routes/layout.tsx"
+import {
+  RuntimeContext,
+} from '@modern-js/runtime';
+export const init = (context: RuntimeContext) => {
+  if (process.env.JUPITER_TARGET === 'node') {
+    return {
+      message: 'Hello World By Server',
+    }
+  } else {
+    const { context } = runtimeContext;
+    const data = context.getInitData();
+    // 如果没有获取到期望的数据
+    if (!data.message) {
+      return {
+        message: 'Hello World By Client'
+      }
+    }
+  }
+}
+```
 ## 自控式路由
 以 `src/App.tsx` 为约定的入口，Modern.js 不会多路由做额外的操作，开发者可以自行使用 React Router 6 的 API 进行开发，例如：
@@ -316,8 +403,8 @@ export default () => {
 export default defineConfig({
   runtime: {
     router: true,
-  }
-})
+  },
+});
 ```
 Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的 API 供开发者使用，保证开发者和 Modern.js 中使用同一份代码。另外，这种情况下，React Router 的代码会被打包到 JS 产物中。如果项目已经有自己的路由方案，或者不需要使用客户端路由，可以关闭这个功能。
@@ -326,6 +413,6 @@ Modern.js 从 `@modern-js/runtime/router` 命名空间暴露了 React Router 的
 export default defineConfig({
   runtime: {
     router: false,
-  }
-})
+  },
+});
 ```

package/zh/guides/concept/entries.md CHANGED Viewed

@@ -59,7 +59,6 @@ Modern.js 可以很方便的将单入口切换成多入口。可以在项目下
 Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入口，默认路由为 `/`，其他入口默认路由为 `/{entryName}`。
 :::
 ## 入口类型
 不同的入口类型具有不同的编译和运行时行为。在 Modern.js 创建项目时，开发者可以手动选择创建**框架模式**或是**构建模式**的项目。完成创建后，可以看到不同模式的项目样板文件是不同的。
@@ -75,7 +74,7 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
 1. 具有 `routes/` 目录
 2. 具有 `App.[jt]sx?` 文件
 3. 具有 `index.[jt]sx?` 文件
-2. 具有 `pages/` 目录（兼容 Modern.js 1.0）
+4. 具有 `pages/` 目录（兼容 Modern.js 1.0）
 当 `src/` 目录满足入口特征时，Modern.js 会认为当前项目为单入口应用。
@@ -106,10 +105,9 @@ Modern.js 会将和 `package.json` 中 `name` 字段同名的入口作为主入
 如果入口中存在 `index.[jt]sx` 文件，并且当文件默认导出函数时，Modern.js 还是会根据 runtime 的设置情况生成 createApp 包裹后的代码。在渲染过程中，将 createApp 包裹后的组件作为参数传递给 index 文件导出的函数，这样开发者可以自定义将组件挂载到 DOM 节点上，或在挂载前添加自定义行为。例如：
 ```tsx
-import ReactDOM from 'react-dom/client'
+import ReactDOM from 'react-dom/client';
 import { bootstrap } from '@modern-js/runtime';
 export default (App: React.ComponentType) => {
   // do something before bootstrap...
   bootstrap(App, 'root', undefined, ReactDOM);
@@ -137,16 +135,16 @@ let AppWrapper = null;
 function render() {
   AppWrapper = createApp({
     // runtime 的插件参数...
-  })(App)
+  })(App);
   if (IS_BROWSER) {
     customBootstrap(AppWrapper);
   }
-  return AppWrapper
+  return AppWrapper;
 }
 AppWrapper = render();
-export default AppWrapper;;
+export default AppWrapper;
 ```
 ### 构建模式入口

package/zh/guides/get-started/quick-start.md CHANGED Viewed

@@ -28,7 +28,6 @@ npx @modern-js/create myapp
 ## 初始化项目
 import InitApp from '@site-docs/components/init-app.md'
 <InitApp />
@@ -46,7 +45,7 @@ import DebugApp from '@site-docs/components/debug-app.md'
 可以通过配置文件来开启功能，或覆盖 Modern.js 的默认行为。例如添加如下配置，开启 SSR：
 ```ts
-import AppToolsPlugin, { defineConfig } from '@modern-js/app-tools';
+import appTools, { defineConfig } from '@modern-js/app-tools';
 // https://modernjs.dev/docs/apis/app/config
 export default defineConfig({
@@ -57,7 +56,7 @@ export default defineConfig({
   server: {
     ssr: true,
   },
-  plugins: [AppToolsPlugin()],
+  plugins: [appTools()],
 });
 ```
@@ -89,7 +88,7 @@ info    File sizes after production build:
   dist/static/js/async/509.fcb06e14.js      283 B        230 B
  Client ✔ done in 3.57s
- ```
+```
 构建产物默认生成到 `dist/`，目录结构如下：

package/zh/guides/topic-detail/changesets/add.md CHANGED Viewed

@@ -46,7 +46,6 @@ pnpm run change
 ---
 feat: test module solution changeset
 ```
 该文件中包含了 changeset 的所有信息。
@@ -115,11 +114,10 @@ pnpm run change -- --empty
 如果当前变更是修改仓库的一些基础设施，比如 CI、测试等，就不需要添加 changeset 或者可以添加一个空的 changeset。
--  一个 pull reuqest 可以提交多个 changeset
+- 一个 pull reuqest 可以提交多个 changeset
 当一个 pull request 存在多个功能开发或者问题修复时，可以多次执行 `pnpm run change` 添加多个 changeset 文件，每个文件选择对应功能的包和添加变更信息即可。
 - 创建 changeset 时，需要选择该功能相关的所有包
 在 Monorepo 中创建 changeset 时，需要选中和该功能相关的所有变更包，避免出现发版时部分包未发布的情况。

package/zh/guides/topic-detail/changesets/changelog.md CHANGED Viewed

@@ -22,8 +22,8 @@ Changelog 信息主要包含以下两种信息：
 - changeset
-```typescript
-export type VersionType = "major" | "minor" | "patch" | "none";
+```ts
+export type VersionType = 'major' | 'minor' | 'patch' | 'none';
 export type Release = { name: string; type: VersionType };
@@ -47,7 +47,7 @@ Changelog 内容。
 `@changesets/cli/changelog` 默认处理逻辑为将 `summary` 信息按照换行符 `\n` 分割，第一样前面增加 `-` 作为列表开头，其他内容作为第一行内容的补充整理在列表下方。
-```typescript
+```ts
 async function getReleaseLine(changeset, type) {
   const [firstLine, ...futureLines] = changeset.summary
     .split('\n')
@@ -75,18 +75,18 @@ async function getReleaseLine(changeset, type) {
 - dependenciesUpdated
-```typescript
+```ts
 type ModCompWithPackage = {
-    name: string; // 依赖模块名称
-    type: VersionType; // 依赖模块的升级类型
-    oldVersion: string; // 依赖模块当前版本号
-    newVersion: string; // 依赖模块新版本号
-    changesets: string[]; // 关联的 changeset id 列表
-    packageJson: PackageJSON; // 依赖模块完整的 package.json 内容
-    dir: string; // 依赖模块的路径(绝对路径)
+  name: string; // 依赖模块名称
+  type: VersionType; // 依赖模块的升级类型
+  oldVersion: string; // 依赖模块当前版本号
+  newVersion: string; // 依赖模块新版本号
+  changesets: string[]; // 关联的 changeset id 列表
+  packageJson: PackageJSON; // 依赖模块完整的 package.json 内容
+  dir: string; // 依赖模块的路径(绝对路径)
 };
-type DependenciesUpdated = ModCompWithPackage[]
+type DependenciesUpdated = ModCompWithPackage[];
 ```
 #### 返回值
@@ -97,23 +97,23 @@ Changelog 内容。
 `@changesets/cli/changelog` 默认会使用 changesets 信息展示对应的 `Updated dependencies + commit id`，以列表形式展示。然后根据 `dependenciesUpdated` 信息展示对应的依赖包包名和新版本号，作为列表的子列表项。
-```typescript
+```ts
 async function getDependencyReleaseLine(changesets, dependenciesUpdated) {
-    console.log("getDependencyReleaseLine", changesets, dependenciesUpdated)
-    if (dependenciesUpdated.length === 0) return "";
+  console.log('getDependencyReleaseLine', changesets, dependenciesUpdated);
+  if (dependenciesUpdated.length === 0) return '';
-    const changesetLinks = changesets.map(
-      changeset =>
-        `- Updated dependencies${
-          changeset.commit ? ` [${changeset.commit}]` : ""
-        }`
-    );
+  const changesetLinks = changesets.map(
+    changeset =>
+      `- Updated dependencies${
+        changeset.commit ? ` [${changeset.commit}]` : ''
+      }`,
+  );
-    const updatedDepenenciesList = dependenciesUpdated.map(
-      dependency => `  - ${dependency.name}@${dependency.newVersion}`
-    );
+  const updatedDepenenciesList = dependenciesUpdated.map(
+    dependency => `  - ${dependency.name}@${dependency.newVersion}`,
+  );
-    return [...changesetLinks, ...updatedDepenenciesList].join("\n");
+  return [...changesetLinks, ...updatedDepenenciesList].join('\n');
 }
 ```
@@ -140,7 +140,7 @@ changelog 配置如果为相对路径为 `.changesets` 目录下的相对路径
 例如创建 `.changeset/my-changelog-config.js` 文件，定义如下内容：
-```typescript title=".changeset/my-changelog-config.js"
+```ts title=".changeset/my-changelog-config.js"
 async function getReleaseLine(changeset, type) {}
 async function getDependencyReleaseLine(changesets, dependenciesUpdated) {}
@@ -149,7 +149,6 @@ module.exports = {
   getReleaseLine,
   getDependencyReleaseLine,
 };
 ```
 `changlog` 配置为 `./my-changelog-config.js` 即可:
@@ -167,7 +166,7 @@ module.exports = {
 #### 使用 `npx @modern-js/create` 创建模块工程方案。
-``` md
+```md
 ? 请选择你想创建的工程类型 模块
 ? 请填写项目名称 custom-changelog
 ? 请选择开发语言 TS
@@ -176,7 +175,7 @@ module.exports = {
 #### 实现自定义内容。
-```typescript title="src/index.ts"
+```ts title="src/index.ts"
 export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}
@@ -201,7 +200,7 @@ export async function getDependencyReleaseLine() {}
 #### 执行 `pnpm run new` 创建模块子项目。
-``` md
+```md
 ? 请选择你想创建的工程类型 模块
 ? 请填写子项目名称 custom-changelog
 ? 请填写子项目目录名称 custom-changelog
@@ -210,7 +209,7 @@ export async function getDependencyReleaseLine() {}
 #### 实现自定义内容。
-```typescript title="src/index.ts"
+```ts title="src/index.ts"
 export async function getReleaseLine() {}
 export async function getDependencyReleaseLine() {}