hexo-归档页面加入12生肖

2020-05-03 | 2020-05-06

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

废话少说,开搞!

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

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

  1. 在你主题的 themes\某某主题\scripts,创建 year.js
    把下面代码填入year.js
hexo.extend.helper.register('getAnimalIcon', function (year) {
    var index = parseInt(year) % 12;
    var icon = {
        0: 'icon-hou',
        1: 'icon-ji',
        2: 'icon-gou',
        3: 'icon-zhu',
        4: 'icon-shu',
        5: 'icon-niu',
        6: 'icon-hu',
        7: 'icon-tu',
        8: 'icon-long',
        9: 'icon-she',
        10: 'icon-ma',
        11: 'icon-yang',
    }
    return icon[index]
});
  1. 下载字体文件 :
    Github
    把5个文件放在你的主题 source/fonts里面,如果没有fonts文件夹,请自行创建。
  1. 找到你主题的 CSS文件,通常在 source/css/ ,加入以下代码:
    // Custom styles.
    @font-face {
      font-family: 'fontello';
      src: url("/fonts/fontello.eot?58336539");
      src: url("/fonts/fontello.eot?58336539#iefix") format("embedded-opentype"), url("/fonts/fontello.woff2?58336539") format("woff2"), url("/fonts/fontello.woff?58336539") format("woff"), url("/fonts/fontello.ttf?58336539") format("truetype"), url("/fonts/fontello.svg?58336539#fontello") format("svg");
      font-weight: normal;
      font-style: normal
    }
    [class^="icon-"]:before, [class*=" icon-"]:before {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      font-variant: normal;
      text-transform: none;
      line-height: 1em;
      margin-left: .2em;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }
    .icon-feather:before {
      content: '\e800'
    }
    .icon-cc:before {
      content: '\e802'
    }
    .icon-long:before {
      content: '\e806'
    }
    .icon-angle-left:before {
      content: '\e807'
    }
    .icon-text:before {
      content: '\e808'
    }
    .icon-hu:before {
      content: '\e809'
    }
    .icon-weibo:before {
      content: '\e80a'
    }
    .icon-angle-down:before {
      content: '\e80b'
    }
    .icon-archive:before {
      content: '\e80c'
    }
    .icon-search:before {
      content: '\e80d'
    }
    .icon-rss-2:before {
      content: '\e80e'
    }
    .icon-heart:before {
      content: '\e80f'
    }
    .icon-zhu:before {
      content: '\e810'
    }
    .icon-user-1:before {
      content: '\e811'
    }
    .icon-calendar-1:before {
      content: '\e812'
    }
    .icon-ma:before {
      content: '\e813'
    }
    .icon-box:before {
      content: '\e814'
    }
    .icon-home:before {
      content: '\e815'
    }
    .icon-shu:before {
      content: '\e816'
    }
    .icon-calendar:before {
      content: '\e817'
    }
    .icon-yang:before {
      content: '\e818'
    }
    .icon-user:before {
      content: '\e819'
    }
    .icon-info-circled-1:before {
      content: '\e81a'
    }
    .icon-lsit:before {
      content: '\e81b'
    }
    .icon-rss:before {
      content: '\e81c'
    }
    .icon-info:before {
      content: '\e81d'
    }
    .icon-wechat:before {
      content: '\e81e'
    }
    .icon-comment:before {
      content: '\e81f'
    }
    .icon-she:before {
      content: '\e820'
    }
    .icon-info-with-circle:before {
      content: '\e821'
    }
    .icon-niu:before {
      content: '\e822'
    }
    .icon-mail:before {
      content: '\e823'
    }
    .icon-list:before {
      content: '\e824'
    }
    .icon-gou:before {
      content: '\e825'
    }
    .icon-tu:before {
      content: '\e826'
    }
    .icon-twitter:before {
      content: '\e827'
    }
    .icon-location:before {
      content: '\e828'
    }
    .icon-hou:before {
      content: '\e829'
    }
    .icon-qq:before {
      content: '\e82a'
    }
    .icon-tag:before {
      content: '\e82b'
    }
    .icon-angle-right:before {
      content: '\e82c'
    }
    .icon-github:before {
      content: '\e82d'
    }
    .icon-angle-up:before {
      content: '\e82e'
    }
    .icon-ji:before {
      content: '\e82f'
    }
  1. 在归档页面年份旁边引用:
    打开你的 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>
  1. 效果图

years.jpg


静态纯css响应式博客引导页
C语言复习笔记-4
© 2020 DmxZ
Powered by hexo | Theme is blank