docs: update doc for 'Directory Structure'

Author: ulivz

packages/docs/docs/guide/directory-structure.md

@@ -1,25 +1,23 @@
 # Directory Structure
 
-## User Side
-
-With following the principle of `Convention is superior to configuration`, the recommended document structure is as follows:
+VuePress follows the principle of **"Convention is better than configuration"**, the recommended document structure is as follows:
 
 ::: vue
 .
 ├── docs
-│   ├── .vuepress (_**Optional**_)
-│   │   ├── `components` (_**Optional**_)
-│   │   ├── `theme` (_**Optional**_)
+│   ├── .vuepress _(**Optional**)_
+│   │   ├── `components` _(**Optional**)_
+│   │   ├── `theme` _(**Optional**)_
 │   │   │   └── Layout.vue
-│   │   ├── `public` (_**Optional**_)
-│   │   ├── `styles` (_**Optional**_)
+│   │   ├── `public` _(**Optional**)_
+│   │   ├── `styles` _(**Optional**)_
 │   │   │   ├── index.styl
 │   │   │   └── palette.styl
-│   │   ├── `emplates` (_**Optional，Danger Zone**_)
+│   │   ├── `emplates` _(**Optional, Danger Zone**)_
 │   │   │   ├── dev.html
 │   │   │   └── ssr.html
-│   │   ├── `config.js` (_**Optional**_)
-│   │   └── `enhanceApp.js` (_**Optional**_)
+│   │   ├── `config.js` _(**Optional**)_
+│   │   └── `enhanceApp.js` _(**Optional**)_
 │   │ 
 │   ├── README.md
 │   ├── guide
@@ -35,9 +33,9 @@ Please note the capitalization of the directory name.
 
 - `docs/.vuepress`: It is used to store global configuration, components, static resources, etc.
 - `docs/.vuepress/components`: The Vue components in this directory will be automatically registered as global components.
-- `docs/.vuepress/theme`: Used to store local theme。
+- `docs/.vuepress/theme`: Used to store local theme.
 - `docs/.vuepress/style`: Stores style related files.
-- `docs/.vuepress/style/index.styl`: Automatically imported global style files, generated at the end of the final file, have a higher priority than the default style.
+- `docs/.vuepress/style/index.styl`: Automatically applied global style files, generated at the ending of the CSS file, have a higher priority than the default style.
 - `docs/.vuepress/style/palette.styl`: The palette is used to override the default color constants and to set the color constants of Stylus.
 - `docs/.vuepress/public`: Static resource directory.
 - `docs/.vuepress/template`: Store HTML template files.
@@ -46,7 +44,9 @@ Please note the capitalization of the directory name.
 - `docs/.vuepress/config.js`: Entry file of configuration, can also be `yml` or `toml`.
 - `docs/.vuepress/enhanceApp.js`: App level enhancement.
 
-In addition, for the directory structure above, the default page routing address is as follows:
+## Default Page Routing
+
+For the above directory structure, the default page routing paths are as follows:
 
 | Relative Path | Page Routing |
 |---|---|
@@ -56,6 +56,7 @@ In addition, for the directory structure above, the default page routing address
 
 **Also see:** 
 
-- [Theme]()
-- [Config]()
+- [Config](../config/README.md)
+- [Theme](../theme/README.md)
+- [Default Theme Config](../theme/default-theme-config.md)
 

packages/docs/docs/zh/guide/directory-structure.md

@@ -1,27 +1,23 @@
 # 目录结构
 
-## 用户视角
-
-VuePress 遵循 "约定优于于配置" 的原则，推荐的文档结构如下：
+VuePress 遵循 **“约定优于配置”** 的原则，推荐的目录结构如下：
 
 ::: vue
 .
 ├── docs
-│   ├── .vuepress (_**Optional**_)
-│   │   ├── `components` (_**Optional**_)
-│   │   ├── `layouts` (_**Optional**_)
-│   │   │   └── xxx.vue
-│   │   ├── `theme` (_**Optional**_)
+│   ├── .vuepress _(**可选的**)_
+│   │   ├── `components` _(**可选的**)_
+│   │   ├── `theme` _(**可选的**)_
 │   │   │   └── Layout.vue
-│   │   ├── `public` (_**Optional**_)
-│   │   ├── `styles` (_**Optional**_)
+│   │   ├── `public` _(**可选的**)_
+│   │   ├── `styles` _(**可选的**)_
 │   │   │   ├── index.styl
 │   │   │   └── palette.styl
-│   │   ├── `emplates` (_**Optional，Danger Zone**_)
+│   │   ├── `emplates` _(**可选的, 谨慎配置**)_
 │   │   │   ├── dev.html
 │   │   │   └── ssr.html
-│   │   ├── `config.js` (_**Optional**_)
-│   │   └── `enhanceApp.js` (_**Optional**_)
+│   │   ├── `config.js` _(**可选的**)_
+│   │   └── `enhanceApp.js` _(**可选的**)_
 │   │ 
 │   ├── README.md
 │   ├── guide
