hexo-归档页面加入12生肖

2020.05.03

2022.02.13

hexo

765 字 3 分钟

往hexo-归档页面加入12生肖，灵感是看了 reuixiy 的这篇文章《往 NexT 主题的归档页面加入 12 生肖》，就打算把它移植到我写的这个主题。因为我觉得这个主题的归档页面确实是简陋了点，加上了12生肖，至少增添了不一样的色彩😋。

废话少说，开搞！

Ps. 如果你是 .swig 模板，我觉得reuixiy 的这篇文章《往 NexT 主题的归档页面加入 12 生肖》写得更好，更适合你。如果还不懂，《 hexo 给 next 模版归档页面年份后面增加十二生肖图标》，这篇文章你也可以参考下。

接下来，下面所有的代码都是基于 .ejs 模板，（如果你是 .pug模板，麻烦把代码转成.pug格式应该也可以）😥

新建脚本

在你主题的 themes\某某主题\scripts，创建 year.js
把下面代码填入year.js

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

下载字体文件 :

Github
把3个文件放在你的主题 source/fonts里面，如果没有fonts文件夹，请自行创建。

找到你主题的 CSS文件，通常在 source/css/ ，加入以下代码：

@font-face {
  font-family: 'chinese-zodiac';
  font-display: swap;
  src: url('../fonts/chinese-zodiac.eot');
  src: url('../fonts/chinese-zodiac.eot') format('embedded-opentype'),
       url('../fonts/chinese-zodiac.woff2') format('woff2'),
       url('../fonts/chinese-zodiac.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.symbolic-animals {
  display: inline-block;
  font: normal normal normal 14px/1 chinese-zodiac;
  font-size: larger;
  float: right;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-dragon:before { content: '\e806'; }
.icon-tiger:before { content: '\e809'; }
.icon-pig:before { content: '\e810'; }
.icon-horse:before { content: '\e813'; }
.icon-rat:before { content: '\e816'; }
.icon-goat:before { content: '\e818'; }
.icon-snake:before { content: '\e820'; }
.icon-ox:before { content: '\e822'; }
.icon-dog:before { content: '\e825'; }
.icon-rabbit:before { content: '\e826'; }
.icon-monkey:before { content: '\e829'; }
.icon-rooster:before { content: '\e82f'; }

在归档页面年份旁边引用

打开你的 archives.ejs 模板，hexo 主题的归档页面大多有年份，因此你仅需要，找到定义年份的div标签，在其后加入：
<i class="<%- getAnimalIcon(cur_year) %>"></i>，就大功告成了！

举个栗子：
我写的主题定义年份是这样子的:

1
2
3

<div class="years">
   <h1><%- cur_year %> </h1>
 </div>

因此我仅需要在 <%- cur_year %> ,的后面加入就行了：

1
2
3

<div class="years">
   <h1><%- cur_year %> <i class="<%- getAnimalIcon(cur_year) %>"></i></h1>
 </div>

效果图

作者: DmxZ

链接: https://dmx.pub/posts/6f320e1c.html

声明: 本博客所有文章除特别声明外，均采用许可协议 CC-BY-NC-4.0 转载请注明出处！

hexo chinese-zodiac