Butterfly 友链魔改教程 发表于 2023-04-23 更新于 2023-04-23
字数总计 1.1k 阅读时长 5分钟 阅读量
注:精灵图目前还没有写数量过多时拆分图片的功能,以后可能会写,有需求的小伙伴可以自行修改(给钱的话也不是不能加上(bushi )。
该教程不适合小白食用,需要有一定的基本功!
教程中没有支持配置项,如果你希望支持配置项的话可以自行修改。
魔改 首先需要修改 pug,修改\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 #article-container .flink - let index = 0 if site.data.link each list in site.data.link if list.class_name h2!= list.class_name if list.class_desc .flink-desc!= list.class_desc - const className = list.beautify ? 'beautify' : 'terse' .flink-list(class = className) each item in list.link_list a.flink-item(href = url_for(item.link), target = '_blank') if list.beautify if item.tag span.card-tag!= item.tag img.card-bg.no-lightbox(src = url_for(item.siteshot)) .info if !list.deprecated .avatar.no-lightbox(style = `background-position-y:-${(index++) * 100}px`) .text span.name!= item.name span.descr!= item.descr != page.content
然后添加样式,修改\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 .flink-list display flex flex-wrap wrap .flink-item position relative border-radius 8px overflow hidden border var (--km-button-border) background var (--hl-bg) &:hover text-decoration none !important box-shadow var (--km-subt-shadow) border var (--km-light-border) .avatar transition all .6s border-radius 50% background url ("这里写精灵图的 URL" ) background-size cover width 100px height 100px .card-tag position absolute color white font-size 10px left 0 top 0 padding 4px 8px background #0084FF z-index 1 border-bottom-right-radius 12px transition all .6s .text display flex flex-direction column padding-right 10px .name max-width 100% font-weight bold text-overflow ellipsis white-space nowrap overflow hidden .descr margin-bottom 10px font-size small overflow hidden max-height 52px &.beautify .flink-item width calc (25% - 16px ) height 210px margin 8px transition all .6s +maxWidth (1000 ) width calc (33% - 16px ) +maxWidth900 () width calc (25% - 16px ) +maxWidth (700 ) width calc (33% - 16px ) +maxWidth (500 ) width calc (50% - 16px ) +maxWidth (350 ) width calc (100% - 16px ) .card-bg position relative height 60% min-width 100% object-fit cover margin 0 !important transition all .6s !important filter blur (0 ) .info position relative height 40% transition background .6s , height .6s .avatar position absolute left -32px top -32px transform scale (.2 ) .text position relative top 0 margin-left 30px transition all .6s &:hover .card-bg height 35% filter blur (3px ) .info height 66% background #F2B94B color white .avatar left -10px top -50px transform rotateZ (-35deg ) rotateX (360deg ) rotateY (360deg ) scale (.6 ) .text top 26px margin-left 10px .descr max-height 78px .card-tag left -100% &.terse .flink-item width calc (25% - 12px ) height 100px padding 6px margin 6px +maxWidth1024 () width calc (33% - 12px ) +maxWidth (1000 ) width calc (50% - 12px ) +maxWidth900 () width calc (33% - 12px ) +maxWidth (700 ) width calc (50% - 12px ) +maxWidth (450 ) width calc (100% - 12px ) .info position relative height 100% margin-left 10px width 100% .avatar position absolute transform scale (.7 ) left -15px top -6px .text position relative left 100px width calc (100% - 110px ) transition all .6s &:hover .avatar transform rotateX (180deg ) rotateY (180deg ) scale (.01 ) left -100px opacity 0 .text left 10px width calc (100% - 20px ) .text :first-child left 10px width calc (100% - 20px )
注意,上方代码中需要自己填写精灵图的 URL!
编写 YML 然后我们还需要编写友链的 YML 文件,格式要求如下:
1 2 3 4 5 6 7 8 9 10 - class_name: name beautify: true deprecated: false link_list: - name: name link: url descr: text siteshot: url
生成精灵图 接下来我们需要生成一个精灵图,有两种选择:
手动拼接 使用工具自动生成 前者的话找一个图片编辑软件自己一个一个按顺序拼接起来就可以了,每个头像必须为正方形且大小相同、纵向排列。
我写了一个自动化生成的工具,可以供小伙伴们使用:阿里云盘
该软件使用 Kotlin 编写,运行环境的最低要求为 JRE8,使用时通过命令启动即可:
1 java -jar ./SpriteBuilder.jar [args]
目前支持的参数有:
参数名 值类型 解释(缺省值) yml
String
修改友链文件的路径(source\_data\link.yml
) output
String
修改输出文件的路径(output.jpg
) size
Int
修改单个头像的大小(120
) showSuccess
无 打印渲染成功的信息
该工具支持解析友链 YML 的信息,然后拼接出图片,只支持导出 jpg 格式。
YML 的格式要求如下:
1 2 3 4 5 6 7 8 9 - deprecated: false link_list: - avatar: url0 - avatar: url1 - deprecated: false link_list:
工具支持解析jpg
、png
、icon
、webp
格式的图片,其它格式的图片不支持解析。解析图像时,如果是从网络拉取的图片,会优先使用响应头中的Content-Type
字段获取文件类型,其次使用文件拓展名。
创作不易,扫描下方打赏二维码支持一下吧ヾ(≧▽≦*)o