diff --git a/docs/pages/guide/best-pratice.md b/docs/pages/guide/best-pratice.md index 9c3c44323..0ca5d7a02 100644 --- a/docs/pages/guide/best-pratice.md +++ b/docs/pages/guide/best-pratice.md @@ -6,11 +6,111 @@ categories: top: 1 --- +## 文章 {lang="zh-CN"} + +## Post {lang="en"} + +::: zh-CN + 以下是我们推荐的部分最佳实践,但您不必完全遵守。 -## 文章 +1. 建议使用英文命名文件夹和文件,如 `blog/pages/posts/your-post.md`。 + +2. 插入第三方/大量动态内容时,优先将其封装为组件放置于 `components`,并通过组件标签名引入,以下是一个例子。 + +```vue +// blog/components/BszComponent.vue + + + + +``` + +```md +// blog/pages/posts/test-custom-component.md + +# hello World + +``` + +3. 如果文章中不想使用外链图片,建议按照以下格式创建文件夹及引用图片,便于管理和迁移。 +```text +posts +├─ your-post +│ ├─ a.png +| ├─ b.png +│ └─ index.md +``` + +```md +// posts/your-post/index.md + +![](./a.png) +![](./b.png) +``` +::: + + +::: en + +The following are some of our recommended best practices, but you do not need to fully adhere to them. + +1. It is recommended to name folders and files in English. + +```text +blog/pages/posts/your-post. md +``` +2. When inserting third-party/large amounts of dynamic content, priority should be given to encapsulating it as a component and placing it in `blog/components`, and introducing it through component tag names. + +```vue +// blog/components/BszComponent.vue + + + + +``` + +```md +// blog/pages/posts/test-custom-component.md + +# hello World + +``` + +3. If you do not want to use external links in the post, it is recommended to create folders and reference images in the following format for easy management and migration. + +```text +posts +├─ your-post +│ ├─ a.png +| ├─ b.png +│ └─ index.md +``` + +```md +// posts/your-post/index.md + +![](./a.png) +![](./b.png) +``` + -- 使用英文命名文件夹与文件,如 `/posts/your-post.md`。 -- 如需使用本地图片(且仅在对应文章中展示),您可以新建文件夹 `/posts/your-post/`,并将图片放置其中,如 `/posts/your-post/your-image.png`。 - - -- 插入第三方/大量动态内容时,优先将其封装为组件放置于 `components`,并通过组件标签名引入。 +::: \ No newline at end of file