diff --git a/README.md b/README.md
index 3ed6190..2643319 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,12 @@
 # KZHomePage
- 二次元卡片个人网站主页
 
-详细内容请查看：https://blog.170601.xyz/archives/25.html 
+二次元卡片个人网站主页
 
-QQ交流群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=-tso4BmPVXPSgqNjPhRCIg4GYZ8Llu_e&jump_from=webapi">962303102</a>
+> QQ交流群：<a target="_blank" href="https://qm.qq.com/cgi-bin/qm/qr?k=-tso4BmPVXPSgqNjPhRCIg4GYZ8Llu_e&jump_from=webapi">962303102</a>
+
+## 使用文档
+
+<https://blog.170601.xyz/archives/25.html>
 
 ## 使用方式
 
diff --git a/index.html b/index.html
index 691e604..2eee909 100644
--- a/index.html
+++ b/index.html
@@ -1,21 +1,30 @@
 <!DOCTYPE html>
 <html lang="">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- 浏览器标签上显示的网站标题 -->
     <title>月色真美,风也温柔</title>
+    <!-- 网站介绍 -->
     <meta name="description" content="KZHomePage是一款二次元卡片式个人网站主页模板">
+    <!-- 网站关键字 -->
     <meta name="keywords" content="风也温柔,个人主页,程序员">
+    <!-- 浏览器标签上显示的图标 -->
     <link rel="icon" type="image/ico" href="//sdn.geekzu.org/avatar/4cc893d113dd74ceca73f9863f2c5446/">
+    <!-- 样式文件 -->
     <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.1/css/all.min.css">
     <link rel="stylesheet" href="./static/style.css?v=1.1">
     <link rel="stylesheet" href="./static/APlayer-1.10.1/dist/APlayer.min.css">
+
+    <!-- 自定义设置 -->
     <style>
