hexo-归档页面加入12生肖

往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>,就大功告成了!

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

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

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

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

效果图

years.jpg

  • 支付宝
  • 微信
hexo chinese-zodiac
静态纯css响应式博客引导页
简约纯写作主题 hexo-theme-blank
© 2020 DmxZ
Powered by hexo | Theme is blank