给你的Hexo博客添加农历年份生肖标志

琅環书生2025-01-24

序言

闲来无事就逛逛主题的目录结构，发现了一个几乎没怎么用到的js文件：themes\anzhiyu\scripts\helpers\year.js，被里面的十二生肖给吸引了进去，我也不懂为什么会有这个文件的存在，于是在项目里搜了下都没在其他地方发现有引用它，于是突发奇想，就将博客的侧边栏个性欢迎的标志和页脚处，修改成了每年都换成对应年份的生肖标志，现在看着舒服多了，教程如下。

效果预览

通过调用year.js会根据年份自动取值对应的icon，当然我在原有的js基础上进行了一些修改，不仅会显示生肖标志，另外当鼠标放上去，Hover会显示当前年份的祝福描述，预览效果如下：

欢迎来访

👏 欢迎来自 上海省上海市 的小伙伴访问本站！ 十里洋场烟花地，风云际会上海滩！
🌍 你距离琅環书生大约 0 公里！
🏠 你的IP为：220.196.98.94
🕞 下午好，喝点茶，提提神！

修改后的js文件

当然你可以使用默认的，我是因为发现里面的icon好像都失效了，于是去iconfont里找了十二生肖的icon，你如果直接使用这个icon应该是没法用的，建议你也去自己找些icon然后在主题配置文件引用进来，修改对应的icon即可。

hexo.extend.helper.register("getAnimalIcon", function (year) {
  var index = parseInt(year) % 12;
  var icon = {
    0: { icon: "icon-zz-monkey", desc: "🐒猴年祝您万事不愁" },
    1: { icon: "icon-zz-rooster", desc: "🐔鸡年祝您大展宏图" },
    2: { icon: "icon-zz-dog", desc: "🐶狗年祝您万事皆旺" },
    3: { icon: "icon-zz-pig", desc: "🐷猪年祝您诸事顺遂" },
    4: { icon: "icon-zz-rat", desc: "🐀鼠年祝您财源广进" },
    5: { icon: "icon-zz-ox", desc: "🐂牛年祝您牛气冲天" },
    6: { icon: "icon-zz-tiger", desc: "🐯虎年祝您如虎添翼" },
    7: { icon: "icon-zz-rabbit", desc: "🐰兔年祝您吉祥如意" },
    8: { icon: "icon-zz-dragon", desc: "🐲龙年祝您龙腾虎跃" },
    9: { icon: "icon-zz-snake", desc: "🐍蛇年祝您行运高照" },
    10: { icon: "icon-zz-horse", desc: "🐎马年祝您一马当先" },
    11: { icon: "icon-zz-goat", desc: "🐑羊年祝您喜气洋洋" }
  };
  return icon[index];
});

调用方式：

getAnimalIcon(year).icon：调用当前年份的生肖icon；
getAnimalIcon(year).desc：调用当前年份的生肖描述；（主要是为了展示用的）

调用实例

比如我想修改的是侧边栏个性欢迎的icon，希望它每年根据年份自动显示对应的生肖icon
修改themes\anzhiyu\layout\includes\widget\card_announcement.pug

if theme.aside.card_announcement.enable
  - var nowYear = new Date().getFullYear()
  .card-widget.card-announcement
    .item-headline
      a.faa-parent.animated-hover(title='👏欢迎来访' + (getAnimalIcon(nowYear).desc) draggable='false')
        i.fab.iconfont(class=getAnimalIcon(nowYear).icon).faa-tada
      span= _p('欢迎来访')
    .announcement_content!= theme.aside.card_announcement.content