+
+ Markdown is simple and fast. I like it
+
+
+
+ ![safe](../assets/images/safe.svg ':class=img-normal')
+
+
Fast and secure
+
+ All files are local, build static websites faster, no database to manage, and say goodbye to Wordpress
+
+
+
+ ![simple](../assets/images/simple.svg ':class=img-normal')
+
+
Simple and extraordinary
+
+ Set up a website in a few simple steps. Powerful customization, easy to navigate
+
+
+
+ ![open-source](../assets/images/open-source.svg ':class=img-normal')
+
+
Open source cross-platform
+
+ Glidea is released under this MIT license and will always remain free and open source
+
+
+
+ ![themes](../assets/images/themes.svg ':class=img-normal')
+
+
Custom theme
+
+ Choose or design unique interface themes according to your preferences and needs
+
+
+
+ ![manager](../assets/images/manager.svg ':class=img-normal')
+
+
Easy to manage and build
+
+ Easier content management and a simpler build process
+
+
\ No newline at end of file
diff --git a/docs/en-us/_coverpage.md b/docs/en-us/_coverpage.md
new file mode 100644
index 0000000..e90e80a
--- /dev/null
+++ b/docs/en-us/_coverpage.md
@@ -0,0 +1,14 @@
+
+
+
+
+# Glidea 1.0
+
+> An artifact of static blog writing client,
+>
+> It can be easily written and deployed to the server
+
+[GitHub](https://github.com/wonder-light/glidea)
+[Start](en-us/docs/)
+
+![coverpage](../assets/images/R-C.jpg)
\ No newline at end of file
diff --git a/docs/en-us/_navbar.md b/docs/en-us/_navbar.md
new file mode 100644
index 0000000..0124436
--- /dev/null
+++ b/docs/en-us/_navbar.md
@@ -0,0 +1,8 @@
+
+
+* [Home](en-us/)
+* [Document](en-us/docs/)
+* [Theme](en-us/themes/)
+* Language
+ * [:cn: 简体中文](/)
+ * [:us: English](en-us/)
\ No newline at end of file
diff --git a/docs/en-us/_sidebar.md b/docs/en-us/_sidebar.md
new file mode 100644
index 0000000..e8d7141
--- /dev/null
+++ b/docs/en-us/_sidebar.md
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/en-us/docs/README.md b/docs/en-us/docs/README.md
new file mode 100644
index 0000000..a3f0283
--- /dev/null
+++ b/docs/en-us/docs/README.md
@@ -0,0 +1,54 @@
+
+# Glidea :id=glidea
+
+> A static blog writing client
+
+
+## Summarize :id=general
+
+Glidea makes it easier to build and manage a blog or any static site that
+you can use to record your life, mood, knowledge, notes, ideas, and more
+
+Check out [Quick Start](en-us/docs/start/quick.md) for details
+
+
+## Features👇 :id=features
+
+- 📝 You can use the concise **Markdown** syntax to create quickly
+
+- 🌉 You can give the article with a beautiful cover image and insert the image anywhere in the article
+
+- 🏷️ You can group articles by tags
+
+- 📋 You can customize the menu, you can create an external link menu
+
+- 💻 You can use this client on a desktop or mobile device
+
+- 🌎 You can use **𝖦𝗂𝗍𝗁𝗎𝖻 𝖯𝖺𝗀𝖾𝗌** or **Coding Pages** to show the world, the future will support more platform
+
+
+
+- 🗺️ You can use **Chinese Simplified**, **English** and so on
+
+- 🌁 You can use the default theme or any third party theme, has a strong theme customization ability
+
+- 🖥 You can customize the source folder, using OneDrive, Baidu web disk and other multi-device synchronization
+
+
+## Development :id=development
+
+If you want to contribute code, please refer to the [Contribution Guidelines](https://github.com/wonder-light/glidea/wiki/%E8%B4%A1%E7%8C%AE%E6%8C%87%E5%8D%97) in advance.
+
+
+## Donate :id=donate
+
+If you find Glidea helpful, or would like to contribute to my little work, please donate to me
+
+![donate](../../assets/images/reward_qrcode.png ':size=280')
+
+
+## License :id=license
+
+[MIT](https://github.com/wonder-light/glidea/blob/main/LICENSE). Copyright (c) 2024 wonder-light
diff --git a/docs/en-us/docs/_sidebar.md b/docs/en-us/docs/_sidebar.md
new file mode 100644
index 0000000..173319e
--- /dev/null
+++ b/docs/en-us/docs/_sidebar.md
@@ -0,0 +1,16 @@
+
+
+* Introduction
+ * [Intro](en-us/docs/)
+ * [Quick start](en-us/docs/start/quick.md)
+* Theme
+ * [Develop](en-us/docs/theme/dev.md)
+ * [Structure](en-us/docs/theme/struct.md)
+ * [Variable](en-us/docs/theme/var.md)
+ * [Custom](en-us/docs/theme/custom.md)
+ * [Share](en-us/docs/theme/shared.md)
+* Guide
+ * [Install](en-us/docs/guide/install.md)
+ * [FAQ](en-us/docs/guide/faq.md)
+ * [Feature](zh-cn/docs/guide/ability.md)
+* [Changelog](en-us/docs/changelog.md)
\ No newline at end of file
diff --git a/docs/en-us/docs/changelog.md b/docs/en-us/docs/changelog.md
new file mode 100644
index 0000000..238e274
--- /dev/null
+++ b/docs/en-us/docs/changelog.md
@@ -0,0 +1,4 @@
+
+# Change Log
+
+[filename](https://raw.githubusercontent.com/wonder-light/glidea/refs/heads/main/CHANGELOG-en.md ':include')
\ No newline at end of file
diff --git a/docs/en-us/docs/guide/faq.md b/docs/en-us/docs/guide/faq.md
new file mode 100644
index 0000000..b0730cc
--- /dev/null
+++ b/docs/en-us/docs/guide/faq.md
@@ -0,0 +1,3 @@
+# FAQ
+
+## 1
\ No newline at end of file
diff --git a/docs/en-us/docs/guide/install.md b/docs/en-us/docs/guide/install.md
new file mode 100644
index 0000000..d8ad939
--- /dev/null
+++ b/docs/en-us/docs/guide/install.md
@@ -0,0 +1,5 @@
+# Installing the client
+
+[install](../../../commont/install.md ':include')
+
+Current version: v1.0.0 [✨ What's new?](https://github.com/wonder-light/glidea/releases)
diff --git a/docs/en-us/docs/start/quick.md b/docs/en-us/docs/start/quick.md
new file mode 100644
index 0000000..710e37c
--- /dev/null
+++ b/docs/en-us/docs/start/quick.md
@@ -0,0 +1,51 @@
+
+
+# Quick start :id=start
+
+> Hello, welcome to start a pleasant trip to Glidea~
+
+
+## Install :id=install
+
+- Install [Glidea](en-us/docs/guide/install.md)
+
+
+## Writing :id=write
+
+Believe that you can do it yourself, come on, write!
+
+
+## Publish :id=publish
+
+?> Glidea provides the ability to deploy blogs to GitHub Pages, Coding Pages, and upload to your own server via SFTP. \
+Let's take GitHub as an example to explain the deployment process
+
+1.**Create a GitHub account and create a warehouse Token**
+
+ - Click on [GitHub](https://github.com/) to sign up
+ - Login after making, click [here](https://github.com/settings/tokens/new) to create a Token,**select repo permissions**
+ - Remember to copy the **Token** to your local site after it is generated, as the web page will no longer be able to see it once closed
+
+ ![token](../../../assets/images/quick-new-token.jpg ':class=img-cover')
+ ![access](../../../assets/images/quick-access-token.png ':class=img-cover')
+
+2.**Create a public repository for your built website files**
+
+ ![new-repo](../../../assets/images/quick-new-github-repo.jpg ':class=img-cover')
+
+3.**Go to Glidea for remote setup**
+
+ - Follow the example below to set up, and then click "Detect remote link" to check the configuration
+
+ ![sync](../../../assets/images/quick-github-sync.png ':class=img-cover')
+
+4.**Synchronization**
+
+ - Click the sync button in Glidea. Wait a few minutes for the initial deployment and you will be able to access it in your browser.\
+ The default address will be the domain name you filled in in step 3
+
+
+
+Above, to complete the construction of a static blog, looking forward to your every written
+
+🥰
\ No newline at end of file
diff --git a/docs/en-us/docs/theme/custom.md b/docs/en-us/docs/theme/custom.md
new file mode 100644
index 0000000..0d01a54
--- /dev/null
+++ b/docs/en-us/docs/theme/custom.md
@@ -0,0 +1,308 @@
+
+# Theme customization
+
+> Glidea provides powerful theme customization capabilities, you can design your own custom configuration to provide theme users
+
+Each theme is optionally paired with a `config.json` configuration file and a `style-overriding.dart` style overlay file
+
+
+## Example :id=example
+
+### config.json
+
+```json
+{
+ "name": "Notes",
+ "version": "1.0.0",
+ "author": "EryouHao",
+ "customConfig": [
+ {
+ "name": "skin",
+ "label": "Skin",
+ "group": "Skin",
+ "value": "white",
+ "type": "select",
+ "options": [
+ {
+ "label": "Simple white",
+ "value": "white"
+ },
+ {
+ "label": "Undertone black",
+ "value": "black"
+ }
+ ]
+ },
+ {
+ "name": "contentMaxWidth",
+ "label": "Maximum width of the content area",
+ "group": "Layout",
+ "value": "800px",
+ "type": "input",
+ "note": "Fillable pixel type (e.g. 320px) or percentage type (e.g. 38.2%)"
+ },
+ {
+ "name": "textSize",
+ "label": "Text content Text size",
+ "group": "Layout",
+ "value": "16px",
+ "type": "input",
+ "note": "px or rem(16px or 1rem)"
+ },
+ {
+ "name": "pageBgColor",
+ "label": "Web background color",
+ "group": "Color",
+ "value": "#ffffff",
+ "type": "input",
+ "card": "color",
+ "note": "Color string :(e.g. #EEEEEE, rgba(255, 255, 255, 0.9))"
+ },
+ {
+ "name": "github",
+ "label": "Github",
+ "group": "Social",
+ "value": "",
+ "type": "input",
+ "note": "Link address"
+ },
+ {
+ "name": "twitter",
+ "label": "Twitter",
+ "group": "Social",
+ "value": "",
+ "type": "input",
+ "note": "Link address"
+ },
+ {
+ "name": "weibo",
+ "label": "Microblog",
+ "group": "Social",
+ "value": "",
+ "type": "input",
+ "note": "Link address"
+ },
+ {
+ "name": "customCss",
+ "label": "Custom CSS",
+ "group": "Custom style",
+ "value": "",
+ "type": "textarea",
+ "note": ""
+ },
+ {
+ "name": "ga",
+ "label": "Trace ID",
+ "group": "Google statistics",
+ "value": "",
+ "type": "input",
+ "note": "UA-xxxxxxxxx-x"
+ }
+ ]
+}
+```
+
+### style-override.dart
+
+```dart
+void generateOverride(Map params) {
+ var result = "";
+ //Dark skin
+ if (params[skin] case String skin when skin != "white") {
+ result += '''
+ body{
+ color:#dee2e6;
+ }
+ a,.link{
+ color:#e9ecef;
+ }
+ ''';
+ }
+ //Maximum width of the content area - contentMaxWidth
+ if (params[contentMaxWidth] case String value when value != "800px") {
+ result += '''
+ .main{
+ max-width:${value};
+ }
+ ''';
+ }
+ //Text content Text size - textSize
+ if (params[textSize] case String size when size != "16px") {
+ result += '''
+ .post-detail.post.post-contentp{
+ font-size:${size};
+ }
+ ''';
+ }
+ // Page background color - pageBgColor
+ if (params[pageBgColor] case String bg when bg != "#ffffff") {
+ result += '''
+ body{
+ background:${bg};
+ }
+ ''';
+ }
+ //Text color - textColor
+ if (params[textColor] case String color when color != "#333333") {
+ result += '''
+ body{
+ color: ${color};
+ }
+ ''';
+ }
+ //Custom CSS - customCss
+ if (params.customCss case String css) {
+ result += css;
+ }
+ return result;
+}
+```
+
+Yes, as you can see, custom configuration is as simple and clear as that. Let's take a look at the specific fields and how to use them:
+
+
+## Field type configuration :id=field-config
+
+The root directory of each theme can contain a config.json file.
+
+This file contains the basic information of the theme such as: `name`, `version`, `author`, `repository`, etc.\
+there is a special field `customConfig`, this is the custom configuration field, type array,\
+the format for each element is as follows:
+
+```json
+{
+ "name": "Field variable name, which can be used in a template or style overlay file",
+ "label": "Field display name, the name displayed in the software",
+ "group": "The group to which the field belongs, and the group name displayed in the software",
+ "value": "Field default",
+ "type": "Field input type, optional values: 'input', 'select', 'textarea', 'radio', 'switch', 'picture', 'array', 'slider'",
+ "note": "The input field placeholder prompt copy is displayed below the form space",
+ "hint": "This parameter is available when type is input or textarea",
+ "card": "Field attached Card, optional values: 'color' (provides a quick selection of recommended color cards), 'post' (provides a selection of article data cards), available when type is 'input'",
+ "options": [ // This parameter is available when type is 'select' or 'radio'
+ {
+ "label": "Option display name",
+ "value": "Option corresponding value"
+ }
+ ]
+}
+```
+
+
+ ## Picture type configuration :id=image-config
+
+```json
+{
+ "name": "sidebarBgImage",
+ "label": "Sidebar background image",
+ "group": "Picture",
+ "value": "/media/images/sidebar-bg.jpg",
+ "type": "picture",
+ "note": ""
+}
+```
+
+
+## Slider type configuration :id=slider-config
+
+```json
+{
+ "name": "slider",
+ "label": "数量",
+ "group": "滑块",
+ "value": 10, //整数
+ "max": 100, // min = 0, max > 1, 整数
+ "type": "slider",
+ "note": ""
+}
+```
+
+## Array type configuration :id=array-config
+
+```json
+{
+
+ "name": "friends",
+ "label": "Friend link",
+ "group": "Friend",
+ "type": "array",
+ "value": [
+ {
+ "siteName": "Heart of island hey",
+ "siteLink": "https://fehey.com",
+ "siteLogo": "",
+ "description": "A front end"
+ },
+ {
+ "siteName": "Glidea Official website",
+ "siteLink": "https://glidea/nianian.cn",
+ "siteLogo": "",
+ "description": "A static blog writing client"
+ }
+ ],
+ // If there is no default data, write []
+ // Subentries are configured for other field types
+ "arrayItems": [
+ {
+ "label": "name",
+ "name": "siteName",
+ "type": "input",
+ "value": ""
+ },
+ {
+ "label": "link",
+ "name": "siteLink",
+ "type": "input",
+ "value": ""
+ },
+ {
+ "label": "Logo",
+ "name": "siteLogo",
+ "type": "picture-upload",
+ "value": ""
+ },
+ {
+ "label": "Description",
+ "name": "description",
+ "type": "textarea",
+ "value": ""
+ }
+ ],
+ "note": ""
+}
+```
+
+In most cases, using the input type is sufficient
+
+
+These fields can be used either in the template (corresponding to: [`site.customconfig.customField`](#configjson)) or in the style overlay file (corresponding to: input)
+
+When used in the template, you can play your imagination, social, statistics, friend chain, external chain background map, background music...
+
+## Style overlay configuration :id=style-override
+
+Of course, it can also be used in style overlay files:
+
+```dart
+void generateOverride(Map params) {
+ // params are custom field objects. You can add custom css based on field values
+ var result = '';
+ // Text content Text size - textSize
+ if (params[textSize] case String size when size != '16px') {
+ result += '''
+ body {
+ font-size: ${size};
+ }
+ ''';
+ }
+ // The final result is placed at the end of the 'main.css' file
+ return result;
+}
+```
+
+Here, I believe you have figured out how to add custom configuration capabilities to the theme,
+quickly develop a theme of your own, share to others will be better yo!
+
+If still not clear, refer to the built-in theme code structure:
+
+[Github themes zip](https://github.com/wonder-light/glidea/tree/main/assets/public/default-files.zip)
\ No newline at end of file
diff --git a/docs/en-us/docs/theme/dev.md b/docs/en-us/docs/theme/dev.md
new file mode 100644
index 0000000..a030ba5
--- /dev/null
+++ b/docs/en-us/docs/theme/dev.md
@@ -0,0 +1,118 @@
+
+# Theme development :id=theme
+
+> Glidea uses Jinja as the theme's template engine
+
+You can view the Default theme of the app here [Default Themes](https://github.com/wonder-light/glidea/tree/main/public/default-files.zip)
+
+You can quickly develop a custom theme based on Jinja's syntax
+
+🎉 We have prepared a theme development template for you, [check it out](https://github.com/wonder-light/glidea-theme-fog)!
+
+## Appoint :id=agreement
+
+We recommend that you name the theme `glidea-theme-`**\** so that users can search better,\
+such as **glidea-theme-notes**,\
+we also recommend that you submit your topic to GitHub and set up the **topic**,\
+So that users can directly click on the **topic** to search for your topic **glidea-theme-notes**
+
+Example:
+
+![topic](../../../assets/images/glidea-theme-topic.jpg ':class=img-cover')
+
+
+## Jinja basic introduction :id=Jinja
+
+Here are just a few of the most common syntax you will use to develop your theme. \
+Of course, if you want the most comprehensive syntax, \
+you can check the [Jinja](https://docs.jinkan.org/docs/jinja2/templates.html) documentation. \
+Support for Jinja can be found in the [jinja|dart](https://pub.dev/packages/jinja) documentation
+
+Example:
+
+```json
+{
+ "themeConfig": {
+ "footerInfo": "Powered by Glidea",
+ "pageSize": 10,
+ "showFeatureImage": true,
+ "siteDescription": "Review the old and learn the new",
+ "siteName": "Glidea",
+ "themeName": "notes"
+ },
+ "posts": [
+ {
+ "abstract": "Glidea A static blog writing client ",
+ "content": "Glidea A static blog writing client ↵↵👏 Welcome to use Glidea !",
+ "date": "2019-01-15 08:00:00",
+ "dateFormat": "2019-01-15",
+ "feature": "/post-images/hello-glidea.png",
+ "published": true,
+ "tags": ["Glidea"],
+ "fileName": "hello-glidea"
+ }
+ ]
+}
+```
+
+### Tag :id=tag
+
+- `{{ ... }}` Used to print the result of an expression to a template
+``` django
+{{ themeConfig.siteName }}
+{{ themeConfig.siteName|e }} // Escape it
+```
+
+
+
+- `{% ... %}` Used to execute statements such as for loops or assignments
+``` django
+{% for item in posts %}
+
+{% endfor %}
+```
+
+### Include :id=include
+
+The `include` statement is used to include a template,\
+And return the result of rendering the contents of that file in the current namespace:
+
+``` django
+{% include 'header.html' %}
+ Body
+{% include 'footer.html' %}
+```
+
+### Conditional judgment :id=if
+
+You can use `if` and `elif` and `else` to build multiple branches
+
+``` django
+{% if themeConfig.sick %}
+ Kenny is sick.
+{% elif themeConfig.dead %}
+ You killed Kenny! You bastard!!!
+{% else %}
+ Kenny looks okay --- so far
+{% endif %}
+```
+
+### Macro :id=macro
+
+It is used to make common behaviors reusable functions instead of manual repetitive work\
+Here is a small example of macros rendering form elements:
+
+``` django
+{% macro input(name, value='', type='text', size=20) -%}
+
+{%- endmacro %}
+```
+
+Macros can then be called like functions:
+
+``` django
+
{{ input('username') }}
+
{{ input('password', type='password') }}
Share your theme with your friends on GitHub
+
+Click [here](https://github.com/wonder-light/glidea/discussions/3) to share to the discussion area\
+Click [here](https://github.com/new) to upload to the GitHub repository
+
+## Template :id=template
+
+The following templates are used to share themes:
+
+```markdown
+
+
+[theme]:
+
+[introduce]:
+
+[repository]:
+
+[preview]:
+
+[screenshots]:
+
+
+
+## Theme Name
+
+## Introduce
+
+## Repository Address
+
+## Preview Address
+
+## Screenshots
+
+```
+
+Example:
+
+```markdown
+[theme]:fog
+
+[introduce]:Static blog themes are not suitable for bloggers who pursue simplicity
+
+[repository]:https://github.com/wonder-light/glidea-theme-fog
+
+[preview]:https://blog.nianian.cn
+
+[screenshots]:https://github.com/user-attachments/assets/f6e63470-f264-441e-b59f-3534f193ea00
+
+## Theme Name
+
+fog
+
+## Introduce
+
+Static blog themes are not suitable for bloggers who pursue simplicity
+
+## Repository Address
+
+[https://github.com/wonder-light/glidea-theme-fog][repository]
+
+## Preview Address
+
+[https://blog.nianian.cn][preview]
+
+## Screenshots
+
+![Screenshot_20250102_141138][screenshots]
+
+```
+
+
+## Repository :id=repo
+
+- Create a repository
+
+ The repository command format is `glidea-theme-`\
+
+ ![theme-shared-repo-1](../../../assets/images/theme-shared-repo-1.png ':class=img-cover')
+
+- Update README.md
+
+ Update the [template](#template) as shown in the following example:
+
+ ![theme-shared-repo-2](../../../assets/images/theme-shared-repo-2.png ':class=img-cover')
+
+- Set topics
+
+ Please add a `glidea-theme` theme so that others can search for it
+
+ ![theme-shared-repo-3](../../../assets/images/theme-shared-repo-3.png ':class=img-cover')
+
+
+## Discussion :id=discuss
+
+Please post it as a comment, not as a response
+
+![theme-shared-discuss-1](../../../assets/images/theme-shared-discuss-1.png ':class=img-cover')
diff --git a/docs/en-us/docs/theme/struct.md b/docs/en-us/docs/theme/struct.md
new file mode 100644
index 0000000..27fa934
--- /dev/null
+++ b/docs/en-us/docs/theme/struct.md
@@ -0,0 +1,64 @@
+
+# File structure :id=struct
+
+> Themes have some strongly agreed directory structures and optional static resource directories
+
+
+## j2 structure :id=j2
+
+```
+fly --------------------- Subject folder name (lowercase, delimited by a hyphen is recommended)
+├── assets -------------- Resource folder (optional, cannot be renamed)
+│ ├── media ----------- Theme Static resource directory (optional, cannot be renamed)
+│ │ └── fonts ------- Font ICONS Folder (Example)
+│ │ └── images ------ Image file for theme (Example)
+│ ├── styles ---------- Style folder (optional, not renaming)
+│ │ └── main.css ----- Master style file (optional, not renaming)
+├── static -------------- Static resource (optional, cannot be renamed)
+│ │ └── robots.txt --- (Example)
+└── templates ----------- Page Templates folder (required, not renamed)
+│ ├── _blocks --------- Page templates folder (optional, you can customize the name)
+│ │ ├── footer.j2
+│ │ ├── head.j2
+│ │ ├── header.j2
+│ ├── index.j2 -------- Home page, list page (required, not renamed)
+│ ├── post.j2 --------- Post page, list page (required, not renamed)
+│ ├── archives.j2 ----- Archives page, list page (required, not renamed)
+│ ├── tags.j2 --------- Tags page, list page (required, not renamed)
+│ ├── tag.j2 ---------- Tag page, list page (required, not renamed)
+│ └── friends.j2 ------ Custom template (optional, any name)
+├── config.json --------- Theme profile (Optional, recommended)
+└── style-override.dart - Theme Style Custom file (optional)
+```
+
+
+## dart structure :id=dart
+
+```
+fly --------------------- Subject folder name (lowercase, delimited by a hyphen is recommended)
+├── assets -------------- Resource folder (optional, cannot be renamed)
+│ ├── media ----------- Theme Static resource directory (optional, cannot be renamed)
+│ │ └── fonts ------- Font ICONS Folder (Example)
+│ │ └── images ------ Image file for theme (Example)
+│ ├── styles ---------- Style folder (optional, not renaming)
+│ │ └── main.css ----- Master style file (optional, not renaming)
+├── static -------------- Static resource (optional, cannot be renamed)
+│ │ └── robots.txt --- (Example)
+└── templates ----------- Page Templates folder (required, not renamed)
+│ ├── _blocks --------- Page templates folder (optional, you can customize the name)
+│ │ ├── footer.dart
+│ │ ├── head.dart
+│ │ ├── header.dart
+│ ├── index.dart ------ Home page, list page (required, not renamed)
+│ ├── post.dart ------- Post page, list page (required, not renamed)
+│ ├── archives.dart --- Archives page, list page (required, not renamed)
+│ ├── tags.dart ------- Tags page, list page (required, not renamed)
+│ ├── tag.dart -------- Tag page, list page (required, not renamed)
+│ └── friends.dart ---- Custom template (optional, any name)
+├── config.json --------- Theme profile (Optional, recommended)
+└── style-override.dart - Theme Style Custom file (optional)
+```
+
+
+As you can see, there are only five required files,`index`, `post`, `archives`, `tags`, `tag`
+(The organization must be based on the corresponding directory)
diff --git a/docs/en-us/docs/theme/var.md b/docs/en-us/docs/theme/var.md
new file mode 100644
index 0000000..192ef67
--- /dev/null
+++ b/docs/en-us/docs/theme/var.md
@@ -0,0 +1,257 @@
+
+# Page Variable :id=variables
+
+> The variables introduced during the creation of the page will vary from page to page
+
+## Page variable example :id=page-example
+
+### index page :id=index-page
+
+- [posts](#posts)
+- [menus](#menus)
+- [pagination](#pagination)
+- [themeConfig](#themeconfig)
+- [site](#site)
+
+### post page :id=post-page
+
+- [post](#post)
+- [menus](#menus)
+- [themeConfig](#themeconfig)
+- [commentSetting](#commentsetting)
+- [site](#site)
+
+### archives page :id=archives-page
+
+- [posts](#posts)
+- [menus](#menus)
+- [pagination](#pagination)
+- [themeConfig](#themeconfig)
+- [site](#site)
+
+### tags page :id=tags-page
+
+- [tags](#tags)
+- [menus](#menus)
+- [themeConfig](#themeconfig)
+- [site](#site)
+
+### tag page :id=tag-page
+
+- [tag](#tag)
+- [posts](#posts)
+- [menus](#menus)
+- [pagination](#pagination)
+- [themeConfig](#themeconfig)
+- [site](#site)
+
+### custom template :id=custom-template
+
+You can create a custom template in the templates folder,\
+for example, `friends.j2`, `about.j2`, `projects.j2`, `404.j2` and so on,\
+the resulting access path is\
+`http(s)://域名/friends`,\
+`http(s)://域名/about`,\
+`http(s)://域名/projects`,\
+`http(s)://域名/404`
+
+Available variables are as follows:
+
+- [menus](#menus)
+- [themeConfig](#themeconfig)
+- [commentSetting](#commentsetting)
+- [site](#site)
+
+?> Note: If the theme contains a custom template, \
+if the URL of the custom rendering template conflicts with the article URL, \
+the custom rendering template takes precedence over the article URL
+
+
+## Variable value example :id=variable-example
+
+?> The @ symbol is a reference to another field flag and is used only as a field description for this document
+
+### menus
+
+Menu array, specific menu field visible [menu](#menu)
+
+```js
+menus: [
+ @menu,
+ @menu,
+ @menn
+]
+```
+
+### posts
+
+Article array, specific Post field visible [post](#post)
+
+```js
+posts: [
+ @post,
+ @post,
+ @post
+]
+```
+
+### tags
+
+Tag array, specific tag field visible [tag](#tag)
+
+```js
+tags: [
+ @tag,
+ @tag,
+ @tag
+]
+```
+
+### pagination
+
+Page field for the article list
+
+```js
+pagination: {
+ prev: '', // Link to previous page
+ next: '', // Link to next page
+}
+```
+
+### menu
+
+Menu field
+
+```js
+menu: {
+ name: '首页',
+ link: '/',
+ openType: 'internal', // Open type: internal or external
+}
+```
+
+### post
+
+Article field
+
+```js
+post: {
+ content: '
Glidea A static blog writing client
',
+ fileName: 'hello-glidea',
+ abstract: '',
+ description: 'A static blog writing client, welcome to Glidea',
+ title: 'Hello Glidea',
+ tags: [@tag, @tag, @tag], // Article tag array, specifically see the tag field below
+ date: 'December 12o 2018, am',
+ dateFormat: '2018-12-12', // Fields formatted according to Glidea in-app dates
+ feature: 'post-images/hello-glidea.png', // If there is no cover picture, it is ''
+ link: 'https://xxx.com/post/hello-glidea',
+ hideInList: false, // Takes effect only for articles with no label set
+ isTop: false, // Whether the top article
+ toc: '