add navigation to top button

2026-05-20 10:23:01 -07:00 · 2019-07-22 21:11:52 +08:00
parent 7812e751a4
commit 1b3c17ac24
5 changed files with 74 additions and 54 deletions
@@ -488,10 +488,26 @@ div.card-img-overlay:hover{
 }


+.d-flex{
+    z-index: 9999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+}
+
+
+
 .btn-toggle {
    display: none;
 }

+.back_top{
+    position: fixed;
+    right: 150px;
+    bottom: 150px;
+}
+
@media screen and (max-width: 768px){
    .d-flex {
        display: none !important;
@@ -566,6 +582,12 @@ div.card-img-overlay:hover{
        max-width: 80%;
        margin-top: 0px;
    }
+
+    .markdown-section {
+        max-width: 100%;
+        margin-top: 50px;
+    
+    }
    .banner div.card-img-overlay h4{
        font-size: 2em;
        color: #fff;
@@ -575,14 +597,9 @@ div.card-img-overlay:hover{

        margin-left: 0px;
    }
+    .back_top{
+        position: fixed;
+        right: 10px;
+        bottom: 150px;
+    }
 }
-
-.d-flex{
-    z-index: 9999;
-    position: fixed;
-    top: 0;
-    right: 0;
-    left: 0;
-}
-
-
@@ -1,6 +1,6 @@
 # M5StickC {docsify-ignore-all}

-<img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_05.png" alt="gray_02" width="350" height="350">
+<img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_05.png" alt="gray_02" width="400" height="400">

 * * *

@@ -36,9 +36,9 @@ M5stickC is one of the core devices in M5Stack product series which is built in
 - 1, Connect G0 to 3V3.        
 - 2. Plug in the USB cable. 
 - 3, The screen will light up and leave the USB to charge the device. <br><br><br>
+
 <img src="assets/img/faq/m5stickc_05.jpg" width="50%" height="50%">

-<img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_05.jpg" width=50% height=50%>

 ## Product Features

@@ -31,7 +31,8 @@
 <body>
    <div class="btn-toggle"></div>
    <div class="d-flex a flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
-            <h5 class="my-0 mr-md-auto font-weight-normal">M5Stack Document</h5>
+            <h5 class="my-0 mr-md-auto font-weight-normal"><a href="https://m5stack.com/"><img src="//cdn.shopify.com/s/files/1/0056/7689/2250/files/LOGO_40x.jpg?v=1563273356" style="margin-right:10px;margin-top:-5px"></a>M5Stack Docs</h5>
+
            <nav class="my-2 my-md-0 mr-md-3">
                <a id="product" class="p-2 text-dark"href="#" >Product</a>
                <a class="p-2 text-dark dropdown-toggle" data-toggle="dropdown">API</a>
@@ -46,6 +47,7 @@
            <a id="language" class="btn btn-primary" style="color:#fff" onclick="language()">中文</a>
    </div>
    <div id="app">loading...</div>
+    <div><img src="https://m5stack.oss-cn-shenzhen.aliyuncs.com/image/back_top.png" class="back_top" onclick="(function(){$('html, body').animate({scrollTop: 0}, 500);})()"></div>
    <script>
        window.$docsify = {
            // GENERAL
@@ -114,25 +116,8 @@
            $(this).children("div").addClass("collapse")
    
        };
-        function language(){
-            var test = window.location.href;
-            if ((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1)){
-                var test2 = test.concat("","zh_CN/");
-                window.location.href = test2;
-                $("#language").text("EN");
-                $("#product").text("产品列表");
-                $("#product").attr("href","#/zh_CN/");
-                $("#arduino").text("Arduino API");
-                $("#arduino").attr("href","#/zh_CN/api");
-                $("#cases").text("用户案例");
-                $("#cases").attr("href","#/zh_CN/case");
-                $("#related").text("相关文档");
-                $("#related").attr("href","#/zh_CN/related_documents");
-                $("#faq").text("常见问题");
-                $("#faq").attr("href","#/zh_CN/faq");
-            }else if (test.indexOf(/en/) == -1){
-                var test2 = test.replace(/zh_CN/, "en");
-                window.location.href = test2;
+        function change_title(language){
+            if(language == "en"){
                $("#language").text("中文");
                $("#product").text("Product");
                $("#product").attr("href","#");
@@ -144,11 +129,8 @@
                $("#related").attr("href","#/en/related_documents");
                $("#faq").text("FAQ");
                $("#faq").attr("href","#/en/faq");
-
            }
            else{
-                var test2 = test.replace(/en/, "zh_CN");
-                window.location.href = test2;
                $("#language").text("EN");
                $("#product").text("产品列表");
                $("#product").attr("href","#/zh_CN/");
@@ -160,34 +142,42 @@
                $("#related").attr("href","#/zh_CN/related_documents");
                $("#faq").text("常见问题");
                $("#faq").attr("href","#/zh_CN/faq");
+            }
+        }
+        function language(){
+            var test = window.location.href;
+            if ((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1)){
+                var test2 = test.concat("","zh_CN/");
+                window.location.href = test2;
+                change_title('zh_CN');
+
+            }else if (test.indexOf(/en/) == -1){
+                var test2 = test.replace(/zh_CN/, "en");
+                window.location.href = test2;
+                change_title('en');
+
+            }
+            else{
+                var test2 = test.replace(/en/, "zh_CN");
+                window.location.href = test2;
+                change_title('zh_CN');
+
            } 
        }
        function page_loading(){
            var test = window.location.href;
            if ((test.indexOf(/en/) == -1) && (test.indexOf(/zh_CN/) == -1)){
-                $("#language").text("中文");
-                $("#product").text("Product");
-                $("#arduino").text("Arduino API");
-                $("#cases").text("M5Stack Cases");
-                $("#related").text("Related Documents");
-                $("#faq").text("FAQ");
+                change_title('en');
+
            }else if (test.indexOf(/en/) == -1){
                var test2 = test.replace(/zh_CN/, "en");
-                $("#language").text("EN");
-                $("#product").text("产品列表");
-                $("#arduino").text("Arduino API");
-                $("#cases").text("用户案例");
-                $("#related").text("相关文档");
-                $("#faq").text("常见问题");
+                change_title('zh_CN');
+
            }
            else{
                var test2 = test.replace(/en/, "zh_CN");
-                $("#language").text("中文");
-                $("#product").text("Product");
-                $("#arduino").text("Arduino API");
-                $("#cases").text("M5Stack Cases");
-                $("#related").text("Related Documents");
-                $("#faq").text("FAQ");
+                change_title('en');
+
            } 
        }
        function page_move(divId){
@@ -29,6 +29,19 @@ M5stick C 是 M5Stack 产品系列中的核心设备之一，该产品系列建

 <img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_02.png" alt="gray_02" width=50% height=50%><img src="assets/img/product_pics/core/minicore/m5stickc/m5stickc_08.png" alt="gray_02" width=50% height=50%>

+**注意：** 
+
+M5Stick-C存在一个问题，即电池处于低电量情况下，容易发生无法开机的现象.
+
+以下操作能够使设备恢复正常：
+- 1，将G0短接到3V3
+- 2.插入USB线 
+- 3，屏幕亮起后停止短接，USB继续为设备充电.
+
+<img src="assets/img/faq/m5stickc_05.jpg" width="50%" height="50%">
+
+
+
 ## 产品特性

 - 5V 直流电源
@@ -110,7 +110,7 @@
  <div id="Q9" class="collapse">
    <img src="assets/img/faq/m5stickc_05.jpg" width="50%" height="50%">

-  M5Stick-C上经常存在一个问题，即电池处于低电量情况下，容易发生无法开机的现象.
+  M5Stick-C存在一个问题，即电池处于低电量情况下，容易发生无法开机的现象.

  以下操作能够使设备恢复正常：1，将G0短接到3V3。 2.插入USB线。 3，屏幕亮起后停止短接，USB继续为设备充电. 
  </div>