add code copy

README.md

@@ -0,0 +1,86 @@
+# lework.github.io ![GitHub](https://img.shields.io/github/license/lework/lework.github.io)
+
+personal blog
+
+## 快速启动
+
+### 1. 安装 ruby 和 jekyll 环境
+
+这一步和第5步主要是为了让博客系统在本地跑起来，如果不想在本地运行，可以无视这两步，但我还是强烈建议试着先在本地跑起来，没有什么问题后再推送的 GitHub 上。
+
+Windows 用户可以直接使用 [RubyInstaller](http://rubyinstaller.org/) 安装 ruby 环境。后续的操作中可能还会提示安装 DevKit，根据提示操作即可。
+
+建议使用 [RubyGems 镜像- Ruby China](https://gems.ruby-china.org/) 安装 jekyll。
+
+安装 jekyll 命令如下
+
+```
+gem install jekyll
+```
+
+### 2. 复制博客主题代码
+
+可以直接 clone 、下载 或 fork 这个仓库的代码即可
+
+### 3. 修改参数
+
+主要修改 `_config.yml` 中的参数和自己的网站小图`favicon.ico`
+
+### 4. 写文章
+
+`_posts`目录下存放文章信息，文章头部注明 layout(布局)、title、date、categories、tags、author(可选)、mathjax(可选，点击[这里](https://www.mathjax.org/)查看更多关于`Mathjax`)，如下：
+
+```
+---
+layout: post
+title:  "对这个 jekyll 博客主题的改版和重构"
+date:   2016-03-12 11:40:18 +0800
+categories: jekyll
+tags: jekyll 端口 markdown Foxit RubyGems HTML CSS
+author: Haoyang Gao
+mathjax: true
+---
+```
+
+下面这两行代码为产生目录时使用
+```
+* content
+{:toc}
+```
+
+文章中存在的4次换行为摘要分割符，换行前的内容会以摘要的形式显示在主页Home上，进入文章页不影响。
+
+换行符的设置见配置文件`_config.yml`的 excerpt，如下：
+
+```yml
+# excerpt
+excerpt_separator: "\n\n\n\n"
+```
+
+使用 markdown 语法写文章。
+
+代码风格与 GitHub 上 README 或 issue 中的一致。使用3个\`\`\`的方式。
+
+### 5. 本地运行
+
+本地执行
+
+```
+jekyll s
+```
+
+显示
+
+```
+Configuration file: E:/lework.github.io/_config.yml
+            Source: E:/lework.github.io
+       Destination: E:/lework.github.io/_site
+ Incremental build: disabled. Enable with --incremental
+      Generating...
+                    done in 9.773 seconds.
+ Auto-regeneration: enabled for 'E:/lework.github.io'
+    Server address: http://127.0.0.1:4000/
+  Server running... press ctrl-c to stop.
+```
+
+在本地访问 localhost:4000 即可看到博客主页。

_config.yml

@@ -8,19 +8,19 @@ encoding: utf-8
 # Site settings
 title: Lework
 brief-intro: Study hard, improve every day.
-baseurl: "" # the subpath of your site, e.g. /blog
-url: "https://lework.github.io" # the base hostname & protocol for your site
+baseurl: '' # the subpath of your site, e.g. /blog
+url: 'https://lework.github.io' # the base hostname & protocol for your site
 
 permalink: /:year/:month/:day/:title/
 
 # other links
-twitter_username: 
-facebook_username: 
-github_username:  lework
+twitter_username:
+facebook_username:
+github_username: lework
 email: lework@yeah.com
 weibo_username: lework
-zhihu_username: 
-linkedIn_username: 
+zhihu_username:
+linkedIn_username:
 dribbble_username:
 
 description_footer: 本站记录我成长之路的点点滴滴！
@@ -37,7 +37,7 @@ gitalk:
   admin: lework
 utteranc_es:
   enable: true
-  repo: "lework/lework.github.io"
+  repo: 'lework/lework.github.io'
   issue-term: pathname
   theme: github-light
 
@@ -46,12 +46,13 @@ reward:
   enable: true
   wechat: /assets/images/reward/wechat.png
   alipay: /assets/images/reward/alipay.png
+
 # statistic analysis 统计代码
 # 百度统计 id，将统计代码替换为自己的百度统计id，即
 # hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
 # xxxxx字符串
-baidu_tongji_id: 
-google_analytics_id: 
+baidu_tongji_id:
+google_analytics_id:
 
 # Build settings
 markdown: kramdown

_layouts/post.html

@@ -110,3 +110,5 @@ <h2 id="comments">Comments</h2>
 }());
 </script>
 <script src="{{ "/js/pageContent.js " | prepend: site.baseurl }}" charset="utf-8"></script>
+<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
+<script src="{{ "/js/code-copy.js "}}"></script>

_sass/_clipboardjs.scss

@@ -0,0 +1,59 @@
+.copy-button {
+  cursor: pointer;
+  border: 0;
+  font-size: 10px;
+  text-transform: uppercase;
+  font-weight: 500;
+  padding: 5px;
+  color: #795548;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.copy-button:hover,
+.copy-button:focus,
+.copy-button:active {
+  outline: 0;
+  background-color: #eee9e6;
+}
+
+.copy-button:before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin-right: 3px;
+  background-size: contain;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' fill='%23795548' viewBox='0 0 512 512'%3E%3Cpath d='M161 160.5h192c-1.688-20-9.729-35.45-27.921-40.356-.446-.119-1.12-.424-1.567-.541-12.004-3.424-21.012-7.653-21.012-20.781V78.227C302.5 52.691 281.976 32 256.49 32c-25.466 0-45.99 20.691-45.99 46.227v20.595c0 13.128-8.592 17.169-20.597 20.593-.447.117-.8.61-1.266.729C170.446 125.05 162.927 140.5 161 160.5zm95.99-96.105c7.615 0 13.791 6.195 13.791 13.832 0 7.654-6.176 13.85-13.791 13.85-7.614 0-13.772-6.195-13.772-13.85 0-7.637 6.158-13.832 13.772-13.832z'/%3E%3Cpath d='M405.611 63.5H331.5v13.988c0 10.583 9.193 19.012 19.507 19.012h37.212c6.667 0 12.099 5.435 12.44 12.195l.085 327.1c-.322 6.432-5.303 11.546-11.514 12.017l-264.418.031c-6.211-.471-11.149-5.695-11.472-12.126l-.085-327.014c.322-6.761 5.858-12.203 12.506-12.203h37.231c10.313 0 18.507-8.429 18.507-19.012V63.5h-73.131C93.25 63.5 80.5 76.058 80.5 91.575v360.38c0 15.502 12.75 28.545 27.869 28.545h297.242c15.138 0 26.889-13.043 26.889-28.545V91.575c0-15.517-11.751-28.075-26.889-28.075z'/%3E%3Cpath d='M144.5 192.5h112v32h-112zM144.5 384.5h160v32h-160zM144.5 320.5h129v32h-129zM144.5 256.5h208v32h-208z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  position: relative;
+  vertical-align: middle;
+  top: -2px;
+}
+
+.content-section {
+  padding: 40px;
+}
+.content-section--paste {
+  margin-top: 60px;
+  background-color: #cfd8dc;
+}
+.content-section--paste h1 {
+  font-size: 12px;
+  color: #546e7a;
+  text-transform: uppercase;
+}
+
+#paste-content {
+  border: 2px dashed #b0bec5;
+  min-height: 160px;
+}
+#paste-content:focus {
+  outline: 0;
+  border-color: #90a4ae;
+}
+#paste-content pre {
+  margin: 0 !important;
+}

_sass/_syntax-highlighting.scss

@@ -31,7 +31,7 @@ pre {
 
 .highlight {
     border-radius: 3px;
-
+    position: relative;
     background: #272822;
     .hll { background-color: #272822; }
     .c { color: #75715e } /* Comment */

css/main.scss

@@ -45,7 +45,7 @@
  * variables
  */
 // Import partials from `sass_dir` (defaults to `_sass`)
-@import "reset", "header", "post", "page", "syntax-highlighting", "index", "demo", "footer", "scrollbar", "backToTop", "nav", "reward";
+@import "reset", "header", "post", "page", "syntax-highlighting", "index", "demo", "footer", "scrollbar", "backToTop", "nav", "reward", "clipboardjs";
 // 两个人在列车上相遇
 // 一段旅程充满了诗意
 // 你突然说你要下车

js/code-copy.js

@@ -0,0 +1,45 @@
+  (function(){
+    // Get the elements.
+    // - the 'pre' element.
+    // - the 'div' with the 'paste-content' id.
+    var pre = document.getElementsByTagName('pre');
+    var pasteContent = document.getElementById('paste-content');
+    // Add a copy button in the 'pre' element.
+    // which only has the className of 'language-'.
+    for (var i = 0; i < pre.length; i++) {
+      // append copy button only after <pre><code>...</code></pre> sections
+      if(pre[i].firstChild.nodeName == 'CODE' ){
+        var button           = document.createElement('button');
+        button.className = 'copy-button';
+        button.textContent = 'Copy';
+        pre[i].appendChild(button);
+      }
+      // }
+    };
+    // Run Clipboard
+    var copyCode = new ClipboardJS('.copy-button', {
+      target: function(trigger) {
+        return trigger.previousElementSibling;
+      }
+    });
+    // On success:
+    // - Change the "Copy" text to "Copied".
+    // - Swap it to "Copy" in 2s.
+    // - Lead user to the "contenteditable" area with Velocity scroll.
+    copyCode.on('success', function(event) {
+      event.clearSelection();
+      event.trigger.textContent = 'Copied';
+      window.setTimeout(function() {
+        event.trigger.textContent = 'Copy';
+      }, 2000);
+    });
+    // On error (Safari):
+    // - Change the  "Press Ctrl+C to copy"
+    // - Swap it to "Copy" in 2s.
+    copyCode.on('error', function(event) {
+      event.trigger.textContent = 'Press "Ctrl + C" to copy';
+      window.setTimeout(function() {
+        event.trigger.textContent = 'Copy';
+      }, 5000);
+    });
+  })();

page/4about.md

@@ -12,9 +12,9 @@ type: page
 
 本博采用 Jekyll[[1]][1] 搭建，Markdown[[2]][2] 写作，托管于 GitHub[[3]][3]。
 
-自 2019 年 06 月 13 日起，本站已运行 <span id="days"></span> 天，截至 {{ site.time | date: "%Y 年 %m 月 %d 日" }}，写了博文 {{ site.posts.size }} 篇，{% assign count = 0 %}{% for post in site.posts %}{% assign single_count = post.content | strip_html | strip_newlines | remove: ' ' | size %}{% assign count = count | plus: single_count %}{% endfor %}{% if count > 10000 %}{{ count | divided_by: 10000 }} 万 {{ count | modulo: 10000 }}{% else %}{{ count }}{% endif %} 字。
+自 2016 年 07 月 07 日起，本站已运行 <span id="days"></span> 天，截至 {{ site.time | date: "%Y 年 %m 月 %d 日" }}，写了博文 {{ site.posts.size }} 篇，{% assign count = 0 %}{% for post in site.posts %}{% assign single_count = post.content | strip_html | strip_newlines | remove: ' ' | size %}{% assign count = count | plus: single_count %}{% endfor %}{% if count > 10000 %}{{ count | divided_by: 10000 }} 万 {{ count | modulo: 10000 }}{% else %}{{ count }}{% endif %} 字。
 
-即日起，本博客的原创内容，均采用知识共享组织（Creative Commons）的"署名-非商业性使用 3.0 中国大陆"(CC BY-NC 3.0 CN[[4]][4])许可。
+即日起，本博客的原创内容，均采用知识共享组织（Creative Commons）的 "署名-非商业性使用 3.0 中国大陆 (CC BY-NC 3.0 CN)[[4]][4]" 许可。
 
 ## 博主
 
@@ -32,6 +32,17 @@ type: page
 - Ansible 学习群 <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=76a382732441da12c7b6bc8393cdacdecd38f23a840abb8685bb55ac33f8fdd9"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Ansible学习群" title="Ansible学习群"></a>
 - Ansible 学习群 2 <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=619146ae673362fbfa81f78d3646df3703ae324d720396a9d9c543470b0f0ff6"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="Ansible学习群2" title="Ansible学习群2"></a>
 
+## 博客历程
+
+- 2019-06-13 使用 Jekyll 平台 写博客，托管在 Gihub 中
+- 2019-06-15 博客文章从简书迁移到 Jekyll 中
+- 2019-07-23 使用 gitalk 评论
+- 2019-07-24 增加搜索功能
+- 2019-09-04 使用 utteranc.es 评论
+- 2019-10-17 增加赞赏支持功能
+- 2019-12-10 文章中增加 "原文地址" 和 "字数统计"
+- 2019-12-11 代码块增加 "Copy" 功能
+
 ## 赞赏奖励
 
 若您觉得本博客所创造的内容对您有所帮助，可考虑略表心意，支持一下。
@@ -46,7 +57,7 @@ type: page
 {% include comments.html %}
 
 <script>
-var days = 0, daysMax = Math.floor((Date.now() / 1000 - {{ "2019-06-13" | date: "%s" }}) / (60 * 60 * 24));
+var days = 0, daysMax = Math.floor((Date.now() / 1000 - {{ "2016-07-07" | date: "%s" }}) / (60 * 60 * 24));
 (function daysCount(){
     if(days > daysMax){
         document.getElementById('days').innerHTML = daysMax;