diff --git a/docs/zh_CN/hat/hat-bugc.md b/docs/zh_CN/hat/hat-bugc.md
index ef5ec9f7..706107f9 100644
--- a/docs/zh_CN/hat/hat-bugc.md
+++ b/docs/zh_CN/hat/hat-bugc.md
@@ -72,7 +72,6 @@ Bugc底座需要结合M5StickC控制器使用.在底座上，配备了四个由S
 
    var purchase_link = 'https://m5stack.com/products/bugc-w-o-m5stickc';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-cardkb.md b/docs/zh_CN/hat/hat-cardkb.md
index 1bab2ef2..9e56195d 100644
--- a/docs/zh_CN/hat/hat-cardkb.md
+++ b/docs/zh_CN/hat/hat-cardkb.md
@@ -1,8 +1,6 @@
-# CardKB HAT {docsify-ignore-all}
-
-<img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg" width="30%" height="30%"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_03.jpg" width="30%" height="30%">
-
+# CardKB HAT
 
+<div class="product_pic"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_01.jpg"><img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat_02.jpg"></div>
 
 ## 描述
 
@@ -26,9 +24,6 @@
 ## 产品特性
 
 - 全键盘输入，多种按键组合.
-
-## 尺寸和重量
-
 - 尺寸： 84.6mm * 54.2mm * 6.5mm
 - 重量： 21g
 
@@ -64,50 +59,15 @@
 
 ## 案例程序
 
-### Arduino IDE
+- **Arduino IDE**
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)*
+[请点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT)获取完整代码
 
-```arduino
-#include <M5StickC.h>
-#include <Wire.h>
-
-#define CARDKB_ADDR 0x5F
-
-void setup()
-{
-  M5.begin();
-  Wire.begin(0, 26);
-  M5.Lcd.setRotation(3);
-  M5.Lcd.fillScreen(BLACK);
-  M5.Lcd.setCursor(0, 0, 2 );
-  M5.Lcd.setTextColor(YELLOW);
-
-  M5.Lcd.println("IIC Address: 0x5F\n");
-  M5.Lcd.println(">>");
-}
-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);
-      Serial.println(char(c));
-    }
-  }
-  // delay(10);
-}
-```
-
-### UIFLOW
+- **UIFlow**
 
 <img src="assets/img/product_pics/hat/cardkb_hat/cardkb_hat.jpg" width="30%" height="30%">
 
-*获取UIFLOW例程 [点击](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)*
+获取UIFLOW例程 [点击](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/CardKB_HAT/UIFLOW)
 
 ## 相关视频
 
diff --git a/docs/zh_CN/hat/hat-dac.md b/docs/zh_CN/hat/hat-dac.md
index c3a2129e..84831144 100644
--- a/docs/zh_CN/hat/hat-dac.md
+++ b/docs/zh_CN/hat/hat-dac.md
@@ -1,14 +1,11 @@
-# DAC HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_03.jpg" width="30%" height="30%">
-
+# DAC HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_01.jpg"><img src="assets\img\product_pics\hat\dac_hat\dac_hat_02.jpg"></div>
 
 ## 描述
 
 **DAC Hat**是一款兼容M5SticKC的DA转换模块，内部集成DAC转换芯片MCP4725，具备低功耗，高精度，单通道，12位缓冲电压输出数模转换器（DAC），非易失性存储器（EEPROM）.其片上精密输出放大器使其能够达到轨到轨模拟输出摆幅.用户可以使用I2C接口命令将DAC输入和配置烧写到非易失性存储器（EEPROM）中，使得DAC在断电期间仍能保持代码，上电后即可直接使用,I2C地址为0x60.
 
-
 ## 产品特性
 
 - 输出电压: 0-3.3V
@@ -30,11 +27,6 @@
 
 - 1x DAC HAT
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:14g
-
 ## 应用
 
 - 设定点或失调微调
@@ -44,12 +36,10 @@
 - PC外设
 - 数据采集系统
 
-
 ## 原理图
 
 <img src="assets/img/product_pics/hat/dac_hat/dac_hat_04.jpg" width="50%" height="50%">
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -68,19 +58,16 @@
 
 <img src="assets/img/product_pics/hat/dac_hat/dac.png" width="80%" height="80%">
 
-### Arduino IDE
+- **Arduino IDE**
 
-[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)，获取完整程序.
+[点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/DAC)获取完整程序.
 
 ## 相关链接
 
 -  **Datasheet** - [MCP4725](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/MCP4725_en.pdf)
 
-
 ## 相关视频
 
-**Demo** 
-
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/ADC-DAC-HAT.mp4" type="video/mp4" >
 </video>
@@ -89,7 +76,6 @@
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-env-hat';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-env.md b/docs/zh_CN/hat/hat-env.md
index 08f74f20..260aaf82 100644
--- a/docs/zh_CN/hat/hat-env.md
+++ b/docs/zh_CN/hat/hat-env.md
@@ -1,7 +1,6 @@
-# ENV HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\env_hat\env_hat_03.jpg" width="30%" height="30%">
+# ENV HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\env_hat\env_hat_01.jpg"><img src="assets\img\product_pics\hat\env_hat\env_hat_02.jpg"></div>
 
 ## 描述
 
@@ -20,11 +19,6 @@
     - ±1300μT（x，y轴），±2500μT（z轴）
     - 磁场分辨率约为0.3μT
 
-## 重量尺寸
-
-- 单品尺寸：24mm x 20.3mm x 13.8mm
-- 单品重量：3g
-
 ## 包含
 
 - 1x ENV Hat
@@ -84,7 +78,7 @@
 
 <img src="assets/img/product_pics/hat/env_hat/env.png">
 
