copy tag

scripts/tags/copy.js

@@ -0,0 +1,50 @@
+/**
+ * copy.js v1 | https://github.com/xaoxuu/hexo-theme-stellar/
+ * 格式与官方标签插件一致使用空格分隔，中括号内的是可选参数（中括号不需要写出来）
+ *
+ * {% copy xxx %}
+ * {% copy git xaoxuu/hexo-theme-stellar %}
+ *
+ */
+
+'use strict';
+
+const { ArgsMap } = require('./utils');
+
+hexo.extend.tag.register('copy', function(args) {
+  args = ArgsMap(args, ['width'], ['text', 'more']);
+  var text;
+  if (args.text == 'git' && args.more && args.more.length > 0) {
+    text = args.more;
+    if (text.substr(0,1) == '/') {
+      text = text.substring(1);
+    }
+    text = 'https://github.com/' + text + '.git';
+  } else if (args.text && args.text.length > 0) {
+    text = args.text;
+    if (args.more && args.more.length > 0) {
+      text += ' ' + args.more;
+    }
+  }
+  function generate_id(text) {
+    return 'copy-' + text.replace(/[^a-z|0-9|.:]/gi, '')
+  }
+
+  var el = '';
+  el += '<div class="tag-plugin copy">';
+
+  el += '<div class="link-box"';
+  if (args.width) {
+    el += ' width="' + args.width + '"';
+  }
+  el += '>';
+  el += '<input class="copy-area" readonly id="' + generate_id(text) + '"';
+  el += ' value="' + text + '">';
+  el += '<button class="copy-btn" onclick="util.copy(&quot;' + generate_id(text) + '&quot;,&quot;Copied!&quot;)">';
+  el += '<svg class="icon copy-btn" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>';
+  el += '</button>';
+  el += '</div>';
+
+  el += '</div>';
+  return el;
+});

source/css/_layout/base.styl

@@ -70,14 +70,11 @@ hr
   opacity: .1
 
 button
-  padding: 1em
   border: none
   font-weight: 600
   outline: none
   disable-select()
-  &:hover
+  cursor: pointer
-    color: $color-inner
-    background: $color-theme
 
 img
   max-width: 100%

source/css/_layout/partial/article_footer.styl

@@ -14,10 +14,6 @@
       margin: 0.75rem 0
       padding: 0
       width: 100%
-      font-family: $ff-code
-      font-size: $fs12
-      font-weight: 600
-      color: var(--text-p3)
     p
       font-size: $fs14
       color: var(--text-p2)

source/css/_layout/partial/paginator.styl

@@ -1,4 +1,5 @@
-.post-list .paginator-wrap
+.paginator-wrap
+  margin: 1rem
   display: flex
   justify-content: space-between
   align-items: center
@@ -25,11 +26,10 @@
       pointer-events: none
       opacity: 0.25
     &.prev
-      border-right: 1px solid transparent
+      border-right: 1px solid var(--block-border)
     &.next
-      border-left: 1px solid transparent
+      border-left: 1px solid var(--block-border)
   a.paginator:hover
     background: var(--card)
-    border-color: var(--block-border)
     img
       filter: grayscale(0%)

source/css/_layout/tag-plugins/copy.styl

@@ -0,0 +1,30 @@
+.md .tag-plugin.copy
+  display: flex
+  .link-box
+    background: var(--block)
+    border-radius: $border-block
+    border: 1px solid var(--block-border)
+    overflow: hidden
+    max-width: 100%
+    display: flex
+    width: 360px
+    &[width='max']
+      width: 100%
+    @media screen and (max-width: $device-mobile-l)
+      min-width: 100%
+  input.copy-area
+    display: inline-block
+    padding: 1em
+    width: 100%
+    color: var(--text-p2)
+  button.copy-btn
+    border-left: 1px solid var(--block-border)
+    display: inline-block
+    background: var(--hover-block)
+    line-height: 0
+    height: 100%
+    font-size: 1rem
+    padding: 0.5rem 1rem
+    color: var(--text-p2)
+    &:hover
+      background: var(--card)

source/css/_plugins/common/input.styl

@@ -0,0 +1,5 @@
+input.copy-area
+  font-family: $ff-code
+  font-size: $fs12
+  font-weight: 600
+  color: var(--text-p3)

source/css/_plugins/common/toast.styl

@@ -1,6 +1,6 @@
 div.toast
   max-width: 60%
-  padding: 2rem 3rem
+  padding: 1rem 3rem
   line-height: 1.5
   color: var(--text-p1)
   font-weight: 500
@@ -12,4 +12,5 @@ div.toast
   left: 50%
   transform: translate(-50%, -50%)
   z-index: 9
+  disable-select()
   box-shadow: $boxshadow-float

source/js/main.js

@@ -132,8 +132,10 @@ const util = {
     if (el) {
       el.select();
       document.execCommand("Copy");
+      if (msg && msg.length > 0) {
         hud.toast(msg);
       }
+    }
   },
 
   toggle: (id) => {