新增：利用 vitepress 新特性 doc-footer-beofore 插槽来添加文末版权声明

2022-08-16 22:14:07 +08:00
parent 2592ba3582
commit d63b56a457
5 changed files with 108 additions and 7 deletions
--- a/README.md
+++ b/README.md
@@ -45,6 +45,7 @@ yarn build
 - [x] 《我的归档》：自定义时间轴，展示历史文章数据。年份前可展示生肖，可按分类、标签筛选
 - [x] 更多细节优化：敬请发现
 - [x] 文章评论：目前仅支持Gitalk
+- [x] 版权声明：文末显示版权声明，可自由配置采用的版权协议

 ## 部分页面截图

@@ -71,6 +72,10 @@ yarn build
 ![文章评论](./docs/public/screenshot/文章评论1.png)
 ![文章评论](./docs/public/screenshot/文章评论2.png)

+### 版权声明
+
+![版权声明](./docs/public/screenshot/版权声明.png)
+
 ## 致谢

 - [vuejs/vitepress](https://github.com/vuejs/vitepress) （本知识库基于 vitepress 构建）
--- a/docs/.vitepress/config/theme.ts
+++ b/docs/.vitepress/config/theme.ts
@@ -42,22 +42,27 @@ export const themeConfig: DefaultTheme.Config = {
    }
  ],

-  // 自定义扩展: 页脚配置
-  footerConfig: {
-    showFooter: true, // 是否显示页脚
-    icpRecordCode: '津ICP备2022005864号-2', // ICP备案号
-    publicSecurityRecordCode: '津公网安备12011202000677号', // 联网备案号
-    copyright: `Copyright © 2019-${new Date().getFullYear()} Charles7c` // 版权信息
-  },
  // 自定义扩展: 文章元数据配置
  articleMetadataConfig: {
    author: '查尔斯', // 文章全局默认作者名称
    authorLink: '/about/me', // 点击作者名时默认跳转的链接
    showPv: false // 是否显示文章阅读数, 需配置好相应后端API接口
  },
+  // 自定义扩展: 文章版权配置
+  copyrightConfig: {
+    license: '署名-相同方式共享 4.0 国际 (CC BY-SA 4.0)',
+    licenseLink: 'http://creativecommons.org/licenses/by-sa/4.0/'
+  },
  // 自定义扩展: 评论配置
  commentConfig: {
    type: 'gitalk',
    showComment: true // 是否显示评论
+  },
+  // 自定义扩展: 页脚配置
+  footerConfig: {
+    showFooter: true, // 是否显示页脚
+    icpRecordCode: '津ICP备2022005864号-2', // ICP备案号
+    publicSecurityRecordCode: '津公网安备12011202000677号', // 联网备案号
+    copyright: `Copyright © 2019-${new Date().getFullYear()} Charles7c` // 版权信息
  }
 }
--- a/docs/.vitepress/theme/MyLayout.vue
+++ b/docs/.vitepress/theme/MyLayout.vue
@@ -1,5 +1,8 @@
 <template>
  <Layout>
+    <template #doc-footer-before>
+      <Copyright v-if="(frontmatter?.aside ?? true) && (frontmatter?.showArticleMetadata ?? true) && !(frontmatter.authorLink)" :key="md5(page.relativePath)" />
+    </template>
    <template #doc-after>
      <Comment v-if="(theme.commentConfig?.showComment ?? true) && (frontmatter?.showComment ?? true)" :commentConfig="theme.commentConfig" :key="md5(page.relativePath)" />
    </template>