-### Arduino IDE
+- **Arduino IDE**
 
 [点击此处](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-finger.md b/docs/zh_CN/hat/hat-finger.md
index a059189e..06122714 100644
--- a/docs/zh_CN/hat/hat-finger.md
+++ b/docs/zh_CN/hat/hat-finger.md
@@ -1,7 +1,6 @@
-# FINGER HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_03.jpg" width="30%" height="30%">
+# FINGER HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_01.jpg"><img src="assets\img\product_pics\hat\finger_hat\finger_hat_02.jpg"></div>
 
 ## 描述
 
@@ -14,7 +13,6 @@ UART 参数设置:
 - 停止位(1 bit)
 - 校验位(无)
 
-
 ## 产品特性
 
 - 指纹容量:  150
@@ -30,9 +28,6 @@ UART 参数设置:
 - 通讯波特率: 9600-115200（默认为19200）
 - 工作温度:   -10° - 60°
 - 相对湿度:   20% - 80%
-
-## 重量尺寸
-
 - 尺寸：24mm * 65mm * 20mm
 - 重量：12g
 
@@ -46,12 +41,10 @@ UART 参数设置:
 - 替代密码认证
 - 身份识别
 
-
 ## 原理图
 
 <img src="assets/img/product_pics/hat/finger_hat/finger_hat_04.jpg" width="50%" height="50%">
 
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -81,7 +74,6 @@ UART 参数设置:
 - 数据手册 **[FPC1020A](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/1020A_datasheet_cn.pdf)**
 
 ## 相关视频
-**Demo** 
 
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/FINGER-HAT.mp4" type="video/mp4" >
diff --git a/docs/zh_CN/hat/hat-joyc.md b/docs/zh_CN/hat/hat-joyc.md
index b16fa324..a7d0aee9 100644
--- a/docs/zh_CN/hat/hat-joyc.md
+++ b/docs/zh_CN/hat/hat-joyc.md
@@ -1,8 +1,6 @@
-# JoyC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_03.jpg" width="20%"> <img src="assets\img\product_pics\hat\JoyC_hat\JoyC_04.jpg" width="20%">
-
+# JoyC
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_01.jpg"><img src="assets\img\product_pics\hat\JoyC_hat\JoyC_02.jpg"></div>
 
 ## 描述
 
@@ -13,9 +11,6 @@
 - 内嵌STM32F030F4
 - 通信协议：I2C（地址：0x38）
 - 支持全方位偏移/中心按键
-
-## 重量尺寸
-
 - 单品尺寸：200mm x 55mm x 50mm
 - 重量：81g（含电池）
 
@@ -50,7 +45,9 @@
 
 <img src="assets\img\product_pics\hat\JoyC_hat\JoyC.png" width="60%"> 
 
-- **[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)**
+- **Arduino**
+
+获取[Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/JoyC)例程
 
 ## 相关视频
 
diff --git a/docs/zh_CN/hat/hat-joystick.md b/docs/zh_CN/hat/hat-joystick.md
index e13978d3..40933b75 100644
--- a/docs/zh_CN/hat/hat-joystick.md
+++ b/docs/zh_CN/hat/hat-joystick.md
@@ -1,7 +1,6 @@
-# Joystick HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_03.jpg" width="30%">
+# Joystick HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_01.jpg"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_02.jpg"></div>
 
 ## 描述
 
@@ -11,17 +10,11 @@
 
 采用HAT系列统一的插接式设计与M5StickC可靠连接，用最精简的方式，获得更多人机交互输入体验.
 
-
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_04.jpg" width="30%"><img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_05.jpg" width="30%">
-
 ## 产品特性
 
 - 内嵌STM32F030F4
 - 通信协议：I2C（地址：0x38）
 - 支持全方位偏移/中心按键
-
-## 重量尺寸
-
 - 单品尺寸：24mm x 30mm x 17mm
 - 单品重量：3g
 
@@ -29,8 +22,6 @@
 
 - 1x Joystick HAT
 
-<img src="assets\img\product_pics\hat\joystick_hat\joystick_hat_06.jpg" width="30%">
-
 ## 应用
 
 - 游戏控制器
@@ -95,7 +86,7 @@
 
 - **Arduino**
 
-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)查看完整代码
+点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-joystick/Arduino/Joystick_hat)下载完整代码
 
 ## 管脚映射
 
diff --git a/docs/zh_CN/hat/hat-ncir.md b/docs/zh_CN/hat/hat-ncir.md
index 0b27da44..e8b82f23 100644
--- a/docs/zh_CN/hat/hat-ncir.md
+++ b/docs/zh_CN/hat/hat-ncir.md
@@ -1,7 +1,6 @@
-# NCIR HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_03.jpg" width="30%" height="30%">
+# NCIR HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_01.jpg"><img src="assets\img\product_pics\hat\ncir_hat\hat_ncir_02.jpg"></div>
 
 ## 描述
 
@@ -9,11 +8,10 @@
 
 与大多数接触式型传感器不同地方在于,该传感器通过测量远距离物体发射出的红外光波来检测温度.无需物理接触，这使得它比一般传感器拥有更广的测温范围: -70°C 至 + 380°C.视场角为90°，能够方便快捷的测量某一位置的平均温度.
 
-IIC（0x5A）
-
 ## 产品特性
 
 - MLX90614ESF-AAA
+- IIC地址（0x5A）
 - 工作电压: 4.5 to 5.5V
 - 物体测温范围: -70°C ~ 380°C
 - 环境测温范围: -40°C ~ 125 ˚C
@@ -25,11 +23,6 @@ IIC（0x5A）
 
 - 1x NCIR Hat
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:13g
-
 ## 应用
 
 -  人体体温测量
@@ -55,7 +48,6 @@ IIC（0x5A）
 
 >2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录.(**为M5StickC烧录时，请将波特率设置在750000或115200**)
 
-
 ## 案例程序
 
 - **UIFlow**
