From 00b5d3a3bc566d412d52d95dde9cebb877a34673 Mon Sep 17 00:00:00 2001
From: vany5921 <908744431@qq.com>
Date: Wed, 18 Mar 2020 19:54:24 +0800
Subject: [PATCH] update docs format

---
 docs/zh_CN/module/faces.md        | 12 +----
 docs/zh_CN/module/facesII.md      |  6 +--
 docs/zh_CN/module/fan.md          | 14 +-----
 docs/zh_CN/module/goplus.md       | 19 +++----
 docs/zh_CN/module/gps.md          | 45 ++---------------
 docs/zh_CN/module/gsm.md          | 56 ++-------------------
 docs/zh_CN/module/joystick.md     | 61 +++--------------------
 docs/zh_CN/module/lego_plus.md    | 25 +++-------
 docs/zh_CN/module/lora.md         | 53 ++------------------
 docs/zh_CN/module/lora868.md      | 57 +++------------------
 docs/zh_CN/module/lorawan.md      | 82 ++-----------------------------
 docs/zh_CN/module/lte.md          | 12 ++---
 docs/zh_CN/module/nb-iot.md       | 19 ++-----
 docs/zh_CN/module/nb-iot_plus.md  | 18 ++-----
 docs/zh_CN/module/plus.md         | 50 ++-----------------
 docs/zh_CN/module/proto.md        | 12 +----
 docs/zh_CN/module/proto_kit.md    | 11 +----
 docs/zh_CN/module/servo.md        | 75 +++-------------------------
 docs/zh_CN/module/sim800.md       | 20 ++------
 docs/zh_CN/module/stepmotor.md    | 50 ++-----------------
 docs/zh_CN/module/usb.md          | 14 ++----
 docs/zh_CN/tool/usb_downloader.md | 12 +----
 docs/zh_CN/tool/usb_isp.md        | 16 ++----
 docs/zh_CN/unit/396port.md        | 17 +------
 docs/zh_CN/unit/accel.md          | 30 ++++-------
 docs/zh_CN/unit/adc.md            | 50 ++-----------------
 docs/zh_CN/unit/angle.md          | 59 ++--------------------
 docs/zh_CN/unit/butterfly.md      | 18 +------
 docs/zh_CN/unit/button.md         | 41 ++--------------
 docs/zh_CN/unit/cardkb.md         | 56 ++-------------------
 docs/zh_CN/unit/catear.md         | 22 ++-------
 docs/zh_CN/unit/color.md          | 55 +++------------------
 docs/zh_CN/unit/dac.md            | 40 ++-------------
 docs/zh_CN/unit/dual_button.md    | 53 ++------------------
 docs/zh_CN/unit/earth.md          | 51 ++-----------------
 docs/zh_CN/unit/env.md            | 43 ++--------------
 docs/zh_CN/unit/esp32cam.md       | 22 +--------
 docs/zh_CN/unit/extio.md          | 58 ++--------------------
 docs/zh_CN/unit/finger.md         | 53 ++------------------
 docs/zh_CN/unit/gps.md            | 45 ++---------------
 docs/zh_CN/unit/heart.md          | 60 +---------------------
 docs/zh_CN/unit/hex.md            | 55 ++-------------------
 42 files changed, 170 insertions(+), 1397 deletions(-)

diff --git a/docs/zh_CN/module/faces.md b/docs/zh_CN/module/faces.md
index 9325f151..2856d4fa 100644
--- a/docs/zh_CN/module/faces.md
+++ b/docs/zh_CN/module/faces.md
@@ -1,18 +1,13 @@
-# FACES BOTTOM{docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/faces_bottom/face_01.webp" width="30%" height="30%" ><img src="assets/img/product_pics/module/faces_bottom/face_02.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/module/faces_bottom/face_03.jpg" width="30%" height="30%" >
-
-
+# FACES BOTTOM
 
+<div class="product_pic"><img src="assets/img/product_pics/module/faces_bottom/face_01.webp"><img src="assets/img/product_pics/module/faces_bottom/face_02.jpg"></div>
 
 ## 描述
 
 **FACES BOTTOM** 是一款兼容M5Core的多功能面板底座，侧面直接引出M-BUS排针，方便连接各类外设，兼容FACES Kit中的所有功能面板，你可以根据项目需求灵活的更换面板。底座通过M-BUS总线与主机进行连接，使用I2C协议进行通信。底座内置600mAh可充电锂电池并配有电源管理芯片，方便作为手持设备使用。底座背面底部设有Pogo Pin触点，可通过充电底座进行充电，上方有M3螺丝孔和挂孔可以很方便的进行固定。
 
-
 <img src="assets/img/product_pics/module/faces_bottom/different.jpg" width="30%" height="30%" >
 
-
 ## 产品特性
 
 - 2.54mm排针排母输出
@@ -22,7 +17,6 @@
 - 产品尺寸：108.2mm x 54.2mm x 18.7mm
 - 产品重量：46g
 
-
 ## 产品清单
 
 - 1x FACES BOTTOM
@@ -37,12 +31,10 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/FACES%20BOTTOM.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/all/products/m5-faces-bottom-board';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/facesII.md b/docs/zh_CN/module/facesII.md
index 87a0ae8f..c610fc99 100644
--- a/docs/zh_CN/module/facesII.md
+++ b/docs/zh_CN/module/facesII.md
@@ -1,8 +1,6 @@
-# FACES II BOTTOM{docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/facesII_bottom/faceii_01.webp" width="30%" height="30%" ><img src="assets/img/product_pics/module/facesII_bottom/faceii_02.jpg" width="30%" height="30%" ><img src="assets/img/product_pics/module/facesII_bottom/faceii_03.jpg" width="30%" height="30%" >
-
+# FACES II BOTTOM
 
+<div class="product_pic"><img src="assets/img/product_pics/module/facesII_bottom/faceii_01.webp"><img src="assets/img/product_pics/module/facesII_bottom/faceii_02.jpg"></div>
 
 ## 描述
 
diff --git a/docs/zh_CN/module/fan.md b/docs/zh_CN/module/fan.md
index 1b540047..680f0af5 100644
--- a/docs/zh_CN/module/fan.md
+++ b/docs/zh_CN/module/fan.md
@@ -1,7 +1,6 @@
-# Module FAN {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_FAN.png" width="30%" height="30%"> 
+# Module FAN
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_FAN.png"></div>
 
 ## 描述
 
@@ -19,23 +18,14 @@
 -  产品尺寸：54.2mm x 54.2mm x 12.8mm
 -  产品重量：15.5g
 
-
 ## 包含
 
 -  1x M5Stack FAN 风扇散热模块
 
-
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/step-motor-module-adapter-fan-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/goplus.md b/docs/zh_CN/module/goplus.md
index 95702c38..51a9d390 100644
--- a/docs/zh_CN/module/goplus.md
+++ b/docs/zh_CN/module/goplus.md
@@ -1,8 +1,6 @@
-# Module GoPlus {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/goplus/goplus_p1.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/goplus/goplus_p2.jpg" width="30%" height="30%">
-
+# Module GoPlus
 
