Friend Link 友链样式魔改
文章转载自 Akilarの糖果屋,如有侵权,请联系作者,本站仅当学习使用。
魔改步骤
- 修改
[Blogroot]\themes\butterfly\layout\includes\page\flink.pug
, 此处添加判断机制,使得可以通过修改配置文件来切换友链风格。同时为了方便管理,把各个友链样式放到新建的文件目录[Blogroot]\themes\butterfly\layout\includes\page\flink_style
下。
修改 [Blogroot]\themes\butterfly\layout\includes\page\flink.pug
,全部内容替换为:
1 | case theme.flink_style |
新建 [Blogroot]\themes\butterfly\layout\includes\page\flink_style\butterfly.pug
1 | #article-container |
新建 [Blogroot]\themes\butterfly\layout\includes\page\flink_style\volantis.pug
1 | #article-container |
新建 [Blogroot]\themes\butterfly\layout\includes\page\flink_style\flexcard.pug
1 | #article-container |
- 修改
[Blogroot]\themes\butterfly\source\css\_page\flink.styl
, 同理,将样式文件也放到新建的[Blogroot]\themes\butterfly\source\css\_flink_style
目录下方便管理。
修改 [Blogroot]\themes\butterfly\source\css_page\flink.styl
1 | if hexo-config('flink_style') == 'butterfly' |
新建 [Blogroot]\themes\butterfly\source\css\_flink_style\butterfly.styl
1 | .flink#article-container |
新建 [Blogroot]\themes\butterfly\source\css\_flink_style\volantis.styl
1 | trans($time = 0.28s) |
新建 [Blogroot]\themes\butterfly\source\css\_flink_style\flexcard.styl
1 | #article-container img |
- 因为
Volantis
的site-card
比Butterfly
的flink-card
多出了一个站点缩略图,所以需要再额外添加一条配置项。修改[Blogroot]\source\_data\link.yml
, 添加一条名为siteshot
的配置项。
1 | - class_name: 糖果屋のVIP |
- 在
[Blogroot]\_config.butterfly.yml
中添加配置项:
1 | # 友链样式,butterfly为默认样式,volantis为站点卡片样式.flexcard为弹性卡片样式 |
- 站点卡片添加了懒加载和图片失效替换。对应配置项为
[Blogroot]\_config.butterfly.yml
中的:
1 | # Replace Broken Images (替換無法顯示的圖片) |
- 可能遇到的
bug
:使用flexcard
样式时,因为全站字体大小配置与本站不一致的关系,可能导致友链卡片的头像位置偏移较大。请读者按照flink.styl
里的注释内容自己微调。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Cyan!
评论