Butterfly主题美化之加时钟

时钟一

效果图：

• 首先我们下载这两个文件(snap.svg-min.js 和clock.js)，并把它们放到主题目录下的source/js中
• 再下载此文件(index.html)放在目录\themes\butterfly\layout\includes\widget下
• 在目录\themes\butterfly\layout\includes\widget下建立文件card_per.pug，内容如下

.card-widget.card-aper
  .card-content
    .item-headline
      i.fas.fa-clock-o
      span= _p('aside.card_per')
      include index.html

• 在目录\themes\butterfly\layout\includes\widget下找到index.pug并在自己想要的位置添加代码

if theme.aside.card_per
       !=partial('includes/widget/card_per', {}, {cache:theme.fragment_cache})

• 找到\themes\butterfly\languages\zh-CN.yml中的aside并添加 card_per: 现在时间

aside:
  articles: 文章
  tags: 标签
  categories: 分类
  card_announcement: 公告
  card_per: 现在时间

• 在主题目录下的_config.yml的aside中添加card_per： true
• 在主题目录下的_config.yml的inject中添加代码

inject:
  head:
  
  bottom:
     - <script src='/js/snap.svg-min.js'></script>
     - <script src="/js/clock.js"></script>

最后hexo s就可以本地看到结果