本文介绍如何在博客文章页面添加原文链接，并进行动画效果美化，效果如下：

向插件目录中添加

post-copyright-link.pug文件

这里我使用的是butter_fly主题，post-copyright-link.pug文件放在了butterfly主题下的相关文件夹中：

/butterfly/layout/includes/post/post-copyright-link.pug

1
2
3
4
5
6
7
8
.post-copyright-link
  .post-copyright-link-divider
    .divider-line-fancy
  .post-copyright-link-content
    span 原文链接：
    a(href=url_for(page.permalink) target="_blank")= page.title + ' | ' + config.title
  .post-copyright-link-divider
    .divider-line-fancy

向文章页面附加：

如果你使用的是butterfly主题，请修改：/butterfly/layout/includes/post.pug文件

1
2
3
4
5
6
7
8
// ... 现有代码 ...
	// 在文章内容前添加原文链接
	include includes/post/post-copyright-link.pug
    
	// ↓↓↓↓↓文章内容部分
	article#article-container.post-content!=page.content

// ... 现有代码 ...

添加post.styl文件：

如果你使用的是butterfly主题，请添加：/butterfly/source/css/_page/post.styl文件

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
// 原文链接样式
.post-copyright-link
  margin: 2rem 0 1rem
  padding: 0.5rem 0
  
  .post-copyright-link-divider
    text-align: center
    margin: 1rem 0
    
    .divider-line-fancy
      position: relative
      height: 1px
      font-size: 0
      line-height: 0
      margin: 0 auto
      width: 90%
      background: transparent
      
      &:before
        content: ''
        position: absolute
        top: 50%
        left: 0
        right: 0
        height: 1px
        // 分割线渐变色：从透明到浅蓝色(#64b5f6)再到透明，营造出柔和的淡入淡出效果
        background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(100,181,246,0.6), rgba(0,0,0,0))
        transform: translateY(-50%)
      
      &:after
        // ❀、♥、✿、✽
        content: '❀'
        position: absolute
        top: 0
        left: 50%
        font-size: 16px
        // 花朵装饰颜色：浅蓝色(#64b5f6)，与分割线颜色呼应
        color: #64b5f6
        background: var(--card-bg)
        padding: 0 15px
        transform: translate(-50%, -50%)
  
  .post-copyright-link-content
    font-size: 0.9rem
    color: var(--font-color)
    text-align: center
    
    a
      display: inline-block
      // 链接文字渐变色：从深蓝色(#1e88e5)到浅蓝色(#64b5f6)再到中蓝色(#42a5f5)
      // #1e88e5 - Material Design 蓝色 600
      // #64b5f6 - Material Design 蓝色 300
      // #42a5f5 - Material Design 蓝色 400
      background-image: linear-gradient(to right, #1e88e5, #64b5f6, #42a5f5)
      -webkit-background-clip: text
      background-clip: text
      color: transparent
      text-decoration: none
      position: relative
      
      &:after
        content: ''
        position: absolute
        left: 0
        bottom: -2px
        width: 100%
        height: 1px
        // 悬停时显示的下划线渐变色：与链接文字渐变色相同
        background-image: linear-gradient(to right, #1e88e5, #64b5f6, #42a5f5)
        transform: scaleX(0)
        transition: transform 0.3s ease
        transform-origin: right
      
      &:hover
        &:after
          transform: scaleX(1)
          transform-origin: left

完成上述操作，执行hexo三连

1
hexo cl & hexo g & hexo d

文章内容前就会出现原文连接啦，如果你想修改样式，请修改post.styl文件

最后

有什么不懂的，欢迎加群询问哦！

洛の小窝