Akilarの糖果屋 Akilar.top 2024-04-24T18:05:01.000Z https://akilar.top/ Akilar Hexo 关于群聊更换的紧急通知 https://akilar.top/posts/c215d440/ 2024-04-24T13:42:01.000Z 2024-04-24T18:05:01.000Z 继2022年10月14日，糖果屋一群在洪哥的一声卧槽中结束之后（原因大概是有群友键政，二十大审查严）
然后2024年4月24日，糖果屋二群在洪哥的一句“一旦你适应了mac”中结束（原因大概是有群友转发了含R18内容的聊天记录。）

我宣布，洪槽纪年结束，现在是洪mac纪年。

糖果屋三群的群号是725597418

]]> 洪槽纪元三年。洪MAC纪年元年。 源计划-方舟：友链卡片 https://akilar.top/posts/fb6a1a78/ 2024-04-08T21:42:32.000Z 2024-04-08T21:42:32.000Z

源计划-方舟的内容并不是为无前端基础的纯新手设计的傻瓜教程，所以在编写时会频繁的引用以前写过的教程或者参考的帖子，如果想要复现本站效果，需要有一定的前端基础和耐心，若有不了解的，可以在评论区提问，但是我不保证一定会耐心解答。

点击查看更新记录

更新记录

2024-04-08:友链卡片赛博化

  1. 重写了友链卡片，同样适用于原本的多友链样式改造。
  2. 换用清羽飞扬喵提供的网站截图API
点击查看参考教程
参考方向教程原贴
Flex布局参数解释Flex 布局教程:语法篇 - 阮一峰的网络日志
Transition属性实现平滑过渡动画CSS3实现伪类hover离开时平滑过渡效果示例
CSS伪类实现三角形绘制纯CSS 实现绘制各种三角形(各种角度) - saucxs - 博客园
使用clip-path实现多边形剪裁。不可思议的CSS之clip-path

写在最前

仔细看了下上一篇源计划-方舟系列的魔改帖子已经是一年多以前的事情了，这中间包括离职，找工作，提桶跑路，再找工作，真的是发生了好多事情啊。
一直到最近有群友来问我原来flexcard的那个友链卡片，描述的对话框老是偏移，我才意识到这个bug原来一直没修我居然还在用老版本的友链。说起来旧版友链教程里三个样式，一个是butterfly自带的，一个是volantis主题的，一个是小康的友链在线加载样式里扒拉来的。都不是我原创的。所以我觉得有必要写一个原创的卡片了。照例是机甲风格，机甲最重要的是什么？是酷炫！是爆甲！所以不要怪新友链和butterfly原版的风格不搭。（笑）

