m5/m5-docs
0
0
Fork 0
mirror of https://github.com/m5stack/m5-docs.git synced 2026-05-20 10:23:01 -07:00
Code Issues Packages Projects Releases Wiki Activity

change home page anchor ui

Browse Source
This commit is contained in:
Gitshaoxiang
2020-09-04 19:02:53 +08:00
parent c628e20d15
commit 9ddc891740
4 changed files with 442 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/css/main.css
+75 -29
View File
@@ -101,6 +101,52 @@ img {
color: hsl(211, 100%, 50%);
}
body[data-page="index.md"] .search {
display: inline-block;
}
body[data-page="index.md"] .anchor-box {
display: none !important;
}
body[data-page="index.md"] #pc_anchor {
display: block;
}
body[data-page="en/faq.md"] .search {
display: inline-block
}
body[data-page="zh_CN/README.md"] .search {
display: inline-block;
}
body[data-page="zh_CN/README.md"] .anchor-box {
display: none !important;
}
body[data-page="zh_CN/README.md"] #pc_anchor {
display: block;
}
body[data-page="zh_CN/faq.md"] .search {
display: inline-block
}
body[data-page="index.md"] .markdown-section {
margin-top: 25px
}
body[data-page="zh_CN/README.md"] .markdown-section {
margin-top: 25px
}
body[data-page="en/quick_start/m5stickc/m5stickc_quick_start.md"] article.markdown-section {
max-width: 100%;
}
@@ -135,7 +181,7 @@ body[data-page="zh_CN/quick_start/m5stickv/m5stickv_quick_start.md"] article.mar
text-decoration: none
}
.row a:hover {
.row a:hover {
color: white;
text-decoration: none
}
@@ -154,7 +200,8 @@ body[data-page="zh_CN/quick_start/m5stickv/m5stickv_quick_start.md"] article.mar
cursor: pointer;
transition: box-shadow .3s;
text-decoration: none;
background-color: white
background-color: white ;
box-shadow: 1px 1px 20px 0px #f7f7f7a1;
}
.related_links {
@@ -425,37 +472,15 @@ div.card-img-overlay:hover {
}
body[data-page="index.md"] .search {
display: inline-block
}
body[data-page="en/faq.md"] .search {
display: inline-block
}
body[data-page="zh_CN/README.md"] .search {
display: inline-block
}
body[data-page="zh_CN/faq.md"] .search {
display: inline-block
}
body[data-page="index.md"] .markdown-section {
margin-top: 25px
}
body[data-page="zh_CN/README.md"] .markdown-section {
margin-top: 25px
}
@media screen and (max-width:768px) {
.dropdown {
display: block
}
#pc_anchor {
display: none !important;
}
#mb_header {
display: block;
}
@@ -464,7 +489,6 @@ body[data-page="zh_CN/README.md"] .markdown-section {
display: none;
}
.markdown-section {
max-width: 100%;
margin-top: 0px;
@@ -1187,4 +1211,26 @@ table tr:nth-child(odd) {
.box-card .el-tag {
margin-top: 5px;
cursor: pointer;
}
#pc_anchor {
position: fixed;
top: 50%;
left: 30px;
transform: translateY(-50%);
z-index: 50;
border-radius: 10px;
overflow: hidden;
box-shadow: 0px 1px 20px 1px #e6e6e6;
display: none;
}
#pc_anchor .el-submenu .el-menu-item {
min-width: 195px;
}
#pc_anchor .el-menu {
border: none;
}
docs/assets/js/custom.js
+44 -3
View File
@@ -36,7 +36,8 @@ var header = new Vue({
anchor: [],
platform:{},
activeIndex: '1',
pdf_notify: ''
pdf_notify: '',
home_anchor: []
},
methods: {
loading(str) {
@@ -50,6 +51,12 @@ var header = new Vue({
},
done() {
this.loading_target.close();
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
},
mounted(){
@@ -201,8 +208,42 @@ function anchor_create(anchor_name,anchor_id){
function anchor_search(purchase_link="none",quickstart_link="none"){
var page_url = window.location.href;
if((page_url.slice(-4) == "/en/")||(page_url.slice(-7)== "/zh_CN/")||(page_url.slice(-3)== "/#/")){
$("#search_note").eq(0).after("<div class='anchor-box'></div>");
var anchor_list= $(".product_page > div:gt(1)");
$(".product_page > div").eq(0).before("<div class='anchor-box'></div>");
var anchor_list= $(".product_page > div");
header.home_anchor = [
{
"name" : "core",
"expand" : ["module","base"]
},
{
"name" : "atom",
"expand" : ["atom-base"]
},
{
"name" : "stick",
"expand" : ["hat"]
},
{
"name" : "face",
"expand" : []
},
{
"name" : "unit",
"expand" : ["unit","mini-unit"]
},
{
"name" : "application",
"expand" : []
},
{
"name" : "accessory",
"expand" : []
},
{
"name" : "aluminium",
"expand" : []
}
]
}
else{
$("h2").eq(0).before("<div class='anchor-box'></div>");
docs/index.html
+290 -5
View File
File diff suppressed because one or more lines are too long
docs/index.md
+33 -26
View File
@@ -1,8 +1,4 @@
<div class="product_page">
<div id="search_note" style="display:none;position:fixed;top:30%">
<h3>No relevant information was found, please enter product keywords and search again.</h3>
</div>
</div>
<div class="product_page"></div>
<script>
const core_list = [
@@ -12,20 +8,39 @@
{a:"/#/en/core/fire", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_fire_01.webp", p:"FIRE", sku:"K007", qs:"#en/quick_start/m5core/m5stack_core_quick_start" ,kw:"ESP32 IP5306 MPU6886 BMM150 LEGO MICPHONE"},
{a:"/#/en/core/m5go_lite", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_m5go_lite_01.webp", p:"M5GO Lite", sku:"K022", qs:"#en/quick_start/m5core/m5stack_core_quick_start" ,kw:"ESP32 IP5306 MPU6886 BMM150 LEGO"},
{a:"/#/en/core/m5go", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_m5go_01.webp", p:"M5GO Kit", sku:"K006", qs:"#en/quick_start/m5core/m5stack_core_quick_start" ,kw:"ESP32 IP5306 MPU6886 BMM150 LEGO MICPHONE"},
{a:"/#/en/core/core2", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core2_01.webp", p:"Core2", sku:"K010", qs:"#en/quick_start/core2/m5stack_core2_quick_start" ,kw:"ESP32 AXP192 MPU6886 BM8563 MICPHONE"}
];
const face_list = [
//FACES Series
{a:"/#/en/core/face_kit", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/kit_faces_01.webp", p:"FACES Kit", sku:"K005", qs:"#en/quick_start/m5core/m5stack_core_quick_start" ,kw:"ESP32 IP5306 MPU6886 BMM150 MICPHONE"},
{a:"/#/en/core/core2", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core2_01.webp", p:"Core2", sku:"K010", qs:"#en/quick_start/core2/m5stack_core2_quick_start" ,kw:"ESP32 AXP192 MPU6886 BM8563 MICPHONE"},
{a:"/#/en/module/encoder", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_encoder_01.webp", p:"ENCODER", sku:"A006" ,kw:"FACES"},
{a:"/#/en/module/joystick", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_joystick_01.webp", p:"JOYSTICK", sku:"A007" ,kw:"FACES"},
{a:"/#/en/module/faces_finger", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_finger_01.webp", p:"FINGER", sku:"A066" ,kw:"FACES FPC1020A"},
{a:"/#/en/module/faces_rfid", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_rfid_01.webp", p:"RFID", sku:"A067" ,kw:"FACES RC552"},
{a:"/#/en/module/faces", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_01.webp", p:"FACES BOTTOM", sku:"A009" ,kw:"FACES BAT BOTTOM"},
{a:"/#/en/module/facesII", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faceii_01.webp", p:"FACES II BOTTOM", sku:"A075" ,kw:"FACES LED BAT BOTTOM"},
{a:"/#/en/module/faces_keyboard", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_keyboard.webp", p:"QWERTY", sku:"A003" ,kw:"FACES KEYBOARD QWERTY"},
{a:"/#/en/module/faces_calculator", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_cal.webp", p:"CALCULATOR", sku:"A005" ,kw:"FACES CALCULATOR"},
{a:"/#/en/module/faces_gameboy", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_gamepad.webp", p:"GAMEPAD", sku:"A004" ,kw:"FACES GAMEPAD"},
];
const stick_list = [
//Stick
{a:"/#/en/core/m5stick", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stick_01.webp", p:"M5Stick", sku:"K016", qs:"#en/quick_start/m5stick/m5stick_quick_start" ,kw:"ESP32 OLED IP5306 MPU9250"},
{a:"/#/en/core/m5stickc", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stickc_01.webp", p:"M5StickC", sku:"K016-C", qs:"#en/quick_start/m5stickc/m5stickc_quick_start" ,kw:"ESP32 AXP192 MPU6886"},
{a:"/#/en/core/m5stickv", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/m5stickv_01.webp", p:"M5StickV", sku:"K027" , qs:"#en/quick_start/m5stickv/m5stickv_quick_start", kw:"K210 CAMERA AXP192 MPU6886"},
{a:"/#/en/core/m5stickt", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/m5stickt_01.webp", p:"M5StickT", sku:"K016-T" ,kw:"ESP32 FLIR3.0 AXP192"},
{a:"/#/en/core/m5stickc_plus", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stickc_plus_01.webp", p:"M5StickC PLUS", sku:"K016-P", qs:"#en/quick_start/m5stickc_plus/m5stickc_plus_quick_start" ,kw:"ESP32 AXP192 MPU6886"},
{a:"/#/en/core/m5stickc_plus", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/core_m5stickc_plus_01.webp", p:"M5StickC PLUS", sku:"K016-P", qs:"#en/quick_start/m5stickc_plus/m5stickc_plus_quick_start" ,kw:"ESP32 AXP192 MPU6886"}
];
const atom_list = [
//ATOM
{a:"/#/en/core/atom_lite", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/atom_lite_01.webp", p:"ATOM Lite", sku:"C008" ,qs:"#en/quick_start/atom/atom_quick_start", kw:"ESP32 LED"},
{a:"/#/en/core/atom_matrix", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/atom_matrix_01.webp", p:"ATOM Matrix", sku:"C008-B", qs:"#en/quick_start/atom/atom_quick_start" ,kw:"ESP32 LED MPU6886"},
{a:"/#/en/atom/atomecho", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/atom_echo.webp", p:"ATOM ECHO", sku:"C008-C",qs:"#en/quick_start/atom/atom_echo_quick_start" ,kw:"ESP32 Speaker I2S"},
{a:"/#/en/atom/atomecho", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/atom_echo.webp", p:"ATOM ECHO", sku:"C008-C",qs:"#en/quick_start/atom/atom_echo_quick_start" ,kw:"ESP32 Speaker I2S"}
]
const atom_base_list = [
//ATOM BASE
{a:"/#/en/atom/atomic", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atomic_01.webp", p:"ATOMIC", sku:"A077" ,kw:"PROTOTYPE"},
{a:"/#/en/atom/tail485", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/tail485_01.webp", p:"Tail485", sku:"T002" ,kw:"RS485"},
@@ -39,7 +54,7 @@
{a:"/#/en/atom/atomhub_switch", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atomswitch.webp", p:"ATOM SWITCH Kit", sku:"K042" ,kw:"ATOM SWITCH RS485"},
{a:"/#/en/atom/atomfly", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atomfly.webp", p:"ATOM FLY Kit", sku:"K040" ,kw:"ATOM FLY"},
{a:"/#/en/atom/atom_mate", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atom_mate.webp", p:"ATOM MATE", sku:"A086" ,kw:"ATOM MATE HAT MOUNT PIN"},
{a:"/#/en/atom/atomic_step_motor", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atom_stepmotor.webp", p:"ATOM STEPMOTOR Kit", sku:"K047" ,kw:"ATOM STEP MOTOR"},
{a:"/#/en/atom/atomic_step_motor", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/atom_base/atom_stepmotor.webp", p:"ATOM STEPMOTOR Kit", sku:"K047" ,kw:"ATOM STEP MOTOR"}
]
const module_list = [
@@ -72,17 +87,7 @@
{a:"/#/en/module/stepmotor", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_stepmotor_01.webp", p:"STEPMOTOR", sku:"M012" ,kw:"GRBL DRV8825"},
{a:"/#/en/module/servo", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/servo_01.webp", p:"SERVO", sku:"M014" ,kw:"SERVO"},
{a:"/#/en/module/lego_plus", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_lego_plus_01.webp", p:"DC MOTOR", sku:"M021" ,kw:"DC ENCODER MOTOR"},
{a:"/#/en/module/fan", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_FAN.webp", p:"FAN", sku:"M013" ,kw:"DC MOTOR"},
//FACES Series
{a:"/#/en/module/encoder", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_encoder_01.webp", p:"ENCODER", sku:"A006" ,kw:"FACES"},
{a:"/#/en/module/joystick", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_joystick_01.webp", p:"JOYSTICK", sku:"A007" ,kw:"FACES"},
{a:"/#/en/module/faces_finger", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_finger_01.webp", p:"FINGER", sku:"A066" ,kw:"FACES FPC1020A"},
{a:"/#/en/module/faces_rfid", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faces_rfid_01.webp", p:"RFID", sku:"A067" ,kw:"FACES RC552"},
{a:"/#/en/module/faces", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_01.webp", p:"FACES BOTTOM", sku:"A009" ,kw:"FACES BAT BOTTOM"},
{a:"/#/en/module/facesII", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/faceii_01.webp", p:"FACES II BOTTOM", sku:"A075" ,kw:"FACES LED BAT BOTTOM"},
{a:"/#/en/module/faces_keyboard", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_keyboard.webp", p:"QWERTY", sku:"A003" ,kw:"FACES KEYBOARD QWERTY"},
{a:"/#/en/module/faces_calculator", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_cal.webp", p:"CALCULATOR", sku:"A005" ,kw:"FACES CALCULATOR"},
{a:"/#/en/module/faces_gameboy", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/face_gamepad.webp", p:"GAMEPAD", sku:"A004" ,kw:"FACES GAMEPAD"},
{a:"/#/en/module/fan", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/module/module_FAN.webp", p:"FAN", sku:"M013" ,kw:"DC MOTOR"}
];
const base_list = [
@@ -97,7 +102,6 @@
{a:"/#/en/base/m5go_charger", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_m5go_base_01.webp", p:"M5GO CHARGER", sku:"A016" ,kw:"LEGO CHARGE"},
{a:"/#/en/base/base15", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base15_01.webp", p:"BASE15", sku:"K025" ,kw:"PROTOTYPE"},
{a:"/#/en/base/base26", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_base26_01.webp", p:"BASE26", sku:"K026" ,kw:"PROTOTYPE"},
{a:"/#/en/accessory/battery_base", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/battery_base_01.webp", p:"M5CameraBattery", sku:"A068" ,kw:"BATTERY"},
{a:"/#/en/base/basex", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/base_basex_01.webp", p:"BaseX", sku:"K037" ,kw:"LEGO EV3 MOTOR"},
{a:"/#/en/base/w5500PoE", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/base/w5500PoE_01.webp", p:"PoE", sku:"K012-C" ,kw:"W5500 INTERNET RS485 PoE"},
];
@@ -109,7 +113,9 @@
{a:"#/en/unit/m5camera_f", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_f_01.webp", p:"M5CameraF", sku:"U037", qs:"#en/quick_start/m5camera/m5camera_quick_start" ,kw:"ESP32 CAMERA"},
{a:"/#/en/unit/m5camera_x", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_x_01.webp", p:"M5CameraX", sku:"U038", qs:"#en/quick_start/m5camera/m5camera_quick_start" ,kw:"ESP32 CAMERA"},
{a:"/#/en/unit/unitv", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit-v-01.webp", p:"UNIT-V", sku:"U078", qs:"#en/quick_start/unitv/unitv_quick_start" ,kw:"K210 CAMERA"},
{a:"/#/en/core/m5stickv", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/core/m5stickv_01.webp", p:"M5StickV", sku:"K027" , qs:"#en/quick_start/m5stickv/m5stickv_quick_start", kw:"K210 CAMERA AXP192 MPU6886"},
{a:"/#/en/unit/m5camera_f_new", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_m5camera_f_new_01.webp", p:"M5CameraF New", sku:"U037", qs:"#en/quick_start/m5camera/m5camera_quick_start" ,kw:"ESP32 CAMERA"},
{a:"/#/en/accessory/battery_base", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/accessory/battery_base_01.webp", p:"M5CameraBattery", sku:"A068" ,kw:"BATTERY"},
//Sensor class
{a:"/#/en/unit/earth", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_earth_01.webp", p:"EARTH", sku:"U019" ,kw:"SENSOR"},
{a:"/#/en/unit/env", img:"https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/m5-docs_homepage/unit/unit_env_01.webp", p:"ENV", sku:"U001" ,kw:"DHT12 BMP280"},
@@ -245,8 +251,8 @@
];
const product_class = [core_list,atom_list,module_list,base_list,unit_list,mini_unit_list,hat_list,application_list,accessory_list,aluminium_list];
const product_class_name = ["core","atom","module","base","unit","mini-unit","hat","application","accessory","aluminium"];
const product_class = [core_list, module_list, base_list, atom_list, atom_base_list, stick_list, hat_list, face_list, unit_list, mini_unit_list, application_list,accessory_list,aluminium_list];
const product_class_name = ["core","module","base","atom","atom-base", "stick", "hat", "face","unit","mini-unit","application","accessory","aluminium"];
for (var i=0; i<product_class_name.length; i++){
$(".product_page").append("<div></div>");
@@ -260,7 +266,7 @@
"LoRa (433MHz)":"Communication Modules",
"BATTERY":"Expansion Modules",
"STEPMOTOR":"Drive Modules",
"ENCODER":"FACES Series",
"FACES Kit":"FACES Series",
"LAN":"Base",
"ESP32CAM":"Camera class",
"EARTH":"Sensor class",
@@ -271,7 +277,8 @@
"BALA":"Application",
"Grove-T":"Accessory",
"CORNER":"Aluminium",
"TVOC/eCO2":"MINI-UNIT"
"TVOC/eCO2":"MINI-UNIT",
"ATOMIC":"ATOM-BASE"
};
const mask_btn = `<a href="#" class="quickstart_btn"><button type="button" class="mask-btn1">QuickStart</button></a>`