替换[Blogroot]\themes\butterfly\layout\includes\page\flink.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
26
27
28
29
30
31
32
#article-container
  .flink
    if site.data.link
      each i in site.data.link
        if i.class_name
          h2!= i.class_name
        if i.class_desc
          .flink-desc!=i.class_desc
        if i.list_style === 'flexcard'
          .flink-list
            each item in i.link_list
              a.flink-list-card(href=url_for(item.link) target='_blank' data-title=item.descr)
                i.fa.fas.fa-blog.flink-item-circle(onclick="openMeShow(event)" data-link=item.link title=item.name+' 的订阅')
                .wrapper.cover
                  - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://image.thum.io/get/width/400/crop/800/allowJPG/wait/20/noanimate/' + item.link
                  img.no-lightbox.cover.fadeIn(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='')
                .info
                  img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='')
                  span.flink-sitename= item.name
        else 
          .flink-list
            each item in i.link_list
              .flink-list-item
                i.fa.fas.fa-blog.flink-item-circle(onclick="openMeShow(event)" data-link=item.link title=item.name+' 的订阅')
                a(href=url_for(item.link) title=item.name target='_blank')
                  .flink-item-icon.info
                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name)
                  .flink-item-info
                    span.flink-item-name.flink-sitename= item.name
                    span.flink-item-desc(title=item.descr)= item.descr
                    img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt=item.name)
    != page.content

替换[Blogroot]\themes\butterfly\source\css_page\flink.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
#article-container
  .flink
    margin-bottom: 20px

  .flink-list
    overflow: hidden
    padding: 10px 10px 0
    text-align: center

    & > .flink-list-item
      position: relative
      float: left
      overflow: hidden
      margin: 15px 7px
      width: calc(100% / 3 - 15px)
      height: 90px
      border-radius: 8px
      line-height: 17px
      -webkit-transform: translateZ(0)

      +maxWidth1024()
        width: calc(50% - 15px) !important

      +maxWidth600()
        width: calc(100% - 15px) !important

      &:hover
        .flink-item-icon
          margin-left: -10px
          width: 0

      &:before
        position: absolute
        top: 0
        right: 0
        bottom: 0
        left: 0
        z-index: -1
        background: var(--text-bg-hover)
        content: ''
        transition: transform .3s ease-out
        transform: scale(0)

      &:hover:before,
      &:focus:before,
      &:active:before
        transform: scale(1)

      a
        color: var(--font-color)
        text-decoration: none

        .flink-item-icon
          float: left
          overflow: hidden
          margin: 15px 10px
          width: 60px
          height: 60px
          border-radius: 35px
          transition: width .3s ease-out

          img
            width: 100%
            height: 100%
            transition: filter 375ms ease-in .2s, transform .3s
            object-fit: cover

        .img-alt
          display: none

  .flink-item-name
    @extend .limit-one-line
    padding: 16px 10px 0 0
    height: 40px
    font-weight: bold
    font-size: 1.43em

  .flink-item-desc
    @extend .limit-one-line
    padding: 16px 10px 16px 0
    height: 50px
    font-size: .93em

  .flink-name
    margin-bottom: 5px
    font-weight: bold
    font-size: 1.5em

  .flink-list
    & > a.flink-list-card
      width calc(25% - 15px)
      height 150px
      position relative
      display block
      margin 15px 7px
      float left
      overflow hidden
      border-radius 10px
      transition all .3s ease 0s, transform .6s cubic-bezier(.6, .2, .1, 1) 0s
      box-shadow 0 14px 38px rgba(0, 0, 0, .08), 0 3px 8px rgba(0, 0, 0, .06)
      &:hover
        .info
          transform translateY(-100%)
        .wrapper
          img
            transform scale(1.2)
        &::before
          position fixed
          width fit-content
          max-width 80%
          margin auto
          left 0
          right 0
          top 15%
          border-radius 1rem
          text-align center
          z-index 2
          content attr(data-title)
          font-size 1.5rem
          color #fff
          padding .5rem 1rem
          background-color rgba($theme-color,0.8)

      .cover
        width 100%
        transition transform .5s ease-out
      .wrapper
        position relative
        .fadeIn
          animation coverIn .8s ease-out forwards
        img
          height 150px
          pointer-events none
      .info
        display flex
        flex-direction column
        justify-content center
        align-items center
        width 100%
        height 100%
        overflow hidden
        border-radius 3px
        background-color hsla(0, 0%, 100%, .7)
        transition transform .5s cubic-bezier(.6, .2, .1, 1) 0s
        img
          position relative
          top 45px
          width 80px
          height 80px
          border-radius 50%
          box-shadow 0 0 10px rgba(0, 0, 0, .3)
          z-index 1
          text-align center
          pointer-events none
        span
          color var(--text-highlight-color)
          padding 20px 10% 65px 10%
          width 100%
          text-align center
          box-shadow 0 0 10px rgba(0, 0, 0, .3)
          background-color hsla(0, 0%, 100%, .7)
          font-weight bold
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
  .flink-list>a .info,
  .flink-list>a .wrapper .cover
    position absolute
    top 0
    left 0

  @media screen and (max-width:1024px)
    .flink-list
      & > a
        width calc(33.33333% - 15px)

  @media screen and (max-width:600px)
    .flink-list
      & > a
        width calc(50% - 15px)

[data-theme=dark]
  .flink-list 
    & >a 
      .info
        background-color rgba(#121212,0.8) !important
      span
        background-color rgba(#121212,0.8) !important

.justified-gallery > div > img,
.justified-gallery > figure > img,
.justified-gallery > a > a > img,
.justified-gallery > div > a > img,
.justified-gallery > figure > a > img,
.justified-gallery > a > svg,
.justified-gallery > div > svg,
.justified-gallery > figure > svg,
.justified-gallery > a > a > svg,
.justified-gallery > div > a > svg,
.justified-gallery > figure > a > svg
  position static!important