魔改步骤

  1. 友链魔改基于 Friend Link Card Beautify中的友链魔改方案进行增量调整，这意味着你得先熟读它才能理解这一篇魔改教程。核心文件为以下内容。
  2. 修改[Blogroot]\themes\butterfly\layout\includes\page\flink.pug，全部内容替换为：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    case theme.flink_style
      when 'volantis'
        include ./flink_style/volantis.pug
      when 'flexcard'
        include ./flink_style/flexcard.pug
      when 'byer'
        include ./flink_style/byer.pug
      when 'ark'
        include ./flink_style/ark.pug
      default
        include ./flink_style/butterfly.pug
  3. 新建[Blogroot]\themes\butterfly\layout\includes\page\flink_style\butterfly.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
    #article-container
      .ark-flink
        if site.data.link
          each i in site.data.link
            if i.class_name
              h2!= i.class_name
            if i.class_desc
              .ark-flink-desc!=i.class_desc
            .ark-flink-list
              each item in i.link_list
                a.ark-flink-list-card(href=url_for(item.link) target='_blank' title=item.descr)
                  .ark-flink-progress-bar-A
                  .ark-flink-progress-bar-B
                  .ark-flink-progress-bar-C
                  .ark-flink-content
                    .ark-flink-name
                      .flink-sitename= item.name
                      .flink-block
                    .ark-flink-avatar
                      img.no-lightbox(src=url_for(item.avatar) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt='' )
                    .ark-flink-mask
                      .ark-flink-mask-left 
                      .ark-flink-mask-right
                    .ark-flink-descr
                      .ark-flink-descr-text=item.descr
                    .ark-flink-siteshot
                      - var siteshot = item.siteshot ? url_for(item.siteshot) : 'https://s0.wp.com/mshots/v1/' + item.link + '?&w=400&h=300'
                      img.no-lightbox(src=siteshot onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.post_page) + `'` alt='' )
                    
      != page.content
  4. 修改[Blogroot]\themes\butterfly\source\css\_page\flink.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    if hexo-config('flink_style') == 'butterfly'
      @import './_flink_style/butterfly'
    else if hexo-config('flink_style') == 'volantis'
      @import './_flink_style/volantis'
    else if hexo-config('flink_style') == 'flexcard'
      @import './_flink_style/flexcard'
    else if hexo-config('flink_style') == 'byer'
      @import './_flink_style/byer'
    else if hexo-config('flink_style') == 'ark'
      @import './_flink_style/ark'

  5. 新建[Blogroot]\themes\butterfly\source\css\_flink_style\ark.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
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    //自定义配色:
    :root
      --ark-flink-default-color: rgba(153, 54, 44,0.8) /*主色调*/
      --ark-flink-mask: #818181  /*遮罩层配色*/
      --ark-flink-progress-default: rgba(227, 236, 238, 0.8) /*能量条默认配色*/
      --ark-flink-progress-charge: #d97f17 /*能量条充能配色*/
      --flink-name-border-color: #d97f17 /*ID边框配色*/

    [data-theme="dark"]
      --ark-flink-default-color: rgba(55, 112, 143,0.8)
      --ark-flink-mask: #37708f
      --ark-flink-progress-default: rgba(46, 160, 221, 0.8)
      --ark-flink-progress-charge: rgba(227, 236, 238, 0.8)
      --flink-name-border-color: rgba(227, 236, 238, 0.8)



    #article-container
      .ark-flink
        margin-bottom: 20px

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

          & > .ark-flink-list-card
            position: relative
            display: block
            color: var(--font-color)
            text-decoration: none
            float: left
            overflow: hidden
            margin: 15px 7px
            width: calc(100% / 3 - 15px)
            height: 220px
            border-radius: 2px
            line-height: 17px
            -webkit-transform: translateZ(0)

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

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

          a.ark-flink-list-card
            *
              transition: all 0.3s cubic-bezier(.6, 0, .5, 1)
            &:hover
              *
                transition: all 0.3s cubic-bezier(.6, 0, .5, 1)
              .ark-flink-progress-bar-A,
              .ark-flink-progress-bar-B,
              .ark-flink-progress-bar-C
                background: var(--ark-flink-progress-charge)
              .ark-flink-content
                .ark-flink-name
                  bottom: 0px;
                .ark-flink-avatar
                  transform: rotateX(90deg)
                .ark-flink-mask
                  .ark-flink-mask-left
                    transition-delay: 0.3s;
                    left: -35%;
                  .ark-flink-mask-right
                    transition-delay: 0.3s;
                    right: -55%;
                .ark-flink-descr
                  .ark-flink-descr-text
                    transition-delay: 0.3s;
                    opacity: 1
                    animation: ark-flink-type 1.5s steps(20, end) 0.3s,ark-flink-blink .75s step-end infinite; /* 定义光标的闪烁动画 */  
            .ark-flink-progress-bar-A,
            .ark-flink-progress-bar-B,
            .ark-flink-progress-bar-C
              display: block
              position: absolute;
              background: var(--ark-flink-progress-default)
              z-index 6
            .ark-flink-progress-bar-A
              height: 8px;
              width: 100px;
              top: 3px;
              left: 6px;
              clip-path: polygon(0% 100%, 8% 0%, 28% 0%, 20% 100%, 23% 100%, 31% 0%, 46% 0%, 38% 100%, 41% 100%, 49% 0%, 64% 0%, 56% 100%, 59% 100%, 67% 0%, 82% 0%, 74% 100%, 77% 100%, 85% 0%, 100% 0%, 90% 100%);
            .ark-flink-progress-bar-B
              height: 8px;
              width: 35px;
              bottom: 35px;
              left: 0;
              clip-path: polygon(0% 0%, 40% 0%, 15% 100%, 25% 100%, 50% 0%, 85% 0%, 60% 100%, 70% 100%, 90% 0%, 100% 100%, 15% 100%);
            .ark-flink-progress-bar-C
              height: 100px
              width: 8px
              bottom: 50px
              right: 0
              clip-path: polygon( 0% 0%, 100% 8%, 100% 28%, 0% 20%, 0% 23%, 100% 31%,100% 46% ,0% 38% ,0% 41% ,100% 49% ,100% 64% ,0% 56% ,0% 59% ,100% 67% ,100% 82% ,0% 74% , 0% 77%,100% 85% , 100% 100%,0% 90% );
            .ark-flink-content
              display: block
              position: absolute
              background: radial-gradient(var(--ark-flink-default-color),transparent)
              width: calc(100% - 10px)
              height: 100%
              top: 0
              left: 0
              clip-path: polygon(0 15px, 100px 15px, 115px 0, calc(100% - 45px) 0, calc(100% - 15px) 45px, 100% 45px, 100% calc(100% - 25px), calc(100% - 30px) calc(100% - 25px), calc(100% - 55px) calc(100% - 10px), calc(100% - 90px) calc(100% - 10px), calc(100% - 100px) 100%, 100px 100%, 90px calc(100% - 10px), 55px calc(100% - 10px), 35px calc(100% - 45px), 0% calc(100% - 45px));
              .ark-flink-avatar,
              .ark-flink-mask,
              .ark-flink-descr,
              .ark-flink-siteshot
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
              .ark-flink-name
                display: block;
                position: absolute;
                z-index: 5;
                bottom: 10px;
                left: 20%;
                color: white;
                text-shadow: 1px 1px 5px black;
                background: transparent;
                height: 40px;
                width: 60%;
                border-style: double;
                border-width: 5px 5px 0 5px;
                border-color: var(--flink-name-border-color);
                transform: perspective(0.5em) rotateX(3deg);
                .flink-sitename
                  transform: perspective(0.5em) rotateX(-3deg);
                  font-size: 15px;
                  margin: 5px 0 0 0;
                .flink-block
                  transform: perspective(0.5em) rotateX(-10deg);
                  display: block;
                  width: 60%;
                  height: 13px;
                  background: var(--flink-name-border-color);
                  position: absolute;
                  bottom: 0px;
                  left: 20%;
              .ark-flink-avatar
                z-index 4
                display: flex
                align-items: center;
                justify-content: center;
                transform: rotateX(0deg)
                img
                  width: 100px;
                  height: 100px;
                  margin: 0 auto 20px;
                  object-fit: cover
                  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
                .img-alt
                  display: none
              .ark-flink-mask
                z-index 3
                .ark-flink-mask-left
                  width: 100%;
                  height: 100%;
                  background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px);
                  clip-path: polygon(50% 0, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 0% 100%, 0% 0%);
                  left: 0%;
                  position: absolute;
                .ark-flink-mask-right
                  background: repeating-linear-gradient(0deg, var(--ark-flink-mask),transparent 1px);
                  width: 100%;
                  height: 100%;
                  clip-path: polygon(100% 0%, 50% 0%, 50% calc(50% - 60px), calc(50% - 20px) calc(50% - 60px), calc(50% - 50px) calc(50% - 30px), calc(50% - 50px) calc(50% + 10px), calc(50% - 20px) calc(50% + 40px), 50% calc(50% + 40px), 50% 100%, 100% 100%);
                  right: 0%;
                  position: absolute;
              
              .ark-flink-descr
                z-index 2
                display: flex
                align-items: center;
                justify-content: center;
                .ark-flink-descr-text
                  color: white;
                  text-shadow: 1px 1px 5px black;
                  font-size: 1.5em;
                  height: 1.5em;
                  line-height: 1.5em;
                  overflow: hidden; /* 隐藏超出容器的文本 */
                  border-right: .15em solid orange; /* 打字效果的光标动画 */
                  white-space: nowrap; /* 确保文本在一行内显示，不换行 */
                  margin: 20px;
                  opacity: 0
              .ark-flink-siteshot
                z-index 1
                display: flex
                align-items: center;
                justify-content: center;
                img
                  height: 75%;
                  width: 100%;
                  margin: 0 auto 20px;
                  object-fit: cover;

    /* 定义打字机动画 */
    @keyframes ark-flink-type
      from
        width: 0;
      to
        width: 100%;


    /* 定义光标闪烁动画 */
    @keyframes ark-flink-blink
      from,
      to
        border-color: transparent;
      50%
        border-color: orange

  6. 在[Blogroot]\_config.butterfly.yml中添加配置项：

    1
    2
    # 友链样式，butterfly为默认样式，volantis为站点卡片样式,flexcard为弹性卡片样式,byer为粉丝彩蛋！
    flink_style: ark # butterfly | volantis | flexcard | byer | ark
]]> 时隔一年多的更新，全新的科技风格友链卡片 找到新工作了，还挺喜欢的 https://akilar.top/posts/5ad2af31/ 2023-12-15T16:08:00.000Z 2023-12-18T17:17:13.000Z
]]> 找到新工作了，甚至写这篇的时候已经领到了第一个月工资，专业对口，还挺满意。 闪电入职vs光速离职 https://akilar.top/posts/b5a208a8/ 2023-09-20T19:08:00.000Z 2023-10-16T23:17:13.000Z
]]> 记一次短暂的工作经历 20230915 https://akilar.top/posts/eee5afe4/ 2023-09-15T09:30:27.000Z 2023-09-15T09:30:27.000Z
]]> 上班一周了，风神保佑，今天晚上别加班