+<div class="product_pic"><img src="assets/img/product_pics/module/goplus/goplus_p1.jpg"> <img src="assets/img/product_pics/module/goplus/goplus_p2.jpg"></div>
 
 <!-- :memo:**[Description](#Description)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:octocat:**[Example](#Example)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:electric_plug:**[Schematic](#Schematic)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🛒**[Purchase](https://www.aliexpress.com/store/product/M5Stack-New-Arrival-PLUS-Module-Encoder-Module-with-MEGA328P-500mAh-Battery-ISP-IR-Transmitter-UART-GPIO/3226069_32949278724.html?spm=a2g1x.12024536.productList_5885013.pic_1)**-->
 
@@ -12,9 +10,6 @@
 
 配备2通道直流电机驱动、4通道舵机驱动接口、红外收发器、3个扩展端口B（GPIO端口）.具备多种功能特性，能够帮助你快速搭建功能强大的电机应用.
 
-<img src="assets/img/product_pics/module/goplus/goplus_p3.jpg" width="30%" height="30%"><img src="assets/img/product_pics/module/goplus/goplus_p4.jpg" width="30%" height="30%">
-
-
 通信协议：IIC（0x61）.
 
 ### 产品特性
@@ -48,38 +43,36 @@
 
 <img src="assets/img/product_pics/module/goplus/goplus_sch.jpg">
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## 参考文档
 
-
 - 协议手册 - **[I2C协议](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/GoPlus_I2C_Protocol%20operation%20instructions.pdf)**
 
 - 数据手册 - **[LV8548MC](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/LV8548MC-D.PDF)**
 
-
 ## 案例程序
 
+### Arduino
+
 - 驱动固件 - **[GoPlus](https://github.com/m5stack/GoPlus/tree/master/src)**
 - 测试程序 - **[GoPlus](https://github.com/m5stack/GoPlus/tree/master/test)**
 
 ### UIFLOW
 
+- [点击此处，获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GOPLUS/UIFLOW).
+
 <img src="assets/img/product_pics/module/goplus/goplus_p5.jpg">
 
-- [点击此处，获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GOPLUS/UIFLOW). 
 
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/goplus-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/gps.md b/docs/zh_CN/module/gps.md
index 1745fa8e..5c05ab15 100644
--- a/docs/zh_CN/module/gps.md
+++ b/docs/zh_CN/module/gps.md
@@ -1,8 +1,6 @@
-# Module GPS {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_gps_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_gps_02.png" width="30%" height="30%">
-
+# Module GPS
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_gps_01.png"><img src="assets/img/product_pics/module/module_gps_02.png"></div>
 
 ## 描述
 
@@ -10,9 +8,7 @@
 
 NEO-M8能够做到花费少量的时间，进行高灵敏度采集，并且保持系统低功耗.
 
-NEO-M8N 集成了 72 通道的 [u-blox](https://www.u-blox.com) M8 GNSS 引擎，支持多个 GNSS 系统：北斗, Galileo, GLONASS, GPS / QZSS，允许同时接收 3 个 GNSS 系统的数据。
-
-<img src="assets/img/product_pics/module/module_gps_07.png" width="70%" height="70%">
+NEO-M8N 集成了 72 通道的 [u-blox](https://www.u-blox.com) M8 GNSS 引擎，支持多个 GNSS 系统：北斗, Galileo, GLONASS, GPS / QZSS，允许同时接收 3 个 GNSS 系统的数据.
 
 M5Core与GPS模块之间使用UART通信协议，通过连接引脚**UART2 (GPIO16, GPIO17)**实现通讯.
 
@@ -46,7 +42,6 @@ M5Core与GPS模块之间使用UART通信协议，通过连接引脚**UART2 (GPIO
 -  1x M5Stack GPS 模块
 -  1x 外置天线(长度: 1 m)
 
-
 ## 应用
 
 - 基于 GPS 的物流跟踪管理
@@ -54,10 +49,6 @@ M5Core与GPS模块之间使用UART通信协议，通过连接引脚**UART2 (GPIO
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[GPS Info](https://www.u-blox.com/zh/product/neo-m8-series)** (GPS)
 
 - **[TinyGPS++库官网](http://arduiniana.org/libraries/tinygpsplus/)**
@@ -66,7 +57,6 @@ M5Core与GPS模块之间使用UART通信协议，通过连接引脚**UART2 (GPIO
 
 - **[u-blox Protocol Manual](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/u-blox8-M8_ReceiverDescrProtSpec_en.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -83,37 +73,10 @@ M5Core与GPS模块之间使用UART通信协议，通过连接引脚**UART2 (GPIO
 
 ### Arduino IDE
 
-*具体例程`GPSRaw.ino`请点击[这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GPS/Arduino)。*
+[点击这里下载Arduino示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GPS/Arduino)
 
 **注意: 为了使 GPS 模块获得良好信号，请在使用时将模块放置在室外.**
 
-```arduino
-#include <M5Stack.h>
-
-/* By default, GPS is connected with M5Core through UART2 */
-HardwareSerial GPSRaw(2);
-
-void setup() {
-  M5.begin();
-  GPSRaw.begin(9600);// GPS init
-  Serial.println("hello");
-  termInit();
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  if(Serial.available()) {
-    int ch = Serial.read();
-    GPSRaw.write(ch);
-  }
-  if(GPSRaw.available()) {
-    int ch = GPSRaw.read();// read GPS information
-    Serial.write(ch);
-    termPutchar(ch);
-  }
-}
-```
-
 烧录例程`GPSRaw.ino`之后，屏幕和串口显示终端会打印如下类似的信息
 
 <img src="assets/img/product_pics/module/module_example/GPS/example_module_gps_01.png">
diff --git a/docs/zh_CN/module/gsm.md b/docs/zh_CN/module/gsm.md
index 73c08cb4..8c168e2a 100644
--- a/docs/zh_CN/module/gsm.md
+++ b/docs/zh_CN/module/gsm.md
@@ -1,7 +1,6 @@
-# Module GSM {docsify-ignore-all}
-
-<img src="assets\img\product_pics\module\gsm\gsm_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\module\gsm\gsm_02.jpg" width="30%" height="30%">
+# Module GSM
 
+<div class="product_pic"><img src="assets\img\product_pics\module\gsm\gsm_01.jpg"><img src="assets\img\product_pics\module\gsm\gsm_02.jpg"></div>
 
 ## 描述
 
@@ -40,7 +39,6 @@
     电源按钮长按8s关机
     GPIO26高电平模块复位
 
-<!-- <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Module/EasyLoader_SIM800L_at.exe"><button type="button" class="btn btn-primary">点击查看全球运营商频段列表</button></a> -->
 
 ## 包含
 
@@ -77,55 +75,7 @@
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GSM/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-void IotWriteCommand(char cmd[],char date[]){
-  char buf[256] = {0};
-
-  if(cmd == NULL)
-  sprintf(buf,"AT\r\n");
-  else if(date == NULL)
-  sprintf(buf,"AT+%s\r\n",cmd);
-  else
-  sprintf(buf,"AT+%s=%s\r\n",cmd,date);
-  
-  Serial2.write(buf);
-}
-//AT+CSQ=?
-void get_time(void){
-  IotWriteCommand("CSQ=?",NULL);
-  while(Serial2.available()){
-    uint8_t ch = Serial2.read();
-    Serial.write(ch);
-    M5.Lcd.write(ch);
-  }
-}
-
-void setup() {
-  M5.begin();
-  
-  Serial.begin(115200);
-  Serial2.begin(115200, SERIAL_8N1, 16, 17);
-  pinMode(2, OUTPUT);
-  digitalWrite(2, 0);
-  delay(3000);
-  digitalWrite(2, 1);
-}
-
-void loop() {
- if(M5.BtnA.wasReleased()){
-    M5.Lcd.fillScreen(TFT_BLACK); 
-    M5.Lcd.setCursor(60,80,2);
-    get_time();
-  }
-  M5.update();
-}
-```
-
-
+[请点击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/GSM/Arduino)
 
 ### 管脚映射
 
diff --git a/docs/zh_CN/module/joystick.md b/docs/zh_CN/module/joystick.md
index f30d6541..05429f4b 100644
--- a/docs/zh_CN/module/joystick.md
+++ b/docs/zh_CN/module/joystick.md
@@ -1,20 +1,17 @@
-# Module JOYSTICK {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_joystick_01.png" width="30%" height="30%">
+# Module JOYSTICK
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_joystick_01.png"></div>
 
 ## 描述
 
 **JOYSTICK** 是一款兼容 FACE 套件的摇杆控制面板.通过推动面板上的摇杆能够进行角度、方向等数据的输入.使用I2C协议通讯，能够获取摇杆的偏移数据(X,Y坐标)，以及中间按钮的状态.在摇杆的周围嵌入了由12个LED组成的LED bar，你可以根据你的需求自定义LED灯的发光形式.
 
-JOYSTICK I2C 地址 0x5E.
-
 <img src="assets/img/product_pics/module/module_joystick_03.png" width="60%" height="60%">
 
 ## 产品特性
 
 -  12 RGB Led
--  I2C 通讯
+-  I2C 通讯(0x5E)
 -  简洁的API接口
 -  产品尺寸：58.2mm x 54.2mm x 10mm
 -  产品重量：30g
@@ -90,62 +87,18 @@ void get_joystick_offset(void){
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码，[请点击此处. ](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/Arduino/faces_joystick)。*
-
-```arduino
-/*
-* faces_joystick.ino
-*/
-#include <M5Stack.h>
-
-#define FACE_JOY_ADDR     0X5E
-
-// declaration
-uint8_t x_data_L;
-uint8_t x_data_H;
-uint8_t y_data_L;
-uint8_t y_data_H;
-uint8_t button_data;
-uint16_t x_data;
-uint16_t y_data;
-
-// initialization
-M5.begin();
-Wire.begin();
-
-// get data from ENCONDER
-Wire.requestFrom(FACE_JOY_ADDR, 5);
-if (Wire.available()) {
-  y_data_L = Wire.read();
-  y_data_H = Wire.read();
-  x_data_L = Wire.read();
-  x_data_H = Wire.read();
-  button_data = Wire.read();// Z(0: released 1: pressed)
-  x_data = x_data_H << 8 |x_data_L;
-  y_data = y_data_H << 8 |y_data_L;
-}
-
-// IIC send data, 4bytes
-Wire.beginTransmission(FACE_JOY_ADDR);
-Wire.write(indexOfLED);
-Wire.write(r);
-Wire.write(g);
-Wire.write(b);
-Wire.endTransmission();
-```
+[请点击此处下载Arduino完整代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/Arduino/faces_joystick)
 
 ### UIFLOW
 
+- **[UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/UIFlow)**
+
 <img src="assets/img/product_pics/base/JOYSTICK.png" >
 
-- **[UIFlow固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/JOYSTICK/UIFlow)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/joystick-module';
-
-
+   
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/lego_plus.md b/docs/zh_CN/module/lego_plus.md
index 1018e51c..f9150ea8 100644
--- a/docs/zh_CN/module/lego_plus.md
+++ b/docs/zh_CN/module/lego_plus.md
@@ -1,19 +1,15 @@
-# Module LEGO+ {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_lego_plus_01.png" width="30%" height="30%"><img src="assets/img/product_pics/module/module_lego_plus_02.png" width="60%" height="60%">
-
+# Module LEGO+
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lego_plus_01.png"><img src="assets/img/product_pics/module/module_lego_plus_02.png"></div>
 
 ## 描述
 
 **LEGO+** 是M5Stack堆叠模块系列中的一款，LEGO电机驱动模块.集成MEGA328和L293DD芯片,拥有4个电机驱动通道.采用直流电源输入设计用于功率补充,并通过M-BUS，自动为顶部的M5Core供电.
-
-串行通信协议: I2C (地址:0x56).
-
 使用LEGO+ 模块能够简单快速的驱动 LEGO 电机.LEGO 电机是LEGO科技系列的技术件之一，其目的是为了创造更先进、具有更强大功能的模型.相比普通LEGO简单的砖砌建筑而言, LEGO 电机能够赋予模型更多的生命力.
 
 ## 产品特性
 
+- 通信协议: I2C (地址:0x56)
 - DC 输入: 6-12V
 - DC 连接器类型: XT60 (female)
 - 4x LEGO 电机接口
@@ -28,13 +24,9 @@
 -  1x 10cm LEGO 电机线
 -  1x DC 电源连接器
 
-
-
 ## 相关链接
 
-
-- **[LEGO+ 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/firmware_328p)**
-
+- **[LEGO+ 328P固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/firmware_328p)**
 
 <!-- ### 1. Arduino IDE -->
 
@@ -50,7 +42,6 @@
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
@@ -61,18 +52,14 @@
 
 ### 1. Arduino
 
-*获取完整Arduino例程 [点击这里](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/LEGO_PLUS/LEGO_Test).*
+[点击这里获取完整Arduino例程](https://github.com/m5stack/M5Stack/tree/master/examples/Modules/LEGO_PLUS/LEGO_Test)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/UIFlow)。*
+[请点击此处获取UIFlow例程](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/UIFlow)
 
 <img src="assets/img/product_pics/module/module_example/LEGO_PLUS/example_module_lego_plus_03_zh_CN.png">
 
-### Arduino 328p frimware
-
-*To get the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LEGO_PLUS/firmware_328p)*
-
 ## 原理图
 
 <img src="assets/img/product_pics/module/lego_plus_sch.png">
diff --git a/docs/zh_CN/module/lora.md b/docs/zh_CN/module/lora.md
index b52cc5e9..90a88842 100644
--- a/docs/zh_CN/module/lora.md
+++ b/docs/zh_CN/module/lora.md
@@ -1,7 +1,6 @@
-# Module LoRa (433MHz) {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_lora_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lora_02.jpg" width="30%" height="30%">
+# Module LoRa (433MHz)
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lora_01.jpg"> <img src="assets/img/product_pics/module/module_lora_02.jpg"></div>
 
 ## 描述
 
@@ -42,7 +41,6 @@ LoRa和LoRaWAN允许与不同类型的物联网（IoT）设备，进行远程连
 
 - **[LoRaWAN 区域参数](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -67,52 +65,7 @@ LoRa和LoRaWAN允许与不同类型的物联网（IoT）设备，进行远程连
 
 * 红色字符串表示初始化失败.
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA/Arduino)*
-
-```arduino
-#include <M5Stack.h>
-#include <M5LoRa.h>
-
-//declaration
-String outgoing;                     // outgoing message
-byte msgCount = 0;                   // count of outgoing messages
-byte localAddress = 0xBB;            // address of this device
-byte destination = 0xFF;             // destination to send to
-
-//initialization
-M5.begin();
-LoRa.setPins();                      // set CS, reset, IRQ pin
-LoRa.begin(433E6);                   // initialize ratio at 915 MHz
-
-//send message
-void sendMessage(String outgoing) {
-  LoRa.beginPacket();                // start packet
-  LoRa.write(destination);           // add destination address
-  LoRa.write(localAddress);          // add sender address
-  LoRa.write(msgCount);              // add message ID
-  LoRa.write(outgoing.length());     // add payload length
-  LoRa.print(outgoing);              // add payload
-  LoRa.endPacket();                  // finish packet and send it
-  msgCount++;                        // increment message ID
-}
-
-//receive message
-void onReceive(int packetSize) {
-  if (packetSize == 0) return;       // if there's no packet, return
-  int recipient = LoRa.read();       // recipient address
-  byte sender = LoRa.read();         // sender address
-  byte incomingMsgId = LoRa.read();  // incoming msg ID
-  byte incomingLength = LoRa.read(); // incoming msg length
-
-  String incoming = "";
-
-  while (LoRa.available()) {
-    incoming += (char)LoRa.read();
-  }
-}
-
-onReceive(LoRa.parsePacket());
-```
+[请点击此处获取Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA/Arduino)
 
 <img src="assets/img/product_pics/module/module_example/LORA/example_module_lora_02.png">
 
diff --git a/docs/zh_CN/module/lora868.md b/docs/zh_CN/module/lora868.md
index 65341fc7..04577de7 100644
--- a/docs/zh_CN/module/lora868.md
+++ b/docs/zh_CN/module/lora868.md
@@ -1,7 +1,6 @@
-# Module LoRa868 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_lora868_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lora868_02.jpg" width="30%" height="30%">
+# Module LoRa868
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lora868_01.jpg"><img src="assets/img/product_pics/module/module_lora868_02.jpg"></div>
 
 ## 描述
 
@@ -42,6 +41,9 @@ LoRa和LoRaWAN允许与不同类型的物联网（IoT）设备，进行远程连
 
 - **[LoRaWAN 区域参数](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
+## 原理图
+
+-  **原理图** - [Lora Module](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/schematic/Modules/module_lora_sch.pdf)
 
 ## EasyLoader
 
@@ -67,52 +69,7 @@ LoRa和LoRaWAN允许与不同类型的物联网（IoT）设备，进行远程连
 
 * 红色字符串表示初始化失败.
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA868/Arduino)*
-
-```arduino
-#include <M5Stack.h>
-#include <M5LoRa.h>
-
-//declaration
-String outgoing;                     // outgoing message
-byte msgCount = 0;                   // count of outgoing messages
-byte localAddress = 0xBB;            // address of this device
-byte destination = 0xFF;             // destination to send to
-
-//initialization
-M5.begin();
-LoRa.setPins();                      // set CS, reset, IRQ pin
-LoRa.begin(868E6);                   // initialize ratio at 868 MHz
-
-//send message
-void sendMessage(String outgoing) {
-  LoRa.beginPacket();                // start packet
-  LoRa.write(destination);           // add destination address
-  LoRa.write(localAddress);          // add sender address
-  LoRa.write(msgCount);              // add message ID
-  LoRa.write(outgoing.length());     // add payload length
-  LoRa.print(outgoing);              // add payload
-  LoRa.endPacket();                  // finish packet and send it
-  msgCount++;                        // increment message ID
-}
-
-//receive message
-void onReceive(int packetSize) {
-  if (packetSize == 0) return;       // if there's no packet, return
-  int recipient = LoRa.read();       // recipient address
-  byte sender = LoRa.read();         // sender address
-  byte incomingMsgId = LoRa.read();  // incoming msg ID
-  byte incomingLength = LoRa.read(); // incoming msg length
-
-  String incoming = "";
-
-  while (LoRa.available()) {
-    incoming += (char)LoRa.read();
-  }
-}
-
-onReceive(LoRa.parsePacket());
-```
+[请点击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORA868/Arduino)
 
 ## 相关视频
 
@@ -120,12 +77,10 @@ onReceive(LoRa.parsePacket());
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Module/LoRa868.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/lora868-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/lorawan.md b/docs/zh_CN/module/lorawan.md
index bde8729e..5c132068 100644
--- a/docs/zh_CN/module/lorawan.md
+++ b/docs/zh_CN/module/lorawan.md
@@ -1,21 +1,15 @@
-# Module LoRaWAN {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_lorawan_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_lorawan_02.png" width="30%" height="30%">
-
+# Module LoRaWAN
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_lorawan_01.png"><img src="assets/img/product_pics/module/module_lorawan_02.png"></div>
 
 ## 描述
 
 **LoRaWAN** 是M5Stack堆叠模块系列中的一款，节点通信模块.该模块集成了由Ai-Thinker设计的RHF76-052模组，它是LoRaWAN™UART调制解调器&兼容设备，支持LoRaWAN通信.你可以使用M5Core作为主机MCU，然后通过简单的AT指令或UART去控制这个调制解调器.
-
 LoRaWAN基于LoRa远距离通信网络设计的一套通讯协议和系统架构.如果按协议分层来说LoRaWAN是媒体访问控制（MAC）层,LoRa是物理层.它是由LoRa联盟维护的路由协议，主要用作管理LPWAN网关和端节点设备之间的通信的网络协议.
-
 利用 LoRa / LoRaWAN 远距离低功耗传输的特点，并将其应用到实际项目中去提高设备工作效率.
-
-
 LoRaWAN默认的串口配置： 波特率为9600，8位数据位,无校验位,1位停止位.
 
-*注意: 位于模块丝印"LoRaWAN"的下方，提供了5个穿孔用作LoRaWAN模块固件升级.*
+注意: 位于模块丝印"LoRaWAN"的下方，提供了5个穿孔用作LoRaWAN模块固件升级.
 
 ## 产品特性
 
@@ -36,8 +30,6 @@ LoRaWAN默认的串口配置： 波特率为9600，8位数据位,无校验位,1
 - 接口: UART
 - 协议：AT命令
 - 嵌入式LoRaWAN协议栈
-- 频率：868/915 MHz
-- TXOP: 20dBm @ 868MHz/915MHz
 - 链路估算: 160dB
 - 天线: 外部 (通过PCB焊盘)
 - 电源电压范围：1.8~3.6V
@@ -77,7 +69,6 @@ LoRaWAN默认的串口配置： 波特率为9600，8位数据位,无校验位,1
 
 - **[LoRaWAN 区域参数](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/lorawantm_regional_parameters_v1.1rb_-_final.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -94,7 +85,7 @@ LoRaWAN默认的串口配置： 波特率为9600，8位数据位,无校验位,1
 
 ### Arduino IDE
 
-本案例将使用两个LoRaWAN模块，实现P2P(点对点)通讯，详情请参考 [LoRaWAN使用手册](http://wiki.ai-thinker.com/_media/lora/docs/rhf76-052_ho_to_use_ai-thinker_s_lorawan_modem.pdf)的3.6.
+本案例将使用两个LoRaWAN模块，实现P2P(点对点)通讯，详情请参考 [LoRaWAN使用手册](http://wiki.ai-thinker.com/_media/lora/docs/rhf76-052_ho_to_use_ai-thinker_s_lorawan_modem.pdf)的3.6
 
 **功能:**
 按下按键B设置LoRaWAN工作频率为433MHz，并发送字符串"Hello World".
@@ -103,69 +94,7 @@ LoRaWAN默认的串口配置： 波特率为9600，8位数据位,无校验位,1
 
 **注意:** 在编译该程序前，请将 `LoRaWan_for_M5Stack.rar` 解压缩到该路径`C:\Users\<user_name>\Documents\Arduino\libraries`.
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORAWAN/Arduino).*
-
-```arduino
-/*
-    device_A.ino
-*/
-#include <M5Stack.h>
-#include <LoRaWan.h>
-
-#define SerialUSB Serial
-
-// declaration
-M5.begin();
-SerialUSB.begin(9600);
-lora.init();
-delay(2000); // must delay for lorawan power on
-
-// 433MHz frequency initialization
-lora.initP2PMode(433, SF12, BW500, 8, 8, 20);
-
-// 868MHz frequency initialization
-lora.initP2PMode(868, SF12, BW500, 8, 8, 20);
-
-// send string
-lora.transferPacketP2PMode("hello world");
-
-// receive data
-short length = 0;
-short rssi = 0;
-memset(buffer, 0, 128);
-length = lora.receivePacketP2PMode(buffer, 128, &rssi, 1);
-```
-
-```arduino
-/*
-    device_B.ino
-*/
-#include <M5Stack.h>
-#include <LoRaWan.h>
-
-#define SerialUSB Serial
-
-// declaration
-M5.begin();
-SerialUSB.begin(9600);
-lora.init();
-delay(2000); // must delay for lorawan power on
-
-// 433MHz frequency initialization
-lora.initP2PMode(433, SF12, BW500, 8, 8, 20);
-
-// 868MHz frequency initialization
-lora.initP2PMode(868, SF12, BW500, 8, 8, 20);
-
-// send string
-lora.transferPacketP2PMode("hello world");
-
-// receive data
-short length = 0;
-short rssi = 0;
-memset(buffer, 0, 128);
-length = lora.receivePacketP2PMode(buffer, 128, &rssi, 1);
-```
+[请点击此处下载完整代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/LORAWAN/Arduino)
 
 <img src="assets/img/product_pics/module/module_example/LORAWAN/example_module_lorawan_01.png">
 
@@ -173,7 +102,6 @@ length = lora.receivePacketP2PMode(buffer, 128, &rssi, 1);
 
 <img src="assets/img/product_pics/module/lorawan_sch.png">
 
-
 <script>
 
    var purchase_link = 'https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-1172588093.61.6c2275f4nUJEfh&id=580998112819';
diff --git a/docs/zh_CN/module/lte.md b/docs/zh_CN/module/lte.md
index a1f88fa5..8861160f 100644
--- a/docs/zh_CN/module/lte.md
+++ b/docs/zh_CN/module/lte.md
@@ -1,7 +1,6 @@
-# Module LTE {docsify-ignore-all}
-
-<img src="assets\img\product_pics\module\lte\lte_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\module\lte\lte_02.jpg" width="30%" height="30%">
+# Module LTE
 
+<div class="product_pic"><img src="assets\img\product_pics\module\lte\lte_01.jpg"> <img src="assets\img\product_pics\module\lte\lte_02.jpg"></div>
 
 ## 描述
 
@@ -62,8 +61,7 @@
   
 ## 原理图
 
--  **原理图** - [LTE Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_lte_sch.pdf)
-
+-  **原理图** - [LTE Module](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/schematic/Modules/module_lte_sch.pdf)
 
 ## EasyLoader
 
@@ -81,7 +79,7 @@
 
 ### Arduino IDE
 
-*如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5Stack/blob/master/examples/Modules/LTE/LTE.ino).*
+[请点击此处下载Arduino代码](https://github.com/m5stack/M5Stack/blob/master/examples/Modules/LTE/LTE.ino)
 
 ### 管脚映射
 
@@ -90,12 +88,10 @@
  <tr><td>Module LTE</td><td>RX</td><td>TX</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/m5stack-lte-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/nb-iot.md b/docs/zh_CN/module/nb-iot.md
index 26dc7806..70c3dbeb 100644
--- a/docs/zh_CN/module/nb-iot.md
+++ b/docs/zh_CN/module/nb-iot.md
@@ -1,14 +1,11 @@
-# Module NB-IoT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\module\nb-iot\nb_iot_01.jpg" width="30%" height="30%">&nbsp;&nbsp;&nbsp;<img src="assets\img\product_pics\module\nb-iot\nb_iot_02.jpg" width="30%" height="30%">
-<img src="assets/img/product_pics/module/nb-iot/NanoSIM.jpeg" width="60%" height="60%">
-
+# Module NB-IoT
 
+<div class="product_pic"><img src="assets\img\product_pics\module\nb-iot\nb_iot_01.jpg"><img src="assets\img\product_pics\module\nb-iot\nb_iot_02.jpg">
+</div>
 
 ## 描述
 
 **NB-IoT** 是M5Stack堆叠模块系列中的一款，NB-IoT通信模块.内部集成高性能 NB-IoT 全网通无线通信模组**M5311**.低功耗设计可以帮助客户获得更长的终端使用寿命.M5311 提供丰富的外部接口和协议栈，支持外接传感器设备，为用户的产品开发提供了极大的便利.同时支持 OneNET 云平台协议，真正实现无缝对接，快速开发.
-
 该模块特别适用于以超低功耗、超小尺寸为核心需求的智能表计、智能穿戴、智能停车、市政管理等loT行业
 
 <img src="assets\img\product_pics\module\nb-iot\nb_iot_03.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\module\nb-iot\nb_iot_04.jpg" width="30%" height="30%">
@@ -21,7 +18,6 @@
 - 电源按钮长按8s关机
 - GPIO26高电平模块复位
 
-
 !>**M5Stack Fire** 中的 GPIO 16 / 17 默认与PSRAM连接，这使得NB-IoT模块的TXD / RXD（GPIO16，GPIO17）与其产生冲突.因此，当你使用 M5Stack Fire 去驱动 NB-IoT 模块时，你需要将 NB-IoT 模块的 TXD 与 RXD 切断，然后通过飞线引至另一组 UART 引脚.
 
 ## 产品特性
@@ -60,8 +56,6 @@
 -  1x Nano IoT SIM卡
 -  1x NB-IoT 模块
 
-
-
 ## 应用
 
 -  智能表计
@@ -82,8 +76,6 @@
  <tr><td>Middle East, North Africa</td><td>B8(900), B20(800)</td></tr>
 </table>
 
-
-
 <!-- North America: B4 (1700), B12 (700), B66 (1700), B71 (600), B26 (850) 
 Asia Pacific: B1(2100), B3(1800), B5(850), B8(900), B18(850), B20(800), B26(850)
 and B28(700); 
@@ -99,15 +91,12 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
 -  **AT Command** - [M5311 AT指令表](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M5311_AT_Command_Interface_Specification_en.pdf)
 
-
 ## 原理图
 
 -  **原理图** - [NB-IoT Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_nb_iot_sch.pdf)
 
 ## EasyLoader
 
-
-
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
 
 <a href="https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Module/EasyLoader_NBIOT_MODULE.exe"><button type="button" class="btn btn-primary">点击下载EasyLoader</button></a>
@@ -118,7 +107,6 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 案例程序
 
 ### Arduino IDE
@@ -136,7 +124,6 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/m5stack-nb-iot-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/nb-iot_plus.md b/docs/zh_CN/module/nb-iot_plus.md
index 2b9167ac..24a38672 100644
--- a/docs/zh_CN/module/nb-iot_plus.md
+++ b/docs/zh_CN/module/nb-iot_plus.md
@@ -1,10 +1,6 @@
-# NB-IoT Plus{docsify-ignore-all}
-
-<img src="assets\img\product_pics\module\nb-iot-plus\nb_iot_plus_01.webp" width="30%" height="30%">
-<img src="assets\img\product_pics\module\nb-iot-plus\nb_iot_plus_02.webp" width="30%" height="30%">
-<img src="assets\img\product_pics\module\nb-iot-plus\nb_iot_plus_03.webp" width="30%" height="30%"> 
-
+# NB-IoT Plus
 
+<div class="product_pic"><img src="assets\img\product_pics\module\nb-iot-plus\nb_iot_plus_01.webp"><img src="assets\img\product_pics\module\nb-iot-plus\nb_iot_plus_02.webp"></div> 
 
 ## 描述
 
@@ -22,7 +18,6 @@
 - 电源按钮长按8s关机
 - GPIO26高电平模块复位
 
-
 !>**M5Stack Fire** 中的 GPIO 16 / 17 默认与PSRAM连接，这使得NB-IoT Plus模块的TXD / RXD（GPIO16，GPIO17）与其产生冲突.因此，当你使用 M5Stack Fire 去驱动 NB-IoT Plus模块时，你需要将 NB-IoT Plus模块的 TXD 与 RXD 切断，然后通过飞线引至另一组 UART 引脚.
 
 ## 产品特性
@@ -53,9 +48,6 @@
     - 灵敏度:
         -114dBm( 无重传 )
         -130dBm( 开启重传 )
-
-## 尺寸重量
-
 - 产品尺寸：54mm x 54mm x 13mm
 - 产品重量：9g
 
@@ -98,10 +90,9 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
 -  **AT Command** - [M5311 AT指令表](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/M5311_AT_Command_Interface_Specification_en.pdf)
 
-
 ## 原理图
 
--  **原理图** - [NB-IoT Plus Module](https://github.com/m5stack/M5-Schematic/blob/master/Modules/module_nb_iot_sch.pdf)
+-  **原理图** - [NB-IoT Plus Module](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/schematic/Modules/module_nb_iot_sch.pdf)
 
 ## EasyLoader
 
@@ -133,7 +124,7 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
 ### Arduino IDE
 
-*获取示例代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/NB-IoT_PLUS).*
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/NB-IoT_PLUS)
 
 ### 管脚映射
 
@@ -146,7 +137,6 @@ Middle East and North Africa: B8(900) and B20(800);  -->
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/m5stack-nb-iot-plus-module-m5311-gb';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/plus.md b/docs/zh_CN/module/plus.md
index b6d03d41..fd01c6a9 100644
--- a/docs/zh_CN/module/plus.md
+++ b/docs/zh_CN/module/plus.md
@@ -1,8 +1,6 @@
-# Module PLUS {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_plus_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_plus_02.png" width="30%" height="30%">
-
+# Module PLUS
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_plus_01.png"><img src="assets/img/product_pics/module/module_plus_02.png"></div>
 
 ## 描述
 
@@ -30,13 +28,8 @@ PLUS 上的PORT C 和 PORT B 的丝印画反了，使用时请注意。黑色的
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[PLUS 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/firmware_328p)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -49,7 +42,6 @@ PLUS 上的PORT C 和 PORT B 的丝印画反了，使用时请注意。黑色的
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
@@ -60,47 +52,13 @@ PLUS 上的PORT C 和 PORT B 的丝印画反了，使用时请注意。黑色的
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/Arduino).*
-
-```arduino
-/*
-* 读取齿轮电位器的数据和发送红外光线
-*/
-#include <Arduino.h>
-#include <M5Stack.h>
-
-#define IrPin 13
-#define PLUS_ADDR 0x62
-
-// declaration
-int32_t number = 0;
-uint8_t press = 0;
-
-// initialization
-M5.begin(true, false, false);
-Wire.begin();
-ledcSetup(1, 38000, 10); ledcAttachPin(IrPin, 1);// IR Pin setting
-
-// read data
-Wire.requestFrom(PLUS_ADDR, 2);
-while(Wire.available()) {
-    int8_t encode = Wire.read();
-    uint8_t press_n = Wire.read();
-    number += encode;
-    if(press_n == 0xff) {
-        press = 0;//encoder was pressed
-    }
-    else {
-        press = 1;//encoder was releaed
-    }
-}
-```
+[请点击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/Arduino)
 
 ### UIFLOW
 
 <img src="assets/img/product_pics/module/module_plus_03.jpg">
 
-- [点击此处，获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/UIFLOW). 
+- [点击此处，获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/PLUS/UIFLOW)
 
 ## 原理图
 
diff --git a/docs/zh_CN/module/proto.md b/docs/zh_CN/module/proto.md
index 3f3cdd04..4db60c92 100644
--- a/docs/zh_CN/module/proto.md
+++ b/docs/zh_CN/module/proto.md
@@ -1,8 +1,6 @@
-# Module PROTO {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_proto_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_proto_02.png" width="30%" height="30%">
-
+# Module PROTO
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_proto_01.png"><img src="assets/img/product_pics/module/module_proto_02.png"></div>
 
 ## 描述
 
@@ -40,12 +38,6 @@
 
 -  1x M5Stack PROTO 模块
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/proto-module';
diff --git a/docs/zh_CN/module/proto_kit.md b/docs/zh_CN/module/proto_kit.md
index a7b7e5db..a83df842 100644
--- a/docs/zh_CN/module/proto_kit.md
+++ b/docs/zh_CN/module/proto_kit.md
@@ -1,13 +1,11 @@
-# Module PROTO-Kit {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/proto_kit/module_proto_kit_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/module/proto_kit/module_proto_kit_02.jpg" width="30%" height="30%">
+# Module PROTO-Kit
 
+<div class="product_pic"><img src="assets/img/product_pics/module/proto_kit/module_proto_kit_01.jpg"><img src="assets/img/product_pics/module/proto_kit/module_proto_kit_02.jpg"></div>
 
 ## 描述
 
 **PROTO-Kit** 是一款PROTO功能模块套件，除了PROTO板模块，它还配备了DHT12（温度、湿度传感器），M-BUS插座等配件.PROTO模块是一个纯粹的通用型万能板，你可以完全自由的根据自己的需求搭建电路,并通过M-BUS与顶层的M5Core进行交互.
 
-
 ## 产品特性
 
 - 孔尺寸: 0.039" 1mm (CNC钻孔)
@@ -53,11 +51,6 @@
 
 - **[DHT12 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/DHT12_en.pdf)**
 
-- **[官方频道视频](https://www.youtube.com/channel/UCozgFVglWYQXbvTmGyS739w)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/experimental-proto-board-set';
diff --git a/docs/zh_CN/module/servo.md b/docs/zh_CN/module/servo.md
index 8999af3f..5e64ff2e 100644
--- a/docs/zh_CN/module/servo.md
+++ b/docs/zh_CN/module/servo.md
@@ -1,14 +1,10 @@
-# Module SERVO {docsify-ignore-all}
-
-<img src="assets\img\product_pics\module\servo\servo_01.jpg" width="30%"><img src="assets\img\product_pics\module\servo\servo_02.jpg" width="30%"><img src="assets\img\product_pics\module\servo\servo_03.jpg" width="30%">
-
+# Module SERVO
 
+<div class="product_pic"><img src="assets\img\product_pics\module\servo\servo_01.jpg"><img src="assets\img\product_pics\module\servo\servo_02.jpg"></div>
 
 ## 描述
 
-**SERVO** 是M5Stack堆叠模块系列中的一款，舵机驱动模块.拥有12个舵机驱动通道，最大功率14瓦，可同时驱动多个 SERVO 舵机.采用直流电源输入设计用于功率补充,并通过 M-BUS，自动为顶部的 M5Core 供电.将这一种简单快捷的舵机驱动方式应用在你的项目中，将提升你的开发效率.
-
-SERVO 基于 MEGA328 芯片进行 I2C 通信(0x53).
+**SERVO** 是M5Stack堆叠模块系列中的一款，舵机驱动模块.拥有12个舵机驱动通道，最大功率14瓦，可同时驱动多个 SERVO 舵机.采用直流电源输入设计用于功率补充,并通过 M-BUS，自动为顶部的 M5Core 供电.将这一种简单快捷的舵机驱动方式应用在你的项目中，将提升你的开发效率.SERVO 基于 MEGA328 芯片进行 I2C 通信(0x53).
 
 ## 产品特性
 
@@ -32,10 +28,6 @@ SERVO 基于 MEGA328 芯片进行 I2C 通信(0x53).
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[SERVO 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/firmware_328p)**
 
 ## EasyLoader
@@ -50,71 +42,23 @@ SERVO 基于 MEGA328 芯片进行 I2C 通信(0x53).
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## 案例程序
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/Arduino).*
-
-```arduino
-#include <Arduino.h>
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define SERVO_ADDR 0x53
-void setup() {
-    M5.begin(true, false, true);
-    M5.Lcd.setTextFont(4);
-    M5.Lcd.setCursor(70, 100);
-    M5.Lcd.print("Servo Example");
-
-    Wire.begin(21, 22, 100000);
-}
-
-// addr 0x01 means "control the number 1 servo by us"
-void Servo_write_us(uint8_t number, uint16_t us) {
-    Wire.beginTransmission(SERVO_ADDR);
-    Wire.write(0x00 | number);
-    Wire.write(us & 0x00ff);
-    Wire.write(us >> 8 & 0x00ff);
-    Wire.endTransmission();
-}
-
-// addr 0x11 means "control the number 1 servo by angle"
-void Servo_write_angle(uint8_t number, uint8_t angle) {
-    Wire.beginTransmission(SERVO_ADDR);
-    Wire.write(0x10 | number);
-    Wire.write(angle);
-    Wire.endTransmission();
-}
-
-void loop() {
-    for(uint8_t i = 0; i < 12; i++){
-        Servo_write_us(i, 700);
-        // Servo_write_angle(i, 0);
-    }
-    delay(1000);
-    for(uint8_t i = 0; i < 12; i++){
-        Servo_write_us(i, 2300);
-        // Servo_write_angle(i, 180);
-    }
-    delay(1000);
-}
-```
+[请点击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/Arduino)
 
 ### 2. UIFlow
 
-想要探索最简单的Servo编程驱动方式吗？快试试Blockly编程平台[UIFlow](http://flow.m5stack.com).
+想要探索最简单的Servo编程驱动方式吗？快试试Blockly编程平台[UIFlow](http://flow.m5stack.com)
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/UIFlow).*
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SERVO/UIFlow)
 
 <img src="assets/img/product_pics/module/module_example/SERVO/example_module_servo_01.png">
 
@@ -130,17 +74,10 @@ void loop() {
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/Servo/E4%20-%20Servo%20Demo(UIFlow%20Tutorials%205).mp4" type="video/mp4">
 </video>
 
-**SERVO 的案例**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Servo.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/servo-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/sim800.md b/docs/zh_CN/module/sim800.md
index 269f01ef..e991d990 100644
--- a/docs/zh_CN/module/sim800.md
+++ b/docs/zh_CN/module/sim800.md
@@ -1,14 +1,11 @@
-# Module SIM800L {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_sim800_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_sim800_02.png" width="30%" height="30%">
+# Module SIM800L
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_sim800_01.png"><img src="assets/img/product_pics/module/module_sim800_02.png"></div>
 
 ## 描述
 
 **SIM800L** 是M5Stack堆叠模块系列中的一款，GSM/GPRS通信模块.内部集成SIM800L、GSM / GPRS，仅兼容2G网络.如果你想要为你的设计添加蜂窝模块以获得语音，文本和短信功能，SIM800L模块会是一个不错的选择.
 
-通信协议: UART
-
 ## 产品特性
 
 - 3.5 mm 音频插孔
@@ -21,7 +18,7 @@
     GSM 传输 (平均值): 350 mA
     GSM 传输 (峰值): 2000mA
 - 模块尺寸：25 x 23 mm
-- 接口：UART（最大2.8V）和AT命令
+- 通讯接口：UART（最大2.8V）和AT命令
 - SIM卡插座类型: microSIM (底部)
 - 支持的频率：四频段（850/950/1800 / 1900 MHz）
 - 天线连接器: IPX
@@ -31,7 +28,6 @@
 - 产品尺寸：54.2mm x 54.2mm x 12.8mm
 - 产品重量：16.5g
 
-
 !>**M5Stack Fire** 中的 GPIO 16 / 17 默认与PSRAM连接，这使得SIM800L模块的TXD / RXD（GPIO16，GPIO17）与其产生冲突.因此，当你使用 M5Stack Fire 去驱动 SIM800L模块时，你需要将 SIM800L 模块的 TXD 与 RXD 切断，然后通过飞线引至另一组 UART 引脚.
 
 ## 管脚映射
@@ -56,12 +52,6 @@
 -  带短信通知的网页爬虫系统
 -  远程抄表系统
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -78,7 +68,7 @@
 
 - **Arduino**
 
-*Use with Arduino, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SIM800/Arduino/send_short_message)*
+[点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/SIM800/Arduino/send_short_message)
 
 ## 原理图
 
@@ -98,12 +88,10 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/SMS%20Receive.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/gsm-sim800-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/stepmotor.md b/docs/zh_CN/module/stepmotor.md
index 02e7b527..886028fe 100644
--- a/docs/zh_CN/module/stepmotor.md
+++ b/docs/zh_CN/module/stepmotor.md
@@ -1,10 +1,9 @@
-# Module STEPMOTOR {docsify-ignore-all}
+# Module STEPMOTOR
 
-<img src="assets/img/product_pics/module/module_stepmotor_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_stepmotor_02.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_stepmotor_03.png" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/module/module_stepmotor_01.png"><img src="assets/img/product_pics/module/module_stepmotor_02.png"></div>
 
 <!-- <img src="assets/img/product_pics/module/module_stepmotor_04.png" width="30%" height="30%"> -->
 
-
 ## 描述
 
 **STEPMOTOR** 是M5Stack堆叠模块系列中的一款，步进电机驱动模块.该模块能够通过 **GRBL** 库同时驱动3个步进电机.因此非常适合应用在运动控制项目.
@@ -33,10 +32,6 @@
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[STEPMOTOR 固件](https://github.com/m5stack/stepmotor_module/tree/master/Firmware%20for%20stepmotor%20module/GRBL-Arduino-Library)**
 
 - **[DRV8825 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/DRV8825_en.pdf)**
@@ -53,59 +48,23 @@
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ## 案例程序
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/stepmotor_module/tree/master/Example/Arduino).*
-
-```adrduino
-/*
-    If Button A was pressed,
-    stepmotor will rotate back and forth at a time
-*/
-
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define STEPMOTOR_I2C_ADDR 0x70
-
-// initialization
-M5.begin();
-Wire.begin();
-
-// Controlling Protocol:
-//  G<n> X<distance>Y<distance>Z<distance> F<speed>
-SendCommand(STEPMOTOR_I2C_ADDR, "G1 X20Y20Z20 F500");
-SendCommand(STEPMOTOR_I2C_ADDR, "G1 X0Y0Z0 F400");
-
-// Get Data from Module.
-Wire.requestFrom(STEPMOTOR_I2C_ADDR, 1);
-if (Wire.available() > 0) {
-  int u = Wire.read();
-  if (u != 0) Serial.write(u);
-}
-
-// Send Data to Module.
-while (Serial.available() > 0) {
-  int inByte = Serial.read();
-  SendByte(STEPMOTOR_I2C_ADDR, inByte);
-}
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/stepmotor_module/tree/master/Example/Arduino)
 
 ### 2. UIFlow
 
 想要探索最简单的 Step motor 编程驱动方式吗？快试试Blockly编程平台[UIFlow](flow.m5stack.com).
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Module/STEPMOTOR/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/blob/master/Module/STEPMOTOR/UIFlow).*
 
 <img src="assets/img/product_pics/module/module_example/STEPMOTOR/example_module_stepmotor_01.png">
 
@@ -118,7 +77,6 @@ while (Serial.available() > 0) {
 
    var purchase_link = 'https://m5stack.com/collections/m5-module/products/step-motor-module-adapter-fan-module';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/usb.md b/docs/zh_CN/module/usb.md
index 932b2602..6911a549 100644
--- a/docs/zh_CN/module/usb.md
+++ b/docs/zh_CN/module/usb.md
@@ -1,17 +1,15 @@
-# Module USB {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_usb_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_usb_02.png" width="30%" height="30%">
+# Module USB
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_usb_01.png"><img src="assets/img/product_pics/module/module_usb_02.png"></div>
 
 ## 描述
 
 **USB** 是M5Stack堆叠模块系列中的一款，USB驱动模块.集成了**MAX3421E**芯片，能够为任何带有SPI的系统添加USB主机或是外设功能接口.如果你想为你的设备添加标准的USB接口,这款USB模块会完美的解决方案.
 
-通讯协议: SPI
-
 ## 产品特性
 
 -  1x UAB 标准端口 A
+-  采用SPI通讯协议
 -  10x GPIO 引脚拓展
 -  拓展引脚 3v3, 5v, GND
 -  产品尺寸：54.2mm x 54.2mm x 12.8mm
@@ -30,7 +28,6 @@
 
 - **数据手册** - [MAX3421E](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/MAX3421E_en.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -43,13 +40,12 @@
 
 !>3.EasyLoader烧录前需要安装有CP210X（USB驱动程序），[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 案例程序
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino).*
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino)
 
 **注意:**
-在编译该程序前，你需要[点击此处下载相应的USB库](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino/Library).
+在编译该程序前，你需要[点击此处下载相应的USB库](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/USB/Arduino/Library)
 并将其解压缩到Arduino库路径中.(`C:\Users\<user_name>\Documents\Arduino\libraries`)
 
 <img src="assets/img/product_pics/module/module_usb_03.png">
diff --git a/docs/zh_CN/tool/usb_downloader.md b/docs/zh_CN/tool/usb_downloader.md
index 495518f3..6150b2aa 100644
--- a/docs/zh_CN/tool/usb_downloader.md
+++ b/docs/zh_CN/tool/usb_downloader.md
@@ -1,7 +1,6 @@
-# Accessory ESP32-Downloader {docsify-ignore-all}
-
-<img src="assets/img/product_pics/tool/usb_downloader_01.png" width="30%" height="30%"><img src="assets/img/product_pics/tool/usb_downloader_02.png" width="30%" height="30%">
+# Accessory ESP32-Downloader
 
+<div class="product_pic"><img src="assets/img/product_pics/tool/usb_downloader_01.png"><img src="assets/img/product_pics/tool/usb_downloader_02.png"></div>
 
 ## 描述
 
@@ -20,8 +19,6 @@
 |           5           |           RXD             |
 |           6           |           3.3V            |
 
-<img src="assets/img/product_pics/tool/usb_downloader_03.png"  width="60%" height="60%">
-
 **使用示意：**
 
 <img src="assets/img/product_pics/tool/usb_downloader_04.png">
@@ -30,11 +27,6 @@
 
 - 1x M5Stack USB Downloader
 
-## 尺寸重量
-
-- 包装尺寸:80mm x 50mm x 3mm
-- 包装重量:3g
-
 ## 相关链接
 
 - [用户指南](https://github.com/watson8544/M5Stack-UserGuide/blob/master/TOOLS_DOCS/M5Stack-USB-Downloader-UserGuide.md)
diff --git a/docs/zh_CN/tool/usb_isp.md b/docs/zh_CN/tool/usb_isp.md
index 55de0cef..f9348652 100644
--- a/docs/zh_CN/tool/usb_isp.md
+++ b/docs/zh_CN/tool/usb_isp.md
@@ -1,16 +1,14 @@
-# Tools USB-ISP {docsify-ignore-all}
-
-<img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_03.jpg" width="30%" height="30%">
+# Tools USB-ISP
 
+<div class="product_pic"><img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_01.jpg"><img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_03.jpg"></div>
 
 ## 描述
 
-**USB-ISP**是一款AVR编程器，工作电压为 3.3V / 5V，支持AVR和51单片机的程序下载.
-
+**USB-ISP**是一款AVR编程器，工作电压为 3.3V / 5V，支持AVR和51单片机的程序下载
 
 ## 参数
 
-*下载器上保留两个拓展引脚（RTS，DTR），可用于其他应用.*
+下载器上保留两个拓展引脚（RTS，DTR），可用于其他应用
 
 |       Pin      |        PinName        |
 | :-------:        |:----------: |
@@ -22,7 +20,6 @@
 
 <img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/tool/usb_isp/tool_usb_isp_04.jpg" width="30%" height="30%">
 
-
 ## 产品特性
 
 - 支持 win7 64位
@@ -33,11 +30,6 @@
 - 1x USB-ISP  
 - 1x 传输线
 
-## 尺寸重量
-
-- 包装尺寸:95mm x 65mm x 25mm
-- 包装重量:24g
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-accessory/products/isp-usbasp-programmer';
diff --git a/docs/zh_CN/unit/396port.md b/docs/zh_CN/unit/396port.md
index 0638ea75..bb6b6a2a 100644
--- a/docs/zh_CN/unit/396port.md
+++ b/docs/zh_CN/unit/396port.md
@@ -1,8 +1,6 @@
-# 396PORT {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_396port.png" width="30%" height="30%">
-
+# 396PORT
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_396port.png"></div>
 
 ## 描述
 
@@ -33,17 +31,6 @@
 - 1x Grove 线
 - 1x HT3.96 母头
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/3-96-transfer-unit';
diff --git a/docs/zh_CN/unit/accel.md b/docs/zh_CN/unit/accel.md
index 623bd8af..2074ce8f 100644
--- a/docs/zh_CN/unit/accel.md
+++ b/docs/zh_CN/unit/accel.md
@@ -1,21 +1,17 @@
-# ACCEL {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/accel/accel_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/accel/accel_02.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/accel/accel_03.jpg" width="30%" height="30%">
-
+# ACCEL
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/accel/accel_01.jpg"><img src="assets/img/product_pics/unit/accel/accel_02.jpg"></div>
 
 ## 描述
 
-**ACCEL** 是一款运动数据传感器. 内部集成**ADXL345**三轴加速度计.可测量范围高达±16g（13位分辨率）的加速度数据.输出数据格式为16位二进制补码，可通过I2C数字接口访问. 在该Unit中，采用了I2C通信接口.
-<br>
+**ACCEL** 是一款运动数据传感器. 内部集成**ADXL345**三轴加速度计.可测量范围高达±16g（13位分辨率）的加速度数据.输出数据格式为16位二进制补码，可通过I2C数字接口访问.
 
-*什么是加速度计？*<br>
+什么是加速度计?<br>
 加速度计是一种加速力的测量设备。这些力可能是静态的(如重力). 或者是动态的由加速度计的移动或振动引起.
 <br>
-*加速度计的数据可以做什么?*<br>
+加速度计的数据可以做什么?<br>
 通过测量由于重力引起的加速度，你可以计算出设备相对于水平面的倾斜角度。通过分析动态加速度，你可以分析出设备移动的方式
 
-
 ## 产品特性
 
 - 测量范围：±16g
@@ -31,25 +27,17 @@
 - I2C数字接口
 - 宽温度范围(−40°C至+85℃)
 
-
 ## 套件清单
 
 - 1x ACCEL unit
 - 1x GROVE 线
 
-## 尺寸重量
-
-- 包装尺寸:65mm x 52mm x 12mm
-- 包装重量:16g
-
 ## 应用
 
 -  建筑和结构监测
 -  导航
 -  方向感应
 
-  
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -64,13 +52,15 @@
 
 ## 案例程序
 
-- [点击此处，获取案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL).
+### Arduino
+
+- [点击此处获取Arduino案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL).
 
 ## UIFlow
 
-<img src="assets/img/product_pics/unit/accel/ACCEL_05.jpg">
+- [点击此处获取UIFlow案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL/UIFLOW). 
 
-- [点击此处，获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ACCEL/UIFLOW). 
+<img src="assets/img/product_pics/unit/accel/ACCEL_05.jpg">
 
 ## 原理图
 
diff --git a/docs/zh_CN/unit/adc.md b/docs/zh_CN/unit/adc.md
index 2e01c6b7..8fc78813 100644
--- a/docs/zh_CN/unit/adc.md
+++ b/docs/zh_CN/unit/adc.md
@@ -1,15 +1,11 @@
-# ADC {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_adc.png" width="30%" height="30%">
-
+# ADC
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_adc.png"></div>
 
 ## 描述
 
 **ADC** 是一款A/D转换器，其内置了16位自校准模数转换器ADS1100.通过I2C通信协议，ADS1100可每秒采样8、16、32、或128次进行转换，
-片内可编程的增益放大器（PGA）提供高达8倍的增益，对于需要高分辨率A/D转换采集的应用场景,ADC Unit是完美解决方案.
-
-其 I2C 地址是 0x48.
+片内可编程的增益放大器（PGA）提供高达8倍的增益，对于需要高分辨率A/D转换采集的应用场景,ADC Unit是完美解决方案,其 I2C 地址是 0x48.
 
 ## 产品特性
 
@@ -35,11 +31,6 @@
 - 1x GROVE 线
 - 1x HT3.96 Male Socket(2 pins)
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
 ## 应用
 
 - 心电信号采集
@@ -66,41 +57,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/Arduino/ADC_ADS1100).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-#include "ADS1100.h"
-
-#define ADS1100_DEFAULT_ADDRESS 0x48
-
-// declaration
-byte error;
-int8_t address;
-
-//new a object
-ADS1100 ads;
-
-// initialization
-M5.begin(true, false, false);
-ads.getAddr_ADS1100(ADS1100_DEFAULT_ADDRESS);// 0x48, 1001 000 (ADDR = GND)
-ads.setGain(GAIN_ONE);          // 1x gain(default)
-ads.setMode(MODE_CONTIN);       // Continuous conversion mode (default)
-ads.setRate(RATE_8);            // 8SPS (default)
-ads.setOSMode(OSMODE_SINGLE);   // Set to start a single-conversion
-ads.begin();
-
-// read data
-address = ads.ads_i2cAddress;
-Wire.beginTransmission(address);
-Wire.endTransmission();
-ads.Measure_Differential();
-```
+[请点击此处获取Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/Arduino/ADC_ADS1100)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/UIFlow).*
+[请点击此处获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ADC/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ADC/example_unit_adc_01.png">
 
@@ -119,7 +80,6 @@ ads.Measure_Differential();
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/adc-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/angle.md b/docs/zh_CN/unit/angle.md
index 57fba78f..d2a35ede 100644
--- a/docs/zh_CN/unit/angle.md
+++ b/docs/zh_CN/unit/angle.md
@@ -1,8 +1,6 @@
-# ANGLE {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_angle.png" width="30%" height="30%">
-
+# ANGLE
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_angle.png"></div>
 
 ## 描述
 
@@ -10,8 +8,7 @@
 
 电位器是具有三个引出端、阻值可按某种变化规律调节的电阻元件.根据此原理，ESP32通过端口B获取电位器输出电压的大小，再经过AD转换得到对应的映射数据.在"音量，亮度调节，或是电机调速"等需要连续信号控制的应用场景中，Angle Unit会是一个不错的选择.
 
-
-*在M5Stack产品体系中，通场Grove接口的颜色代表其使用的通信协议类型.*
+在M5Stack产品体系中，通场Grove接口的颜色代表其使用的通信协议类型.
 - 黑色: 单总线 (AD ,DA ,GPIO)
 - 红色: I2C
 - 蓝色：UART
@@ -30,17 +27,6 @@
 - 1x ADC Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:73mm x 46mm x 30mm
-- 包装重量:23g
-
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
@@ -71,45 +57,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/Arduino).*
-
-功能说明：在屏幕上显示， Angle Unit输入电压的映射数值.（范围为0~4095）
-
-```arduino
-#include <M5Stack.h>
-// select the input pin for the potentiometer
-int sensorPin = 36;
-// last variable to store the value coming from the sensor
-int last_sensorValue = 0;
-// current variable to store the value coming from the sensor
-int cur_sensorValue = 0;
-
-void setup() {
-  M5.begin();
-  pinMode(sensorPin, INPUT);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setCursor(0, 0);
-  M5.Lcd.print("the value of ANGLE: ");
-}
-
-void loop() {
-  // read the value from the sensor:
-  cur_sensorValue = analogRead(sensorPin);
-  M5.Lcd.setCursor(0, 25);
-  if(abs(cur_sensorValue - last_sensorValue) > 10){//debaunce
-    M5.Lcd.fillRect(0, 25, 100, 25, BLACK);
-    M5.Lcd.print(cur_sensorValue);
-    last_sensorValue = cur_sensorValue;
-  }
-  delay(50);
-}
-```
-
-<img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_04.png">
+[请点击此处获取Arduino代码示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ANGLE/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ANGLE/example_unit_angle_03.png">
 
@@ -128,7 +80,6 @@ void loop() {
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/angle-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/butterfly.md b/docs/zh_CN/unit/butterfly.md
index 95c3109e..42d39672 100644
--- a/docs/zh_CN/unit/butterfly.md
+++ b/docs/zh_CN/unit/butterfly.md
@@ -1,8 +1,6 @@
-# Butterfly Launcher {docsify-ignore-all}
-
-<img src="assets\img\product_pics\app\butterfly\butterfly_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\app\butterfly\butterfly_02.jpg" width="30%" height="30%">
-
+# Butterfly Launcher
 
+<div class="product_pic"><img src="assets\img\product_pics\app\butterfly\butterfly_01.jpg"><img src="assets\img\product_pics\app\butterfly\butterfly_02.jpg"></div>
 
 ## 描述
 
@@ -32,11 +30,6 @@
 - CONNEXT连接线
 - 橡皮筋
 
-## 尺寸重量
-
-- 包装尺寸:110mm x 110mm x 30mm
-- 包装重量:68g
-
 ## 应用
 
 - 时尚科技
@@ -44,7 +37,6 @@
 
 <img src="assets\img\product_pics\app\butterfly\butterfly_05.jpg" width="30%" height="30%">
 
-
 ## 装配步骤
 
 ### 按钮功能（正面）
@@ -57,7 +49,6 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/Butterfly/butterfly_assembly_steps.mp4" type="video/mp4" >
 </video>
 
-
 ### 外接电源（在设备连接超过10个的情况下，会需要外接电源使其稳定）
 
 <br><br>
@@ -68,7 +59,6 @@
 2）grove 2 usbA连接线
 3）带GROVE公端口的墙上插头
 
-
 ## 推荐步骤
 
 1）使用m5go连接设备，在末端连接额外的电源。
@@ -83,7 +73,6 @@
 
 ## 案例程序
 
-
 下载[UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Application/butterfly)示例
 
 关于控制程序，我们在UIFLow上封装了一个特别的程序块, 这使得您能够简单地编写控制程序.下面将向您展示如何在UIFlow上添加程序块.
@@ -102,21 +91,18 @@
 
 <img src="assets/img/product_pics/app/butterfly/4.jpg" width="30%" height="30%">
 
-
 ## 相关视频
 
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/App/Butterfly/butterfly.mp4" type="video/mp4" >
 </video>
 
-
 ## 管脚映射
 
 **Mega328 ISP**下载接口Pin脚定义
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-application/products/butterfly-launcher';
diff --git a/docs/zh_CN/unit/button.md b/docs/zh_CN/unit/button.md
index e4e0cda4..c928b572 100644
--- a/docs/zh_CN/unit/button.md
+++ b/docs/zh_CN/unit/button.md
@@ -1,12 +1,10 @@
-# BUTTON {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_button.png" width="30%" height="30%">
-
+# BUTTON
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_button.png"></div>
 
 ## 描述
 
-**BUTTON** 是一个单按键 Unit，通过检测输入引脚高/低电平变化，进而判断按键状态.
+**BUTTON** 是一个单按键 Unit，通过检测输入引脚高/低电平变化，进而判断按键状态.该 Unit 通过GROVE B端口与M5Core进行通信.
 
 **如下图所示:**
 
@@ -16,7 +14,6 @@
 
 <img src="assets/img/product_pics/unit/button/unit_button_03.png">
 
-该 Unit 通过GROVE B端口与M5Core进行通信.
 
 ## 产品特性
 
@@ -28,22 +25,11 @@
 - 1x BUTTON Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:22g
-
 ## 应用
 
 - 灯座开关
 - 远程控制开关
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -60,26 +46,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_value = 0;
-
-// initialization
-M5.begin();// init
-pinMode(36, INPUT);// BUTTON Pin
-
-// read data
-cur_value = digitalRead(36);// read the value of BUTTON
-M5.update();
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/BUTTON/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/BUTTON/example_unit_button_03.png">
 
@@ -94,12 +65,10 @@ M5.update();
  <tr><td>BUTTON Unit</td><td>BUTTON Pin</td><td>/</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-button-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/cardkb.md b/docs/zh_CN/unit/cardkb.md
index 43cc62e7..4da4d793 100644
--- a/docs/zh_CN/unit/cardkb.md
+++ b/docs/zh_CN/unit/cardkb.md
@@ -1,8 +1,6 @@
-# CarKB {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_cardkb_01.png" width="30%" height="30%">
-
+# CardKB
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_cardkb_01.png"></div>
 
 ## 描述
 
@@ -32,21 +30,12 @@
 - 1x CardKB Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:88mm x 58mm x 5mm
-- 包装重量:18g
-
 ## 应用
 
 - M5Stack Core 的键盘外设
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[CardKB 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/firmware_328p/CardKeyBoard)**
 
 ## EasyLoader
@@ -71,49 +60,13 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/Arduino)。*
-
-```arduino
-#include <Wire.h>
-#include <M5Stack.h>
-
-#define CARDKB_ADDR 0x5F
-
-void setup()
-{
-  M5.begin();
-  Serial.begin(115200);
-  Wire.begin();
-  pinMode(5, INPUT);
-  digitalWrite(5, HIGH);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setCursor(1, 10);
-  M5.Lcd.setTextColor(YELLOW);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.printf("IIC Address: 0x5F\n");
-  M5.Lcd.printf(">>");
-}
-void loop()
-{
-  Wire.requestFrom(CARDKB_ADDR, 1);
-  while (Wire.available())
-  {
-    char c = Wire.read(); // receive a byte as characterif
-    if (c != 0)
-    {
-      M5.Lcd.printf("%c", c);
-      Serial.println(c, HEX);
-     // M5.Speaker.beep();
-    }
-  }
-}
-```
+[请点击此处获取Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/CARDKB/example_unit_cardkb_01.png" width="80%" height="80%">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/UIFlow)。*
+[请点击此处获取UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CARDKB/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/CARDKB/example_unit_cardkb_02.png">
 
@@ -146,7 +99,6 @@ void loop()
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20Cardkb.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/cardkb-mini-keyboard';
diff --git a/docs/zh_CN/unit/catear.md b/docs/zh_CN/unit/catear.md
index 6aa5069b..10d75f82 100644
--- a/docs/zh_CN/unit/catear.md
+++ b/docs/zh_CN/unit/catear.md
@@ -1,14 +1,10 @@
-# CATEAR{docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_catear_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_catear_02.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_catear_03.png" width="30%" height="30%">
-
+# CATEAR
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_catear_01.png"><img src="assets/img/product_pics/unit/unit_catear_02.png"></div>
 
 ## 描述
 
-**CATEAR** 是由 11s8 Neopixels搭配亚克力结构外形制作的猫耳头带.Neopixels是智能RGB灯带，灯带上的每一个LED灯都可以编程显示任何颜色，并且支持设置亮度，点亮流，闪烁模式.如果你想要在派对或万圣节上吸引眼球，成为焦点.为什么不试试在你的装备上添加一些炫酷的灯光效果呢?
-
-它可以使用任何类型的 M5Core 进行编程.并支持任意一个GROVE接口.（A,B,C）
+**CATEAR** 是由 11s8 Neopixels搭配亚克力结构外形制作的猫耳头带.Neopixels是智能RGB灯带，灯带上的每一个LED灯都可以编程显示任何颜色，并且支持设置亮度，点亮流，闪烁模式.如果你想要在派对或万圣节上吸引眼球，成为焦点.为什么不试试在你的装备上添加一些炫酷的灯光效果呢?它可以使用任何类型的 M5Core 进行编程.并支持任意一个GROVE接口.（A,B,C）
 
 ## 产品特性
 
@@ -20,17 +16,8 @@
 - 1x Catear
 - 1x Grove 线 (1m)
 
-## 尺寸重量
-
-- 包装尺寸:265mm x 181mm x 25mm
-- 包装重量:154g
-
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 Neopixel 的 Arduino 驱动函数库:
 
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
@@ -43,7 +30,7 @@ Neopixel 的 Arduino 驱动函数库:
 
 ### UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CATEAR/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/CATEAR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/CATEAR/example_unit_catear_01.png">
 
@@ -78,7 +65,6 @@ Neopixel 的 Arduino 驱动函数库:
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stick%20CatEar.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stack-official-cute-cat-ears-acrylic';
diff --git a/docs/zh_CN/unit/color.md b/docs/zh_CN/unit/color.md
index db573456..a8df7783 100644
--- a/docs/zh_CN/unit/color.md
+++ b/docs/zh_CN/unit/color.md
@@ -1,14 +1,10 @@
-# COLOR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_color.png" width="30%" height="30%">
-
+# COLOR
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_color.png"></div>
 
 ## 描述
 
-**COLOR** 是一款颜色识别 Unit，其内部集成**TCS3472**彩色光数字转换器,能够将其检测到颜色值转换为RGB数据返回给M5Core.
-
-该 Unit 通过 GROVE A 接口（I2C）与M5Core通信，I2C地址为0x29.
+**COLOR** 是一款颜色识别 Unit，其内部集成**TCS3472**彩色光数字转换器,能够将其检测到颜色值转换为RGB数据返回给M5Core.该 Unit 通过 GROVE A 接口（I2C）与M5Core通信，I2C地址为0x29.
 
 **识别颜色原理：**
 
@@ -16,7 +12,6 @@
 
 <img src="assets/img/product_pics/unit/color/unit_color_07.png">
 
-
 检测物体颜色时，TCS3472 会返回四个通道数据 - 红色（R），绿色（G），蓝色（B）和清除（C）（未过滤）。红色，绿色和蓝色通道（RGB）的响应可用于确定特定光源的色度坐标（x，y）。
 
 <img src="assets/img/product_pics/unit/color/unit_color_04.png">
@@ -29,10 +24,8 @@
 
 <img src="assets/img/product_pics/unit/color/unit_color_06.png">
 
-
 该 Unit 与 M5Core 通过 GROVE A 接口 ( IIC ) 通信，其 I2C 地址是 0x29 。
 
-
 ## 产品特性
 
 - 工作温度范围: -40℃~85℃
@@ -44,11 +37,6 @@
 - 1x COLOR Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
 ## 应用
 
 - 产品颜色验证
@@ -74,42 +62,13 @@
 
 - **UIFlow**
 
-*If you want the complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/UIFlow).*
+[点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/UIFlow)
 
 <img src="assets/img/product_pics/unit/color/color.png">
 
-### 1. Arduino IDE
+- **Arduino IDE**
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/Arduino).*
-
-```arduino
-/*
-  Color test
-    hardware: M5Stack
-
-  please install the Adfruit TCS34725 library first ...
-*/
-#include <Wire.h>
-#include <M5Stack.h>
-#include "Adafruit_TCS34725.h"
-
-// declaration
-uint16_t clear, red, green, blue;
-#define commonAnode true // set to false if using a common cathode LED
-
-// new a object
-Adafruit_TCS34725 tcs;
-tcs = Adafruit_TCS34725(TCS34725_INTEGRATIONTIME_50MS,TCS34725_GAIN_4X);
-
-// initialization
-M5.begin(true, false, false);
-tcs.begin();
-tcs.setIntegrationTime(TCS34725_INTEGRATIONTIME_154MS);
-tcs.setGain(TCS34725_GAIN_4X);
-
-// read data
-tcs.getRawData(&red, &green, &blue, &clear);
-```
+[请点击获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/COLOR/Arduino)
 
 烧录了例程后，串口显示终端会打印原始值，包括明光感应值(Clear)、红、绿、蓝(RGB)
 
@@ -136,12 +95,10 @@ tcs.getRawData(&red, &green, &blue, &clear);
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201902/Color%20Unit.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/color-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/dac.md b/docs/zh_CN/unit/dac.md
index a27c6e97..c8a494e0 100644
--- a/docs/zh_CN/unit/dac.md
+++ b/docs/zh_CN/unit/dac.md
@@ -1,8 +1,6 @@
-# DAC - 数模转换 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_dac.png" width="30%" height="30%">
-
+# DAC - 数模转换
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_dac.png"></div>
 
 ## 描述
 
@@ -22,11 +20,6 @@
 - 1x DAC Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
 ## 应用
 
 -  MP3音频播放器
@@ -36,7 +29,6 @@
 
 -  **Datasheet** - [MCP4725](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/MCP4725_en.pdf)
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -53,33 +45,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/Arduino).*
-
-```arduino
-/*
-    hardware : m5stack uint dac
-    please install adafruit MCP4725 lib
-*/
-#include <Wire.h>
-#include <Adafruit_MCP4725.h>
-
-// new a object
-Adafruit_MCP4725 dac;
-
-// initialization
-dac.begin(0x60);
-dac.setVoltage(2048, false);
-
-// 12bit value , false mean not write EEPROM
-dac.setVoltage(1024, false);// input digital value "1024" to unit
-delay(1000);
-dac.setVoltage(2048, false);// input digital value "2048" to unit
-delay(1000);
-```
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码,[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/UIFlow).*
+[点击这里获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DAC/UIFlow)
 
 <img src="assets/img/product_pics/unit/dac.png">
 
@@ -94,12 +64,10 @@ delay(1000);
  <tr><td>DAC Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/dac-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/dual_button.md b/docs/zh_CN/unit/dual_button.md
index 4d02ee5f..5c4fccb2 100644
--- a/docs/zh_CN/unit/dual_button.md
+++ b/docs/zh_CN/unit/dual_button.md
@@ -1,16 +1,10 @@
-# Dual-BUTTON {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_dual_button.png" width="30%" height="30%">
-
+# Dual-BUTTON
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_dual_button.png"></div>
 
 ## 描述
 
-**Dual Button**, 是一款双按键 Unit ，提供了两个不同颜色的物理按键供你进行操作.通过检测不同按键输入引脚高/低电平变化，进而判断按键状态.
-
-该 Unit 通过GROVE B端口与M5Core进行通信.
-
-<img src="assets/img/product_pics/unit/dual_button/unit_dual_button_05.png" width="50%" height="50%">
+**Dual Button**, 是一款双按键 Unit ，提供了两个不同颜色的物理按键供你进行操作.通过检测不同按键输入引脚高/低电平变化，进而判断按键状态.该 Unit 通过GROVE B端口与M5Core进行通信.
 
 **输出状态示意:**
 
@@ -26,22 +20,11 @@
 - 1x Dual BUTTON Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:22g
-
 ## 应用
 
 - 游戏控制器
 - 远程控制开关
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ### EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -58,29 +41,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_value_red = 0;
-int cur_value_blue = 0;
-
-// initialization
-M5.begin();
-pinMode(26, INPUT);// Red Button Pin setting
-pinMode(36, INPUT);// Blue Button Pin setting
-
-// read data
-cur_value_red = digitalRead(26);
-cur_value_blue = digitalRead(36);
-M5.update();
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/DUAL_BUTTON/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/DUAL_BUTTON/example_unit_dual_button_05.png">
 
@@ -95,14 +60,6 @@ M5.update();
  <tr><td>DUAL_BUTTON Unit</td><td>Blue Button Pin</td><td>Red Button Pin</td><td>5V</td><td>GND</td></tr>
 </table>
 
-## 相关视频
-
-**DUAL BUTTON 的演示 - 控制 VARIOUS2 游戏**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/M5Game-VARIOUS2.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-dual-button-unit';
diff --git a/docs/zh_CN/unit/earth.md b/docs/zh_CN/unit/earth.md
index c5fe479d..ce7216ea 100644
--- a/docs/zh_CN/unit/earth.md
+++ b/docs/zh_CN/unit/earth.md
@@ -1,15 +1,11 @@
-# EARTH {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_earth.png" width="30%" height="30%">
-
+# EARTH
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_earth.png"></div>
 
 ## 描述
 
 **EARTH** 是一款土壤湿度传感器，用于采集土壤或是类似材料中的水分.传感器上有两个测量探头,将其插入待测量土壤中，由于水分含量越高，则拥有更好的导电性,通过测量两探头之间的电势差，并进行ADC转换,将检测结果发送给M5Core.Unit上还集成了一个10K可调电阻，用于调节检测门槛值.
 
-<img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_03.png" width="50%" height="50%">
-
 ## 产品特性
 
 - 集成10K可调电阻，用于调节阈值.
@@ -22,21 +18,10 @@
 - 1x EARTH Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:18g
-
 ## 应用
 
 - 盆栽土壤湿度监控
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -53,31 +38,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  M5.begin();
-  dacWrite(25, 0);//disable the speak noise
-
-  pinMode(26, INPUT);// set digital pin
-}
-
-uint16_t analogRead_value = 0;
-uint16_t digitalRead_value = 0;
-
-void loop() {
-  analogRead_value = analogRead(36);// read analog value of EARTH
-  digitalRead_value = digitalRead(26);// read digital value of EARTH
-}
-
-```
+[请点击此处获取Arduino代码示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow).*
+[请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EARTH/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/EARTH/example_unit_earth_04.png">
 
@@ -100,18 +65,10 @@ void loop() {
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/(M5stack%20x%20Arduino)%20Do%20plants%20have%20feelings.mp4" type="video/mp4">
 </video>
 
-**EARTH 的案例 - 监控花瓶土壤含水量**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Earth%20Unit.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/earth-sensor-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/env.md b/docs/zh_CN/unit/env.md
index b21f9d67..595a9564 100644
--- a/docs/zh_CN/unit/env.md
+++ b/docs/zh_CN/unit/env.md
@@ -1,8 +1,6 @@
-# ENV {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_env.png" width="30%" height="30%">
-
+# ENV
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_env.png"><div>
 
 ## 描述
 
@@ -29,11 +27,6 @@
 - 1x ENV Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:18g
-
 ## 应用
 
 - 气象站
@@ -47,7 +40,6 @@
 
 - **[DHT12 数据手册](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/DHT12_en.pdf)**
 
-
 ## EasyLoader
 
 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
@@ -82,36 +74,11 @@
 1, 在进行程序编译前，请安装`Adafruit BMP280 Library`
 2, 并将`Adafruit_Sensor.h`复制至`C:\Users\<user_name>\Documents\Arduino\libraries\Adafruit_BMP280_Library`
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/ENV).*
-
-```arduino
-/*
-    Install Adafruit BMP280 Library first.
-*/
-#include <M5Stack.h>
-#include "DHT12.h"
-#include <Wire.h> //The DHT12 uses I2C comunication.
-#include "Adafruit_Sensor.h"
-#include <Adafruit_BMP280.h>
-
-// new two objects
-DHT12 dht12;
-Adafruit_BMP280 bme;
-
-// initialization
-M5.begin();
-Wire.begin();
-bme.begin();
-
-// read data
-float tmp = dht12.readTemperature();
-float hum = dht12.readHumidity();
-float pressure = bme.readPressure();
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/ENV)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow).*
+[请点击此处UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/ENV/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/ENV/example_unit_env_05.png" width="60%">
 
@@ -126,12 +93,10 @@ float pressure = bme.readPressure();
  <tr><td>ENV Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-env-sensor-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/esp32cam.md b/docs/zh_CN/unit/esp32cam.md
index 08668724..b87b3766 100644
--- a/docs/zh_CN/unit/esp32cam.md
+++ b/docs/zh_CN/unit/esp32cam.md
@@ -1,8 +1,6 @@
-# ESP32CAM {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_esp32cam_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_esp32cam_02.png" width="65%" height="65%">
-
+# ESP32CAM
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_esp32cam_01.png"><img src="assets/img/product_pics/unit/unit_esp32cam_02.png"></div>
 
 ## 描述
 
@@ -15,15 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.
 
-硬件拓展支持（预留以下IC焊接接口）
-- 6轴陀螺仪（MPU6050）
-- 压力传感器（BMP280）
-- **数字硅晶麦克风 (SPM1423)**
-- 电池插座
-
-
-<img src="assets/img/product_pics/unit/unit_esp32cam_05.png" width="50%"><img src="assets/img/product_pics/unit/unit_esp32cam_06.png" width="50%">
-
 因为模块可以生成 WIFI 热点 AP，所以可以用手机、PC 或其他设备通过 WIFI 无线获取摄像头图片，也可以通过模块的GROVE 接口有线获取摄像头图片。
 
 ## 产品特性
@@ -57,11 +46,6 @@
 
 - 1x ESP32CAM
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:18g
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -125,7 +109,6 @@
 | SCL           | IO4         |
 | SDA           | IO13        |
 
-
 **MPU6050 接口**
 
 *I2C 地址是 0x68*
@@ -169,7 +152,6 @@
 
  - **[串口通信-M5Core](https://github.com/m5stack/m5stack-cam-psram/tree/master/uart/arduino)**（串口通信例程为，摄像头与M5Core之间通信）
 
-
 ## 相关视频
 
 **ESP32CAM case - 01**
diff --git a/docs/zh_CN/unit/extio.md b/docs/zh_CN/unit/extio.md
index d0ab825e..891e3695 100644
--- a/docs/zh_CN/unit/extio.md
+++ b/docs/zh_CN/unit/extio.md
@@ -1,17 +1,14 @@
-# EXT.IO {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_extio_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_extio_02.png" width="30%" height="30%">
-
+# EXT.IO
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_extio_01.png"><img src="assets/img/product_pics/unit/unit_extio_02.png"></div>
 
 ## 描述
 
 **EXT.IO** 是一款并行端口拓展器.集成了IO拓展芯片PCA9554PW,支持拓展至8个GPIO，能够用于用于2.3~5.5V VCC、开漏、上拉、中断输出操作.通过I2C接口（串行时钟SCL,串行数据SDA）辅助多数的微控制器提供I/0拓展,对于I/O引脚紧缺，又不想浪费资源添加额外控制器的开发者来说,EXT.IO会是一个不错辅助 Unit.
 
-IIC 地址: 0x27.
-
 ### 产品描述
 
+- IIC 地址: 0x27
 - 拓展 I/O 个数: 8
 - GROVE 接口, 支持 [UIFlow](http://flow.m5stack.com) 、 [Arduino](http://www.arduino.cc).
 - 2x LEGO 兼容孔
@@ -21,16 +18,10 @@ IIC 地址: 0x27.
 - 1x EXT.IO Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:16g
-
 ## 相关链接
 
 - Datasheet - **[PCA9554PW](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/PCA9554PW_en.pdf)**
 
-
 ### EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -47,52 +38,13 @@ IIC 地址: 0x27.
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)。*
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/Arduino)
 
-```arduino
-/*
-    Connect to GRVOE A on M5Core
-*/
-#include <M5Stack.h>
-#include "PCA9554.h" // Load the PCA9554 Library
-
-// new a object
-PCA9554 ioCon1(0x27);
-
-uint8_t res;
-
-// initialization
-
-M5.begin();
-Wire.begin();
-ioCon1.twiWrite(21, 22); // GROVE A
-delay(10);
-res = 1;
-ioCon1.twiRead(res);
-Serial.printf("res:%d\r\n", res);
-ioCon1.portMode0(ALLOUTPUT); //Set the port as all output
-
-// set the specific pin
-ioCon1.digitalWrite0(0, HIGH);
-ioCon1.digitalWrite0(1, HIGH);
-ioCon1.digitalWrite0(2, HIGH);
-ioCon1.digitalWrite0(3, HIGH);
-ioCon1.digitalWrite0(4, HIGH);
-ioCon1.digitalWrite0(5, HIGH);
-ioCon1.digitalWrite0(6, HIGH);
-ioCon1.digitalWrite0(7, HIGH);
-
-// write 0-7 HIGHT
-Serial.println(ioCon1.digitalWritePort0(0xff));
-
-// write 0-7 LOW
-Serial.println(ioCon1.digitalWritePort0(0x00));
-```
 <img src="assets/img/product_pics/unit/unit_extio_03.png">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/EXTIO/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/EXTIO/example_unit_extio_01.png">
 
diff --git a/docs/zh_CN/unit/finger.md b/docs/zh_CN/unit/finger.md
index 5ef9b0a3..8165f37f 100644
--- a/docs/zh_CN/unit/finger.md
+++ b/docs/zh_CN/unit/finger.md
@@ -1,8 +1,6 @@
-# FINGER {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_finger_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_finger_02.png" width="30%" height="30%">
-
+# FINGER
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_finger_01.png"><img src="assets/img/product_pics/unit/unit_finger_02.png"></div>
 
 ## 描述
 
@@ -34,18 +32,11 @@ UART 参数设置:
 - 工作温度:   -10° - 60°
 - 相对湿度:   20% - 80%
 
-
-
 ## 包含
 
 - 1x FINGER Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:75mm x 46mm x 29mm
-- 包装重量:26g
-
 ## 应用
 
 - 指纹考勤机
@@ -83,53 +74,17 @@ UART 参数设置:
     </div>
 </div>
 
-
 ## 案例程序
 
 - **UIFlow**
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/UIFlow)
 
 <img src="assets/img/product_pics/unit/fingerprint.png">
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/Arduino).*
-
-```arduino
-/*
-    Connect to GRVOE C on M5Core
-*/
-#include <M5Stack.h>
-#include "finger.h"
-
-uint8_t userNum; //User number
-uint8_t res1;
-
-// result for "res1"
-#define ACK_SUCCESS    0x00
-#define ACK_FAIL       0x01
-#define ACK_FULL       0x04
-#define ACK_NOUSER     0x05
-#define ACK_USER_EXIST 0x07
-#define ACK_TIMEOUT    0x08
-
-// initialization
-M5.begin();
-Serial2.begin(19200, SERIAL_8N1, 16, 17);
-userNum = fpm_getUserNum();
-M5.Lcd.print("userNum:");
-M5.Lcd.println(userNum);
-
-// add a new user
-res1 = fpm_addUser(userNum,1); //get function result
-
-// compare your finger
-res1 = fpm_compareFinger();
-
-// delete all user
-res1 = fpm_deleteAllUser();
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/FINGER/Arduino)
 
 ## 原理图
 
diff --git a/docs/zh_CN/unit/gps.md b/docs/zh_CN/unit/gps.md
index 29e57167..e80aadab 100644
--- a/docs/zh_CN/unit/gps.md
+++ b/docs/zh_CN/unit/gps.md
@@ -1,14 +1,11 @@
 # GPS {docsify-ignore-all}
 
-<img src="assets/img/product_pics/unit/unit_gps_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_gps_02.png" width="30%" height="30%">
-
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_gps_01.png" ><img src="assets/img/product_pics/unit/unit_gps_02.png"></div>
 
 ## 描述
 
 **GPS** 是一款卫星定位 Unit . 内部集成科微北斗导航芯片 AT6558 和信号放大芯片 MAX2659,能够提供优质的卫星定位服务.
 
-
 **AT6558** 是一款高性能的导航芯片,支持多种卫星导航系统，以 56 通道接收卫星信号，同时接收6个卫星导航系统的 GNSS 信号，并且实现联合定位、导航和授时，获得准确的全球位置信息.AT6558 能够在城市、峡谷、高架下面等弱信号的地方，以及汽车内部任何位置可以快速、准确地定位.此模块可广泛用于车载监控、公交车报站、车载导航、船载导航、笔记本导航等产品上.
 
 **使用时，请将该 Unit 连接到 PORT C ，它将通过UART协议与M5Core进行通信**
@@ -49,11 +46,6 @@ UART 参数设置:
 - 1x GPS Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:26g
-
 ## 应用
 
 - 车载、船载定位与导航
@@ -69,7 +61,6 @@ UART 参数设置:
 
 - **[上位机软件 GnssToolKit3(Windows Version)](http://www.icofchina.com/d/file/xiazai/2018-05-23/2b29a8da746eec0ef1dcd9deae895298.zip)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -86,34 +77,7 @@ UART 参数设置:
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-/* By default, GPS is connected with M5Core through UART2 */
-HardwareSerial GPSRaw(2);
-
-void setup() {
-  M5.begin();
-  GPSRaw.begin(9600);// GPS init
-  Serial.println("hello");
-  termInit();
-}
-
-void loop() {
-  // put your main code here, to run repeatedly:
-  if(Serial.available()) {
-    int ch = Serial.read();
-    GPSRaw.write(ch);
-  }
-  if(GPSRaw.available()) {
-    int ch = GPSRaw.read();// read GPS information
-    Serial.write(ch);
-    termPutchar(ch);
-  }
-}
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS/Arduino)
 
 烧录例程 GPSRaw.ino 后，当设备启动时，M5Core屏幕和PC端串口调试工具将会打印显示如下的信息.
 
@@ -134,7 +98,7 @@ $GPTXT,01,01,01,ANTENNA OPEN*25
 
 ### 2. UIFlow
 
-*完整代码下载 [点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS).*
+[点击这里下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/GPS)
 
 <img src="assets/img/product_pics/unit/gps/gps.png">
 
@@ -149,7 +113,6 @@ $GPTXT,01,01,01,ANTENNA OPEN*25
 
 <img src="assets/img/product_pics/unit/gps/unit_gps_05.png">
 
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/gps_sch.png">
@@ -161,12 +124,10 @@ $GPTXT,01,01,01,ANTENNA OPEN*25
  <tr><td>GPS Unit</td><td>Signal Transmitter (TXD)</td><td>Signal Receiver (RXD)</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-gps-bds-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/heart.md b/docs/zh_CN/unit/heart.md
index 6e5bab58..331ddd4f 100644
--- a/docs/zh_CN/unit/heart.md
+++ b/docs/zh_CN/unit/heart.md
@@ -1,7 +1,6 @@
 # HEART {docsify-ignore-all}
 
-<img src="assets/img/product_pics/unit/unit_heart_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/unit/unit_heart_02.png" width="30%" height="30%">
-
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_heart_01.png"> <img src="assets/img/product_pics/unit/unit_heart_02.png"></div>
 
 ## 描述
 
@@ -27,11 +26,6 @@
 - 1x HEART Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:18g
-
 ## 相关链接
 
 - **Datasheet** - [MAX30100](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/MAX30110_en.pdf)
@@ -54,56 +48,7 @@
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEART/Arduino).*
-
-```arduino
-/*
-    Install MAX30100lib Library first.
-
-    MAX30100_RawData.ino
-*/
-#include <Wire.h>
-#include "MAX30100.h"
-
-#define SAMPLING_RATE   MAX30100_SAMPRATE_100HZ
-#define IR_LED_CURRENT  MAX30100_LED_CURR_50MA
-#define RED_LED_CURRENT MAX30100_LED_CURR_27_1MA
-// set HIGHRES_MODE to true only
-// when setting PULSE_WIDTH to MAX30100_SPC_PW_1600US_16BITS
-#define PULSE_WIDTH MAX30100_SPC_PW_1600US_16BITS
-#define HIGHRES_MODE    true
-
-// new a object
-MAX30100 sensor;
-
-void setup()
-{
-    Serial.begin(115200);
-    Serial.print("Initializing MAX30100..");
-    if (!sensor.begin()) {
-        Serial.println("FAILED");
-        for(;;);
-    } else {
-        Serial.println("SUCCESS");
-    }
-    sensor.setMode(MAX30100_MODE_SPO2_HR);
-    sensor.setLedsCurrent(IR_LED_CURRENT, RED_LED_CURRENT);
-    sensor.setLedsPulseWidth(PULSE_WIDTH);
-    sensor.setSamplingRate(SAMPLING_RATE);
-    sensor.setHighresModeEnabled(HIGHRES_MODE);
-}
-
-void loop()
-{
-    uint16_t ir, red;
-    sensor.update();
-    while (sensor.getRawValues(&ir, &red)) {
-        Serial.print(ir);
-        Serial.print('\t');
-        Serial.println(red);
-    }
-}
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEART/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/HEART/example_unit_heart_01.png">
 
@@ -118,7 +63,6 @@ void loop()
  <tr><td>HEART Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/mini-heart-unit';
diff --git a/docs/zh_CN/unit/hex.md b/docs/zh_CN/unit/hex.md
index c30e9450..7a839705 100644
--- a/docs/zh_CN/unit/hex.md
+++ b/docs/zh_CN/unit/hex.md
@@ -1,12 +1,11 @@
 # HEX {docsify-ignore-all}
 
-<img src="assets\img\product_pics\unit\hex\unit_hex_01.webp" width="30%"><img src="assets\img\product_pics\unit\hex\unit_hex_02.webp" width="30%"><img src="assets\img\product_pics\unit\hex\unit_hex_03.webp" width="30%">
+<div class="product_pic"><img src="assets\img\product_pics\unit\hex\unit_hex_01.webp"><img src="assets\img\product_pics\unit\hex\unit_hex_02.webp"></div>
 
 ## 描述
 
 **HEX** 是一款六边形Neopixel灯板.一共嵌入37个Neopixel灯珠，提供输入、输出端口，这意味着你可以将多个Neopixel进行串联.
 
-
 以下为HEX灯板中的LED布局排序方式
 
 <img src="assets\img\product_pics\unit\hex\unit_hex_05.webp" width="50%">
@@ -22,18 +21,12 @@
 - 1x HEX Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:50mm x 80mm x 10mm
-- 包装重量:6g
-
 ## 相关链接
 
 - **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
 
 - **[官方论坛](http://forum.m5stack.com/)**
 
-
 ## EasyLoader
 
 >EasyLoader是一个简洁快速的程序烧录器，其内置了一个产品相关的案例程序，通过简单步骤将其烧录至主控，即可进行一系列的功能验证.**(程序烧录前，请根据设备类型安装相应驱动程序. M5Core型主机[请点击此处查看CP210X驱动安装教程](zh_CN/arduino/arduino_development?id=安装串口驱动)，M5StickC/V/T/ATOM系列可免驱动使用)**
@@ -62,10 +55,6 @@
 
 ## 案例程序
 
-- **UIFlow**
-
-
-
 ### Arduino IDE
 
 在Arduino中使用第三库FastLED，能够为你的Neopixel提供出色的灯光特效.在进行程序编译前，需要安装FastLED，并将HEX连接到GROVE A.
@@ -76,49 +65,13 @@ Neopixel Library on Arduino
 
 - **[FastLED Reference(中文版本)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/Arduino)。*
-
-```arduino
-/*
-    Install FastLED library first.(HEX is connected to GROVE A)
- */
-#include <M5Stack.h>
-#include "FastLED.h"
-
-#define Neopixel_PIN    21
-#define NUM_LEDS    37
-
-CRGB leds[NUM_LEDS];
-uint8_t gHue = 0;
-
-void setup() {
-  Serial.begin(115200);
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextColor(YELLOW); M5.Lcd.setTextSize(2); M5.Lcd.setCursor(40, 0);
-  M5.Lcd.println("HEX Example");
-  M5.Lcd.setTextColor(WHITE);
-  M5.Lcd.setCursor(0, 25);
-  M5.Lcd.println("Display rainbow effect");
-
-  // Neopixel initialization
-  FastLED.addLeds<WS2811,Neopixel_PIN,GRB>/
-                        (leds, NUM_LEDS).setCorrection(TypicalLEDStrip);
-  FastLED.setBrightness(10);
-}
-
-void loop(){
-    fill_rainbow( leds, NUM_LEDS, gHue, 7);
-    FastLED.show();// must be executed for neopixel becoming effective
-    EVERY_N_MILLISECONDS( 20 ) { gHue++; }
-}
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_03.png">
 
-### 2. UIFlow
+### UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/HEX/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_01.png" width="50%" height="50%"> <img src="assets/img/product_pics/unit/unit_example/HEX/example_unit_dual_button_02.png" width="30%" height="30%">