@@ -63,7 +55,8 @@ IIC（0x5A）
 
 <img src="assets/img/product_pics/hat/ncir_hat/ncir.png">
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)**
+- **Arduino IDE**
+点击[此处下载](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/NCIR_HAT)示例程序
 
 ### 管脚映射
 
diff --git a/docs/zh_CN/hat/hat-neoflash.md b/docs/zh_CN/hat/hat-neoflash.md
index 235634dc..7905520b 100644
--- a/docs/zh_CN/hat/hat-neoflash.md
+++ b/docs/zh_CN/hat/hat-neoflash.md
@@ -1,8 +1,6 @@
-# Neoflash HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg" width="30%"> <img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_05.jpg" width="30%">
-
+# Neoflash HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_01.jpg"><img src="assets\img\product_pics\hat\neoflash_hat\neoflash_hat_02.jpg"></div>
 
 ## 描述
 
@@ -22,9 +20,6 @@
 - 孔间距: 0.1 in - (2.54 mm)
 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 安装方式: 紧贴背面（默认）/水平拼接
-
-## 重量尺寸
-
 - 单品尺寸：58mm x 23.5mm x 1mm
 - 单品重量：2g
 
@@ -63,7 +58,7 @@
 
 - **Arduino**
 
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)**
+点击[此处下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/neoflash-hat/Arduino)完整示例
 
 ## 管脚映射
 
diff --git a/docs/zh_CN/hat/hat-pir.md b/docs/zh_CN/hat/hat-pir.md
index b6d56519..8d5d78c5 100644
--- a/docs/zh_CN/hat/hat-pir.md
+++ b/docs/zh_CN/hat/hat-pir.md
@@ -1,7 +1,6 @@
-# PIR HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_03.jpg" width="30%" height="30%">
+# PIR HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_01.jpg"><img src="assets\img\product_pics\hat\pir_hat\pir_hat_02.jpg"></div>
 
 ## 描述
 
@@ -21,11 +20,6 @@
 
 - 1x PIR Hat
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:12g
-
 ## 应用
 
 - 人体感应灯具
@@ -38,12 +32,6 @@
 
 <img src="assets\img\product_pics\hat\pir_hat\pir_hat_04.jpg" width="50%" height="50%">s
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
 
 ## EasyLoader
 
@@ -71,7 +59,6 @@
     </div>
 </div>
 
-
 ## 案例程序
 
 - **UIFlow**
diff --git a/docs/zh_CN/hat/hat-powerc.md b/docs/zh_CN/hat/hat-powerc.md
index 1622c943..e844732d 100644
--- a/docs/zh_CN/hat/hat-powerc.md
+++ b/docs/zh_CN/hat/hat-powerc.md
@@ -1,20 +1,16 @@
-# PowerC HAT{docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp" width="30%"> <img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp" width="30%"> <img src="assets\img\product_pics\hat\PowerC_hat\powerC_03.webp" width="30%"> 
+# PowerC HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_01.webp"><img src="assets\img\product_pics\hat\PowerC_hat\powerC_02.webp"></div> 
 
 ## 描述
 
 **PowerC HAT** 是一款专为M5StickC设计的充电模块，内置IP3005高精度锂电池保护IC与IP5209电源管理IC，采用I2C通信协议与主机M5StickC进行数据传输，通过编程可查看电压、电流等信息.模块背面电池座可安装2节16340电池，通过充电模块对电池进行充电，也可作为充电宝通过电池对外供电.此外提供了XH1.25插头锂电池充电接口.模块提供一个I2C接口用于连接I2C外设，typeC接口用于电源输入，USB-A母座用于电源输出，电压输出为5V/1.5A，输入电压为5V.模块配有一个独立开关，按一次开启，连按两次关闭.
-<img src="assets\img\product_pics\hat\PowerC_hat\powerC_04.webp" width="30%">
 
 ## 产品特性
+
 - 电池检测
 - 移动充电宝
 - 电池充电器
-
-## 重量尺寸
-
 - 单品尺寸：55mm x 35mm
 - 重量：19g
 
@@ -40,13 +36,13 @@
 
 - **UIFlow**
 
-*UIFlow代码点击这里[下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow).*
+UIFlow代码点击这里[下载](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/UIFlow)
 
 <img src="assets\img\product_pics\hat\PowerC_hat\PowerC.png" width="30%">
 
 - **Arduino**
 
-*获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)*
+获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PowerC/PowerC)
 
 ## EasyLoader
 
diff --git a/docs/zh_CN/hat/hat-proto-plus.md b/docs/zh_CN/hat/hat-proto-plus.md
index e87c3abe..1507dfa0 100644
--- a/docs/zh_CN/hat/hat-proto-plus.md
+++ b/docs/zh_CN/hat/hat-proto-plus.md
@@ -1,14 +1,11 @@
-# PROTO PLUS HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg" width="30%"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg" width="30%">
-
+# PROTO PLUS HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_01.jpg"> <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_02.jpg"></div>
 
 ## 描述
 
 **PROTO PLUS HAT** 是一款兼容M5SticKC的万能板.相比前代产品PROTO HAT，"PLUS"在设计上提供了更大的电路板面积. 结合配套的8 pin 排针能够将M5StickC顶部的拓展接口全部连接至万能板内，使得用户可以自由的在板上进行电路设计. 90°排针能够使万能板以多种角度与M5StickC进行拼接.如果你打算为你的项目添加简单的电路设计并希望通过改变电路板的拼接方式以达到节省空间的目的, HAT PROTO PLUS 会是一个不错的选择.
 
-
 <img src="assets\img\product_pics\hat\proto_plus_hat\hat_proto_plus_03.jpg" width="30%">
 
 ## 产品特性
@@ -16,13 +13,9 @@
 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 孔间距: 0.1 in - (2.54 mm)
 - 板孔数量: 168 孔
