@intlayer/docs 8.5.0 → 8.5.1

package/docs/zh/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.5.0
+    date: 2026-03-24
+    changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
   - version: 8.5.0
     date: 2026-03-24
     changes: "将导入从 {{framework}}-intlayer 移动到 {{framework}}-intlayer/markdown"
@@ -35,7 +38,7 @@ history:
 
 Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻松编写和维护具有丰富格式的内容，例如博客、文章等。
 
-## 第 1 部分：声明 Markdown 内容
+## 声明 Markdown 内容
 
 您可以使用 `md` 函数声明 Markdown 内容，或简单地将其作为字符串（如果它包含 Markdown 语法）。
 
@@ -93,7 +96,7 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
 ---
 
-## 第 2 部分：渲染 Markdown
+## 部分：渲染 Markdown
 
 渲染可以由 Intlayer 的内容系统自动处理，也可以使用专用工具手动完成。
 
@@ -390,8 +393,6 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
           a: ({ href, children }) => <Link to={href}>{children}</Link>,
@@ -426,21 +427,20 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerMarkdown } from "vue-intlayer/markdown";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
-      forceBlock: true,
-      tagfilter: true,
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       components: {
-        h1: {
-          component: "h1",
-          props: { class: "text-2xl font-bold" },
-        },
+        h1: (props) =>
+          h('h1', { style: { color: 'orange' }, ...props }, props.children),
+        ComponentDemo: () => h('div', { style: { background: 'grey' } }, 'DEMO'),
+        bold: (props) => h('strong', props),
+        code: (props) => h('code', props),
       },
     });
 
@@ -451,14 +451,14 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
     ```typescript fileName="main.ts"
     import { createApp } from "vue";
-    import { installIntlayer } from "vue-intlayer";
-    import { installIntlayerMarkdown } from "vue-intlayer/markdown";
+    import { intlayer } from "vue-intlayer";
+    import { intlayerMarkdown } from "vue-intlayer/markdown";
     import App from "./App.vue";
 
     const app = createApp(App);
 
-    app.use(installIntlayer);
-    app.use(installIntlayerMarkdown, {
+    app.use(intlayer);
+    app.use(intlayerMarkdown, {
       renderMarkdown: async (md) => {
         const { compileMarkdown } = await import('vue-intlayer/markdown');
         return compileMarkdown(md);
@@ -480,8 +480,6 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
     </script>
 
     <MarkdownProvider
-      forceBlock={true}
-      tagfilter={true}
       components={{
         h1: MyHeading,
       }}
@@ -517,8 +515,6 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
     export const AppProvider = ({ children }) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: ({ children }) => <h1 className="text-2xl font-bold">{children}</h1>,
         }}
@@ -555,8 +551,6 @@ Intlayer 支持使用 Markdown 语法定义的富文本内容。这允许您轻
 
     export const AppProvider = (props) => (
       <MarkdownProvider
-        forceBlock={true}
-        tagfilter={true}
         components={{
           h1: (props) => <h1 className="text-2xl font-bold">{props.children}</h1>,
         }}

package/docs/zh/intlayer_with_analog.md

@@ -23,6 +23,14 @@ history:
 
 # 使用 Intlayer 翻译您的 Analog (Angular) 应用 | 国际化 (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## 目录
 
 <TOC/>
@@ -42,20 +50,6 @@ history:
 
 ## 在 Analog 应用中设置 Intlayer 的分步指南
 
-<Tabs defaultTab="code">
-  <Tab label="代码" value="code">
-
-<iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer/tree/main/examples/vite-analog-app?embed=1&ctl=1&file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="演示 CodeSandbox - 如何使用 Intlayer 实现应用国际化"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
-
 查看 GitHub 上的 [应用模板](https://github.com/aymericzip/intlayer-analog-template)。
 
 ### 第 1 步：安装依赖项

package/docs/zh/intlayer_with_vite+lit.md

@@ -24,6 +24,14 @@ history:
 
 # 使用 Intlayer 翻译您的 Vite 和 Lit 网站 | 国际化 (i18n)
 
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-vite-lit-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
 ## 目录
 
 <TOC/>
@@ -640,63 +648,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-<Tabs>
- <Tab value='提取命令'>
-
-运行提取器以转换组件并提取内容
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bunx intlayer extract
-```
-
- </Tab>
- <Tab value='Babel 编译器'>
-
-更新您的 `vite.config.ts` 以包含 `intlayerCompiler` 插件：
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // 添加编译器插件
-  ],
-});
-```
-
-```bash packageManager="npm"
-npm run build # 或 npm run dev
-```
-
-```bash packageManager="pnpm"
-pnpm run build # 或 pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # 或 yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # 或 bun run dev
-```
-
- </Tab>
-</Tabs>
-
 ### 配置 TypeScript
 
 确保您的 TypeScript 配置包含自动生成的类型。

package/docs/zh/intlayer_with_vite+vue.md

@@ -434,14 +434,14 @@ module.exports = appContent;
 
 ```javascript fileName=main.js
 import { createApp } from "vue";
-import { installIntlayer } from "vue-intlayer";
+import { intlayer } from "vue-intlayer";
 import App from "./App.vue";
 import "./style.css";
 
 const app = createApp(App);
 
 // 在顶层注入提供者
-installIntlayer(app);
+app.use(intlayer);
 
 // 挂载应用
 app.mount("#app");
@@ -1013,7 +1013,7 @@ import { installIntlayer, installIntlayerMarkdown } from "vue-intlayer";
 
 const app = createApp(App);
 
-installIntlayer(app);
+app.use(intlayer);
 
 const md = new MarkdownIt({
   html: true, // 允许 HTML 标签

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/docs",
-  "version": "8.5.0",
+  "version": "8.5.1",
   "private": false,
   "description": "Intlayer documentation",
   "keywords": [
@@ -72,13 +72,13 @@
     "watch": "webpack --config ./webpack.config.ts --watch"
   },
   "dependencies": {
-    "@intlayer/config": "8.5.0",
-    "@intlayer/core": "8.5.0",
-    "@intlayer/types": "8.5.0"
+    "@intlayer/config": "8.5.1",
+    "@intlayer/core": "8.5.1",
+    "@intlayer/types": "8.5.1"
   },
   "devDependencies": {
-    "@intlayer/api": "8.5.0",
-    "@intlayer/cli": "8.5.0",
+    "@intlayer/api": "8.5.1",
+    "@intlayer/cli": "8.5.1",
     "@types/node": "25.5.0",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",