docs: update docs

docs/notes/theme/guide/布局插槽.md

@@ -15,6 +15,9 @@ permalink: /guide/layout-slots/
 
 以 `<Layout />` 为例，首先，需要创建一个 客户端配置文件： `.vuepress/client.ts`:
 
+::: code-tabs
+@tab .vuepress/client.ts
+
 ```ts
 import { defineClientConfig } from 'vuepress/client'
 import Layout from './layouts/Layout.vue'
@@ -26,11 +29,23 @@ export default defineClientConfig({
 })
 ```
 
+:::
+
+::: info
+`layouts` 中的 `Layout` 名是固定的，这是 js 的简写语法， 实际上为 `Layout: Layout`，它是实现 布局插槽的关键。
+`NotFound` 也是相同的规则。
+
+你传入的其它非 `Layout` / `NotFound` 的组件，被认为是自定义布局组件。
+:::
+
 然后，创建一个 `.vuepress/layouts/Layout.vue`，作为布局插槽的默认组件，在该组件中引入 当前主题的 `<Layout />` 组件。
 
-```vue
+::: code-tabs
+@tab .vuepress/layouts/Layout.vue
+
+```vue {7-11}
 <script setup>
-import { Layout } from 'vuepress-theme-plume/client'
+import { Layout } from 'vuepress-theme-plume/client' // [!code hl]
 </script>
 
 <template>
@@ -50,8 +65,13 @@ import { Layout } from 'vuepress-theme-plume/client'
 </style>
 ```
 
+:::
+
 也可以使用 渲染函数 实现注入内容，在 `.vuepress/client.ts` 中：
 
+::: code-tabs
+@tab .vuepress/client.ts
+
 ```ts
 import { h } from 'vue'
 import { defineClientConfig } from 'vuepress/client'
@@ -67,6 +87,18 @@ export default defineClientConfig({
 })
 ```
 
+@tab ./components/CustomContent.vue
+
+```vue
+<template>
+  <div class="custom-content">
+    Custom Content
+  </div>
+</template>
+```
+
+:::
+
 ## 插槽
 
 ### `<Layout />` 插槽