From 466ff520f08cdea0fc40fc2f633797819004ec84 Mon Sep 17 00:00:00 2001
From: vany5921 <908744431@qq.com>
Date: Thu, 19 Mar 2020 12:00:44 +0800
Subject: [PATCH] update doc format

---
 docs/zh_CN/unit/gps.md        |  2 +-
 docs/zh_CN/unit/hex.md        |  8 +---
 docs/zh_CN/unit/hub.md        | 17 +------
 docs/zh_CN/unit/ir.md         | 40 ++--------------
 docs/zh_CN/unit/joystick.md   | 64 ++-----------------------
 docs/zh_CN/unit/laser-rx.md   | 64 ++-----------------------
 docs/zh_CN/unit/laser-tx.md   | 63 ++-----------------------
 docs/zh_CN/unit/light.md      | 45 ++----------------
 docs/zh_CN/unit/m5-bit.md     | 88 +++--------------------------------
 docs/zh_CN/unit/m5camera.md   | 19 +-------
 docs/zh_CN/unit/m5camera_f.md | 15 +-----
 docs/zh_CN/unit/m5camera_x.md | 12 +----
 docs/zh_CN/unit/makey.md      | 41 ++--------------
 docs/zh_CN/unit/mini-proto.md | 10 +---
 docs/zh_CN/unit/ncir.md       | 39 ++--------------
 docs/zh_CN/unit/neoflash.md   | 28 ++---------
 docs/zh_CN/unit/neopixel.md   | 78 ++-----------------------------
 docs/zh_CN/unit/op180.md      | 17 ++-----
 docs/zh_CN/unit/op90.md       | 16 ++-----
 docs/zh_CN/unit/pahub.md      | 22 ++-------
 docs/zh_CN/unit/pbhub.md      | 24 ++--------
 docs/zh_CN/unit/pir.md        | 33 ++-----------
 docs/zh_CN/unit/proto.md      | 17 +------
 docs/zh_CN/unit/relay.md      | 44 ++----------------
 docs/zh_CN/unit/rfid.md       | 53 ++-------------------
 docs/zh_CN/unit/rgb.md        | 46 ++----------------
 docs/zh_CN/unit/rs485.md      | 15 ++----
 docs/zh_CN/unit/thermal.md    | 54 ++-------------------
 docs/zh_CN/unit/tof.md        | 43 ++---------------
 docs/zh_CN/unit/trace.md      |  4 +-
 30 files changed, 105 insertions(+), 916 deletions(-)

diff --git a/docs/zh_CN/unit/gps.md b/docs/zh_CN/unit/gps.md
index e80aadab..f9cb31f4 100644
--- a/docs/zh_CN/unit/gps.md
+++ b/docs/zh_CN/unit/gps.md
@@ -1,4 +1,4 @@
-# GPS {docsify-ignore-all}
+# GPS
 
 <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>
 
diff --git a/docs/zh_CN/unit/hex.md b/docs/zh_CN/unit/hex.md
index 883f40cb..2bc664f5 100644
--- a/docs/zh_CN/unit/hex.md
+++ b/docs/zh_CN/unit/hex.md
@@ -1,4 +1,4 @@
-# HEX {docsify-ignore-all}
+# HEX
 
 <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>
 
@@ -20,12 +20,6 @@
 - 1x HEX Unit
 - 1x Grove 线
 
-## 相关链接
-
-- **[官方频道视频](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系列可免驱动使用)**
diff --git a/docs/zh_CN/unit/hub.md b/docs/zh_CN/unit/hub.md
index 5f13e63b..0631d355 100644
--- a/docs/zh_CN/unit/hub.md
+++ b/docs/zh_CN/unit/hub.md
@@ -1,8 +1,6 @@
-# HUB {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_hub.png" width="30%" height="30%">
-
+# HUB
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_hub.png"></div>
 
 ## 描述
 
@@ -21,17 +19,6 @@
 - 1x HUB Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/hub_sch.JPG">
diff --git a/docs/zh_CN/unit/ir.md b/docs/zh_CN/unit/ir.md
index 6272f39a..942f1134 100644
--- a/docs/zh_CN/unit/ir.md
+++ b/docs/zh_CN/unit/ir.md
@@ -1,7 +1,6 @@
-# IR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_ir.png" width="30%" height="30%">
+# IR
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ir.png"></div>
 
 ## 描述
 
@@ -22,18 +21,6 @@
 - 1x IR Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
