diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index 2be85718..813f09b9 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -8,6 +8,51 @@
margin: 0;
}
+/* en */
+body[data-page="index.md"] article.markdown-section {
+ max-width: 70%;
+}
+
+body[data-page="index.md"] article.markdown-section .item {
+ width: 150px;
+ margin-right: 10px;
+ display: inline-block;
+}
+
+body[data-page="index.md"] article.markdown-section p.item-title {
+ text-align: center;
+}
+
+/* zh_CN */
+body[data-page="zh_CN/README.md"] article.markdown-section {
+ max-width: 70%;
+}
+
+body[data-page="zh_CN/README.md"] article.markdown-section .item {
+ width: 150px;
+ margin-right: 10px;
+ display: inline-block;
+}
+
+body[data-page="zh_CN/README.md"] article.markdown-section p.item-title {
+ text-align: center;
+}
+
+/* ja */
+body[data-page="ja/README.md"] article.markdown-section {
+ max-width: 70%;
+}
+
+body[data-page="ja/README.md"] article.markdown-section .item {
+ width: 150px;
+ margin-right: 10px;
+ display: inline-block;
+}
+
+body[data-page="ja/README.md"] article.markdown-section p.item-title {
+ text-align: center;
+}
+
figure.thumbnails img {
margin: 0.75em 0;
border-radius: 3px;
diff --git a/docs/index.html b/docs/index.html
index b80ad15d..7843dfe5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -26,7 +26,7 @@
homepage : 'index.md',
loadNavbar : 'navbar.md',
loadSidebar: 'sidebar.md',
- autoHeader: true,
+ // autoHeader: true,
mergeNavbar: true, // for mobile device
nameLink: {
'/en/': '#/en/',
diff --git a/docs/index.md b/docs/index.md
index ef87cedf..de0ba18a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -13,25 +13,69 @@
**M5Core** *( **[Quick Start](en/quick_start/m5core/m5stack_core_quick_start)** )*
-[](en/core/basic) [](en/core/gray) [](en/core/fire)
+
+
+ 
+
+
BASIC
+
+
+ 
+
+
M5Stick
+
+
+ 
+
+
M5StickC
+
+
+ 
+
+
M5GO Lite
+
+
+ 
+
+
M5GO Kit
+
+
+ 
+
+
FACES Kit
+
+
+ 
+
+
LoRaWAN
+
+
+ 
+
+
SIM800L
+
+
+ 
+
+
COMMU
+
+
+ 
+
+
BATTERY
+
+
+ 
+
+
PROTO
+
+
+ 
+
+
STEPMOTOR
+
+
+ 
+
+
SERVO
+
+
+ 
+
+
LEGO+
+
+
+ 
+
+
ENCODER
+
+
+ 
+
+
JOYSTICK
+
+
+ 
+
+
Core BOTTOM
+
+
+ 
+
+
M5GO BOTTOM
+
+
+ 
+
+
M5GO RFID
+
+
+ 
+
+
M5GO CHARGER
+
+
+ 
+
+
ESP32CAM
+
+
+ 
+
+
M5Camera
+
+
+ 
+
+
M5CameraF
+
+
+ 
+
+
EARTH
+
+
+ 
+
+
LIGHT
+
+
+ 
+
+
ANGLE
+
+
+ 
+
+
THERMAL
+
+
+ 
+
+
BUTTON
+
+
+ 
+
+
Dual-BUTTON
+
+
+ 
+
+
JOYSTICK
+
+
+ 
+
+
CardKB
+
+
+ 
+
+
COLOR
+
+
+ 
+
+
HEART
+
+
+ 
+
+
MAKEY
+
+
+ 
+
+
RELAY
+
+
+ 
+
+
3.96Port
+
+
+ 
+
+
PROTO
+
+
+ 
+
+
EXT.IO
+
+
+ 
+
+
RS485
+
+
+ 
+
+
FINGER
+
+
+ 
+
+
WEIGHT
+
+
+ 
+
+
TRACE
+
+
+ 
+
+
NeoPixel
+
+
+ 
+
+
CatEar
+
+
+ 
+
+
NeoFlash
+
+
+ 
+
+
BUTTERFLY
+
+
+ 
+
+
LidarBOT
+
+
+ 
+
+
PIANO
+
+
+
+
+
BASIC
+
+
+
+
+
M5Stick
+
+
+
+
+
M5StickC
+
+
+
+
+
M5GO Lite
+
+
+
+
+
M5GO Kit
+
+
+
+
+
FACES Kit
+
+
+
+
Module
+
+
+
+
+
LoRaWAN
+
+
+
+
+
SIM800L
+
+
+
+
+
COMMU
+
+
+
+
+
BATTERY
+
+
+
+
+
PROTO
+
+
+
+
+
STEPMOTOR
+
+
+
+
+
SERVO
+
+
+
+
+
LEGO+
+
+
+
+
+
ENCODER
+
+
+
+
+
JOYSTICK
+
+
+
+
Base
+
+
+
+
+
Core BOTTOM
+
+
+
+
+
M5GO BOTTOM
+
+
+
+
+
M5GO RFID
+
+
+
+
+
M5GO CHARGER
+
+
+
+
Unit
+
+
+
+
+
ESP32CAM
+
+
+
+
+
M5Camera
+
+
+
+
+
M5CameraF
+
+
+
+
+
EARTH
+
+
+
+
+
LIGHT
+
+
+
+
+
ANGLE
+
+
+
+
+
THERMAL
+
+
+
+
+
BUTTON
+
+
+
+
+
Dual-BUTTON
+
+
+
+
+
JOYSTICK
+
+
+
+
+
CardKB
+
+
+
+
+
COLOR
+
+
+
+
+
HEART
+
+
+
+
+
MAKEY
+
+
+
+
+
RELAY
+
+
+
+
+
3.96Port
+
+
+
+
+
PROTO
+
+
+
+
+
EXT.IO
+
+
+
+
+
RS485
+
+
+
+
+
FINGER
+
+
+
+
+
WEIGHT
+
+
+
+
+
TRACE
+
+
+
+
+
NeoPixel
+
+
+
+
+
CatEar
+
+
+
+
+
NeoFlash
+
+
+
+
+
BUTTERFLY
+
+
+
+
+
LidarBOT
+
+
+
+
+
PIANO
+
+
+ 
+
+
Grove-T
+
+
+ 
+
+
Grove Cable
+
+
+ 
+
+
USB Downloader
+
+
+
Accessory
+
+
+
+
+
Grove-T
+
+
+
+
+
Grove Cable
+
+
+
+
+
USB Downloader
+
-
+#### (1) 点击 `Windows`，下载 Windows 版本的驱动安装包并解压
-2. 因为每次上传代码到M5Core之前都要确保UIFlow正与手上的M5Core连接，而不是其他M5Core，所以需要点击UIFlow IDE页面右上角的齿轮，并在弹出的对话框内输入手上M5Core屏幕上显示的`APIKEY`，最后点击保存。
+
-
- 
-
+#### (2) 根据您的 windows 操作系统类型，选择对应的驱动安装包
-然后UIFlow就会连接到M5Core，此时M5Core屏幕右上角的小圆点就会变成绿色，不然会是一直红色。
+* 32 位的 Windows 操作系统，选择 `CP210xVCPInstaller_x86_vx.x.x.x.exe`
-现在，可以继续下面的步骤，开始M5Core编程啦！
+* 64 位的 Windows 操作系统，选择 `CP210xVCPInstaller_x64_vx.x.x.x.exe`
-## 编程Core
+
-### a. 画一个UI
+#### (3) 双击执行
+
+
+
+
+
+#### (4) 检查确认 COM 串口号
+
+检查确认 COM 串口号，以确定串口驱动是否安装成功：
+
+将 Core 通过 USB Type-C 线连接电脑，打开 Windows 设备管理器，点击 `端口 (COM 和 LPT)` 以查看串口号。然后拔掉 USB 线，此时`端口 (COM 和 LPT)` 上消失的 COM 口就是该 Core 对应的 串口号。
+
+
+
+拔掉 USB 线之后，COM 口消失
+
+
+
+## 2. 烧录 UIFlow 固件
+
+#### (1) 下载最新的 M5Burner
+
+访问[官网](http://www.m5stack.com/download)，下载 M5Burner
+
+
+
+
+
+### (2) 烧录固件
+
+将 M5Core 通过 USB Type-C 线连接到电脑，解压刚刚下载的 M5Burner 压缩包, 然后双击可执行文件 `M5Burner.exe`
+
+选择板子正与电脑相连的`串口号`和 `921600 波特率`, 选择最新版本的 UIFlow 固件
+
+
+
+点击 `Burn` for downloading UIFlow firmware
+
+
+
+出现如下界面，表示固件烧录成功
+
+
+
+## 3. 配置 Wi-Fi
+
+#### (1) 选择`设置网络`
+
+成功地烧录了 UIFlow 固件之后，点击 Core 左上角的红色按钮，以重启设备。一旦 Core 开机之后，立马点击 C 按键，表示选择屏幕上的 `SETUP` 选项，用来配置网络。然后点击中间按键，选择 `Link Server: Flow.m5stack.com`。
+
+
+
+#### (2) 连接 AP
+
+打开手机或电脑的 Wi-Fi，然后连接屏幕上显示的 M5Core 的热点 `AP` ( 比如现在显示的 M5Stack-0d60 )，连接成功之后，打开浏览器输入网址 `192.168.4.1`，然后选择可联网的 Wi-Fi，输入密码。( 现在可以联网的 Wi-Fi 是 M5 )
+
+
+
+#### (2) 连接 UIFlow
+
+M5Core 成功连接可联网的 Wi-Fi ( 这里是 M5 )之后，屏幕会出现 `APIKEY` 和 可以访问到 UIFlow 网页的二维码
+
+*APIKEY 的说明：APIKEY 是设备唯一识别码。在使用 UIFlow 时，只要当前 UIFlow 连接了哪个设备的 APIKEY，最后编程代码就会下载到哪个设备。*
+
+
+
+屏幕上小圆点的状态说明：
+
+* 绿色代表 M5Core 成功连接上 Wi-Fi，也即在线状态
+
+* 红色代表 M5Core 离线状态
+
+## 4. 编程
+
+#### (1) 连接 UIFlow
+
+现在用手机或者平板扫描 M5Core 上的二维码，或者您使用电脑编程的话，在电脑的浏览器上输入网址`flow.m5stack.com`
+
+
+
+因为每次上传代码到 M5Core 之前都要确保 UIFlow 正与手上的 M5Core 连接，而不是其他 M5Core，所以需要点击 UIFlow IDE 页面右上角的齿轮，并在弹出的对话框内输入手上 M5Core 屏幕上显示的 `APIKEY`，点击保存，然后 UIFlow 就会连接到 M5Core
+
+
+
+
+
+现在，可以开始使用 UIFlow 编程啦！
+
+#### (2) 编程示例
+
+#### a. 画一个 UI
拖拽UIFlow IDE左上角的4种控件到`M5Stack Core`的UI界面，并点击页面右上角的`Run`按钮，执行效果。
-
- 
-
+
-### b. 编写Blockly程序
+
+#### b. 编写 Blockly 程序
从左边的`Emoji`分类里拖拽`Set emoji map in0`程序块到到`Blockly`的编码区域上，然后点击`Run`按钮。
-
- 
-
+
+
*例程源码地址: https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Core/M5_draw_heart.m5f*
-### c. 编写MicroPython程序
+#### c. 编写 MicroPython 程序
-复制以下代码到Python编辑区，然后点击右上角的`Run`执行代码
+复制以下代码到 Python 编辑区，然后点击右上角的 `Run` 执行代码
```Python
from m5stack import *
from m5ui import *
@@ -76,13 +160,12 @@ btnC = M5Button(name='ButtonC', text='ButtonC', visibility=False)
lcd.print("Hello M5Stack")
```
-
- 
-
+
-这时候，M5Core屏幕上会打印出`Hello M5Stack`字样。
-## 音乐例程
+这时候，M5Core 屏幕上会打印出 `Hello M5Stack` 字样。
+
+
## 相关视频
-**UIFlow的简介**
+**UIFlow 的简介**
-
+
-**UIFlow的快速指南**
+**UIFlow 的快速指南**
-
-
-
+
## 最后
-?> *如果您想了解学习UIFlow方面的编程的话，阅读 [UIFlow 的教程文档](https://m5stack.github.io/UIFlow_doc/cn/index.html).*
+?> *如果您想了解学习 UIFlow 方面的编程，阅读 [UIFlow 的教程文档](https://m5stack.github.io/UIFlow_doc/cn/index.html).*
diff --git a/docs/zh_CN/unit/rs485.md b/docs/zh_CN/unit/rs485.md
index 1bde3951..edcef47a 100644
--- a/docs/zh_CN/unit/rs485.md
+++ b/docs/zh_CN/unit/rs485.md
@@ -1,6 +1,4 @@
- {docsify-ignore-all}
-
-# RS485 - TTL转RS485通信Unit
+# RS485 - TTL转RS485通信Unit {docsify-ignore-all}
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+
+