feat(copyright): 精确到文章的版权声明

授权种类：CC BY-NC-SA 4.0，禁止转载引用，原作许可协议，来自互联网，允许规范转载，允许付费转载
volantis-x · Jun 10, 2022 · 1621fbb · 1621fbb
1 parent 5d5c9d5
commit 1621fbb
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 10 deletions.
diff --git a/_config.yml b/_config.yml
@@ -210,6 +210,40 @@ article:
         content:
           - '博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议'
           - permalink
+         # 自定义版权组件：精细到文章的版权声明
+        custom: true # 开启后替代上方内容的版权显示
+        customData:
+          default: type1  # 默认授权声明
+          #############################
+          # 你可以在文章的 front-matter 覆盖默认版权声明
+          # 配置示例（均可选）： 
+          # copyright:
+          #   type: type3           # 当前文章版权声明类型
+          #   author: 张三          # 本文作者
+          #   ref:                  # 原文出处
+          #     title:              # 原文出处 - 标题
+          #     url:                # 原文出处 - 链接
+          #############################
+          rules:
+            type1: 
+              text: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh#" target="_blank">CC BY-NC-SA 4.0</a>
+              desc: 署名-非商业性使用-相同方式共享 4.0 国际。
+            type2: 
+              text: 禁止转载引用
+              desc: 除非获得原作者的单独授权，任何第三方不得转载！
+            type3: 
+              text: 原作许可协议
+              desc: 本文转载自他站，转载或引用本文时，请遵守原作许可协议！
+            type4: 
+              text: 来自互联网
+              desc: 本文来自互联网，未知来源，侵权请联系删除。
+            type5:
+              text: 允许规范转载
+              desc: 转载请保留本文转载地址，著作权归作者所有！
+            type6:
+              text: 允许付费转载
+              desc: 您可以联系作者通过付费方式获得授权。
+            # 还能自行添加更多
       # ----------------
       # 打赏组件 (for layout: post)
       donate:
@@ -1117,6 +1151,9 @@ color_scheme:
     list_hl: 'mix($color-theme, #000, 80)'
     # 辅助性文字
     meta: '#888'
+
+    # 版权卡片背景色
+    copyright_bkg: '#f5f5f5'
   # ------------
   # 暗色主题
   # https://www.maijisheji.com/2094.html
@@ -1156,6 +1193,8 @@ color_scheme:
     list_hl: 'mix($color-theme, #fff, 80)'
     # 辅助性文字              #  Dark Grey 5
     meta: '#bfbfbfde'
+    # 版权卡片背景色
+    copyright_bkg: '#21252b'
     # 夜间图片亮度
     brightness: 70%
 ############################### Color Scheme ############################### > end

diff --git a/languages/en.yml b/languages/en.yml
@@ -23,6 +23,10 @@ post:
     link: Post link
     license_title: Copyright Notice
     license_content: "All articles in this blog are licensed under %s unless stating additionally."
+    date: Posted on
+    updated: Update
+    references: References
+    license: License
 footer:
   license: 'Blog content follows the [Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0) License](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en)'
   use: Use

diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml
@@ -23,6 +23,10 @@ post:
     link: 本文链接
     license_title: 版权声明
     license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！"