-## 相关链接
-
-- **[官方频道视频](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">
@@ -50,27 +37,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-int cur_recv_value = 0;
-
-// initialization
-M5.begin();
-pinMode(ir_recv_pin, INPUT);// receiver pin
-pinMode(ir_send_pin, OUTPUT);// transmitter pin
-digitalWrite(ir_send_pin, 1);// send infrared light
-
-// read data
-cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow).*
+[请点击此处下载UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/IR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/IR/example_unit_ir_03.png">
 
@@ -85,12 +56,9 @@ cur_recv_value = digitalRead(ir_recv_pin);// read the status of receiver
  <tr><td>IR Unit</td><td>Receiver Pin</td><td>Transmitter Pin</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/ir-unit';
-
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/joystick.md b/docs/zh_CN/unit/joystick.md
index 484cf414..816d9f98 100644
--- a/docs/zh_CN/unit/joystick.md
+++ b/docs/zh_CN/unit/joystick.md
@@ -1,8 +1,6 @@
-# JOYSTICK {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png" width="30%" height="30%">
-
+# JOYSTICK
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_joystick_01.png"></div>
 
 ## 描述
 
@@ -26,23 +24,11 @@
 - 1x JOYSTICK Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:75mm x 45mm x 30mm
-- 包装重量:27g
-
 ## 应用
 
 - 游戏控制器
 - 机器人远程控制
 
-## 相关链接
-
-- **[官方频道视频](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系列可免驱动使用)**
@@ -74,40 +60,13 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-#include "Wire.h"
-
-#define JOY_ADDR 0x52
-
-// declaration
-uint8_t x_data, y_data, button_data;
-char data[100];
-
-// initialization
-M5.begin();
-M5.Lcd.clear();
-dacWrite(25, 0);//disable the speak noise
-Wire.begin(21, 22, 400000);
-
-
-// read data
-Wire.requestFrom(JOY_ADDR, 3);
-if (Wire.available()) {
-  x_data = Wire.read();// X(range: 10~250)
-  y_data = Wire.read();// Y(range: 10~250)
-  button_data = Wire.read();// Z(0: released 1: pressed)
-  sprintf(data, "x:%d y:%d button:%d\n", x_data, y_data, button_data);
-}
-```
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_04.png">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/JOYSTICK/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/JOYSTICK/example_unit_joystick_03.png">
 
@@ -122,25 +81,10 @@ if (Wire.available()) {
  <tr><td>JOYSTICK Unit</td><td>SCL</td><td>SDA</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 **Mega328 ISP**下载接口Pin脚定义
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-## 相关视频
-
-**Joystick 的演示 - 遥控轮椅**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Stack%20Joystick.mp4" type="video/mp4">
-</video>
-
-**Joystick 的演示 - 菜单界面的翻页与选择**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Control%20M5%20With%20Joystick.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/joystick-unit';
diff --git a/docs/zh_CN/unit/laser-rx.md b/docs/zh_CN/unit/laser-rx.md
index bd78a1b5..ab6758cd 100644
--- a/docs/zh_CN/unit/laser-rx.md
+++ b/docs/zh_CN/unit/laser-rx.md
@@ -1,9 +1,6 @@
-# LASER.RX {docsify-ignore-all}
-
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg" width="30%" height="30%">
-
+# LASER.RX
 
+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_01.jpg"><img src="assets\img\product_pics\unit\laser_rx\unit_laser_rx_02.jpg"></div>
 
 ## 描述
 
@@ -24,14 +21,9 @@
 - 1x LASER.RX unit
 - 1x CONNEXT cable
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:18g
-
 ## 应用
 
-- 空间激光通信系统. 
+- 空间激光通信系统.
 
 ## 原理图
 
@@ -49,60 +41,15 @@
 
 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 案例程序
 
-- **UIFlow**
+### UIFlow
 
 <img src="assets\img\product_pics\unit\laser_rx\laser-rx.png" width="80%" height="80%">
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+[请点击此处获取Arduino示例代码](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)
 
 ### 管脚映射
 
@@ -112,7 +59,6 @@ M5.update();
 </table>
 
 ## 相关视频
-**Demo** 
 
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
diff --git a/docs/zh_CN/unit/laser-tx.md b/docs/zh_CN/unit/laser-tx.md
index 99ce1f5f..389738c6 100644
--- a/docs/zh_CN/unit/laser-tx.md
+++ b/docs/zh_CN/unit/laser-tx.md
@@ -1,8 +1,6 @@
-# LASER.TX {docsify-ignore-all}
-
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg" width="30%" height="30%">
+# LASER.TX
 
+<div class="product_pic"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_01.jpg"><img src="assets\img\product_pics\unit\laser_tx\unit_laser_tx_02.jpg"></div>
 
 ## 描述
 
@@ -26,11 +24,6 @@
 - 1x LASER.TX unit
 - 1x CONNEXT cable
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:19g
-
 ## 应用
 
 - 空间激光通信系统. 
@@ -53,57 +46,13 @@
 
 ## 案例程序
 
-- **UIFlow**
+### UIFlow
 
 <img src="assets\img\product_pics\unit\laser_tx\laser-tx.png" width="60%" height="80%">
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER).*
-
-```arduino
-/* This demo is for LASER.TX and LASER.RX, utilized UART for transmittion and reception of
- laser signals. In order to get the result of this demo, you will need to connect LASER.TX 
- and LASER.RX with PORTC(blue) respectively onto two different M5Cores with M5GO bases on
-  bottom. Then flash the demo into both M5Core device. 
-  When testing the demo, you need to point the TX unit to RX, and press the button TX connected 
-  device. RX connected device will reponse with a display,and will show what is received . 
-  See this link for more detals: https://m5stack.oss-cn-shenzhen.aliyuncs.com/EasyLoader/Unit/LASER/EasyLoader_LASER_RX.exe
- */
-
-#include <M5Stack.h>
-
-char ch;
-// serial 2 write and read
-//#define RX 
-void setup() {
-  M5.begin();
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(9600, SERIAL_8N1, 16, 17);
-
-}
-
-void loop() {
-M5.update();
-
-  if (M5.BtnA.wasReleased()) {
-    ch = 'A';
-    Serial2.write(ch);
-  } else if (M5.BtnB.wasReleased()) {
-    ch = 'B';
-    Serial2.write(ch);
-  } else if (M5.BtnC.wasReleased()) {
-    ch = 'C';
-    Serial2.write(ch);
-  }
-  M5.update();
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.print(ch);
- }
-}
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/LASER)
 
 ### 管脚映射
 
@@ -112,9 +61,7 @@ M5.update();
  <tr><td>LASER_TX</td><td>/</td><td>TX</td><td>5V</td><td>GND</td></tr>
 </table>
 
-
 ## 相关视频
-**Demo** 
 
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/Unit/LASER-TX-RX.mp4" type="video/mp4" >
@@ -123,8 +70,6 @@ M5.update();
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/laser-tx-unit';
-
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/light.md b/docs/zh_CN/unit/light.md
index 54bda91b..ae4c7d84 100644
--- a/docs/zh_CN/unit/light.md
+++ b/docs/zh_CN/unit/light.md
@@ -1,7 +1,6 @@
-# LIGHT {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_light.png" width="30%" height="30%">
+# LIGHT
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_light.png"></div>
 
 ## 描述
 
@@ -21,24 +20,12 @@
 - 1x LIGHT Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
 ## 应用
 
 - 光控开关
 - 太阳能庭院灯
 - 红外监控摄像头
 