@@ -32,74 +28,35 @@ VuePress 遵循 "约定优于于配置" 的原则，推荐的文档结构如下
 :::
 
 ::: warning 注意
-请留意目录名称的大小写。
+请留意目录名的大写。
 :::
 
-
-
-如上，由 VuePress 约定的目录：
-
 - `docs/.vuepress`: 用于存放全局的配置、组件、静态资源等。
-- `docs/.vuepress/components`: 该目录下的 Vue 组件会被自动注册为全局组件。
-- `docs/.vuepress/layouts`: 该目录下的 Vue 组件会被自动注册为布局组件。
+- `docs/.vuepress/components`: 该目录中的 Vue 组件将会被自动注册为全局组件。
 - `docs/.vuepress/theme`: 用于存放本地主题。
-- `docs/.vuepress/style`: 存放样式相关的文件。
-- `docs/.vuepress/style/index.styl`: 自动被导入的全局样式文件，生成在最终文件的末尾，具有比默认样式更高的优先级。
-- `docs/.vuepress/style/palette.styl`: 调色板，用于覆盖默认的颜色常量，以及设定 Stylus 的颜色常量。
+- `docs/.vuepress/style`: 用于存放样式相关的文件。
+- `docs/.vuepress/style/index.styl`: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。
+- `docs/.vuepress/style/palette.styl`: 用于重写默认颜色常量，或者设置新的的 stylus 颜色常量。
 - `docs/.vuepress/public`: 静态资源目录。
-- `docs/.vuepress/template`: 存放 HTML 模板文件。
-- `docs/.vuepress/template/dev.html`: 开发环境的 HTML 模板文件。
-- `docs/.vuepress/template/ssr.html`: 基于 Vue SSR 的构建阶段的 HTML 模板文件。
-- `docs/.vuepress/config.js`: 配置入口文件，也可以是 `yml` 或 `toml`。
-- `docs/.vuepress/enhanceApp.js`: 应用级别的配置。
+- `docs/.vuepress/template`: 存储 HTML 模板文件。
+- `docs/.vuepress/template/dev.html`: 用于开发环境的 HTML 模板文件。
+- `docs/.vuepress/template/ssr.html`: 构建时基于 Vue SSR 的 HTML 模板文件。
+- `docs/.vuepress/config.js`: 配置文件的入口文件，也可以是 `YML` 或 `toml`。
+- `docs/.vuepress/enhanceApp.js`: 客户端应用的增强。
+
+**同时阅读:** 
 
-此外，对于上述的目录结构，默认情况下，生成的页面路由地址如下：
+- [配置](../config/README.md)
+- [主题](../theme/README.md)
+- [默认主题配置](../theme/default-theme-config.md)
 
-| 相对路径 | 页面路由 |
+## 默认的页面路由
+
+此外，对于上述的目录结构，默认页面路由地址如下：
+
+| 文件的相对路径 | 页面路由地址 |
 |---|---|
 | `/README.md` | `/` |
 | `/guide/README.md` | `/guide/` |
 | `/config.md` | `/config.html` |
 
-**Also see:** 
-
-- [Theme]()
-- [Config]()
-
-## 主题视角
-
-一个约定的主题目录结构和用户目录相似，它是这样的：
-
-::: vue
-theme
-├── `components` (_**Optional**_)
-│   └── xxx.vue
-├── `layouts`
-│   ├── Layout.vue (_**Required**_)
-│   └── 404.vue (_**Optional**_)
-├── `styles` (_**Optional**_)
-│   ├── index.styl
-│   └── palette.styl
-├── `templates` (_**Optional**_)
-│   ├── dev.html
-│   └── ssr.html
-├── `index.js` (_**Optional**_)
-└── package.json
-:::
-
-- `theme/components`: 主题的组件，不会被自动注册为全局组件，主题开发者可借助 `@vuepress/plugin-register-components` 来决定是否注册为全局组件。
-- `theme/layouts`: 主题的布局组件，其中 `Layout.vue` 为必需项。
-- `theme/style`: 同上。
-- `theme/template`: 同上。
-- `theme/index.js`: 主题配置的入口文件。
-
-
-一些要点：
-
-1. 用户的 `palette.styl` 比主题的 `palette.styl` 优先级更高，因此，主题可以定义自己的调色板，同时用户又可以调节它。
-2. 用户的 `index.styl` 和主题的 `index.styl` 都会被生成到最终的 `CSS` 文件中，但是用户的样式会生成得更晚，因此具有更高的优先级。
-2. 对于模板，以 `ssr.html` 为例，若用户的 `ssr.html` 不存在，则降级到主题的 `ssr.html`，若主题的 `ssr.html` 也不存在，则降级到默认的 `ssr.html`。
-
-::: warning Note
-在自定义 `ssr.html` 或 `dev.html` 时，最好在默认的[模板文件](https://github.com/vuejs/vuepress/blob/master/packages/%40vuepress/core/lib/app/index.dev.html)的基础上来修改，否则可能导致构建失败。
-:::