-
-## 重量尺寸
-
 - 单品尺寸：54mm x 23.5mm x 1mm
 - 单品重量：2g
 
-
 ## 包含
 
 - 1x PROTO PLUS HAT
@@ -33,8 +26,6 @@
 - 电路原型设计
 - 相关应用: [点击查看](https://www.hackster.io/kiraku-labo/balance-robot-9009db)
 
-
-
 ## 相关视频
 
 <video class="video_size" controls>
@@ -43,44 +34,7 @@
 
 ## 案例程序
 
-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/ShashaDDD/EC11Encoder).*
-
-```arduino
-#include <TaskScheduler.h>
-#include <M5StickC.h>
-#include <Arduino.h>
-#include "RotaryEncoderWithButton.h"
-
-
-//#include <SimpleTimer.h>
-
-//RotaryEncoderWithButton rotary(2,3,4);
-RotaryEncoderWithButton rotary(26,36,0);
-
-uint32_t data;
-int i;
-void t1Callback();
-Task t1(5, TASK_FOREVER, &RotaryEncoderWithButton::ReadAB);
-Scheduler runner; 
-
-void setup() {
-	M5.begin();
-	Serial.begin(115200);
-	rotary.begin();
-
-	runner.init();
-  	runner.addTask(t1);
-
-	delay(100);
-	t1.enable();
-
-}
-
-void loop() {
-	runner.execute();
-}
-```
-
+[点击此处获取完整代码](https://github.com/ShashaDDD/EC11Encoder)
 
 <script>
 
diff --git a/docs/zh_CN/hat/hat-proto.md b/docs/zh_CN/hat/hat-proto.md
index 9abdd836..e9ecf012 100644
--- a/docs/zh_CN/hat/hat-proto.md
+++ b/docs/zh_CN/hat/hat-proto.md
@@ -1,31 +1,21 @@
-# PROTO HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_03.jpg" width="30%" height="30%">
-
+# PROTO HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_01.jpg"><img src="assets\img\product_pics\hat\proto_hat\hat_proto_02.jpg"></div>
 
 ## 描述
 
 **PROTO HAT** 是一款兼容M5SticKC的万能板,你可以自由的在板上进行电路设计.如果你打算为你的设计添加简单的电路并为其添加可靠的保护外壳, Hat PROTO 是一个不错的选择.
 
-<img src="assets\img\product_pics\hat\proto_hat\hat_proto_05.jpg" width="30%">
-
 ## 产品特性
 
 - 孔尺寸: 0.039" 1mm (CNC工艺)
 - 孔间距: 0.1 in - (2.54 mm)
 - 板孔数量: 40 Holes
 
-
 ## 包含
 
 - 1x PROTO Hat
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:13g
-
 ## 应用
 
 - 电路原型设计
@@ -37,17 +27,6 @@
 
 <img src="assets\img\product_pics\hat\proto_hat\hat_proto_04.jpg" width="50%" height="50%">
 
-## 相关链接
-
-- **[官方频道视频](https://i.youku.com/i/UNjE1ODA2MzE0OA==?spm=a2hzp.8253869.0.0)**
-
-- **[官方论坛](http://forum.m5stack.com/)**
-
-## 案例程序
-
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/ENV)**
-
-
 ## 相关视频
 
 <video class="video_size" controls>
diff --git a/docs/zh_CN/hat/hat-puppyc.md b/docs/zh_CN/hat/hat-puppyc.md
index 1527bca7..03be3802 100644
--- a/docs/zh_CN/hat/hat-puppyc.md
+++ b/docs/zh_CN/hat/hat-puppyc.md
@@ -1,9 +1,6 @@
-# PuppyC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg" width="30%" height="30%"> <img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_04.jpg" width="30%" height="30%">
-
+# PuppyC
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_01.jpg"><img src="assets\img\product_pics\hat\puppyc_hat\puppyc_02.jpg"></div>
 
 ## 描述
 
@@ -11,29 +8,21 @@
 
 PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议(0x38)与PuppyC进行通信，控制舵机运动.
 
-<img src="assets\img\product_pics\hat\puppyc_hat\puppyc_03.jpg" width="30%" height="30%">
-
 ## 产品特性
 
 - 可编程机器人
 - 舵机驱动控制器
 - 四足行走
-
-
-## 规格尺寸
-
 - 尺寸：52mm * 60mm * 35mm
 - 重量：58g
 - 舵机角度：0-180°
 
-
 ## 应用
 
 - 舵机驱动
 - 机器人控制
 - 智能玩具
 
-
 ## 包含
 
 - 1x PuppyC 底座
@@ -50,16 +39,15 @@ PuppyC底座需要结合M5StickC控制器使用，StickC编程后通过I2C协议
 
 >2.下载软件后，双击运行应用程序，将M5设备通过数据线连接至电脑,选择端口参数，点击 **"Burn"** 即可开始烧录.(**为M5StickC烧录时，请将波特率设置在750000或115200**)
 
-
 ## 案例程序
 
-### 1. Arduino IDE
+- **Arduino IDE**
 
-[点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)，获取完整程序.
+[点击此处获取Arduino程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC)
 
-### 2. UIFlow
+- **UIFlow**
 
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)
+[点击此处获取UIFlow程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/PuppyC/UIFlow)
 
 <img src="assets/img/product_pics/hat/puppyc_hat/puppy.png" width="80%" height="80%">
 
diff --git a/docs/zh_CN/hat/hat-roverc.md b/docs/zh_CN/hat/hat-roverc.md
index d9cc97b9..dd44d9dc 100644
--- a/docs/zh_CN/hat/hat-roverc.md
+++ b/docs/zh_CN/hat/hat-roverc.md
@@ -1,9 +1,6 @@
-# RoverC {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg" width="20%" height="30%">
-<img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_03.jpg" width="20%" height="30%"> <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_04.jpg" width="20%" height="30%">
-
+# RoverC
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_01.jpg"><img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_02.jpg"></div>
 
 ## 描述
 
@@ -11,7 +8,6 @@
 
 <img src="assets\img\product_pics\hat\roverc_hat\roverc_hat_05.jpg" width="40%" height="30%">
 
-
 ## 产品特性
 
 - I2C通讯（0x38）
@@ -21,6 +17,8 @@
 - 全向移动
 - 配备电池底座
 - 运动灵活
+- 尺寸：75mm * 75mm * 55mm
+- 重量： 213g
 
 ## 使用说明
 使用前请确保RoverC已经充满电，充电方式：将M5StickC插入RoverC，并连接USB线缆进行充电.
@@ -52,11 +50,6 @@
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/RoverC_USER.MP4" type="video/mp4">
 </video>
 
-## 外形尺寸
-
-- 尺寸：75mm * 75mm * 55mm
-- 重量： 213g
-
 ## 应用
 
 - 小型移动式机器人
@@ -83,7 +76,7 @@
 
 <img src="assets\img\product_pics\hat\roverc_hat\roverC.png" width="40%" height="30%">
 
-### 1. Arduino 例程
+- **Arduino**
 
 配合JoyC HAT使用 [点击此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/RoverC)，获取完整程序.
 
diff --git a/docs/zh_CN/hat/hat-rs485.md b/docs/zh_CN/hat/hat-rs485.md
index decac19e..aa47c127 100644
--- a/docs/zh_CN/hat/hat-rs485.md
+++ b/docs/zh_CN/hat/hat-rs485.md
@@ -1,18 +1,14 @@
-# RS485 HAT {docsify-ignore-all}
-
-
-<img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_03.jpg" width="30%" height="30%">
+# RS485 HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_01.jpg"><img src="assets\img\product_pics\hat\rs485_hat\rs485_hat_02.jpg"></div>
 
 ## 描述
 
 **RS485 HAT** 是一款兼容M5SticKC的RS485转换器.内部集成SP485EEN，主要部分由一个485自动收发器电路和一个DC-DC降压电路组成（可以将输入电压降至5V）
-<br><br>
-RS485是一种标准，用于定义串行通信系统的驱动器和接收器的电气特性，广泛用于工业领域。 支持多点系统. 
-<br><br>
-该产品用于将TTL标准转换为RS485标准。 如果外部串行设备是RS485标准，可以通过该模块实现TTL转换RS485协议的实现设备之间的通信.
 
-<br>
+RS485是一种标准，用于定义串行通信系统的驱动器和接收器的电气特性，广泛用于工业领域。 支持多点系统. 
+
+该产品用于将TTL标准转换为RS485标准。 如果外部串行设备是RS485标准，可以通过该模块实现TTL转换RS485协议的实现设备之间的通信.
 
 ## 产品特性
 
@@ -29,21 +25,15 @@ RS485是一种标准，用于定义串行通信系统的驱动器和接收器的
 - 1x RS485 HAT
 - 1x 4 Pin 3.96 端子
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:17g
-
 ## 应用
 
 - RS485多点系统
 - 工业领域的串行通信.
 
-
 ## 相关链接
 
 -  **Datasheet** - [SP485EEN](https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/docs/datasheet/hat/SP485EEN_en.pdf)
-  
+
 ## 原理图
 
 <img src="assets/img/product_pics/hat/rs485_hat/rs485_hat_04.jpg" width="80%" height="80%">
@@ -61,38 +51,11 @@ RS485是一种标准，用于定义串行通信系统的驱动器和接收器的
 
 ## 案例程序
 
-<a href="#zh_CN\uiflow\RS485">代码示例</a>
+<a href="#zh_CN\uiflow\RS485">RS485使用说明</a>
 
-### 1. Arduino IDE
-
-*以下代码仅为片段，如需获取完整代码，[请点击此处.](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485).*
-
-```arduino
-#include <M5StickC.h>
-
-/* This demo is for RS485 Hat uart write and read ,
-AutoSend Hello M5! AutoReceive and diaplay on screen */
-
-void setup() {
-
-  M5.begin(true,true,true);
-  Serial.begin(115200);
-  // Serial2.begin(unsigned long baud, uint32_t config, int8_t rxPin, int8_t txPin, bool invert)
-  Serial2.begin(115200, SERIAL_8N1, 26, 0);
-
-  Serial.println("RS485");
-
-}
-void loop() {
-  Serial2.print("Hello M5!");
-
- if(Serial2.available()) {
-    char ch = Serial2.read();
-    M5.Lcd.setTextSize(2);
- }
-}
-```
+### Arduino IDE
 
+[请点击此处下载代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/RS485)
 
 ### 管脚映射
 
@@ -101,20 +64,15 @@ void loop() {
  <tr><td>HAT ADC</td><td>TX</td><td>RX</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/HAT/RS485_HAT.mp4" type="video/mp4" >
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-rs485-hat-aoz1282ci';
-
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-servo.md b/docs/zh_CN/hat/hat-servo.md
index c18bf79f..4a23081f 100644
--- a/docs/zh_CN/hat/hat-servo.md
+++ b/docs/zh_CN/hat/hat-servo.md
@@ -1,14 +1,11 @@
-# SERVO HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_03.jpg" width="30%" height="30%">
-
+# SERVO HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_01.jpg"><img src="assets\img\product_pics\hat\servo_hat\servo_hat_02.jpg"></div>
 
 ## 描述
 
 **SERVO HAT** 是一款供M5StickC使用的伺服电机模块. 舵机型号为ES9251II，运动角度为145°±10°，采用PWM的控制方式控制旋转角度,信号端口为G26.
 
-
 ## 产品特性
 
 - 旋转速度:   0.09sec/60°
@@ -17,9 +14,6 @@
 - 扭矩:      0.25Kgf.cm
 - 转矩:      3.5oz.in
 - 工作电压:   5.0V±0.2V
-
-## 重量尺寸
-
 - 尺寸： 24mm*29mm
 - 重量： 9g
 
@@ -33,14 +27,10 @@
 - 角度控制
 - 伺服系统
 
-
-
 ## 原理图
 
 <img src="assets/img/product_pics/hat/servo_hat/servo_hat_04.jpg" width="50%" height="50%">
 
-
-
 ## EasyLoader
 
 <img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/EasyLoader_M5StickC_logo.png" width="100px" style="margin-top:20px">
@@ -59,22 +49,18 @@
 
 - **Arduino**
 
-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)查看完整程序
-
+[点击此处查看完整程序](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/servo-hat/Arduino/SERVO)
 
 ## 相关视频
-**Demo** 
 
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/SERVO-HAT.mp4" type="video/mp4" >
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-servo-hat';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-spk.md b/docs/zh_CN/hat/hat-spk.md
index 7eb03ac4..0c1d8dcc 100644
--- a/docs/zh_CN/hat/hat-spk.md
+++ b/docs/zh_CN/hat/hat-spk.md
@@ -1,8 +1,6 @@
-# SPK HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_03.jpg" width="30%" height="30%">
-
+# SPK HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\spk_hat\spk_hat_02.jpg" width="30%" height="30%"></div>
 
 ## 描述
 
@@ -20,11 +18,6 @@
 
 - 1x SPK Hat
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:13g
-
 ## 应用
 
 - MP4/MP3
@@ -65,16 +58,17 @@
     </div>
 </div>
 
-
-
 ## 案例程序
 
 - **UIFlow**
-Open http://flow.m5stack.com and Load Demo
+
+打开 http://flow.m5stack.com 加载Demo示例
 
 <img src="assets\img\product_pics\hat\spk_hat\spk.png">
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)**
+- **Arduino**
+
+[点击此处下载Arduino示例代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/SPEAKER)
 
 ### 管脚映射
 
