mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
Sean
307 lines
20 KiB
HTML
307 lines
20 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, shrink-to-fit=no">
|
|
<meta name="description" content="The reference docs for M5Stack products. Quick start, get the detailed information or instructions such as IDE,UIFLOW,Arduino. The tutorials for M5Burner, Firmware, Burning, programming. ESP32,M5StickC,StickV, StickT,M5ATOM.">
|
|
<meta name="google-site-verification" content="sYDlVf68aDW21U32H46j1P4YDSimljEGHBEMi4JRxQ8" />
|
|
<title>M5Stack Docs - The reference docs for M5Stack products.</title>
|
|
<base target="_blank">
|
|
<link rel="icon" href="./assets/img/favicon.ico">
|
|
<!-- Stylesheets -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0.7.2/dist/css/theme-simple.css" title="Simple">
|
|
<!-- <link rel="stylesheet" href="./assets/css/main.css"> -->
|
|
<link rel="stylesheet" href="https://static-cdn.m5stack.com/resource/docs/assets/main-min.css">
|
|
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/theme-chalk/index.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.13.2/lib/index.js"></script>
|
|
</head>
|
|
|
|
<body id="body">
|
|
<div id="search">
|
|
<div class="search">
|
|
<form action="" method="get" accept-charset="utf-8">
|
|
<input ref="InputTarget" type="text" placeholder="Search" :style="SearchInputClass" v-model="SearchKW">
|
|
<a @click="InputTaggle()" id="search_button" class="search-btn"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" role="img" viewBox="0 0 24 24" focusable="false"><title>Search</title><circle cx="10.5" cy="10.5" r="7.5"></circle><path d="M21 21l-5.2-5.2"></path></svg></a>
|
|
</form>
|
|
</div>
|
|
<div id="search_cover" v-show="InputShowStatus" @click="InputTaggle">
|
|
<div id="search_contant_box" @click.stop="">
|
|
<div id="close_search" @click="InputTaggle">
|
|
<i class="el-icon-circle-close" style="color: rgb(15 16 16 / 78%);border-radius: 50%;"></i>
|
|
</div>
|
|
<el-tabs v-model="activeName">
|
|
<el-tab-pane :label="current_page_title" name="first">
|
|
<div id="product_result"></div>
|
|
</el-tab-pane>
|
|
<el-tab-pane :label="related_page_title" name="second" >
|
|
<div :key='index' v-for='(key,index) in contant_result'>
|
|
<a :href='key.url'><span v-html='key.name'></span><span v-html='key.contant' style="color: #47a1fe;"></span></a>
|
|
<el-divider></el-divider>
|
|
</div>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<transition id="zoom_image" name="el-zoom-in-bottom">
|
|
<div v-show="show" v-cloak class="demo-image__preview" style="position: fixed;z-index: 9999;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 100%;height: 100%;">
|
|
<transition name="el-zoom-in-bottom">
|
|
<div tabindex="-1" v-show="show" class="el-image-viewer__wrapper transition-box" style="z-index: 2000;">
|
|
<div class="el-image-viewer__mask" @click="close()"></div>
|
|
<span class="el-image-viewer__btn el-image-viewer__close" @click="close()" style="z-index: 2000;">
|
|
<i class="el-icon-circle-close" style="color: #00ff5ac7;box-shadow: 0 0 10px #00ff5ac7; border-radius: 50%;"></i>
|
|
</span>
|
|
<span class="el-image-viewer__btn el-image-viewer__prev" @click="prev" style="z-index: 2000;">
|
|
<i class="el-icon-arrow-left"></i>
|
|
</span>
|
|
<span class="el-image-viewer__btn el-image-viewer__next" @click="next()" style="z-index: 2000;">
|
|
<i class="el-icon-arrow-right"></i>
|
|
</span>
|
|
<div class="el-image-viewer__btn el-image-viewer__actions" style="z-index: 2000;">
|
|
<div class="el-image-viewer__actions__inner">
|
|
<i @click="zoom_out" class="el-icon-zoom-out"></i>
|
|
<i @click="zoom_in" class="el-icon-zoom-in"></i>
|
|
<i class="el-image-viewer__actions__divider"></i>
|
|
<i @click="full" class="el-icon-full-screen"></i>
|
|
<i class="el-image-viewer__actions__divider"></i>
|
|
<i @click="left" class="el-icon-refresh-left"></i>
|
|
<i @click="right" class="el-icon-refresh-right"></i>
|
|
</div>
|
|
</div>
|
|
<div class="el-image-viewer__canvas" @mousewheel="rollImg(this)">
|
|
<img :src="url" class="el-image-viewer__img" :style="img_style" draggable="false" @mousedown="startDrag(this)" @mouseup="dragImgEnd(this)" @mousemove="dragImg(this)">
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</transition>
|
|
|
|
<div id='header'>
|
|
<div id="pc_header">
|
|
<header>
|
|
<div class="container" v-cloak>
|
|
<div class="logo">
|
|
<a :href="CurrentLanguage.nav[0].link">
|
|
<img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/LOGO.jpg" alt="logo">
|
|
</a>
|
|
</div>
|
|
<ul class="header-nav" @mouseleave="panelHide">
|
|
<li :key='index+item' v-for='(item,index) in CurrentLanguage.nav' @mouseover.stop="panelShow($event)">
|
|
<a :id="index" :href="item.link">
|
|
{{item.title.toUpperCase()}}
|
|
</a>
|
|
</li>
|
|
<div :class="{'nav-dropdown':DropdownStatus}">
|
|
<div class="dropdown-container" v-if="DropdownStatus">
|
|
<div class="dropdown-title">{{CurrentPanel.title}}</div>
|
|
<div class="dropdown-content" v-if="CurrentPanel.contents.type == 'list'">
|
|
<div class="dropdown-content-box" style="width: 800px;">
|
|
<a :href="item.link" class="dropdown-item" :key='index+item' v-for="(item,index) in CurrentPanel.contents.items">
|
|
<div>
|
|
<img :src="item.icon" :alt="item.name">
|
|
</div>
|
|
<p>{{item.name}}</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="dropdown-content" v-else-if="CurrentPanel.contents.type == 'container'">
|
|
<div class="dropdown-content-box" style="justify-content: space-around;">
|
|
<div v-for="(item,index) in CurrentPanel.contents.items">
|
|
<div style="margin: 5px 10px 5px 10px" class="dropdown-item2">
|
|
<img :src="item.icon" :alt="item.name">
|
|
<p>{{item.name}}</p>
|
|
</div>
|
|
<ul>
|
|
<li class="dropdown-category" :key='index+item' v-for="(item,index) in item.category">
|
|
<a :href="item.link"><p>{{item.name}}</p></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ul>
|
|
<button class="shop-btn"><a href="https://m5stack.com/collections/m5stack-new-arrival"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/SHOP.png" /></a></button>
|
|
<button class="user-btn"><a href="https://m5stack-store.myshopify.com/account/login"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/USER.png" /></a></button>
|
|
<button class="language-btn" @click="changeLanguage">
|
|
<img :src='CurrentLanguage.LanguageIcon'/></a>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="mb_header">
|
|
<div :class='mobileNavClass' @click="mobileNavToggle"></div>
|
|
<a :href="CurrentLanguage.nav[0].link">
|
|
<img class="mblogo" src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/LOGO.jpg" alt="logo">
|
|
</a>
|
|
<transition name="el-zoom-in-top">
|
|
<div v-show="MobileNavStatus" class="transition-box mobile-nav-list">
|
|
<template v-if="item.title != CurrentLanguage.nav[1].title" :key='index+item' v-for='(item,index) in CurrentLanguage.nav'>
|
|
<li class="mobile-nav-item" @click="mobilePanelToggle(item.title.toUpperCase())" :id="item.title.toUpperCase()">
|
|
{{item.title.toUpperCase()}}
|
|
<span :class="['mobile-nav-btn',{'mobile-nav-active': MobileCurrentPanel==item.title.toUpperCase()}]" v-if="item.contents != undefined" class="mobile-nav-btn"></span>
|
|
<el-collapse-transition>
|
|
<div v-show="MobileCurrentPanel==item.title.toUpperCase()?true:false" v-if="item.contents != undefined" class="transition-box mobile-nav-contents" >
|
|
<a :href="content.link" :key='index+content' v-for="(content,index) in item.contents.items">
|
|
<p>{{content.name.toUpperCase()}}</p>
|
|
</a>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</li>
|
|
</template>
|
|
<template v-else v-for="(content,index) in item.contents.items">
|
|
<li class="mobile-nav-item" :id="content.name.toUpperCase()" @click="mobilePanelToggle(content.name.toUpperCase())">
|
|
{{content.name.toUpperCase()}}
|
|
<span :class="['mobile-nav-btn',{'mobile-nav-active': MobileCurrentPanel==content.name.toUpperCase()}]"></span>
|
|
<el-collapse-transition>
|
|
<div v-show="MobileCurrentPanel==content.name.toUpperCase()?true:false" class="transition-box mobile-nav-contents">
|
|
<a :href="content.link" :key='index+content' v-for="(content,index) in content.category">
|
|
<p>{{content.name.toUpperCase()}}</p>
|
|
</a>
|
|
</div>
|
|
</el-collapse-transition>
|
|
</li>
|
|
</template>
|
|
<button class="shop-btn"><a href="https://m5stack.com/collections/m5stack-new-arrival"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/SHOP.png" /></a></button>
|
|
<button class="user-btn"><a href="https://m5stack-store.myshopify.com/account/login"><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/icon/USER.png" /></a></button>
|
|
<button class="language-btn" @click="changeLanguage">
|
|
<img :src='CurrentLanguage.LanguageIcon'/></a>
|
|
</button>
|
|
</div>
|
|
</transition>
|
|
|
|
</div>
|
|
</header>
|
|
<div id="pc_anchor">
|
|
<el-col :span="12" v-cloak>
|
|
<el-menu
|
|
class="el-menu-vertical-demo"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
unique-opened = "true"
|
|
style="min-height:auto">
|
|
<el-submenu v-if="anchors.expand.length > 0" :index="index" :key='index' v-for='(anchors, index) in anchorList'>
|
|
<template slot="title">
|
|
<div @click='page_move(anchors.name.toLowerCase())'>
|
|
<span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
|
|
</div>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<el-menu-item :index="index" v-for='(anchor, index) in anchors.expand' @click='page_move(anchor.id.toLowerCase())' style="text-align: left; padding-left: 40px !important;;">
|
|
|
|
<span :title="anchor.name.toUpperCase()">{{anchor.name.toUpperCase()}}</span>
|
|
</el-menu-item>
|
|
</el-menu-item-group>
|
|
</el-submenu>
|
|
<template v-else>
|
|
<a v-if="anchors.link != undefined" :href="anchors.link" style="color:#303133;">
|
|
<el-menu-item :index="index" :key='index' style="text-align: left;padding-left: 20px !important;">
|
|
<img else v-if="anchors.icon.indexOf('http') != -1" :src="anchors.icon">
|
|
<i v-else-if="anchors.icon.indexOf('el-icon') != -1" :class="anchors.icon"></i>
|
|
<i v-else class="el-icon-location"></i>
|
|
<span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
|
|
</el-menu-item>
|
|
</a>
|
|
<template v-else>
|
|
<el-menu-item :index="index" :key='index' @click='page_move(anchors.name.toLowerCase())' style="text-align: left;padding-left: 20px !important;">
|
|
<img else v-if="anchors.icon.indexOf('http') != -1" :src="anchors.icon">
|
|
<i v-else-if="anchors.icon.indexOf('el-icon') != -1" :class="anchors.icon"></i>
|
|
<i v-else class="el-icon-location"></i>
|
|
<span :title="anchors.name.toUpperCase()">{{anchors.name.toUpperCase()}}</span>
|
|
</el-menu-item>
|
|
</template>
|
|
</template>
|
|
</el-menu>
|
|
</el-col>
|
|
</div>
|
|
<div class="related_links">
|
|
<a href="https://twitter.com/M5Stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/twitter.webp"></a>
|
|
<a href="https://www.facebook.com/M5Stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/facebook.webp"></a>
|
|
<a href="https://www.youtube.com/m5stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/youtube.webp"></a>
|
|
<a href="https://github.com/m5stack" target="view_window"><img src="https://static-cdn.m5stack.com/image/github.webp"></a>
|
|
<a onclick="creat_pdf()" style="background-color: #0062cc;"><svg t="1583466910393" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2343" width="50" height="50"><path d="M410.2 430.6h-4.8v91.6h4.8c24 0 41-11 41-46.4s-17-45.2-41-45.2zM282.6 430.4H268v43h15.6c17.4 0 25.8-8.2 25.8-22.8 0-15-9.6-20.2-26.8-20.2z" fill="#ffffff" p-id="2344"></path><path d="M791.94 155.36H332.48c-42.23 0-76.54 34.31-76.54 76.54v76.55h-51.03c-28.16 0-51.04 22.87-51.04 51.03v261.37c0 28.15 22.88 51.02 51.04 51.02h51.03v121.54c0 42.24 34.32 76.55 76.54 76.55h459.46c42.23 0 76.54-34.32 76.54-76.54V231.9c0.1-42.24-34.31-76.54-76.54-76.54zM268 501.6V551h-35.8V402.2h52.2c32.8 0 59.8 11.6 59.8 48.4 0 35.4-27.4 51-58.8 51H268z m549.45 291.9c-0.02 14.09-11.43 25.5-25.52 25.51H332.48c-14.09-0.01-25.5-11.43-25.51-25.51V671.96h306.21c28.15 0 51.03-22.88 51.03-51.03v-6.03h76.69c14.09-0.01 25.51-11.43 25.52-25.52-0.02-14.09-11.43-25.5-25.52-25.51h-76.69v-51.03h76.69c14.09-0.01 25.51-11.43 25.52-25.52-0.01-14.09-11.43-25.5-25.52-25.52h-76.69v-51.03h76.69c14.09-0.01 25.51-11.43 25.52-25.51-0.01-14.09-11.43-25.51-25.52-25.52h-76.69c0-28.16-22.89-51.03-51.03-51.03H306.97v-76.54c0.01-14.09 11.43-25.5 25.51-25.52h459.46c14.08 0.01 25.5 11.43 25.51 25.52V793.5zM369.6 551V402.2h42.8c45.4 0 75.4 21.8 75.4 73.6s-30 75.2-73.4 75.2h-44.8zM602 464.4v29.8h-50.8V551h-35.8V402.2h95v29.6h-59.2v32.6H602z" fill="#ffffff" p-id="2345"></path></svg></a>
|
|
<div target="view_window" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"><img src="https://static-cdn.m5stack.com/image/to-top.webp"></div>
|
|
</div>
|
|
</div>
|
|
<div id="app"></div>
|
|
<script>
|
|
window.$docsify = {
|
|
name: 'M5Stack docs',
|
|
// repo: 'https://github.com/m5stack/m5-docs',
|
|
homepage: 'index.md',
|
|
// loadNavbar: 'navbar.md',
|
|
// loadSidebar: 'sidebar.md',
|
|
autoHeader: true,
|
|
mergeNavbar: true, // for mobile device
|
|
nameLink: {
|
|
'/en/': '#/en/',
|
|
'/zh_CN/': '#/zh_CN/',
|
|
'/ja/': '#/ja/',
|
|
'/': '/'
|
|
},
|
|
// NAVIGATION
|
|
// -----------------------------------------------------------------
|
|
alias: { //重定向
|
|
'/en/sidebar.md': '/sidebar.md',
|
|
'/en/.*/sidebar.md': '/sidebar.md',
|
|
'/zh_CN/.*/sidebar.md': '/zh_CN/sidebar.md',
|
|
'/ja/.*/sidebar.md': '/ja/sidebar.md',
|
|
'/.*/navbar.md': '/navbar.md',
|
|
'/en/': '/',
|
|
},
|
|
auto2top: true,
|
|
mergeNavbar: true,
|
|
maxLevel: 4,
|
|
subMaxLevel: 3,
|
|
basePath: '/',
|
|
formatUpdated: '{MM}/{DD} {HH}:{mm}',
|
|
executeScript: true,
|
|
ga: 'UA-131246469-2'
|
|
};
|
|
</script>
|
|
<!-- <script src="./assets/js/custom.js"></script> -->
|
|
<script src="https://static-cdn.m5stack.com/resource/docs/assets/custom.min.js"></script>
|
|
<!-- <script src="./assets/js/docify.min.js"></script> -->
|
|
<script src="https://static-cdn.m5stack.com/resource/docs/assets/docify.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2.1.0/dist/docsify-copy-code.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/docsify@4.10.2/lib/plugins/external-script.min.js"></script>
|
|
</body>
|
|
|
|
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-138139529-2"></script>
|
|
<script>
|
|
window.dataLayer = window.dataLayer || [];
|
|
function gtag(){dataLayer.push(arguments);}
|
|
gtag('js', new Date());
|
|
|
|
gtag('config', 'UA-138139529-2');
|
|
</script>
|
|
|
|
<!-- Baidu auto submit link -->
|
|
<script>
|
|
(function(){
|
|
var canonicalURL, curProtocol;
|
|
var x=document.getElementsByTagName("link");
|
|
if(x.length > 0){
|
|
for (i=0;i<x.length;i++){
|
|
if(x[i].rel.toLowerCase() == 'canonical' && x[i].href){
|
|
canonicalURL=x[i].href;
|
|
}
|
|
}
|
|
}
|
|
if (!canonicalURL){
|
|
curProtocol = window.location.protocol.split(':')[0];
|
|
}
|
|
else{
|
|
curProtocol = canonicalURL.split(':')[0];
|
|
}
|
|
if (!canonicalURL) canonicalURL = window.location.href;
|
|
!function(){var e=/([http|https]:\/\/[a-zA-Z0-9\_\.]+\.baidu\.com)/gi,r=canonicalURL,t=document.referrer;if(!e.test(r)){var n=(String(curProtocol).toLowerCase() === 'https')?"https://sp0.baidu.com/9_Q4simg2RQJ8t7jm9iCKT-xh_/s.gif":"//api.share.baidu.com/s.gif";t?(n+="?r="+encodeURIComponent(document.referrer),r&&(n+="&l="+r)):r&&(n+="?l="+r);var i=new Image;i.src=n}}(window);})();
|
|
</script>
|
|
<script src="https://static-cdn.m5stack.com/resource/docs/assets/html2canvas.js"></script>
|
|
<script src="https://static-cdn.m5stack.com/resource/docs/assets/jspdf.debug.js"></script>
|
|
</html> |