IT博客汇 | Butterfly美化-Archive Beautify

Butterfly美化-Archive Beautify

JayHrn发表于 2023-12-19 09:35:28

参考自Akilarの糖果屋的Archive Beautify，本文仅为记录魔改过程

步骤

custom目录若没有需要自己新建

在[Blogroot]\themes\butterfly\scripts\custom\目录下新建animals_timeline_year.js，并在
[Blogroot]\themes\butterfly\scripts\custom\animals_timeline_year.js中输入以下内容：

hexo.extend.helper.register('getAnimalIcon', function (year) {
    var index = parseInt(year) % 12;
    var icon = {
        0: 'icon-monkey',
        1: 'icon-rooster',
        2: 'icon-dog',
        3: 'icon-boar',
        4: 'icon-rat',
        5: 'icon-ox',
        6: 'icon-tiger',
        7: 'icon-rabbit',
        8: 'icon-dragon',
        9: 'icon-snake',
        10: 'icon-horse',
        11: 'icon-goat',
    }
    return icon[index]
});

在[Blogroot]\_config.butterfly.yml的inject配置项中填入我的生肖图标线上链接，并引入自定义css文件（没有animals_timeline.css文件的可以自己新建一个[Blogroot]\themes\butterfly\source\css\custom\animals_timeline.css）：

    inject:
      head:
+       - <link rel="stylesheet" href="/css/custom/animals_timeline.css"  media="defer" onload="this.media='all'">
      bottom:
        # 此引入可以选用自己的图标
+       - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>

此处async是异步加载属性，能够减少HTML阻塞。

打开[Blogroot]\themes\butterfly\source\css\custom\animals_timeline.css,输入以下内容:

svg.icon {
  /* 这里定义svg.icon，避免和Butterfly自带的note标签冲突 */
   width: 1em; height: 1em;
   /* width和height定义图标的默认宽度和高度*/
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

修改[Blogroot]\themes\butterfly\layout\includes\mixins\article-sort.pug，第7行开始，注意缩进。

    - let title = article.title || _p('no_title')
+   - let iconAnimal = '#'+ getAnimalIcon(tempYear)
    if tempYear !== year
      - year = tempYear
-     .article-sort-item.year= year
+     .article-sort-item.year
+       span= year
+       svg.icon(aria-hidden='true')
+         use(xlink:href=iconAnimal)
    .article-sort-item(class=no_cover)
      if article.cover && theme.cover.archives_enable

运行hexo clean && hexo g以后即可看到效果。
图标预览

如果不想用本教程的生肖图标，也可以自由替换。阿里矢量图标的添加和引入方案可以参考Akilar教程：

引用站外地址

Butterfly美化-Archive Beautify

糖果屋教程贴

方案中第1步和第2步的图标名称有对应关系。如果需要自定义图标，记得修改这两步中的对应内容。