update

_config.yml

@@ -8,7 +8,7 @@ info:
   name: Material X
   docs: https://xaoxuu.com/wiki/material-x/
   # 主题的CDN地址。如需启用CDN，请在主目录的config中设置，详见文档。
-  cdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.3.22/
+  cdn: https://cdn.jsdelivr.net/gh/xaoxuu/cdn-material-x@19.3.24/
 
 
 ############################### 主题样式 ###############################

layout/_partial/scripts.ejs

@@ -15,8 +15,8 @@
     if(!ROOT.endsWith('/'))ROOT += '/';
   </script>
 <% } %>
-<% if (theme.services) { %>
-  <% if (theme.services.scrollreveal == true) { %>
+
+<% if (theme.services.scrollreveal == true) { %>
   <script async src="https://cdn.jsdelivr.net/npm/scrollreveal@4.0.5/dist/scrollreveal.min.js"></script>
   <script type="text/javascript">
     $(function() {
@@ -26,8 +26,8 @@
       sr.reveal('.reveal');
     });
   </script>
-  <% } %>
-  <% if (theme.services.nodewaves == true) { %>
+<% } %>
+<% if (theme.services.nodewaves == true) { %>
   <script src="https://cdn.jsdelivr.net/npm/node-waves@0.7.6/dist/waves.min.js"></script>
   <script type="text/javascript">
     $(function() {
@@ -40,11 +40,11 @@
       Waves.init();
     });
   </script>
-  <% } %>
-  <% if (theme.services.busuanzi == true) { %>
+<% } %>
+<% if (theme.services.busuanzi == true) { %>
   <script async src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js"></script>
-  <% } %>
-  <% if (theme.services.fastclick == true) { %>
+<% } %>
+<% if (theme.services.fastclick == true) { %>
   <!-- fastclick -->
   <script src="https://cdn.jsdelivr.net/npm/fastclick@1.0.6/lib/fastclick.min.js"></script>
   <script>
@@ -52,14 +52,14 @@
       FastClick.attach(document.body)
     }, false)
   </script>
-  <% } %>
-  <% if (theme.services.share == true && config.mob && config.mob.app_key) { %>
+<% } %>
+<% if (theme.services.share == true && config.mob && config.mob.app_key) { %>
   <% if (page.layout == 'post' && page.share != false) { %>
     <script id="-mob-share" src="//f1.webshare.mob.com/code/mob-share.js?appkey=<%- config.mob.app_key %>"></script>
   <% } %>
-  <% } %>
+<% } %>
 
-  <%
+<%
   var enableDisqus = false;
   var enableLivere = false;
   var enableValine = false;
@@ -74,8 +74,8 @@
       enableValine = true;
     }
   }
-  %>
-  <% if (enableDisqus){ %>
+%>
+<% if (enableDisqus){ %>
   <script>
     var disqus_shortname = '<%= config.disqus_shortname %>';
     <% if (page.permalink){ %>
@@ -89,8 +89,8 @@
       (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
     })();
   </script>
-  <% } %>
-  <% if (enableLivere){ %>
+<% } %>
+<% if (enableLivere){ %>
   <script type="text/javascript">
     (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];
@@ -101,8 +101,8 @@
       e.parentNode.insertBefore(j, e);
     })(document, 'script');
   </script>
-  <% } %>
-  <% if (enableValine){ %>
+<% } %>
+<% if (enableValine){ %>
   <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
   <% if (theme.services.volantis == true) { %>
     <% if (theme.services && theme.services.cdn == true) { %>
@@ -138,19 +138,21 @@
     highlight:'<%= config.valine.highlight %>'
   })
   </script>
-  <% } %>
+<% } %>
+
+<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
 
-  <% if (theme.services.cdn == true && config.theme_cdn) { %>
+<% if (theme.services.cdn == true && config.theme_cdn) { %>
   <% if (config.theme_cdn == true) { %>
-    <%- js([theme.info.cdn + 'js/app.js', theme.info.cdn + 'js/search.js']) %>
+  <%- js([theme.info.cdn + 'js/app.js', theme.info.cdn + 'js/search.js', theme.info.cdn + 'js/clipboard-use.js']) %>
   <% } else if (config.theme_cdn.length > 0) { %>
-    <%- js([config.theme_cdn + 'js/app.js', config.theme_cdn + 'js/search.js']) %>
-    <% } %>
-  <% } else { %>
-    <%- js(['js/app.js', 'js/search.js']) %>
+  <%- js([config.theme_cdn + 'js/app.js', config.theme_cdn + 'js/search.js', config.theme_cdn + 'js/clipboard-use.js']) %>
   <% } %>
+<% } else { %>
+  <%- js(['js/app.js', 'js/search.js', 'js/clipboard-use.js']) %>
 <% } %>
 
