feat: add post copyright info in _config.yml

_config.yml

@@ -179,6 +179,13 @@ toc:
   expand_all: true
 
 
+# ---------------------------------------------------------------------------------------
+# # Post copyright info
+# ---------------------------------------------------------------------------------------
+copyright_info:
+  enable: true
+
+
 # ---------------------------------------------------------------------------------------
 # Footer settings
 # ---------------------------------------------------------------------------------------

languages/en.yml

@@ -28,3 +28,10 @@ read_more: Read more
 wordcount: Words
 min2read: Mins
 changelog: Changelog
+copyright:
+  author: Post author
+  title: Post title
+  link: Post link
+  create_time: Create time
+  license_title: Copyright Notice
+  license_content: "All articles in this blog are licensed under %s unless stating additionally."

languages/zh-CN.yml

@@ -28,3 +28,10 @@ read_more: 阅读全文
 wordcount: 字
 min2read: 分钟
 changelog: 更新日志
+copyright:
+  title: 本文标题
+  author: 本文作者
+  link: 本文链接
+  create_time: 创建时间
+  license_title: 版权声明
+  license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"

layout/_partial/article-copyright-info.ejs

@@ -0,0 +1,13 @@
+<div class="article-copyright-info-container">
+    <ul>
+        <li><%- __('copyright.title') %>：<%= page.title %></li>
+        <li><%- __('copyright.author') %>：<%= theme.base_info.author || config.author %></li>
+        <li><%- __('copyright.create_time') %>：<%= date(page.date, 'YYYY-MM-DD HH:mm:ss') %></li>
+        <li>
+            <%- __('copyright.link') %>：<%= getPostUrl((theme.base_info.url || config.url), page.path) %>
+        </li>
+        <li>
+            <%- __('copyright.license_title') %>：<%- __('copyright.license_content', '<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">BY-NC-SA</a>') %>
+        </li>
+    </ul>
+</div>

layout/article-content.ejs

@@ -32,6 +32,12 @@
             <%- page.content %>
         </div>
 
+        <% if (theme.copyright_info.enable) { %>
+            <div class="post-copyright-info">
+                <%- partial('_partial/article-copyright-info') %>
+            </div>
+        <% } %>
+
         <% if (page.prev || page.next) { %>
             <div class="article-nav">
                 <% if (page.prev) { %>

scripts/filters/link-handle.js

@@ -0,0 +1,41 @@
+/* global hexo */
+
+'use strict'
+
+hexo.extend.filter.register('after_post_render', function (data) {
+
+    const config = this.config;
+    const url = new URL(config.url);
+    const siteHost = url.hostname || config.url;
+
+    // Match 'a' tags that don't contain html children.
+    const regPureATag = /<a([^>]*)href="([^"]*)"([^>]*)>([^<]*)<\/a>/gim
+
+    data.content = data.content.replace(regPureATag, function (
+      match,
+      attrBegin,
+      href,
+      attrEnd,
+      html
+    ) {
+      // Exit if the href attribute doesn't exists.
+      if (!href) return match;
+
+      let link = '';
+      try {
+        link = new URL(href);
+      } catch (e) {
+        // Invalid url, e.g. Anchor link.
+        return match;
+      }
+
+      // Exit if the url has same host with `config.url`, which means isn't an external link.
+      if (!link.protocol || link.hostname === siteHost) return match;
+
+      return (
+        `<a class="link" ${attrBegin} href="${href}" ${attrEnd}>${html}<i class="fa fa-external-link"></i></a>`
+      )
+    })
+  },
+  0
+)

scripts/helpers/helper.js

@@ -26,3 +26,12 @@ hexo.extend.helper.register('createNewArchivePosts', function (posts) {
 hexo.extend.helper.register('getLevel', function (postCount) {
   return Math.ceil(postCount / 10);
 });
+
+const url = require('url');
+hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
+  if (rootUrl) {
+    return url.parse(rootUrl).href + path;
+  } else {
+    return path;
+  }
+});

source/css/layout/_partial/article-copyright-info.styl

@@ -0,0 +1,32 @@
+.article-copyright-info-container {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--second-background-color);
+  padding: 6px 6px 6px 16px;
+  font-size: 0.98em;
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+    width: 6px;
+    height: 100%;
+    background: #dd0c0c;
+  }
+
+  ul {
+
+    li {
+      margin-bottom: 3px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}

source/css/layout/_partial/comment/comment.styl

@@ -11,8 +11,11 @@ if (hexo-config('comment.valine.enable') && hexo-config('comment.gitalk.enable')
 }
 
 .comments-container {
+
+  margin-top: $component-interspace;
+
   #comment-anchor {
     width: 100%;
-    height: 20px;
+    height: $component-interspace;
   }
 }

source/css/layout/article-content.styl

@@ -90,16 +90,20 @@ $avatarWidth = 46px;
 
 
   .article-content {
-    margin-top: 30px;
+    margin-top: $component-interspace;
     text-align: justify;
-    padding-bottom: 30px;
+    padding-bottom: 10px;
     border-bottom: 1px solid var(--border-color);
   }
 
