前言

把文章底部的版权信息改成卡片，显示标题、原文地址、作者和发布时间，许可协议从主题配置里读取。

美化之前

本站使用 Hexo 6.0.0 + Butterfly 4.5.1，其他版本请按实际情况调整。样式、脚本引入及全局变量用法可参考：

🏠 站内链接，放心访问
Hexo博客添加自定义css和js文件
June's Blog
🏠 站内链接，放心访问
Butterfly自用全局变量
June's Blog

参考链接

  • 小 N 同学的版权卡片教程：https://www.imcharon.com/117/（原链接暂不可用）。

修改方案

1. 替换版权模板

替换 themes/butterfly/layout/includes/post/post-copyright.pug。下面是这版代码，保留本站卡片结构，但许可名称和链接从配置读取，不再写死。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
if theme.post_copyright.enable && page.copyright !== false
  - const author = page.copyright_author || config.author
  - const link = page.copyright_url || page.permalink
  - const license = theme.post_copyright.license
  - const licenseUrl = theme.post_copyright.license_url
  .post-copyright
    .post-copyright__title
      strong= page.title
    .post-copyright__type
      a(href=url_for(link))= theme.post_copyright.decode ? decodeURI(link) : link
    .post-copyright-m
      .post-copyright-m-info
        .post-copyright-item
          span 作者
          .post-copyright-cc-info= author
        .post-copyright-item
          span 发布于
          .post-copyright-cc-info= date(page.date, config.date_format)
        .post-copyright-item
          span 更新于
          .post-copyright-cc-info= date(page.updated || page.date, config.date_format)
        .post-copyright-item
          span 许可协议
          .post-copyright-cc-info
            a(href=licenseUrl target='_blank' rel='noopener noreferrer')= license

2. 添加样式

新建 source/static/css/post-copyright.css，添加下面的样式。如果之前改过这一块，记得先合并旧样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#post .post-copyright {
  position: relative;
  margin: 40px 0 10px;
  padding: 16px;
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  overflow: hidden;
  background: var(--june-copyright-bg, var(--card-bg));
}
.post-copyright__title { font-size: 1.2rem; margin-bottom: 6px; }
.post-copyright__type a { word-break: break-all; }
.post-copyright-m-info { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; }
.post-copyright-item > span { opacity: .65; font-size: 12px; }
.post-copyright-cc-info { color: var(--june-theme, #49b1f5); }

然后在 _config.butterfly.yml 的 inject.head 里引入：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/static/css/post-copyright.css">

3. 配置许可协议

在 _config.butterfly.yml 合并下面配置。这里沿用主题当前配置里的 BY-NC-SA 作为示例，用自己的许可协议替换即可，和独立版权页面保持一致。

1
2
3
4
5
post_copyright:
  enable: true
  decode: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

单篇文章可以通过 Front Matter 的 copyright: false 关闭卡片，或用 copyright_author、copyright_url 覆盖作者与来源。不要在关闭版权时把站点级配置也一起关掉。