imagezoom

.vuepress/config.js

@@ -21,6 +21,14 @@ module.exports = {
         return dateFns.format(timestamp, 'YYYY-MM-DD HH:mm:ss')
       }
     },
+    '@vuepress/medium-zoom': {
+      selector: 'p img',
+      // medium-zoom options here
+      // See: https://github.com/francoischalifour/medium-zoom#options
+      options: {
+        margin: 16
+      }
+    },
     'reading-progress': {},
     'vuepress-plugin-element-tabs': {},
     'vuepress-plugin-baidu-autopush':{},

.vuepress/theme/components/Sidebar.vue

@@ -11,9 +11,7 @@
       </p>
       <div>
         <a target="_blank" :href="`http://demo.kuboard.cn/#/login?isReadOnly=true&token=${$site.themeConfig.kuboardToken}`">
-          <p>
+          <img :src="demo_img" style="width: 226px; height: 127px; border: 1px solid #d7dae2;"></img>
-            <img :src="demo_img" style="width: 226px; height: 127px;"></img>
-          </p>
         </a>
       </div>
       <p>

overview/README.md

@@ -27,19 +27,17 @@ A cool Kubernetes dashboard.
   Kuboard 在线体验
 </a>
 </p>
-为保证环境的稳定性，在线 Demo 中只提供只读权限。<span style="color: #F56C6C; font-weight: 500;">（请在PC浏览器中打开）</span>
 
 <p>
-  <a target="_blank" :href="`http://demo.kuboard.cn/#/login?isReadOnly=true&token=${$site.themeConfig.kuboardToken}`">
+为保证环境的稳定性，在线 Demo 中只提供只读权限。<span style="color: #F56C6C; font-weight: 500;">（请在PC浏览器中打开）</span>
-    <img src="./README.assets/1564841972085.gif"></img>
-  </a>
 </p>
 
+<a target="_blank" :href="`http://demo.kuboard.cn/#/login?isReadOnly=true&token=${$site.themeConfig.kuboardToken}`">
+  <img src="./README.assets/1564841972085.gif"></img>
+</a>
 
 ## 开始使用
 
-
-
 ### Kubernetes 初学者
 
 单纯地按章节学习 Linux 基础知识、网络知识、容器技术等，每一块儿的基础入门书籍就有几百页之多。