--- a/docs/.vitepress/theme/components/Copyright.vue
+++ b/docs/.vitepress/theme/components/Copyright.vue
@@ -0,0 +1,88 @@
+<template>
+  <div class="copyright">
+    <div class="content">
+      <div class="item">
+        <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
+          <title>原创作者</title>
+          <path d="M614.72 554.538c-49.086-6.399-100.27-2.1-149.256-2.1-119.465 0-209.04 95.972-206.84 215.437 0 17.095 8.498 31.99 23.493 40.488 14.896 10.697 34.09 14.896 53.285 17.095 61.882 6.398 123.664 6.398 198.342 6.398 40.488 0 93.872-2.1 142.858-4.298 27.692 0 53.284-4.3 78.877-14.896 19.194-8.498 29.89-19.194 31.99-40.488 8.498-104.57-72.478-204.84-172.75-217.636zM680.8 375.39c0-87.474-74.678-162.053-164.251-162.053-89.574 0-162.053 74.679-162.053 162.053-2.1 87.474 74.678 164.252 162.053 164.252 89.673 0 164.252-74.678 164.252-164.252z" fill="#FFF"></path>
+          <path d="M512.35 0C228.733 0 .5 228.233.5 511.85s228.233 511.85 511.85 511.85 511.85-228.233 511.85-511.85S795.967 0 512.35 0zm275.12 772.074c-2.1 21.294-12.797 31.99-31.991 40.488-25.593 10.697-51.185 14.896-78.877 14.896-49.086 2.099-102.37 4.298-142.858 4.298-74.678 0-136.46 0-198.342-6.398-19.195-2.1-38.389-6.398-53.285-17.095-14.895-8.497-23.493-23.493-23.493-40.488-2.1-119.465 87.475-215.437 206.84-215.437 49.085 0 100.27-4.299 149.256 2.1 100.27 12.896 181.247 113.166 172.75 217.636zM354.495 375.39c0-87.474 72.479-162.053 162.053-162.053S680.8 288.016 680.8 375.39c0 89.574-74.679 164.252-164.252 164.252-87.375 0-164.152-76.778-162.053-164.252z" fill="#249FF8"></path>
+        </svg>
+        <span>版权属于：</span>
+        <span><a :href="authorLink" title="进入作者主页" target="_blank">{{ author }}</a></span>
+      </div>
+      <div class="item">
+        <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024">
+          <title>本文链接</title>
+          <path d="M511.854 0A511.854 511.854 0 1 0 1024 511.854 511.854 511.854 0 0 0 511.854 0z" fill="#39B54A"></path>
+          <path d="M576.491 630.355L460.028 746.818a129.565 129.565 0 0 1-182.555 0l-2.038-2.038a128.983 128.983 0 0 1 0-182.264l81.233-81.233a179.644 179.644 0 0 0 13.102 70.46l-52.7 52.408a69.878 69.878 0 0 0 0 98.703l2.038 2.038a70.169 70.169 0 0 0 98.703 0l116.463-116.463a69.878 69.878 0 0 0 0-98.703l-2.039-2.038a69.587 69.587 0 0 0-13.975-10.772l42.509-42.51a128.11 128.11 0 0 1 13.102 11.356l2.038 2.038a129.274 129.274 0 0 1 0 182.264z" fill="#FFF"></path>
+          <path d="M746.236 460.902l-81.233 81.233a179.353 179.353 0 0 0-13.102-70.46l52.7-52.409a69.878 69.878 0 0 0 0-98.702l-2.039-2.038a69.878 69.878 0 0 0-98.702 0L487.397 434.989a69.878 69.878 0 0 0 0 98.702l2.038 2.038a68.422 68.422 0 0 0 13.976 10.773l-42.51 42.51a136.553 136.553 0 0 1-13.101-11.356l-2.038-2.038a128.983 128.983 0 0 1 0-182.265l116.463-116.462a129.565 129.565 0 0 1 182.555 0l2.038 2.038a128.983 128.983 0 0 1 0 182.264z" fill="#FFF"></path>
+        </svg>
+        <span>本文链接：</span>
+        <span><a :href="articleLink" target="_blank">{{ articleLink }}</a></span>
+      </div>
+      <div class="item">
+        <svg class="icon" viewBox="0 0 1024 1024">
+          <title>作品协议</title>
+          <path d="M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z" fill="#F3B243"></path>
+          <path d="M540.672 323.584a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM540.672 688.128a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0zM229.376 512a90.112 90.112 0 1 0 180.224 0 90.112 90.112 0 1 0-180.224 0z" fill="#FFF"></path>
+          <path d="M341.037 480.37l257.344-175.718 27.713 40.592-257.34 175.718z" fill="#FFF"></path>
+          <path d="M349.053 488.452L601.907 670.56l-28.725 39.887L320.307 528.34z" fill="#FFF"></path>
+        </svg>
+        <span>作品采用：</span>
+        <span>《<a :href="theme.copyrightConfig.licenseLink" target="_blank">{{ theme.copyrightConfig.license }}</a>》许可协议授权</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, toRefs } from 'vue'
+import { useData } from 'vitepress'
+const { theme, frontmatter } = useData()
+
+const data = reactive({
+  author: frontmatter.value?.author ?? theme.value.articleMetadataConfig.author,
+  authorLink: frontmatter.value?.authorLink ?? theme.value.articleMetadataConfig.authorLink,
+  articleLink: decodeURI(location.href)
+})
+const { author, authorLink, articleLink } = toRefs(data)
+</script>
+
+<style scoped>
+.copyright {
+  border-color: var(--vp-custom-block-tip-border);
+  background-color: var(--vp-custom-block-tip-bg);
+  border-radius: 6px;
+  color: var(--vp-c-text-2);
+  font-size: 15px;
+  margin-top: 50px;
+}
+
+.copyright .content {
+  
+  padding: 13px 16px;
+}
+
+.copyright .content .item {
+  margin-bottom: 5px;
+  word-break: break-word;
+  line-height: 22px;
+}
+
+.copyright .content .item .icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  margin-right: .375rem;
+  vertical-align: -2.5px;
+}
+
+a {
+  font-weight: 400;
+  color: var(--vp-c-text-2);
+}
+
+a:hover {
+  color: var(--vp-c-brand);
+}
+</style> 
--- a/docs/public/screenshot/版权声明.png
+++ b/docs/public/screenshot/版权声明.png