+  .post-copyright-info {
+    margin-top: $component-interspace;
+    width: 100%;
+  }
 
   .article-nav {
     height: 40px;
-    margin: 40px 0;
+    margin-top: $component-interspace;
 
     .article-prev {
       float: left;
@@ -126,5 +130,7 @@ $avatarWidth = 46px;
     }
 
   }
+
+
 }
 

source/css/layout/common/basic.styl

@@ -38,7 +38,6 @@ html, body {
   +ils-tablet() {
     font-size: $default-font-size * 0.96;
     line-height: $default-font-line-height * 0.96;
-
   }
 
   +ils-mobile() {
@@ -76,6 +75,7 @@ a {
 
   &:hover, &:active {
     color: var(--primary-color);
+    text-decoration: none !important;
   }
 
 }

source/css/layout/common/magic-theme.styl

@@ -7,7 +7,7 @@ hover-style(scaleX, scaleY) {
 
   transition();
 
-  box-shadow: 2px 2px 8px var(--shadow-color);
+  box-shadow: 2px 2px 6px var(--shadow-color);
 
   &:hover {
 
@@ -16,7 +16,7 @@ hover-style(scaleX, scaleY) {
     }
 
     if (hexo-config('style.hover.shadow')) {
-      box-shadow: 3px 3px 12px var(--shadow-hover-color);
+      box-shadow: 3px 3px 10px var(--shadow-hover-color);
     }
   }
 }

source/css/layout/common/markdown.styl

@@ -14,7 +14,33 @@
   }
 
   a {
-    color: #2050ff;
+    position: relative;
+    outline: 0;
+    text-decoration: none;
+    overflow-wrap: break-word;
+    cursor: pointer;
+
+    .fa {
+      margin-left: 5px;
+      position: relative;
+      transform: translateY(10%);
+    }
+
+    &:hover {
+      &::after {
+        background: var(--primary-color);
+      }
+    }
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 1px;
+      top: 108%;
+      left: 0;
+      background: var(--second-text-color);
+    }
   }
 
   a:hover {

source/css/layout/common/variables.styl

@@ -53,8 +53,8 @@ $primary-color = $temp-color ? convert($temp-color) : #0066CC;
 
 // ====================== light mode color ======================
 $background-color = #fff;
-$second-background-color = darken($background-color, 2%);
+$second-background-color = darken($background-color, 3%);
-$default-text-color = #3f3f3f;
+$default-text-color = #505050;
 $first-text-color = darken($default-text-color, 10%);
 $second-text-color = darken($default-text-color, 5%);
 $third-text-color = lighten($default-text-color, 40%);
@@ -65,11 +65,12 @@ $shadow-color = rgba(0, 0, 0, 0.2);
 $shadow-hover-color = rgba(0, 0, 0, 0.28);
 $scroll-bar-color = lighten($default-text-color, 20%);
 $scroll-bar-bg-color = darken($background-color, 10%);
+$link-color = darken($default-text-color, 10%);
 
 // ====================== dark mode color ======================
 $dark-primary-color = $primary-color;
-$dark-background-color = #2f2e31;
+$dark-background-color = #2f2f2f;
-$dark-second-background-color = darken($dark-background-color, 2%);
+$dark-second-background-color = darken($dark-background-color, 3%);
 $dark-default-text-color = #b9b5c2;
 $dark-first-text-color = lighten($dark-default-text-color, 30%);
 $dark-second-text-color = lighten($dark-default-text-color, 20%);
@@ -81,7 +82,7 @@ $dark-shadow-color = rgba(128, 128, 128, 0.2);
 $dark-shadow-hover-color = rgba(128, 128, 128, 0.28);
 $dark-scroll-bar-color = darken($dark-default-text-color, 30%);
 $dark-scroll-bar-bg-color = lighten($dark-background-color, 10%);
-
+$dark-link-color = lighten($dark-default-text-color, 10%);
 
 // ========================================================================
 // font
@@ -110,6 +111,7 @@ root-color(mode) {
   --shadow-hover-color: mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color;
   --scroll-bar-color: mode == 'light' ? $scroll-bar-color : $dark-scroll-bar-color;
   --scroll-bar-bg-color: mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color;
+  --link-color: mode == 'light' ? $link-color : $dark-link-color;
 }
 
 

source/css/style.styl

@@ -16,6 +16,7 @@
 @import "layout/_partial/image-viewer.styl"
 @import "layout/category-list.styl"
 @import "layout/_partial/article-meta-info.styl"
+@import "layout/_partial/article-copyright-info.styl"
 @import "layout/home-content.styl"
 @import "layout/archive-content.styl"
 @import "layout/article-content.styl"

source/js/utils.js

@@ -3,7 +3,7 @@ ILS.utils = {
   themeInfo: {
     author: 'XPoet',
     name: 'ILS',
-    version: '2.1.3',
+    version: '2.2.0',
     repository: 'https://github.com/XPoet/hexo-theme-ils'
   },