-## 相关链接
-
-- **[官方频道视频](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">
@@ -55,30 +42,13 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// declaration
-uint16_t analogRead_value = 0;
-uint16_t digitalRead_value = 0;
-
-// initialization
-M5.begin();
-dacWrite(25, 0);// disable the speak noise
-pinMode(26, INPUT);// LIGHT Pin setting
-
-// read data
-analogRead_value = analogRead(36);// read analog value of LIGHT
-digitalRead_value = digitalRead(26);
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_04.png">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/LIGHT/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/LIGHT/example_unit_light_03.png">
 
@@ -101,17 +71,10 @@ digitalRead_value = digitalRead(26);
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/LukeVideo/m5stack%20iot%20lighting%20part%202%20-%20light%20sensor%20control.mp4" type="video/mp4">
 </video>
 
-**LIGHT 的应用**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Light%20Units.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/light-sensor-unit';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/unit/m5-bit.md b/docs/zh_CN/unit/m5-bit.md
index 7970ebea..e9c24954 100644
--- a/docs/zh_CN/unit/m5-bit.md
+++ b/docs/zh_CN/unit/m5-bit.md
@@ -1,18 +1,12 @@
-# M5:bit {docsify-ignore-all}
-
-<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg" width="250" height="250"> <img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg" width="250" height="250"><img src="assets/img/product_pics/unit/m5bit/unit_m5bit_03.jpg" width="250" height="250">
-
+# M5:bit
 
+<div class="product_pic"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5bit_01.jpg"><img src="assets/img/product_pics/unit/m5bit/unit_m5bit_02.jpg"></div>
 
 ## 描述
 
-**M5:bit** 
+**M5:bit**
 
-是一款M5Core-Microbit串口通信转接板，
-
-该转接板将Microbit的串口引脚连接至GROVE接口，用于与M5Core之间进行串口通信，或是其他应用.
-
-并将其余IO接口拓展引出，使用杜邦线就能与各种各样的硬件进行连接.
+是一款M5Core-Microbit串口通信转接板，该转接板将Microbit的串口引脚连接至GROVE接口，用于与M5Core之间进行串口通信，或是其他应用.并将其余IO接口拓展引出，使用杜邦线就能与各种各样的硬件进行连接.
 
 **注意：**
 
@@ -27,85 +21,15 @@
 
 -  1x M5:bit
 
-## 尺寸重量
-
-- 包装尺寸:62mm x 22mm x 7mm
-- 包装重量:16g
-
 ## 案例程序
 
-- **MakeCode**
+### MakeCode
 
 <img src="assets/img/product_pics/unit/m5bit/m5bit.png">
 
 ### Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT).*
-
-```arduino
-/*
-    Connect to GRVOE C on M5Core
-*/
-#include <M5Stack.h>
-#include <M5StackUpdater.h>
-
-#define WIDTH 320
-#define HEIGHT 240
-#define BLOCK_SIZE  40
-#define UNIT_WIDTH  5
-#define UNIT_HEIGHT 5
-#define UNIT_SIZE 25
-#define GETX(i) ((i) % (5))
-#define GETY(i) ((i) / (5))
-int world[UNIT_SIZE];
-int i;
-  
-void setup() {
-  M5.begin();
-  Wire.begin();
-  if(digitalRead(BUTTON_A_PIN) == 0){
-    Serial.println("Will load menu binary");
-    updateFromFS(SD);
-    ESP.restart();
-  }
-  Serial2.begin(115200, SERIAL_8N1, 16, 17);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setTextSize(2);
-  M5.Lcd.setCursor(35, 220);  
-  M5.Lcd.println("  <       *       >");  
-    for (i = 0; i < UNIT_SIZE; i++) {
-    world[i] = 0;
-  }
-  i = UNIT_SIZE / 2;
-}
-
-void loop() {
-      M5.update();
-      int x = GETX(i) + 1;
-      int y = GETY(i);
-      if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, LIGHTGREY);
-      else M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, BLUE);
-      if (M5.BtnC.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         ++i;
-         if (i >= UNIT_SIZE) i=0;
-      }
-      if (M5.BtnA.wasPressed()) {
-         if (world[i] > 0) M5.Lcd.fillRect(x * BLOCK_SIZE + 1, y * BLOCK_SIZE + 1, BLOCK_SIZE - 2, BLOCK_SIZE - 2, WHITE);
-         else M5.Lcd.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, BLACK);
-         --i;
-         if (i < 0 ) i=UNIT_SIZE -1;
-      }
-      if (M5.BtnB.wasPressed()) {
-        if (world[i] > 0) world[i]=0;
-        else world[i]=1;
-        Serial2.print(world[i]);
-        Serial2.print(GETX(i));
-        Serial2.println(GETY(i));
-      }
-}
-```
+[请点击此处获取Arduino示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/M5Bit/Arduino/M5BIT)
 
 <script>
 
diff --git a/docs/zh_CN/unit/m5camera.md b/docs/zh_CN/unit/m5camera.md
index a28b4759..6e87f9ae 100644
--- a/docs/zh_CN/unit/m5camera.md
+++ b/docs/zh_CN/unit/m5camera.md
@@ -1,7 +1,6 @@
-# M5CAMERA {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg" width="30%" height="30%">
+# M5CAMERA
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/m5camera/unit_m5camera_01.jpg"><img src="assets/img/product_pics/unit/m5camera/unit_m5camera_02.jpg"></div>
 
 ## 描述
 
@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.
 
-
 <img src="assets/img/product_pics/unit/unit_m5camera_05.png" width="50%">
 
 
@@ -57,12 +55,6 @@
 - 4x LEGO积木
 - 1x Type-C USB(20cm)
 
-## 尺寸重量
-
-- 包装尺寸:75mm x 45mm x 30mm
-- 包装重量:41g
-
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -77,7 +69,6 @@
 
 ## 管脚映射
 
-
 **摄像头驱动芯片 OV2640 接口**
 
 | *接口*             | *Camera Pin* | *M5Camera*  |
@@ -202,12 +193,6 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201812/M5Camera.mp4" type="video/mp4">
 </video>
 
-**M5Camera 的应用 - 保护布丁**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201904/Protective-Pudding.mp4" type="video/mp4">
-</video>
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/esp-32-camera-psram';
diff --git a/docs/zh_CN/unit/m5camera_f.md b/docs/zh_CN/unit/m5camera_f.md
index 46987647..e6744cb5 100644
--- a/docs/zh_CN/unit/m5camera_f.md
+++ b/docs/zh_CN/unit/m5camera_f.md
@@ -1,7 +1,6 @@
-# M5CameraF {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_m5camera_f_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png" width="30%" height="30%">
+# M5CameraF
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_f_01.png"><img src="assets/img/product_pics/unit/unit_m5camera_f_07.png"></div>
 
 ## 描述
 
@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.
 
-
 <img src="assets/img/product_pics/unit/unit_m5camera_f_02.png" width="50%">
 
 <img src="assets/img/product_pics/unit/unit_m5camera_f_03.png" width="50%">
@@ -69,14 +67,8 @@
 - 1x Wall/1515
 - 1x Type-C USB(20cm)
 
-## 尺寸重量
-
-- 包装尺寸:75mm x 45mm x 30mm
-- 包装重量:41g
-
 <img src="assets/img/product_pics/unit/unit_m5camera_f_05.png" width="50%" height="50%">
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -89,7 +81,6 @@
 
 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 管脚映射
 
 **相机管脚映射**
@@ -141,7 +132,6 @@
 | SCL           | IO23      |
 | SDA           | IO22      |
 
-
 **MPU6050 接口**
 
 *IIC 地址是 0x68*
@@ -170,7 +160,6 @@
 
 - **数据手册** - [ESP32](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/core/esp32_datasheet_cn.pdf) - [OV2640](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/OV2640DS_en.pdf)
 
-
 ## 案例程序
 
 ### 出厂固件（WiFi传输图像）
diff --git a/docs/zh_CN/unit/m5camera_x.md b/docs/zh_CN/unit/m5camera_x.md
index d746f2a8..1888655d 100644
--- a/docs/zh_CN/unit/m5camera_x.md
+++ b/docs/zh_CN/unit/m5camera_x.md
@@ -1,7 +1,6 @@
-# M5CameraX {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_m5camera_x_01.png" width="30%" height="30%">
+# M5CameraX
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_m5camera_x_01.png"></div>
 
 ## 描述
 
@@ -14,7 +13,6 @@
 - 打开手机浏览器，访问<mark>192.168.4.1</mark>,进入监控页面实时获取拍摄视频.
 - 视频帧率大约在每秒5-6帧.
 
-
 <!-- <img src="assets/img/product_pics/unit/unit_m5camera_05.png" width="100%" height="100%"><img src="assets/img/product_pics/unit/unit_m5camera_06.png" width="100%" height="100%">
 
 <img src="assets/img/product_pics/unit/unit_m5camera_04.png"> -->
@@ -57,12 +55,6 @@
 - 1x Wall-1515
 - 1x Type-C USB(20cm)
 
-
-## 尺寸重量
-
-- 包装尺寸:75mm x 45mm x 30mm
-- 包装重量:38g
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
diff --git a/docs/zh_CN/unit/makey.md b/docs/zh_CN/unit/makey.md
index 780b4e43..e247e2bc 100644
--- a/docs/zh_CN/unit/makey.md
+++ b/docs/zh_CN/unit/makey.md
@@ -1,8 +1,6 @@
-# 16-Key Capacitive Touch {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_makey.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_05.png" width="30%">
-
+# 16-Key Capacitive Touch
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_makey.png"><img src="assets/img/product_pics/unit/M5GO_Unit_makey_02.png"></div>
 
 ## 描述
 
@@ -16,7 +14,6 @@
 
 使用杜邦线（公对公），将其一端插入"GND"，当另一端短接至 Unit 上的键值的时候,蜂鸣器将发出相应的音调.
 
-
 2）驱动M5Core的扬声器:
 将 MAKEY Unit 连接至 M5Core 的 Grove A.并烧录该[案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).
 
@@ -35,26 +32,14 @@
 - 1x MAKEY Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
 ## 应用
 
 - 水果键盘
 
-
-
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[Maykey 固件](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/firmware_328p)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -71,25 +56,7 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-// initialization
-M5.begin();
-pinMode(21, INPUT); pinMode(22, INPUT);
-Wire.begin();// Init I2C
-
-// read data
-Wire.requestFrom(MAKEY_ADDR, 2);
-while (Wire.available()) {
-  Key1 = Wire.read();//read data from MAKEY
-  Key2 = Wire.read();//read data from MAKEY
-  tone_key = (Key2<<8) | Key1;// the following picture will explain "tone_key"
-}
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/Arduino/Makey_new_version)
 
 <img src="assets/img/product_pics/unit/unit_example/MAKEY/tone_key_pitch_zh_CN.png">
 
