feat feedback button

assets/scss/doc.scss

@@ -792,4 +792,29 @@ footer {
         margin-top: 20px;
       }
     }
+}
+
+.feedback-div {
+    margin-top: 40px;
+
+    .title {
+        font-family: PingFangSC;
+        font-size: 28px;
+        line-height: 32px;
+        color: #36435C;
+    }
+
+    button {
+        cursor: pointer;
+        width: 72px;
+        height: 40px;
+        background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #FFFFFF;
+        border: 1px solid #CCD3DB;
+        border-radius: 4px;
+    }
+
+    button:hover {
+        background-color: #55BC8A;
+    }
+
 }

i18n/en.yaml

@@ -125,4 +125,12 @@
 - id: Install on Kubernetes
   translation: Install on Kubernetes
 - id: Install on Linux
-  translation: Install on Linux
+  translation: Install on Linux
+- id: Was this page Helpful?
+  translation: Was this page Helpful?
+- id: 'Yes'
+  translation: 'Yes'
+- id: 'No'
+  translation: 'No'
+- id: Msg-Thank
+  translation: Thanks for the feedback. If you have a specific question about how to use KubeSphere, ask it on Slack. Open an issue in the GitHub repo if you want to report a problem or suggest an improvement.

i18n/zh.yaml

@@ -129,4 +129,12 @@
 - id: Install on Kubernetes
   translation: 在 Kubernetes 安装
 - id: Install on Linux
-  translation: 在 Linux 安装
+  translation: 在 Linux 安装
+- id: Was this page Helpful?
+  translation: 这篇文章对您有帮助吗？
+- id: 'Yes'
+  translation: 是
+- id: 'No'
+  translation: 否
+- id: Msg-Thank
+  translation: 感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。

layouts/docs/single.html

@@ -122,6 +122,14 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
                     <div class="md-body">
                         <h1>{{ .Title }}</h1>
                         {{ .Content }}
+                        <section class="feedback-div">
+                            <p class="title">{{ i18n "feedback"}}</p>
+                            <p>{{i18n "Was this page Helpful?"}}</p>
+                            <button class="Yes">{{ i18n "Yes" }}</button>
+                            <button class="No">{{ i18n "No" }}</button>
+                        </section>
+                        <br>
+                        <p class="msg-thank">{{ i18n "Msg-Thank" }}</p>
                     </div>
                 </div>
                 {{ if .IsPage }}
@@ -176,6 +184,26 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
         var filePath = '{{ .File.Path }}'
         var githubUrl = '{{ .Site.Params.githubUrl }}'
         // var filePath = 'README.md'
+        var Yes = $('button.Yes');
+            var No = $('button.No');
+            var msg = $('p.msg-thank')
+            msg.hide()
+
+            Yes.click(function () {
+                Yes.css("background-color", " #55BC8A");
+                Yes.css("opacity", '0.5');
+                Yes.css("pointer-events", "none");
+                No.css("pointer-events", "none");
+                msg.show()
+            })
+
+            No.click(function () {
+                No.css("background-color", " #55BC8A");
+                No.css("opacity", '0.5');
+                Yes.css("pointer-events", "none");
+                No.css("pointer-events", "none");
+                msg.show()
+            })
     
         var getLatestTime = function(data) {
             var commit = data[0].commit