@@ -87,7 +81,6 @@ Open http://flow.m5stack.com and Load Demo
 
    var purchase_link = 'https://m5stack.com/collections/m5-unit/products/m5stickc-speaker-hat';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-thermal.md b/docs/zh_CN/hat/hat-thermal.md
index 552f1d0b..67c0c04a 100644
--- a/docs/zh_CN/hat/hat-thermal.md
+++ b/docs/zh_CN/hat/hat-thermal.md
@@ -1,19 +1,15 @@
-# THERMAL HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" width="30%" height="30%"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_03.jpg" width="30%" height="30%">
-
+# THERMAL HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_01.jpg"><img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_02.jpg" ></div>
 
 ## 描述
 
 **THERMAL HAT**是一款兼容M5StickC的人体红外热成像.内置**MLX90640**热电堆传感器,能够测量物体表面温度.并通过由表面温度形成的温度梯度，生成热成像图片.(图片分辨率为**32 x 24**)
-
-**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，Hat-Thermal是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）.
-
-I2C 地址为**0x33**.(GOIO 0/26)
+**MLX90640** 红外（IR）传感器阵列具备了高分辨率与在恶劣环境中可靠工作的能力.与昂贵的高端热像仪相比，Thermal HAT是一个高性价比的替代方案.相对一般的微测辐射热计，该传感器优势在于，不需要频繁重复校准,从而确保了检测的连续性并降低了系统维护成本.视场角提供广角版（110°×75°）
 
 ## 产品特性
 