@@ -97,7 +64,7 @@ while (Wire.available()) {
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/Makey_NewVersion/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/MAKEY/example_unit_makey_02.png">
 
diff --git a/docs/zh_CN/unit/mini-proto.md b/docs/zh_CN/unit/mini-proto.md
index 87d50dda..a28d0be6 100644
--- a/docs/zh_CN/unit/mini-proto.md
+++ b/docs/zh_CN/unit/mini-proto.md
@@ -1,8 +1,6 @@
-# MINI.PROTO {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg" width="30%"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg" width="30%">
-
+# MINI.PROTO
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_01.jpg"><img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_02.jpg"></div>
 
 ## 描述
 
@@ -13,7 +11,6 @@
  -  PORTB：GPIO 36,26
  -  PORTC：GPIO 16,17 
 
-
 <br><br><br>
 
 <img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_03.jpg" width="50%">
@@ -34,9 +31,6 @@
 
 - 原型设计
 
-
-## 相关链接
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/mini_proto/unit_mini_proto_04.jpg" width="50%" height="50%">
diff --git a/docs/zh_CN/unit/ncir.md b/docs/zh_CN/unit/ncir.md
index 19e5eebd..184941bf 100644
--- a/docs/zh_CN/unit/ncir.md
+++ b/docs/zh_CN/unit/ncir.md
@@ -1,8 +1,6 @@
-# NCIR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_ncir_grove_a.png" width="30%" height="30%">
-
+# NCIR
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_ncir.png"><img src="assets/img/product_pics/unit/unit_ncir_grove_a.png"></div>
 
 ## 描述
 
@@ -27,11 +25,6 @@
 - 1x NCIR Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:75mm x 45mm x 30mm
-- 包装重量:41g
-
 ## 应用
 
 -  人体体温测量
@@ -57,37 +50,13 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define NCIR_ADDR 0x5A
-
-// declaration
-uint16_t result;
-float temperature;
-
-// initialization
-Wire.begin();
-M5.begin();
-
-// read data
-Wire.beginTransmission(NCIR_ADDR);Wire.write(0x07);Wire.endTransmission(false);
-Wire.requestFrom(NCIR_ADDR, 2);
-result = Wire.read();// Receive DATA
-result |= Wire.read() << 8;// Receive DATA
-
-// store temperature value
-temperature = result * 0.02 - 273.15;
-```
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/NCIR)
 
 <img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_04.png">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NCIR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/NCIR/example_unit_ncir_03.png">
 
diff --git a/docs/zh_CN/unit/neoflash.md b/docs/zh_CN/unit/neoflash.md
index ec1f853e..e47d5aee 100644
--- a/docs/zh_CN/unit/neoflash.md
+++ b/docs/zh_CN/unit/neoflash.md
@@ -1,8 +1,6 @@
-# NEOFLASH {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_neoflash_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_neoflash_02.png" width="30%" height="30%">
-
+# NEOFLASH
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_neoflash_01.png"><img src="assets/img/product_pics/unit/unit_neoflash_02.png"></div>
 
 ## 描述
 
@@ -25,22 +23,12 @@
 - 1x NeoFlash Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:220mm x 59mm x 10mm
-- 包装重量:131g
-
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
 
 - **[FastLED Reference(中文版本)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -53,18 +41,17 @@
 
 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 案例程序
 
 ### Arduino IDE
 
 该案例将展示基于网络的PIR人体感应时钟.当检测到人体靠近时，灯板点亮显示实时时间，当检测信号消失，则熄灭灯板.
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)。*
+[请点击此处下载Arduino示例代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOFLASH/example_unit_neoflash_01.png">
 
-- **UIFlow**
+### UIFlow
 
 打开 http://flow.m5stack.com 点击 Demo 载入uiflow例程
 
@@ -85,13 +72,6 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/%E6%95%99%E7%A8%8B/NeoFlash/E1%20-%20Neoflash%20%E4%BE%8B%E7%A8%8B%EF%BC%88UIFlow%20Tutorials%202%EF%BC%89.mp4" type="video/mp4">
 </video>
 
-**Neoflash 的演示 - 闹钟**
-
-<video class="video_size" controls>
-    <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/M5stack%20NeoFlash.mp4" type="video/mp4">
-</video>
-
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neoflash-acrylic-light-board';
diff --git a/docs/zh_CN/unit/neopixel.md b/docs/zh_CN/unit/neopixel.md
index e423edd5..980ffd05 100644
--- a/docs/zh_CN/unit/neopixel.md
+++ b/docs/zh_CN/unit/neopixel.md
@@ -1,14 +1,12 @@
-# NEOPIXEL {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg" width="30%" height="30%">
-
+# NEOPIXEL
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_neopixel.jpg"></div>
 
 ## 描述
 
 **RGB LED** 是一款可编程灯条.该灯条支持数字寻址，这意味着你可以单独控制灯条上的每一个单独的LED灯显示的颜色、亮度.使用单总线编程，可进行灯条拓展.需要注意的是，随着灯条连接数量的逐渐增加，伴随的功耗也会增加，因此在使用LED个数较多的RGB LED灯条时，需要额外为其提供电源.
 
-*注意：在连接时请留意输入端口与输出端口的方向.输入端口用作连接接M5Core，或RGB LED延长拓展.*
+注意：在连接时请留意输入端口与输出端口的方向.输入端口用作连接接M5Core，或RGB LED延长拓展
 
 <img src="assets/img/product_pics/unit/unit_neopixel_02.png">
 
@@ -22,17 +20,8 @@
 
 - 1x RGB LED Unit
 
-## 尺寸重量
-
-- 产品尺寸：10cm/20cm/0.5m/1m/2m
-- 产品重量：4g/5g/12g/19g/36g
-
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[FastLED Library](https://github.com/FastLED/FastLED/wiki/Overview)**
 
 - **[FastLED Reference(中文版本)](http://www.taichi-maker.com/homepage/reference-index/arduino-library-index/fastled-library/)**
@@ -49,73 +38,17 @@
 
 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 案例程序
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)。*
-
-```arduino
-/*
-    Install FastLED library first.
-*/
-#include <M5Stack.h>
-#include "FastLED.h"
-
-#define Neopixel_PIN    21
-#define NUM_LEDS    30
-
-CRGB leds[NUM_LEDS];
-uint8_t gHue = 0;
-static TaskHandle_t FastLEDshowTaskHandle = 0;
-static TaskHandle_t userTaskHandle = 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("Neopixel 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);
-  xTaskCreatePinnedToCore(FastLEDshowTask, \
-                         "FastLEDshowTask", 2048, NULL, 2, NULL, 1);
-}
-
-void loop(){
-}
-
-void FastLEDshowESP32(){
-    if (userTaskHandle == 0){
-        userTaskHandle = xTaskGetCurrentTaskHandle();
-        xTaskNotifyGive(FastLEDshowTaskHandle);
-        const TickType_t xMaxBlockTime = pdMS_TO_TICKS( 200 );
-        ulTaskNotifyTake(pdTRUE, xMaxBlockTime);
-        userTaskHandle = 0;
-    }
-}
-
-void FastLEDshowTask(void *pvParameters){
-    for(;;){
-        fill_rainbow(leds, NUM_LEDS, gHue, 7);// rainbow effect
-        FastLED.show();// must be executed for neopixel becoming effective
-        EVERY_N_MILLISECONDS( 20 ) { gHue++; }
-    }
-}
-```
+[请点击此处下载Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/Arduino)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_02.png">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow).*
+[请点击此处下载UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/NEOPIXEL/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/NEOPIXEL/example_unit_neopixel_01.png">
 
@@ -140,7 +73,6 @@ void FastLEDshowTask(void *pvParameters){
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201901/Akela%20Weapons.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/neopixel-rgb-leds-cable';
diff --git a/docs/zh_CN/unit/op180.md b/docs/zh_CN/unit/op180.md
index 5e0d5d9c..967d2990 100644
--- a/docs/zh_CN/unit/op180.md
+++ b/docs/zh_CN/unit/op180.md
@@ -1,8 +1,6 @@
-# OP.180 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op180/unit_op180_03.jpg" width="30%" height="30%">
-
+# OP.180
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/op180/unit_op180_01.jpg"><img src="assets/img/product_pics/unit/op180/unit_op180_02.jpg"></div>
 
 ## 描述
 
@@ -18,23 +16,15 @@
 - 1x OP.180 unit
 - 1x GROVE 线
 
-
-## 尺寸重量
-
-- 包装尺寸:68mm x 52mm x 12mm
-- 包装重量:16g
-
 ## 应用
 
 - 自动门
 - 自动化机械控制
 
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/op180/unit_op180_04.jpg" width="30%" height="30%">
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -49,8 +39,7 @@
 
 ## 案例程序
 
-- [点击此处，获取案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
-
+- [点击此处获取Arduino案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
 
 ## 相关视频
 
diff --git a/docs/zh_CN/unit/op90.md b/docs/zh_CN/unit/op90.md
index f7956516..238d6313 100644
--- a/docs/zh_CN/unit/op90.md
+++ b/docs/zh_CN/unit/op90.md
@@ -1,14 +1,11 @@
-# OP.90 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg" width="30%" height="30%"> <img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/op90/unit_op90_03.jpg" width="30%" height="30%">
-
+# OP.90
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/op90/unit_op90_01.jpg"><img src="assets/img/product_pics/unit/op90/unit_op90_02.jpg"></div>
 
 ## 描述
 
 **OP.90** 是一款90°的非接触式光电限位开关.该Unit上两侧分别为红外、发射接收器，正常工作时，发射测会不断发射红外信号至接受测，当有物体从中间经过并遮挡到红外信号时，输出端将产生动作信号，判断物体经过.常用于机械控制系统中，作为安全联锁或是光电计数装置.
 
-
 ## 产品特性
 
 - 角度:90°
@@ -19,17 +16,11 @@
 - 1x OP.90 unit
 - 1x GROVE 线
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:18g
-
 ## 应用
 
 - 自动门
 - 自动化机械控制
 
-  
 ## 原理图
 
 <img src="assets/img/product_pics/unit/op90/unit_op90_04.jpg" width="30%" height="30%">
@@ -48,8 +39,7 @@
 
 ## 案例程序
 
-- [点击此处，获取案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
-
+- [点击此处获取Arduino案例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/OP90.180).
 
 ## 相关视频
 
diff --git a/docs/zh_CN/unit/pahub.md b/docs/zh_CN/unit/pahub.md
index ecd7de9c..853f1c1b 100644
--- a/docs/zh_CN/unit/pahub.md
+++ b/docs/zh_CN/unit/pahub.md
@@ -1,9 +1,6 @@
-# PaHUB {docsify-ignore-all}
-
-
-<img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg" width="30%" height="30%">
-
+# PaHUB
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/pahub/pahub_p1.jpg"><img src="assets/img/product_pics/unit/pahub/pahub_p3.jpg"></div>
 
 ## 描述
 
@@ -19,8 +16,6 @@
 
 <img src="assets/img/product_pics/unit/pahub/pahub_p2.jpg" width="30%" height="30%">
 
-
-
 ### 产品特性
 
 - I2C GROVE PORTA 拓展
@@ -47,29 +42,22 @@
 - 1x PaHUB Unit
 - 1x Grove 线
 
-
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
 ## 参考文档
 
 - Datasheet - **[TCA9548A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/unit/TCA9548A_en.pdf)**
 
-
 ## 案例程序
 
 - 通讯类型 - I2C
 - 地址 - 0x70
 
-- **UIFlow**
+### UIFlow
 
-*下载完整代码 [点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/UIFlow).*
+[获取UIFlow示例点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/UIFlow)
 
 <img src="assets/img/product_pics/unit/pahub/pahub.png" width="80%" height="80%">
 
-- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino/PaHUB)**
+[Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PaHUB/Arduino/PaHUB)
 
 ## EasyLoader
 
diff --git a/docs/zh_CN/unit/pbhub.md b/docs/zh_CN/unit/pbhub.md
index a84d9edf..9bbdd0f9 100644
--- a/docs/zh_CN/unit/pbhub.md
+++ b/docs/zh_CN/unit/pbhub.md
@@ -1,17 +1,12 @@
-# PbHUB {docsify-ignore-all}
-
-
-<img src="assets/img/product_pics/unit/pbhub/pbhub_p1.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/pbhub/pbhub_p2.png" width="30%" height="30%">
-
-
-
+# PbHUB
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/pbhub/pbhub_p1.jpg"><img src="assets/img/product_pics/unit/pbhub/pbhub_p2.png"></div>
 
 ## 描述
 
 **PbHUB**, 是一款 GPIO GROVE PORTB 扩展器,能够将单路 GPIO GROBE 接口拓展至六路.内部集成MEGA328，且搭载驱动程序.不支持多 Unit 嵌套，这意味着无法像**PaHUB**一样挂载多个相同协议、地址的设备.
 
-Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根据需求编程配置多个端口的输入(支持模拟输入）、输出. 
+Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根据需求编程配置多个端口的输入(支持模拟输入）、输出.
 
 对于使用电平控制或是模拟值输入的项目，PbHUB 是一个不错的多设备控制的解决方案.
 
@@ -19,7 +14,6 @@ Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根
 
 *注意1：编程时请注意通道顺序*
 
-
 <br>
 <img src="assets/img/product_pics/unit/pbhub/pbhub_p3.jpg" width="30%" height="30%">
 <br>
@@ -34,17 +28,11 @@ Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根
 - 2x LEGO 兼容孔
 - 1-6 拓展
 
-
 ### 套件清单
 
 - 1x PbHUB Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:19g
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -57,7 +45,6 @@ Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根
 
 ?>3.目前EasyLoader仅适用于Windows操作系统、兼容M5体系采用ESP32作为控制核心的主机.在为M5Core烧录前需要安装CP210X驱动程序（使用M5StickC作为控制器的则无需安装）[点击此处查看驱动安装教程](zh_CN/related_documents/M5Burner#安装串口驱动)
 
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/pbhub/pbhub_sch.jpg">
@@ -68,18 +55,17 @@ Port B 中的两条数据总线与ESP32的**GPIO36**和**GPIO26**连接,可根
 
 <img src="assets\img\product_pics\app\mega328_isp.png" width="30%" height="30%">
 
-
 ### 驱动协议
 
 ## 案例程序
 
 - 测试程序 - **[PbHUB](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/PbHUB)**
-- 通讯协议 - I2C     
+- 通讯协议 - I2C
 - I2C地址 - 0x61
 - Set oneLED Color : LED 地址(2bytes) + RGB 值(3bytes)
 - Set moreLED Color : LED 起始地址(2bytes) + LED 结束地址(2bytes) + RGB 值(3bytes)
 
-*点击此处查看UIFLOW [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PbHUB/UIFlow)*
+[获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PbHUB/UIFlow)
 
 <img src="assets/img/product_pics/unit/pbhub/pbhub.png">
 
diff --git a/docs/zh_CN/unit/pir.md b/docs/zh_CN/unit/pir.md
index ecf21d78..086ab844 100644
--- a/docs/zh_CN/unit/pir.md
+++ b/docs/zh_CN/unit/pir.md
@@ -1,8 +1,6 @@
-# PIR {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_pir.png" width="30%" height="30%">
-
+# PIR
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_pir.png"></div>
 
 ## 描述
 
@@ -27,23 +25,12 @@
 - 1x PIR Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:20g
-
 ## 应用
 
 - 人体感应灯具
 - 安防产品
 - 自动感应电器设置
 
-## 相关链接
-
-- **[官方频道视频](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系列可免驱动使用)**
@@ -74,23 +61,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-// initialization
-M5.begin();
-pinMode(36, INPUT);// set pir sensor pin as input
-
-// read data
-int value = digitalRead(36);// read the pin(0: not detectd 1: detected)
-M5.update();
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow).*
+[请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/PIR/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/PIR/example_unit_pir_03.png">
 
diff --git a/docs/zh_CN/unit/proto.md b/docs/zh_CN/unit/proto.md
index 3be981b7..c0775325 100644
--- a/docs/zh_CN/unit/proto.md
+++ b/docs/zh_CN/unit/proto.md
@@ -1,8 +1,6 @@
-# PROTO {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_proto.png" width="30%" height="30%">
-
+# PROTO
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_proto.png"></div>
 
 ## 描述
 
@@ -20,17 +18,6 @@
 - 1x PROTO Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 ## 原理图
 
 <img src="assets/img/product_pics/unit/proto_sch.JPG">
diff --git a/docs/zh_CN/unit/relay.md b/docs/zh_CN/unit/relay.md
index 64cc649a..586c94f8 100644
--- a/docs/zh_CN/unit/relay.md
+++ b/docs/zh_CN/unit/relay.md
@@ -1,8 +1,6 @@
-# RELAY {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_relay.png" width="30%" height="30%"> 
-
+# RELAY
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_relay.png"></div>
 
 ## 描述
 
@@ -21,23 +19,10 @@
 - 1x Grove 线
 - 1x 3.96 端子
 
-## 尺寸重量
-
-- 包装尺寸:60mm x 57mm x 17mm
-- 包装重量:26g
-
 ## 应用
 
 - 远程控制大功率电器，如冰箱，空调，电视等
 
-
-## 相关链接
-
-- **[官方频道视频](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系列可免驱动使用)**
@@ -69,32 +54,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-
-void setup() {
-  M5.begin();
-  M5.Lcd.clear(BLACK);
-  M5.Lcd.setTextFont(4);
-  M5.Lcd.setTextColor(YELLOW, BLACK);
-  //disable the speak noise
-  dacWrite(25, 0);
-  pinMode(26, OUTPUT);// RELAY Pin setting
-}
-
-void loop(void) {
-  digitalWrite(26, HIGH);// RELAY Unit work
-  delay(500);
-  digitalWrite(26, LOW);// RELAY Unit stop work
-  delay(500);
-}
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RELAY/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/RELAY/example_unit_relay_01.png">
 
diff --git a/docs/zh_CN/unit/rfid.md b/docs/zh_CN/unit/rfid.md
index b5b8e695..fe973548 100644
--- a/docs/zh_CN/unit/rfid.md
+++ b/docs/zh_CN/unit/rfid.md
@@ -1,8 +1,6 @@
- # RFID {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_rfid_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_rfid_02.png" width="30%" height="30%">
-
+ # RFID
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_rfid_01.png"><img src="assets/img/product_pics/unit/unit_rfid_02.png"></div>
 
 ## 描述
 
@@ -27,11 +25,6 @@
 - 1x RFID Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:21g
-
 ## 应用
 
 -  智能家居门禁系统
@@ -43,7 +36,6 @@
 
 - Datasheet **[MFRC522](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/module/MFRC522_en.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -60,52 +52,15 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/Arduino).*
+[请点击此处下载Arduino示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/Arduino)
 
 烧录例程 RFID.ino 后，当设备运行. 使用IC卡或手机NFC放置在 RFID Unit 上.M5Core屏幕上将打印出其ID信息.
 
-```arduino
-/*
-    RFID.ino
-*/
-#include <Wire.h>
-#include "MFRC522_I2C.h"
-#include <M5Stack.h>
-
-// 0x28 is i2c address on SDA. Check your address with i2cscanner if not match.
-MFRC522 mfrc522(0x28);   // Create MFRC522 instance.
-
-// initialization
-M5.begin(); Serial.begin(115200); Wire.begin();
-/* Init MFRC522 */
-mfrc522.PCD_Init();
-/* Show details of PCD - MFRC522 Card Reader details */
-ShowReaderDetails();
-
-// get the uid of available card
-mfrc522.PICC_IsNewCardPresent();// scan for a new card
-mfrc522.PICC_ReadCardSerial();// read data
-// a new card is selected. The UID and SAK is saved at mfrc522.uid structor.
-for (byte i = 0; i < mfrc522.uid.size; i++) {
-  Serial.print(mfrc522.uid.uidByte[i] < 0x10 ? " 0" : " ");
-  Serial.print(mfrc522.uid.uidByte[i], HEX);
-}
-
-// other function
-void ShowReaderDetails() {
-  /* Get the MFRC522 software version */
-  byte v = mfrc522.PCD_ReadRegister(mfrc522.VersionReg);
-  if (v == 0x91) Serial.print(F(" = v1.0"));
-  else if (v == 0x92) Serial.print(F(" = v2.0"));
-  else Serial.print(F(" (unknown)"));
-}
-```
-
 <img src="assets/img/product_pics/unit/unit_example/RFID/example_unit_rfid_01.png" width="50%">
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/UIFlow).*
+[请点击此处下载UIFlow](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RFID/UIFlow)
 
 使用[UIFlow](flow.m5stack.com)下载该案例程序到M5Core中后将感应卡放置在 RFID Unit 上.M5Core屏幕将显示打印其对应的ID信息.
 
diff --git a/docs/zh_CN/unit/rgb.md b/docs/zh_CN/unit/rgb.md
index 5c302b59..08d3d43d 100644
--- a/docs/zh_CN/unit/rgb.md
+++ b/docs/zh_CN/unit/rgb.md
@@ -1,8 +1,6 @@
-# RGB {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_rgb.png" width="30%" height="30%">
-
+# RGB
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_rgb.png"></div>
 
 ## 描述
 
@@ -18,18 +16,6 @@
 - 1x RGB Unit
 - 1x Grove 线
 
-
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
-## 相关链接
-
-- **[官方频道视频](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">
@@ -46,35 +32,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/Arduino).*
-
-```arduino
-/*
-    Install the AdaFruit NeoPixel library first
- */
-#include <Adafruit_NeoPixel.h>
-
-#define RGB_PIN 26
-#define NUMPIXELS   3
-
-// new a object
-Adafruit_NeoPixel pixels = Adafruit_NeoPixel(NUMPIXELS, PIN, NEO_GRB+NEO_KHZ800);
-
-int delayval = 150;// delay for half a second
-
-// initialization
-pixels.begin(); // This initializes the NeoPixel library.
-
-// display rgb
-pixels.setPixelColor(0, pixels.Color(100,0,0));//parameter = (rgb index, color)
-pixels.setPixelColor(1, pixels.Color(0,100,0));
-pixels.setPixelColor(2, pixels.Color(0,0,100));
-pixels.show(); // This sends the updated pixel color to the hardware.
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RGB/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/RGB/example_unit_rgb_01.png">
 
diff --git a/docs/zh_CN/unit/rs485.md b/docs/zh_CN/unit/rs485.md
index ad40281c..6d998888 100644
--- a/docs/zh_CN/unit/rs485.md
+++ b/docs/zh_CN/unit/rs485.md
@@ -1,8 +1,6 @@
-# RS485 {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/unit_rs485_01.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/unit_rs485_02.png" width="30%" height="30%">
-
+# RS485
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_rs485_01.png"><img src="assets/img/product_pics/unit/unit_rs485_02.png"></div>
 
 ## 描述
 
@@ -20,11 +18,6 @@
 - 1x RS485 Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:21g
-
 ## 应用
 
 - 工业设备中 RS485 接口的设备与微控制器之间的通讯
@@ -53,11 +46,11 @@
 
 ### 1. Arduino IDE
 
-*代码下载点击此处 [点击这里](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/RS485).*
+[点击这里获取Arduino示例程序](https://github.com/m5stack/M5Stack/tree/master/examples/Unit/RS485)
 
 ### 2. UIFlow
 
-*代码下载点击此处 [点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RS485/UIFlow).*
+[点击这里获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/RS485/UIFlow)
 
 ### 管脚映射
 
diff --git a/docs/zh_CN/unit/thermal.md b/docs/zh_CN/unit/thermal.md
index e22adebf..82f91c8b 100644
--- a/docs/zh_CN/unit/thermal.md
+++ b/docs/zh_CN/unit/thermal.md
@@ -1,16 +1,12 @@
-# THERMAL {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/M5GO_Unit_thermal.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal_02.png" width="30%" height="30%">
-
+# THERMAL
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal.png"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal_02.png"></div>
 
 ## 描述
 
 **THERMAL** 是一款人体红外成像 Unit.内置**MLX90640**热电堆传感器,能够测量物体表面温度.并通过由表面温度形成的温度梯度，生成热成像图片.(图片分辨率为**32 x 24**)
 
-**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，该 Unit 是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）.
-
-该 Unit 与 M5Core 通过 Grove A 接口通信，I2C 地址为**0x33**.
+**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，该 Unit 是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°)，I2C 地址为**0x33**.
 
 <img src="assets/img/product_pics/unit/thermal/unit_thermal_05.png">
 
@@ -30,11 +26,6 @@
 - 1x THERMAL Unit
 - 1x Grove 线
 
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:18g
-
 ## 应用
 
 -  高精度的非接触性测温器
@@ -43,13 +34,8 @@
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[MLX90640 Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MLX90640-Datasheet-Melexis_en.pdf)**
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_logo.png" width="100px" style="margin-top:20px">
@@ -66,43 +52,14 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/Arduino)。*
-
-```arduino
-/*
-    MLX90640.ino
-*/
-#include <M5Stack.h>
-#include <Wire.h>
-#include "MLX90640_API.h"
-#include "MLX90640_I2C_Driver.h"
-
-// declaration
-uint16_t eeMLX90640[832];//32 * 24 = 768
-int SetRefreshRate;
-
-// initialization
-/* load system parameter */
-MLX90640_DumpEE(MLX90640_address, eeMLX90640);
-/* load extraction parameter */
-MLX90640_ExtractParameters(eeMLX90640, &mlx90640);
-SetRefreshRate = MLX90640_SetRefreshRate(0x33, 0x05);
-M5.Lcd.fillScreen(TFT_BLACK);
-infodisplay();
-
-// display heat map
-M5.update();
-infodisplay();
-interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
-                    INTERPOLATED_ROWS,INTERPOLATED_COLS);
-```
+[请点击此处获取Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/Arduino）
 
 <img src="assets/img/product_pics/unit/M5GO_Unit_thermal_03.png" width="30%" height="30%"><img src="assets/img/product_pics/unit/M5GO_Unit_thermal_04.png" width="30%" height="30%">
 
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/UIFlow).*
+[请点击此处获取UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/THERMAL/UIFlow)
 
 <img src="assets/img/product_pics/unit/thermal.png">
 
