实现代码高亮及代码拷贝至剪切板功能

assets/styles/components/post.less

@@ -33,6 +33,7 @@
  margin: 0.5rem 0;
  padding-bottom: 1.5rem;
  font-size: 0;
+ display: flex;
 
  @media (min-width: 768px) {
  margin: 1.5rem 0;

assets/styles/lib/hightlight.less

@@ -0,0 +1,84 @@
+/*
+
+Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <[email protected]>
+
+*/
+
+.hljs {
+ display: block;
+ overflow-x: auto;
+ padding: 0.5em;
+ background: #002b36;
+ color: #839496;
+}
+
+.hljs-comment,
+.hljs-quote {
+ color: #586e75;
+}
+
+/* Solarized Green */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-addition {
+ color: #859900;
+}
+
+/* Solarized Cyan */
+.hljs-number,
+.hljs-string,
+.hljs-meta .hljs-meta-string,
+.hljs-literal,
+.hljs-doctag,
+.hljs-regexp {
+ color: #2aa198;
+}
+
+/* Solarized Blue */
+.hljs-title,
+.hljs-section,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+ color: #268bd2;
+}
+
+/* Solarized Yellow */
+.hljs-attribute,
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-class .hljs-title,
+.hljs-type {
+ color: #b58900;
+}
+
+/* Solarized Orange */
+.hljs-symbol,
+.hljs-bullet,
+.hljs-subst,
+.hljs-meta,
+.hljs-meta .hljs-keyword,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-link {
+ color: #cb4b16;
+}
+
+/* Solarized Red */
+.hljs-built_in,
+.hljs-deletion {
+ color: #dc322f;
+}
+
+.hljs-formula {
+ background: #073642;
+}
+
+.hljs-emphasis {
+ font-style: italic;
+}
+
+.hljs-strong {
+ font-weight: bold;
+}

assets/styles/main.less

@@ -1,6 +1,7 @@
 @import './lib/grid';
 @import './lib/varibles';
 @import './lib/btn';
+@import './lib/hightlight';
 
 @font-face {
  font-family: Chinese Quote;
@@ -289,6 +290,25 @@ mark {
  }
 }
 
+.layout-post-item pre {
+ position: relative;
+}
+
+pre>span.copy-code {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 12px;
+ line-height: 1;
+ color: hsla(0, 0%, 54.9%, .8);
+ transition: color .1s;
+ user-select: none;
+}
+
+pre>span.copy-code:hover {
+ color: #FFF;
+}
+
 
 
 @import './components/header';

templates/includes/head.ejs

@@ -9,7 +9,9 @@
 
 <script type="text/javascript" src='<%= themeConfig.domain %>/media/scripts/jquery.js'></script>
 <script type="text/javascript" src="https://cdn.bootcss.com/highlight.js/9.15.10/highlight.min.js"></script>
-
+<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
+<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/dart.min.js"></script>
+<script src="https://cdn.bootcss.com/highlight.js/9.15.10/languages/go.min.js"></script>
 <script>
  hljs.initHighlightingOnLoad();
 </script>

templates/post.ejs

@@ -281,5 +281,94 @@
 
  </div>
 </body>
+<!-- 更进一步的拿来主义，这段代码及一定的 CSS 样式拷贝自 Gridea 的 Next 主题：https://github.com/hsxyhao/gridea-theme-next，😺 -->
+<script>
+ // 拿来主义(真香)^_^，Clipboard 实现摘自掘金 https://juejin.im/post/5aefeb6e6fb9a07aa43c20af
+ window.Clipboard = (function (window, document, navigator) {
+ var textArea,
+ copy;
+
+ // 判断是不是ios端
+ function isOS() {
+ return navigator.userAgent.match(/ipad|iphone/i);
+ }
+ // 创建文本元素
+ function createTextArea(text) {
+ textArea = document.createElement('textArea');
+ textArea.value = text;
+ textArea.style.width = 0;
+ textArea.style.height = 0;
+ textArea.clientHeight = 0;
+ textArea.clientWidth = 0;
+ document.body.appendChild(textArea);
+ }
+ // 选择内容
+ function selectText() {
+ var range,
+ selection;
+
+ if (isOS()) {
+ range = document.createRange();
+ range.selectNodeContents(textArea);
+ selection = window.getSelection();
+ selection.removeAllRanges();
+ selection.addRange(range);
+ textArea.setSelectionRange(0, 999999);
+ } else {
+ textArea.select();
+ }
+ }
+
+ // 复制到剪贴板
+ function copyToClipboard() {
+ try {
+ document.execCommand("Copy")
+ } catch (err) {
+ alert("复制错误！请手动复制！")
+ }
+ document.body.removeChild(textArea);
+ }
+
+ copy = function (text) {
+ createTextArea(text);
+ selectText();
+ copyToClipboard();
+ };
+
+ return {
+ copy: copy
+ };
+ })(window, document, navigator);
+
+ function copyCode(e) {
+ if (e.srcElement.tagName === 'SPAN' && e.srcElement.classList.contains('copy-code')) {
+ let code = e.currentTarget.querySelector('code');
+ var text = code.innerText;
+ if (e.srcElement.textContent === '复制成功') {
+ console.log('复制操作频率过高');
+ return;
+ }
+ e.srcElement.textContent = '复制成功';
+ (function (elem) {
+ setTimeout(() => {
+ if (elem.textContent === '复制成功') {
+ elem.textContent = '复制代码'
+ }
+ }, 1000);
+ })(e.srcElement)
+ Clipboard.copy(text);
+ }
+ }
+
+ let pres = document.querySelectorAll('pre');
+ pres.forEach(pre => {
+ let code = pre.querySelector('code');
+ let copyElem = document.createElement('span');
+ copyElem.classList.add('copy-code');
+ copyElem.textContent = '复制代码';
+ pre.appendChild(copyElem);
+ pre.onclick = copyCode
+ })
+</script>
 
 </html>

templates/tags.ejs

@@ -28,7 +28,9 @@
  <div class="card-item">
  <div class="list-content">
  <div class="list-body">
- <div class="title" href=""><span> <%= tag.count %> </span> 篇文章</div>
+ <a class="title" href="<%= tag.link %>"><span>
+ <%= tag.count %>
+ </span> 篇文章</a>
  </div>
  </div>
  </div>