feat(shortcode): add link shortcode (#179)

* feat(shortcode): add link shortcode * docs: add docs for link shortcode * docs: fix 'mailto' in link shortcode docs error
pogor-dev · Mar 17, 2020 · 6b03c71 · 6b03c71
1 parent f9dba2e
commit 6b03c71
Show file tree

Hide file tree

Showing 30 changed files with 375 additions and 252 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](https://app.circleci.com/pipelines/github/dillonzq/LoveIt)
 
-English README | [中文说明](README.zh-cn.md)
+English README | [中文说明](https://github.com/dillonzq/LoveIt/blob/master/README.zh-cn.md)
 
 **LoveIt** is a **clean**, **elegant** but **advanced** blog theme for [Hugo](https://gohugo.io/).
 
@@ -14,7 +14,7 @@ It is based on the original [LeaveIt Theme](https://github.com/liuzc/LeaveIt/) a
 Since the three themes have a similar look, if you have questions about their differences,
 read [Why choose LoveIt](#why-choose-loveit) so that you can choose the one that works best for you.
 
-![Hugo Theme LoveIt](https://github.com/dillonzq/LoveIt/raw/develop/images/Apple-Devices-Preview.png)
+![Hugo Theme LoveIt](https://github.com/dillonzq/LoveIt/raw/master/images/Apple-Devices-Preview.png)
 
 ## [Demo Site](https://hugoloveit.com/)
 

diff --git a/README.zh-cn.md b/README.zh-cn.md
@@ -5,15 +5,15 @@
 [![License](https://img.shields.io/github/license/dillonzq/LoveIt?style=flat-square)](https://github.com/dillonzq/LoveIt/blob/master/LICENSE)
 [![CircleCI](https://img.shields.io/circleci/build/github/dillonzq/LoveIt/develop?label=CI&style=flat-square&logo=circleci)](https://app.circleci.com/pipelines/github/dillonzq/LoveIt)
 
-[English README](README.md) | 中文说明
+[English README](https://github.com/dillonzq/LoveIt/blob/master/README.md) | 中文说明
 
 [LoveIt](https://github.com/dillonzq/LoveIt) 是一个**简洁**、**优雅**且**高效**的 [Hugo](https://gohugo.io/) 博客主题。
 
 它的原型基于 [LeaveIt 主题](https://github.com/liuzc/LeaveIt/) 和 [KeepIt 主题](https://github.com/liuzc/LeaveIt/)。
 
 由于三个主题外观的相似性，如果你对于它们的不同之处有疑问，请阅读 [为什么选择 LoveIt](#为什么选择-LoveIt)，以便你能选择最适合你的一个。
 
-![Hugo 主题 LoveIt](https://github.com/dillonzq/LoveIt/raw/develop/images/Apple-Devices-Preview.png)
+![Hugo 主题 LoveIt](https://github.com/dillonzq/LoveIt/raw/master/images/Apple-Devices-Preview.png)
 
 ## 主题[预览](https://hugoloveit.com/zh-cn/)
 

diff --git a/assets/css/_core/_base.scss b/assets/css/_core/_base.scss
@@ -60,20 +60,9 @@ body {
 }
 
 a {
-  color: $global-link-color;
   text-decoration: none;
-
-  &:hover {
-    color: $global-link-hover-color;
-  }
-
-  .dark-theme & {
-    color: $global-link-color-dark;
-
-    &:hover {
-      color: $global-link-hover-color-dark;
-    }
-  }
 }
 
+@include link(true, true);
+
 @import "../_partial/fixed-button";
diff --git a/assets/css/_mixin/_index.scss b/assets/css/_mixin/_index.scss
@@ -0,0 +1,2 @@
+@import "_link";
+@import "_summary";
diff --git a/assets/css/_mixin/_link.scss b/assets/css/_mixin/_link.scss
@@ -0,0 +1,18 @@
+@mixin link($light, $dark) {
+  a {
+    color: if($light, $global-link-color, $single-link-color);
+
+    .dark-theme & {
+      color: if($dark, $global-link-color-dark, $single-link-color-dark);
+    }
+
+    &:active,
+    &:hover {
+      color: if($light, $global-link-hover-color, $single-link-hover-color);
+
+      .dark-theme & {
+        color: if($dark, $global-link-hover-color-dark, $single-link-hover-color-dark);
+      }
+    }
+  }
+}
diff --git a/assets/css/_partial/_home/_summary.scss → assets/css/_mixin/_summary.scss b/assets/css/_partial/_home/_summary.scss → assets/css/_mixin/_summary.scss
@@ -90,21 +90,7 @@
         }
       }
 
-      a {
-        color: $global-link-color;
-
-        .dark-theme & {
-          color: $global-link-color-dark;
-        }
-
-        &:hover {
-          color: $global-link-hover-color;
-
-          .dark-theme & {
-            color: $global-link-hover-color-dark;
-          }
-        }
-      }
+      @include link(true, true);
 
       b, strong {
         .dark-theme & {
@@ -120,40 +106,12 @@
       align-items: center;
       font-size: .875rem;
 
-      a {
-        color: $single-link-color;
-
-        .dark-theme & {
-          color: $single-link-color-dark;
-        }
-
-        &:hover {
-          color: $single-link-hover-color;
-
-          .dark-theme & {
-            color: $single-link-hover-color-dark;
-          }
-        }
-      }
+      @include link(false, false);
 
       .post-tags {
         padding: 0;
 
-        a {
-          color: $global-link-color;
-
-          .dark-theme & {
-            color: $global-link-color-dark;
-          }
-
-          &:hover {
-            color: $global-link-hover-color;
-
-            .dark-theme & {
-              color: $global-link-hover-color-dark;
-            }
-          }
-        }
+        @include link(true, true);
       }
     }
   }

diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss
@@ -1,6 +1,4 @@
 /** Home **/
-@import "../_partial/_home/summary";
-
 @mixin page-home($profile, $posts) {
   .home {
     @if $profile {

diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -26,21 +26,7 @@
       color: $global-font-secondary-color-dark;
     }
 
-    a {
-      color: $single-link-color;
-
-      .dark-theme & {
-        color: $global-link-color-dark;
-      }
-
-      &:hover {
-        color: $single-link-hover-color;
-
-        .dark-theme & {
-          color: $global-link-hover-color-dark;
-        }
-      }
-    }
+    @include link(false, true);
 
     .author {
       font-size: 1.05rem;
@@ -102,22 +88,19 @@
       }
     }
 
+    @include link(false, false);
+
     a {
       word-break: break-all;
       word-break: break-word;
-      color: $single-link-color;
 
-      .dark-theme &, .dark-theme & b, .dark-theme & strong {
+      .dark-theme & b, .dark-theme & strong {
         color: $single-link-color-dark;
       }
     }
 
-    a:hover {
-      color: $single-link-hover-color;
-
-      .dark-theme &, .dark-theme & b, .dark-theme & strong {
-        color: $single-link-hover-color-dark;
-      }
+    .dark-theme a:hover b, .dark-theme a:hover strong {
+      color: $single-link-hover-color-dark;
     }
 
     ul {

diff --git a/assets/css/_partial/_archive/_tags.scss b/assets/css/_partial/_archive/_tags.scss
@@ -1,6 +1,8 @@
 .tag-cloud-tags {
   margin: 10px 0;
 
+  @include link(true, true);
+
   a {
     display: inline-block;
     position: relative;
@@ -14,23 +16,18 @@
     &:active,
     &:focus,
     &:hover {
-      color: $global-link-hover-color;
       -webkit-transform: scale(1.2);
       -moz-transform: scale(1.2);
       -ms-transform: scale(1.2);
       -o-transform: scale(1.2);
       transform: scale(1.2);
-
-      .dark-theme & {
-        color: $global-link-hover-color-dark;
-      }
     }
 
     small {
       color: $global-font-secondary-color;
 
       .dark-theme & {
-        color: $global-link-hover-color-dark;
+        color: $global-font-secondary-color-dark;
       }
     }
   }

diff --git a/assets/css/_partial/_single/_code.scss b/assets/css/_partial/_single/_code.scss
@@ -46,23 +46,12 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     }
   }
 
-  .lntd {
-    &:first-child {
-      width: 1.2rem;
-
-      /* LineNumbersTable */
-      .lnt {
-        color: $code-info-color;
-      }
-
-      /* LineHighlight */
-      .hl {
-        font-weight: bolder;
-      }
-    }
+  .ln {
+    padding-right: .8rem;
+  }
 
+  .lntd {
     &:last-child {
-      /* LineHighlight */
       .hl {
         display: block;
         background-color: darken($code-background-color, 5%);
@@ -73,6 +62,14 @@ code, pre, .highlight table, .highlight tr, .highlight td {
       }
     }
   }
+
+  .ln, .lnt {
+    color: $global-font-secondary-color;
+
+    .dark-theme & {
+      color: $global-font-secondary-color-dark;
+    }
+  }
 }
 
 .highlight {
@@ -103,6 +100,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
   table, tr, td {
     margin: 0;
     border: none !important;
+    white-space: nowrap;
   }
 
   td {
@@ -119,21 +117,7 @@ code, pre, .highlight table, .highlight tr, .highlight td {
     padding: .4rem .8rem;
     background-color: darken($code-background-color, 5%);
 
-    a {
-      color: $single-link-color;
-
-      .dark-theme & {
-        color: $single-link-color-dark;
-      }
-    }
-
-    a:hover {
-      color: $single-link-hover-color;
-
-      .dark-theme &:hover {
-        color: $single-link-hover-color-dark;
-      }
-    }
+    @include link(false, false);
 
     .dark-theme & {
       background-color: darken($code-background-color-dark, 5%);

diff --git a/assets/css/_partial/_single/_footer.scss b/assets/css/_partial/_single/_footer.scss
@@ -21,21 +21,7 @@
           color: $global-font-secondary-color-dark;
         }
 
-        a {
-          color: $single-link-color;
-
-          .dark-theme & {
-            color: $single-link-color-dark;
-          }
-
-          &:hover {
-            color: $single-link-hover-color;
-
-            .dark-theme & {
-              color: $single-link-hover-color-dark;
-            }
-          }
-        }
+        @include link(false, false);
       }
 
       .post-info-license {
@@ -51,21 +37,7 @@
         font-size: 0.8rem;
         width: 8rem;
 
-        a {
-          color: $single-link-color;
-
-          .dark-theme & {
-            color: $single-link-color-dark;
-          }
-
-          &:hover {
-            color: $single-link-hover-color;
-
-            .dark-theme & {
-              color: $single-link-hover-color-dark;
-            }
-          }
-        }
+        @include link(false, false);
       }
     }
   }

diff --git a/assets/css/style.template.scss b/assets/css/style.template.scss
@@ -11,6 +11,8 @@ $header-normal-mode-mobile: {{ if eq .Site.Params.header.mobileMode "normal" }}t
   @import "_override";
 {{- end -}}
 
+@import "_mixin/index";
+
 @import "_core/normalize";
 @import "_core/base";
 @import "_core/layout";

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
@@ -835,12 +835,11 @@ enableEmoji = true
   [markup.highlight]
     codeFences = true
     guessSyntax = true
-    lineNoStart = 1
     lineNos = true
-    lineNumbersInTable = true
+    lineNumbersInTable = false
+    # false is a necessary configuration (https://github.com/dillonzq/LoveIt/issues/158)
+    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
     noClasses = false
-    style = "monokai"
-    tabWidth = 4
   # Goldmark is from Hugo 0.60 the default library used for Markdown
   # Goldmark 是 Hugo 0.60 以来的默认 Markdown 解析库
   [markup.goldmark]

diff --git a/exampleSite/config/css/_override.scss b/exampleSite/config/css/_override.scss
@@ -3,6 +3,6 @@
 // 覆盖变量
 // ==============================
 
-@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@800&display=swap');
 
-$header-title-font-family: 'Baloo 2', $global-font-family;
+$header-title-font-family: 'Nunito', $global-font-family;