+- I2C地址:**0x33**(GOIO 0/26)
 - 工作电压: 3V ~ 3.6V
 - 工作电流: 23mA
 - 视场角: 110°x75°
@@ -26,13 +22,6 @@ I2C 地址为**0x33**.(GOIO 0/26)
 
 - 1x THERMAL Hat
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:13g
-
-<img src="assets\img\product_pics\hat\thermal_hat\hat_thermal_04.jpg" width="50%" height="50%">
-
 ## 应用
 
 -  高精度的非接触性测温器
@@ -70,12 +59,13 @@ I2C 地址为**0x33**.(GOIO 0/26)
 
 - **UIFlow**
 
-*获取完整代码[点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow).*
+[获取UIFlow示例点击这里](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/MLX90640/UIFlow)
 
 <img src="assets/img/product_pics/hat/thermal_hat/thermal.png">
 
-- **[Arduino](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)**
+- **Arduino**
 
+[点击此处下载Arduino代码](https://github.com/m5stack/M5StickC/tree/master/examples/Hat/MLX90640)
 
 ## 相关视频
 
diff --git a/docs/zh_CN/hat/hat-tof.md b/docs/zh_CN/hat/hat-tof.md
index cfbfdc94..3a3ee21e 100644
--- a/docs/zh_CN/hat/hat-tof.md
+++ b/docs/zh_CN/hat/hat-tof.md
@@ -1,16 +1,11 @@
-# ToF HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg" width="30%"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_03.jpg" width="30%">
+# ToF HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_01.jpg"><img src="assets\img\product_pics\hat\tof_hat\tof_hat_02.jpg"></div>
 
 ## 描述
 
 **ToF HAT**是一款专为M5SticKC设计的高精度激光测距传感器，内部集成ST激光测距芯片**VL53L0X**、**940nm VCSEL**发射器，通过测量激光信号到被测物体的往返时间，能够在不到30ms的时间内测量2m范围内的绝对距离.与传统测距不同的地方在于，无论检测目标的的反射率如何，它都能提供精确的距离测量数据.在一些对数据精度有一定要求的距离测量、障碍物识别项目中，**ToF HAT**能够有不错的表现.
 
-通信协议：I2C、地址为**0x29**.(GOIO 0/26)
-
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_04.jpg" width="30%">
-
 ## 产品特性
 
 - 高精度
@@ -20,9 +15,7 @@
 - 安全方面：
     - 符合最新标准的1级激光设备
     - 标准IEC 60825-1:2014-第3版
-
-## 重量尺寸
-
+- 通信协议：I2C地址为**0x29**(GOIO 0/26)
 - 单品尺寸：24mm x 20.3mm x 13.8mm
 - 单品重量：3g
 
@@ -30,8 +23,6 @@
 
 - 1x ToF HAT
 
-<img src="assets\img\product_pics\hat\tof_hat\tof_hat_06.jpg" width="30%">
-
 ## 应用
 
 - 障碍物识别
@@ -66,7 +57,7 @@
 
 - **Arduino**
 
-点击[此处](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)查看完整示例
+[单击此处下载完整Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/tof-hat/Arduino/ToF)
 
 ### 管脚映射
 
@@ -75,7 +66,6 @@
  <tr><td>ToF HAT</td><td>SDA</td><td>SCL</td><td>3.3V</td><td>GND</td></tr>
 </table>
 
-
 ## 相关视频
 
 <video class="video_size" controls>
@@ -86,7 +76,6 @@
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-tof-hatvl53l0x';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/hat/hat-yun.md b/docs/zh_CN/hat/hat-yun.md
index f4a2ff88..544c4f71 100644
--- a/docs/zh_CN/hat/hat-yun.md
+++ b/docs/zh_CN/hat/hat-yun.md
@@ -1,21 +1,10 @@
-# YUN HAT {docsify-ignore-all}
-
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_01.jpg" width="30%" height="30%">
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_02.jpg" width="30%" height="30%">
-
+# YUN HAT
 
+<div class="product_pic"><img src="assets\img\product_pics\hat\yun_hat\yun_hat_01.jpg"><img src="assets\img\product_pics\hat\yun_hat\yun_hat_02.jpg"></div>
 
 ## 描述
 
-**YUN HAT**是一款云朵形状的多功能环境信息采集底座.内置温湿度传感器**SHT20**、气压传感器**BMP280**、光敏电阻.以及14颗RGB LED.内嵌**STM32F030F4**控制芯片，提供简洁高效的程序调用接口.精致的设计外观、实现精准环境信息数据采集的同时具备一定的装饰效果.
-
-底座针对M5StickC设计，预留相同数目的排针与空间能够与M5StickC顶部的拓展端口完美插接.整体结构采用三层设计，上下两层PCB板，分别充当固定结构与主体电路，为利于电路的长时间工作，板上还提供了独立外部电源接口.中层为导光亚克力件，为获得更好的灯光显示效果，亚克力外轮廓切割面部分采用了打磨工艺，其目的在于编程控制灯光时，能够有效减少光的散射，使其呈现加均匀饱和的灯光效果.板上嵌入2个6*4mm磁铁并预留1个挂钩孔，用户能够便捷的将它安装在生活中的任意角落.
-
-<br>
-
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_03.jpg" width="30%" height="30%">
-
-<br>
+**YUN HAT**是一款云朵形状的多功能环境信息采集底座.内置温湿度传感器**SHT20**、气压传感器**BMP280**、光敏电阻.以及14颗RGB LED.内嵌**STM32F030F4**控制芯片，提供简洁高效的程序调用接口.精致的设计外观、实现精准环境信息数据采集的同时具备一定的装饰效果.底座针对M5StickC设计，预留相同数目的排针与空间能够与M5StickC顶部的拓展端口完美插接.整体结构采用三层设计，上下两层PCB板，分别充当固定结构与主体电路，为利于电路的长时间工作，板上还提供了独立外部电源接口.中层为导光亚克力件，为获得更好的灯光显示效果，亚克力外轮廓切割面部分采用了打磨工艺，其目的在于编程控制灯光时，能够有效减少光的散射，使其呈现加均匀饱和的灯光效果.板上嵌入2个6*4mm磁铁并预留1个挂钩孔，用户能够便捷的将它安装在生活中的任意角落.
 
 ## 产品特性
 
@@ -35,13 +24,6 @@
 - 1x YUN HAT
 - 2x 杜邦线
 
-## 尺寸重量
-
-- 包装尺寸:40mm x 42mm x 30mm
-- 包装重量:15g
-
-<img src="assets\img\product_pics\hat\yun_hat\yun_hat_04.jpg" width="30%" height="30%">
-
 ## 应用
 
 -  环境信息采集
@@ -72,13 +54,13 @@
 
 - **UIFlow**
 
-Open http://flow.m5stack.com and Load Demo
+打开 http://flow.m5stack.com 加载Demo
 
 <img src="assets/img/product_pics/hat/yun_hat/yun.png">
 
 - **Arduino**
 
-To get complete code, please click [here](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-yun)
+[单击此处下载Arduino代码](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Hat/hat-yun)
 
 ### 管脚映射
 
@@ -89,18 +71,14 @@ To get complete code, please click [here](https://github.com/m5stack/M5-ProductE
 
 ## 相关视频
 
-**Demo** 
-
 <video class="video_size" controls>
     <source src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/video/Product_example_video/HAT/YUN-HAT.mp4" type="video/mp4" >
 </video>
 
-
 <script>
 
    var purchase_link = 'https://m5stack.com/products/m5stickc-yun-hatsh20-bmp280-sk6812';
 
-
    anchor_search(purchase_link);
    scrollFunc();
 
diff --git a/docs/zh_CN/module/battery.md b/docs/zh_CN/module/battery.md
index e583ca91..5c2e8936 100644
--- a/docs/zh_CN/module/battery.md
+++ b/docs/zh_CN/module/battery.md
@@ -1,7 +1,6 @@
-# Module BATTERY {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/battery/module_battery_01.webp" width="30%" height="30%"><img src="assets/img/product_pics/module/battery/module_battery_02.webp" width="30%" height="30%"> 
+# Module BATTERY
 
+<div class="product_pic"><img src="assets/img/product_pics/module/battery/module_battery_01.webp"><img src="assets/img/product_pics/module/battery/module_battery_02.webp"></div>
 
 <!-- :memo:**[描述](#描述)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:electric_plug:**[原理图](#原理图)**&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;🛒**[购买链接](https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-1172588093.64.501375f4xEgd84&id=562045689464)** -->
 
@@ -23,13 +22,6 @@
 
 -  1x M5Stack 电池模块
 
-## 相关链接
-
-- **[官方频道视频](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/battery-module';
diff --git a/docs/zh_CN/module/bus.md b/docs/zh_CN/module/bus.md
index 2dcd71db..ea926278 100644
--- a/docs/zh_CN/module/bus.md
+++ b/docs/zh_CN/module/bus.md
@@ -1,19 +1,14 @@
-# Module BUS {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_bus_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_bus_02.png" width="30%" height="30%">
-
+# Module BUS
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_bus_01.png"><img src="assets/img/product_pics/module/module_bus_02.png"></div>
 
 # 描述
 
-**BUS** 是M5Stack堆叠模块系列中的一款，总线扩展模块.该模块允许你通过万能板添加一些自己的电路设计并通过M-BUS与M5Core进行交互.
-
+**BUS** 是M5Stack堆叠模块系列中的一款，总线扩展模块.该模块允许你通过万能板添加一些自己的电路设计并通过M-BUS与M5Core进行交互
 与其他M5堆叠模块一样，BUS可以通过M-BUS与其他层的模块进行连接.并支持将M-BUS扩展至模块的另一侧做引脚引出,
 模块配件包含了一个2 * 15 90度引脚，当你使用引脚拓展时，需要将BUS侧边上的格栅切除，以便引脚与外部的连接.
 
-<img src="assets/img/product_pics/module/module_bus_03.png" width="60%" height="60%">
-
-<img src="assets/img/product_pics/module/module_bus_04.png"><img src="assets/img/product_pics/module/module_bus_05.png">
+<img src="assets/img/product_pics/module/module_bus_05.png">
 
 ## 产品特性
 
@@ -27,13 +22,6 @@
 -  1x M5Stack BUS 总线扩展模块
 -  1x 2 * 15 90度引脚
 
-## 相关链接
-
-- **[官方频道视频](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/bus-module';
diff --git a/docs/zh_CN/module/commu.md b/docs/zh_CN/module/commu.md
index 3d83b163..9c5fc48e 100644
--- a/docs/zh_CN/module/commu.md
+++ b/docs/zh_CN/module/commu.md
@@ -1,8 +1,6 @@
-# Module COMMU {docsify-ignore-all}
-
-<img src="assets/img/product_pics/module/module_commu_01.png" width="30%" height="30%"> <img src="assets/img/product_pics/module/module_commu_02.png" width="30%" height="30%">
-
+# Module COMMU
 
+<div class="product_pic"><img src="assets/img/product_pics/module/module_commu_01.png"><img src="assets/img/product_pics/module/module_commu_02.png"></div>
 
 ## 描述
 
@@ -72,58 +70,7 @@
 **步骤 2**: 分别打开项目文件 `commu_can_transmitter.ino`, 和 `commu_can_receiver.ino`
 **步骤 3**: 将两个项目程序分别编译上传到两个M5Core上，用做发送端与接收端.
 
-*以下代码仅为片段，如需获取完整代码， [请点击此处.](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/COMMU/Arduino/CAN).*
-
-```arduino
-/*
-    commu_can_transmitter.ino
-*/
-#include <M5Stack.h>
-#include <mcp_can.h>
-#include "m5_logo.h"
-
-#define CAN0_INT 15 // Set INT to pin 2
-MCP_CAN CAN0(12);   // Set CS to pin 10
-
-// declaration
-byte data[8] = {0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07};
-
-// initialization
-M5.begin();
-CAN0.begin(MCP_ANY, CAN_1000KBPS, MCP_8MHZ);
-/* Change to normal mode to allow messages tobe transmitted */
-CAN0.setMode(MCP_NORMAL);
-
-// send data
-CAN0.sendMsgBuf(0x100, 0, 8, data);
-```
-
-```arduino
-/*
-    commu_can_receiver.ino
-*/
-#include <M5Stack.h>
-#include <mcp_can.h>
-#include "m5_logo.h"
-
-#define CAN0_INT 15 // Set INT to pin 2
-MCP_CAN CAN0(12);   // Set CS to pin 10
-
-// declaration
-byte data[8] = {0x00, 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07};
-
-// initialization
-M5.begin();
-/* Initialize MCP2515 running at 16MHz with a baudrate of 500kb/s */
-/* and the masks and filters disabled. */
-CAN0.begin(MCP_ANY, CAN_1000KBPS, MCP_8MHZ);
-/* Set operation mode to normal so theMCP2515 sends acks to received data. */
-CAN0.setMode(MCP_NORMAL);
-pinMode(CAN0_INT, INPUT);// Configuring pin for /INT input
-
-// read data
-CAN0.readMsgBuf(&rxId, &len, rxBuf);
-```
+[请点击此处下载Arduino](https://github.com/m5stack/M5-ProductExampleCodes/tree/master/Module/COMMU/Arduino/CAN)
 
 <img src="assets/img/product_pics/module/module_example/COMMU/example_module_commu_01.png" width="50%" height="50%">
 
@@ -135,7 +82,7 @@ CAN0.readMsgBuf(&rxId, &len, rxBuf);
 
 <img src="assets/img/product_pics/module/module_example/COMMU/example_module_commu_02.png" width="50%" height="50%">
 
-# 原理图
+## 原理图
 
 <img src="assets/img/product_pics/module/commu_sch.png">