@@ -125,7 +82,6 @@ interpolate_image(reversePixels,ROWS,COLS,dest_2d,\
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Blog/Twitch201811/Infrared%20Thermal%20Imaging.mp4" type="video/mp4">
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/thermal-camera';
diff --git a/docs/zh_CN/unit/tof.md b/docs/zh_CN/unit/tof.md
index ec44a516..9d86e44e 100644
--- a/docs/zh_CN/unit/tof.md
+++ b/docs/zh_CN/unit/tof.md
@@ -1,7 +1,6 @@
-# ToF {docsify-ignore-all}
-
-<img src="assets/img/product_pics/unit/tof/unit_tof_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/unit/tof/unit_tof_02.jpg" width="30%" height="30%">
+# ToF
 
+<div class="product_pic"><img src="assets/img/product_pics/unit/tof/unit_tof_01.jpg"><img src="assets/img/product_pics/unit/tof/unit_tof_02.jpg"></div>
 
 ## 描述
 
@@ -34,12 +33,6 @@
 - 1x ToF Unit
 - 1x Grove 线
 
-
-## 尺寸重量
-
-- 包装尺寸:67mm x 53mm x 12mm
-- 包装重量:17g
-
 ## 应用
 
 - 手势识别
@@ -49,10 +42,6 @@
 
 ## 相关链接
 
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 - **[VL53L0X Datasheet](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/VL53L0X_en.pdf)**
 
 ## EasyLoader
@@ -71,35 +60,11 @@
 
 ### 1. Arduino IDE
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/Arduino).*
-
-```arduino
-#include <M5Stack.h>
-#include <Wire.h>
-
-#define ToF_ADDR 0x29//the iic address of tof
-
-#define SYSRANGE_START  0x00
-#define RESULT_RANGE_STATUS 0x14
-#define ToF_ADDR 0x29   //the IIC address of ToF
-
-// declaration
-uint16_t dist=0;
-
-// initialization
-M5.begin();
-Wire.begin();// join i2c bus (address optional for master)
-
-// read data
-write_byte_data_at(VL53L0X_REG_SYSRANGE_START, 0x01);
-read_block_data_at(VL53L0X_REG_RESULT_RANGE_STATUS, 12);//read 12 bytes once
-// get distance
-dist = makeuint16(gbuf[11], gbuf[10]);//split distance data to variable "dist"
-```
+[请点击此处下载Arduino示例程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/Arduino)
 
 ### 2. UIFlow
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/UIFlow).*
+[请点击此处下载UIFlow示例](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Unit/TOF/UIFlow)
 
 <img src="assets/img/product_pics/unit/unit_example/TOF/example_unit_tof_01.png">
 
diff --git a/docs/zh_CN/unit/trace.md b/docs/zh_CN/unit/trace.md
index c6b3c5e9..e747d7a9 100644
--- a/docs/zh_CN/unit/trace.md
+++ b/docs/zh_CN/unit/trace.md
@@ -1,6 +1,6 @@
-# TRACE {docsify-ignore-all}
+# TRACE
 
-<img src="assets/img/product_pics/unit/unit_trace_01.png" width="30%" height="30%">
+<div class="product_pic"><img src="assets/img/product_pics/unit/unit_trace_01.png" width="30%" height="30%">