+    date: 发布于
+    updated: 更新于
+    references: 原文出处
+    license: 许可协议
 footer:
   license: '博客内容遵循 [署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议](https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh)'
   use: 本站使用

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -22,6 +22,7 @@
   <% if (['post','docs'].includes(page.layout)) { %>
     <% let footer_widget = theme.article.body.footer_widget; %>
     <div class='footer'>
+       <!-- 参考资料、相关资料等 -->
       <% if (page.references && page.references.length > 0) { %>
         <div class='references'>
           <section class='header'>
@@ -43,26 +44,78 @@
           </section>
         </div>
       <% } %>
+       <!-- 相关文章 -->
       <% if (['post'].includes(page.layout) && footer_widget.related_posts && footer_widget.related_posts.enable == true) { %>
         <%-
         htmlGenerator(
           popular_posts_json({ maxCount: footer_widget.related_posts.max_count , ulClass: 'vlts-rps' , PPMixingRate: 0.2 , isImage: true , isExcerpt: true} , post )
         )
         %>
       <% } %>
+      <!-- 版权声明组件 -->
       <% if (['post'].includes(page.layout) && footer_widget.copyright && footer_widget.copyright.enable == true && post.copyright != false) { %>
-        <div class='copyright'>
-          <blockquote>
-            <% (footer_widget.copyright.content||[]).forEach(function(row){ %>
-              <% if (row == 'permalink') { %>
-                <p><%- footer_widget.copyright.permalink %><a href=<%- page.permalink %>><%- page.permalink %></a></p>
-              <% } else { %>
-                <%- markdown(row) %>
+        <% if (footer_widget.copyright.custom) { %>
+          <%
+            let author = theme.article.body.meta_library.author;
+            let aid = post.author;
+            if (aid && site.data && site.data.author && (aid in site.data.author)) {
+              author = site.data.author[aid];
+            }
+            let articleCreate =  date(post.date, theme.article.body.meta_library.date.format);
+            let articleUpdate = date(post.updated, theme.article.body.meta_library.updated.format);
+            let copyrightRule = post.copyright?.type || theme.article.body.footer_widget.copyright.customData.default;
+            let copyrightRuleText = theme.article.body.footer_widget.copyright.customData.rules[copyrightRule]?.text;
+            let copyrightRuleDesc = theme.article.body.footer_widget.copyright.customData.rules[copyrightRule]?.desc;
+          %>
+          <div class="copyright license">
+            <div class="license-title"><%- post.title %></div>
+            <div class="license-link"><a href="<%- page.permalink %>"><%- page.permalink %></a>
+            </div>
+            <div class="license-meta">
+              <div class="license-meta-item">
+                <div class="license-meta-title"><%- __('post.copyright.author') %></div>
+                <div class="license-meta-text"><%- post.copyright?.author || author.name %></div>
+              </div>
+              <div class="license-meta-item">
+                <div class="license-meta-title"><%- __('post.copyright.date') %></div>
+                <div class="license-meta-text"><%- articleCreate %></div>
+              </div>
+              <% if (articleCreate !== articleUpdate) { %>
+              <div class="license-meta-item">
+                <div class="license-meta-title"><%- __('post.copyright.updated') %></div>
+                <div class="license-meta-text"><%- articleUpdate %></div>
+              </div>
               <% } %>
-            <% }) %>
-          </blockquote>
-        </div>
+              <% if (post.copyright?.ref?.title) { %>
+              <div class="license-meta-item">
+                <div class="license-meta-title"><%- __('post.copyright.references') %></div>
+                <div class="license-meta-text">
+                  <a href="<%- post.copyright.ref?.url %>" target="_blank"><%- post.copyright.ref?.title %></a>
+                </div>
+              </div>
+              <% } %>
+              <div class="license-meta-item">
+                <div class="license-meta-title"><%- __('post.copyright.license') %></div>
+                <div class="license-meta-text"><%- copyrightRuleText %></div>
+              </div>
+            </div>
+            <div class="license-statement"><%- copyrightRuleDesc %></div>
+          </div>
+        <% } else { %>
+          <div class='copyright'>
+            <blockquote>
+              <% (footer_widget.copyright.content||[]).forEach(function(row){ %>
+                <% if (row == 'permalink') { %>
+                  <p><%- footer_widget.copyright.permalink %><a href=<%- page.permalink %>><%- page.permalink %></a></p>
+                <% } else { %>
+                  <%- markdown(row) %>
+                <% } %>
+              <% }) %>
+            </blockquote>
+          </div>
+        <% } %>
       <% } %>
+      <!-- 打赏组件 -->
       <% if (['post'].includes(page.layout) && footer_widget.donate && footer_widget.donate.enable == true) { %>
         <div class='donate'>
           <div class='imgs'>

diff --git a/source/css/_defines/color.styl b/source/css/_defines/color.styl
@@ -63,6 +63,7 @@ $color-p = convert(hexo-config('color_scheme.light.p'))
 $color-list = convert(hexo-config('color_scheme.light.list'))
 $color-list-hl = convert(hexo-config('color_scheme.light.list_hl'))
 $color-meta = convert(hexo-config('color_scheme.light.meta'))
+$color-copyright-bkg = convert(hexo-config('color_scheme.light.copyright_bkg'))
 
 // 深色配色方案在 darkmode.styl 中按需加载
 $color-dark-site-body = convert(hexo-config('color_scheme.dark.site_bd'))                    // Dark Grey 1
@@ -88,6 +89,7 @@ $color-dark-list = convert(hexo-config('color_scheme.dark.list'))
 $color-dark-list-hl = convert(hexo-config('color_scheme.dark.list_hl'))
 $color-dark-meta = convert(hexo-config('color_scheme.dark.meta'))
 $color-dark-link = convert(hexo-config('color_scheme.dark.meta'))
+$color-dark-copyright-bkg = convert(hexo-config('color_scheme.dark.copyright_bkg'))
 
 bgcolor($c, $mix = 10)
   return mix($c, $color-card, $mix)

diff --git a/source/css/_first/base_first.styl b/source/css/_first/base_first.styl
@@ -20,6 +20,7 @@
   --color-meta: $color-meta
   --color-read-bkg: $color-read-bkg
   --color-read-post: $color-read-post
+  --color-copyright-bkg: $color-copyright-bkg
 
 *
   box-sizing: border-box

diff --git a/source/css/_first/dark_first.styl b/source/css/_first/dark_first.styl
@@ -24,6 +24,7 @@ fitst_dark()
   --color-list-hl: $color-dark-list-hl
   --color-meta: $color-dark-meta
   --color-link: $color-dark-link
+  --color-copyright-bkg: $color-dark-copyright-bkg
 
   img
     filter: brightness(convert(hexo-config('color_scheme.dark.brightness'))) !important

diff --git a/source/css/_style/_layout/article.styl b/source/css/_style/_layout/article.styl
@@ -323,3 +323,51 @@ article .readmore
   display: block
   margin-top: $gap * 1.5
   font-size: $fontsize-meta
+
+.copyright.license
+  &:after
+    background: url("data:image/svg+xml;charset=utf-8,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 367.467 367.467' style='enable-background:new 0 0 367.467 367.467;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M183.73,0.018C82.427,0.018,0,82.404,0,183.733c0,101.289,82.427,183.716,183.73,183.716 c101.315,0,183.737-82.427,183.737-183.716C367.467,82.404,285.045,0.018,183.73,0.018z M183.73,326.518 c-78.743,0-142.798-64.052-142.798-142.784c0-78.766,64.055-142.817,142.798-142.817c78.752,0,142.807,64.052,142.807,142.817 C326.536,262.466,262.481,326.518,183.73,326.518z'/%3E%3Cpath d='M244.036,217.014c-11.737,20.141-33.562,32.635-56.956,32.635c-36.329,0-65.921-29.585-65.921-65.915 c0-36.36,29.592-65.955,65.921-65.955c23.395,0,45.219,12.54,56.956,32.641l1.517,2.627h44.28l-2.658-7.129 c-7.705-20.413-21.225-37.769-39.122-50.157c-17.942-12.42-39.017-19.009-60.973-19.009c-58.981,0-106.946,48.006-106.946,106.982 c0,58.98,47.965,106.941,106.946,106.941c21.956,0,43.03-6.567,60.973-19.006c17.897-12.391,31.417-29.741,39.122-50.154 l2.658-7.133h-44.28L244.036,217.014z'/%3E%3C/g%3E%3C/svg%3E")
+    content: " ";
+    opacity: .1;
+    height: 180px;
+    right: -10px;
+    top: -35px;
+    width: 180px;
+    position: absolute;
+  a
+    color: var(--color-meta);
+    &:hover
+      color: #ff5722;
+  background: var(--color-copyright-bkg);
+  color: var(--color-meta);
+  display: block;
+  font-size: .95rem;
+  line-height: 1.2;
+  margin: 15px -40px;
+  overflow: hidden;
+  padding: 1.25em 40px;
+  position: relative;
+  border-radius: 4px;
+  .license-title,
+  .license-meta-title
+    margin: 0 0 .25rem;
+  .license-link, 
+  .license-meta-title
+    font-size: .8rem;
+  .license-title
+    font-weight: 700;
+  .license-link
+    margin-bottom: 1rem;
+  .license-meta
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  .license-meta-item
+    margin: 0 2rem 1em 0;
+  .license-meta-text
+    margin: 0;
+    a
+      border-bottom: 1px solid var(--color-meta);
+      &:hover
+        border-bottom-color: #ff5722