魔改步骤
- 修改 [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!
评论
您无需删除空行,直接评论以获取最佳展示效果