diff --git a/README.md b/README.md index e69de29..a352df2 100644 --- a/README.md +++ b/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 即可看到博客主页。 diff --git a/_config.yml b/_config.yml index 7891933..2f90378 100644 --- a/_config.yml +++ b/_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 diff --git a/_layouts/post.html b/_layouts/post.html index 086e45e..0650e5a 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -110,3 +110,5 @@

Comments

}()); + + \ No newline at end of file diff --git a/_sass/_clipboardjs.scss b/_sass/_clipboardjs.scss new file mode 100644 index 0000000..433f9ee --- /dev/null +++ b/_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; +} diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index 5059064..bbd2e56 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_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 */ diff --git a/assets/images/blog/clipboard.svg b/assets/images/blog/clipboard.svg new file mode 100644 index 0000000..af9bb6e --- /dev/null +++ b/assets/images/blog/clipboard.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + diff --git a/css/main.scss b/css/main.scss index 3647598..d7b7442 100644 --- a/css/main.scss +++ b/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"; // 两个人在列车上相遇 // 一段旅程充满了诗意 // 你突然说你要下车 diff --git a/js/code-copy.js b/js/code-copy.js new file mode 100644 index 0000000..5abe759 --- /dev/null +++ b/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 
...
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); + }); + })(); \ No newline at end of file diff --git a/page/4about.md b/page/4about.md index 96b0ce4..c327e07 100644 --- a/page/4about.md +++ b/page/4about.md @@ -12,9 +12,9 @@ type: page 本博采用 Jekyll[[1]][1] 搭建，Markdown[[2]][2] 写作，托管于 GitHub[[3]][3]。 -自 2019 年 06 月 13 日起，本站已运行 天，截至 {{ 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 日起，本站已运行 天，截至 {{ 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 学习群 Ansible学习群 - Ansible 学习群 2 Ansible学习群2 +## 博客历程 + +- 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 %}