-        body{
+        body {
             /*背景图片URL 可使用随机图片API */
-            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png"); 
+            background-image: url("https://bu.dusays.com/2022/06/04/629b0a2a89425.png");
         }
+
         .photo-bg {
             /* 卡片左侧图片 */
             background-image: url("https://bu.dusays.com/2022/06/04/629b0a2750921.jpg");
@@ -33,10 +42,9 @@
         let music_volume = 0.7; // 默认音量
         let music_autoplay = false; // 自动播放
         let music_loop = "all"; // 音频循环播放, 可选值: 'all', 'one', 'none' ，分别为全部循环，单曲循环，不循环
-        // 一言设置
-
-    
+        // TODO 一言设置
     </script>
+    <!-- end 自定义设置 -->
 </head>
 
 <body>
@@ -44,41 +52,53 @@
         <div class="row my-card justify-content-center">
             <div class="col-lg-4 photo-bg"></div>
             <div class="col-lg-8 card">
+                <!-- 大标题 -->
                 <h1>KZHomePage</h1>
-                <p>很荣幸您能访问我的网站！ 目前我仍在学习中，每天抽出时间来看书学习，励志成为一个技术很牛的程序员。
+                <!-- 标题下的一段话 -->
+                <p>
+                    很荣幸您能访问我的网站！ 目前我仍在学习中，每天抽出时间来看书学习，励志成为一个技术很牛的程序员。
                 </p>
                 <p id="hitokoto_text">:D 一言获取中...</p>
                 <div class="container-fluid">
                     <div class="row">
-                        <button id="kaygb-blog" class="btn btn-primary col-lg-4">BLOG</button>
-                        <a href="//www.kezez.com" id="kaygb-blog-a" target="_blank" class="btn btn-primary col-lg-4">BLOG</a>
-                        <a href="https://github.com/kaygb/KZHomePage" target="_blank" class="btn btn-secondary col-lg-4">GitHub</a>
-                        <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=hi@kezez.com" target="_blank" id="kaygb-mail-a" class="btn btn-success col-lg-4">Send a Mail</a>
-                        <button id="kaygb-mail" class="btn btn-success col-lg-4">Send a Mail</button>
+                        <!-- 导航按钮组 -->
+                        <button data-href="//www.kezez.com" data-title="Blog" data-window="pop" data-anim="4"
+                            data-area-w="80%" data-area-h="90%" data-shade="false"
+                            class="kz-nav-btn btn btn-primary col-lg-4">Blog</button>
+
+                        <button data-href="https://github.com/kaygb/KZHomePage" data-title="GitHub" data-window="newtab"
+                            data-anim="4" data-area-w="80%" data-area-h="90%" data-shade="false"
+                            class="kz-nav-btn btn btn-secondary col-lg-4">GitHub</button>
+
+                        <button data-href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=hi@kezez.com"
+                            data-title="Blog" data-window="pop" data-anim="4" data-area-w="80%" data-area-h="90%"
+                            data-shade="false" class="kz-nav-btn btn btn-success col-lg-4">Send a Mail</button>
+
+                        <!-- end 导航按钮组 -->
                     </div>
                 </div>
-                <!-- <audio muted></audio> -->
+                <!-- aplayer inner -->
                 <div id="aplayer-inner" class="aplayer"></div>
-
-                <!-- <h4 class="mt-4">or, keep your eyes on</h4> -->
+                <!-- end aplayer inner -->
                 <ul class="social mt-1">
-                    <li><a href="https://weibo.com/u/5223004318"><i class="fab fa-weibo " aria-hidden="true"></i></a></li>
+                    <li><a href="https://weibo.com/u/5223004318"><i class="fab fa-weibo " aria-hidden="true"></i></a>
+                    </li>
                     <li><a href="https://github.com/kaygb"><i class="fab fa-github" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fab fa-telegram" aria-hidden="true"></i></a></li>
                     <li><a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
-                    <li><a href="https://www.zhihu.com/people/kaygb/"><i class="fab fa-zhihu" aria-hidden="true"></i></a></li>
+                    <li><a href="https://www.zhihu.com/people/kaygb/"><i class="fab fa-zhihu"
+                                aria-hidden="true"></i></a></li>
                 </ul>
-                
-                <!-- <div id="aplayer" class="aplayer" data-order="random" data-id="20173709" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="true" data-volume="0.8"></div> -->
+
                 <footer>
-                    <p>Copyright 2018 - Now <a href="https://www.170601.xyz/" target="_blank">七六零一</a> <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备00000000号-1</a>
+                    <p>Copyright 2018 - Now <a href="https://www.170601.xyz/" target="_blank">七六零一</a>
+                        <a href="http://beian.miit.gov.cn/" target="_blank">豫ICP备00000000号-1</a>
                         <br>Mod by
                         <a href="https://github.com/kaygb" target="_blank" rel="">kaygb</a>
-                        <a href="https://console.upyun.com/register/?invite=r1FdZxBoH" target="_blank" rel="nofollow"><img src="https://bu.dusays.com/2021/12/15/9991d2344d2ca.png" style="width:50px;"></a>
-
+                        <a href="https://console.upyun.com/register/?invite=r1FdZxBoH" target="_blank"
+                            rel="nofollow"><img src="https://bu.dusays.com/2021/12/15/9991d2344d2ca.png"
+                                style="width:50px;"></a>
                     </p>
-                    </p>
-
                 </footer>
             </div>
         </div>
@@ -86,7 +106,7 @@ <h1>KZHomePage</h1>
     </div>
 
     <!-- aplayer -->
-    <div id="aplayer-fixed"  class="aplayer"></div>
+    <div id="aplayer-fixed" class="aplayer"></div>
     <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
     <script src="./static/APlayer-1.10.1/dist/APlayer.min.js"></script>
     <script src="./static/Meting.min.js"></script>
@@ -94,34 +114,7 @@ <h1>KZHomePage</h1>
     <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
     <script defer src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
     <script src="./static/layer-v3.5.1/layer/layer.js"></script>
-    <!-- <script src="./static/main.js"></script> -->
+
     <script src="./static/main.js"></script>
-    <script>
-        //弹出一个页面层
-        $('#kaygb-blog').on('click', function() {
-            layer.open({
-                type: 2,
-                title: 'Blog',
-                shadeClose: true,
-                anim:4,
-                closeBtn: 2,
-                isOutAnim: false,
-                area: ['80%', '90%'],
-                content: '//www.kezez.com/'
-            });
-        });
-        $('#kaygb-mail').on('click', function() {
-            layer.open({
-                type: 2,
-                title: 'Blog',
-                shadeClose: true,
-                anim:4,
-                closeBtn: 2,
-                isOutAnim: false,
-                area: ['80%', '90%'],
-                content: '//mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=hi@kezez.com'
-            });
-        });
-    </script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index f3d80ae..e8ad9e5 100644
--- a/static/main.js
+++ b/static/main.js
@@ -1,26 +1,51 @@
 var windowWidth = $(window).width();
 layer.config({
-  extend: 'kzhomepage/style.css', //加载您的扩展样式
+  extend: 'kzhomepage/style.css', //加载扩展样式
   skin: 'layer-ext-kzhomepage'
 });
-// layer.open({
-//   type: 2,
-//   title: 'Blog',
-//   shadeClose: true,
-//   anim:5,
-//   closeBtn: 2,
-//   area: ['80%', '90%'],
-//   content: '//www.kezez.com/'
-// });
+
+// Nav buttons
+$('.kz-nav-btn').on('click', function() {
+  let btn = $(this);
+  let type = btn.data('window') // pop current newtab
+  let content = btn.data('href')
+  switch (type) {
+    case 'pop':
+      let title = btn.data('title')
+      let shadeClose = btn.data('shade') === 'true' ? false : true
+      let anim = btn.data('anim') ? btn.data('anim')*1 : 4
+      let area_w = btn.data('area-w') ? btn.data('area-w') : '80%'
+      let area_h = btn.data('area-h') ? btn.data('area-h') : '90%'
+      layer.open({
+          type: 2,
+          title: title,
+          shadeClose: shadeClose,
+          anim:anim,
+          closeBtn: 2,
+          isOutAnim: false,
+          area: [area_w, area_h],
+          content: content
+      });
+      break;
+    case 'current':
+      window.location = content
+      break;
+    case 'newtab':
+      window.open('_blank').location = content
+      break;
+  }
+});
+
 console.log(
     "\n" +
-      " %c KZHomePage by kaygb " +
+      " %c KZHomePage v1.2.0 by kaygb " +
       " %c https://blog.170601.xyz/archives/25.html " +
       "\n" +
       "\n",
     "color: #fff; background: #fd79a8; padding:5px 0;",
     "background: #FFF; padding:5px 0;"
-  );  
+  );
+// 兼容旧版
 if(meting_music_api===""){
     meting_api = "https://api.mizore.cn/meting/api.php";
 }
@@ -37,7 +62,6 @@ $.ajax({
   },
   dataType: "json",
   success: function (audio) {
-
     const ap = new APlayer({
         container: music_fixed === false ? document.getElementById('aplayer-inner') : document.getElementById('aplayer-fixed') ,
         audio: audio,
@@ -53,9 +77,6 @@ $.ajax({
 
         
     });
-    // if(music_autoplay){
-    //     ap.play();
-    // }
   },
 });
 