+
 <% if (page.layout == 'links') { %>
   <%- js('https://cdn.jsdelivr.net/gh/toddmotto/echo@1.7.3/src/echo.js') %>
   <script>

source/js/clipboard-use.js

@@ -4,14 +4,73 @@
   var initCopyCode = function(){
     var copyHtml = '';
     copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
-    copyHtml += '  <i class="fa fa-globe"></i><span>copy</span>';
+    copyHtml += '  <i class="fa fa-copy"></i><span>Copy</span>';
     copyHtml += '</button>';
     $(".highlight .code pre").before(copyHtml);
-    new ClipboardJS('.btn-copy', {
+    var clipboard = new ClipboardJS('.btn-copy', {
       target: function(trigger) {
         return trigger.nextElementSibling;
       }
     });
+
+    clipboard.on('success', function(e) {
+      //您可以加入成功提示
+      console.info('Action:', e.action);
+      console.info('Text:', e.text);
+      console.info('Trigger:', e.trigger);
+      success_prompt("复制成功");
+      e.clearSelection();
+    });
+    clipboard.on('error', function(e) {
+      //您可以加入失败提示
+      console.error('Action:', e.action);
+      console.error('Trigger:', e.trigger);
+      fail_prompt("复制失败");
+    });
   }
   initCopyCode();
+
 }(window, document);
+
+/**
+ * 弹出式提示框，默认1.2秒自动消失
+ * @param message 提示信息
+ * @param style 提示样式，有alert-success、alert-danger、alert-warning、alert-info
+ * @param time 消失时间
+ */
+var prompt = function (message, style, time)
+{
+    style = (style === undefined) ? 'alert-success' : style;
+    time = (time === undefined) ? 1200 : time*1000;
+    $('<div>')
+        .appendTo('body')
+        .addClass('alert ' + style)
+        .html(message)
+        .show()
+        .delay(time)
+        .fadeOut();
+};
+
+// 成功提示
+var success_prompt = function(message, time)
+{
+    prompt(message, 'alert-success', time);
+};
+
+// 失败提示
+var fail_prompt = function(message, time)
+{
+    prompt(message, 'alert-danger', time);
+};
+
+// 提醒
+var warning_prompt = function(message, time)
+{
+    prompt(message, 'alert-warning', time);
+};
+
+// 信息提示
+var info_prompt = function(message, time)
+{
+    prompt(message, 'alert-info', time);
+};

source/less/_article.less

@@ -452,43 +452,6 @@
   }
 
 
-  //代码块复制按钮
-  .highlight{
-      //方便copy代码按钮（btn-copy）的定位
-      position: relative;
-  }
-  .btn-copy {
-      display: inline-block;
-      cursor: pointer;
-      background-color: #eee;
-      background-image: linear-gradient(#fcfcfc,#eee);
-      border: 1px solid #d5d5d5;
-      border-radius: 3px;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      -webkit-appearance: none;
-      font-size: 13px;
-      font-weight: 700;
-      line-height: 20px;
-      color: #333;
-      -webkit-transition: opacity .3s ease-in-out;
-      -o-transition: opacity .3s ease-in-out;
-      transition: opacity .3s ease-in-out;
-      padding: 2px 6px;
-      position: absolute;
-      right: 5px;
-      top: 5px;
-      opacity: 0;
-  }
-  .btn-copy span {
-      margin-left: 5px;
-  }
-  .highlight:hover .btn-copy{
-      opacity: 1;
-  }
-  
 /* Handle */
 
   &::-webkit-scrollbar-thumb {
@@ -589,3 +552,40 @@ pre{
     color: @hl_red;
   }
 }
+
+//代码块复制按钮
+.highlight{
+    //方便copy代码按钮（btn-copy）的定位
+    position: relative;
+}
+.btn-copy {
+    display: inline-block;
+    cursor: pointer;
+    background-color: #eee;
+    background-image: linear-gradient(#fcfcfc,#eee);
+    border: 1px solid #d5d5d5;
+    border-radius: 3px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-appearance: none;
+    font-size: 13px;
+    font-weight: 700;
+    line-height: 20px;
+    color: #333;
+    -webkit-transition: opacity .3s ease-in-out;
+    -o-transition: opacity .3s ease-in-out;
+    transition: opacity .3s ease-in-out;
+    padding: 2px 6px;
+    position: absolute;
+    right: 5px;
+    top: 5px;
+    opacity: 0;
+}
+.btn-copy span {
+    margin-left: 5px;
+}
+.highlight:hover .btn-copy{
+    opacity: 1;
+}

source/less/_layout.less

@@ -34,8 +34,7 @@
 
 
 // start: 圆角 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
-// 0px: 极端，2px：硬朗，4px：常规，8px：圆润，16px：温柔
-@border_radius: 8px; // 圆角半径，可以根据心情随时调整风格
+@border_radius: 12px; // 圆角半径，可以根据心情随时调整风格
 @border_radius_line: 4px; // 线的宽度和滚动条的宽度
 @border_radius_code_block: 4px; // 引用、代码块的圆角
 

source/less/_main.less

@@ -479,3 +479,41 @@
   }
 
 }
+
+.alert {
+	display: none;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%,-50%);
+	z-index: 99999;
+	text-align: center;
+	padding: 24px 36px;
+	border-radius: @border_radius;
+  box-shadow: @boxshadow_card_normal;
+
+  &.alert-success {
+      color: #3c763d;
+      background-color: #dff0d8;
+      border-color: #d6e9c6;
+  }
+
+  &.alert-info {
+      color: #31708f;
+      background-color: #d9edf7;
+      border-color: #bce8f1;
+  }
+
+  &.alert-warning {
+      color: #8a6d3b;
+      background-color: #fcf8e3;
+      border-color: #faebcc;
+  }
+
+  &.alert-danger {
+      color: #a94442;
+      background-color: #f2dede;
+      border-color: #ebccd1;
+  }
+
+}

source/less/_search.less

@@ -231,6 +231,7 @@
       overflow-y: scroll;
       -webkit-overflow-scrolling: touch;
       background-color: @theme_cardbg;
+      border-radius: @border_radius;
       @media (max-width: @on_modal_threshold) {
         padding: 60px 20px 80px 20px;
     	}