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

1
2
3
4
5
6
7
8

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

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

1

hexo cl & hexo g & hexo d