【butterfly】分类磁贴插件版

安装插件

在博客根目录[you_blog]下打开终端，运行以下指令：

1	npm install hexo-butterfly-categories-card --save

配置主题文件

在主题配置文件_config.butterfly.yml中添加以下代码：

# hexo-butterfly-categories-card (分类磁贴)
categoryBar:
  enable: true # 开关
  priority: 5 #过滤器优先权
  enable_page: '/categories/' # 应用页面
  layout: # 挂载容器类型
    type: id
    name: page
    index: 0
  column: odd # odd：3列 | even：4列
  row: 2 #显示行数，默认两行，超过行数切换为滚动显示
  message:
    - descr: 
      cover: 
    - descr: 
      cover: 
    - descr: 
      cover: 
    - descr: 
      cover: 
    - descr: 
      cover: 
    - descr: 
      cover: 
  custom_css: https://npm.elemecdn.com/hexo-butterfly-categories-card@1.0.0/lib/categorybar.css

隐藏原有分类

在自定义css文件中，加入以下代码,将原分类显示隐藏；

/* 隐藏原有分类start */
#content-inner #page .category-lists {
  display: none;
}
/* 隐藏原有分类end */

参数释义

参数	备选值/类型	释义
priority	number	【可选】过滤器优先级，数值越小，执行越早，默认为10，选填
enable	true/false	【必选】控制开关
enable_page	path/all	【可选】填写想要应用的页面的相对路径（即路由地址）,如根目录就填’/‘,分类页面就填’/categories/‘。若要应用于所有页面，就填’all’，默认为’/‘
layout.type	id/class	【可选】挂载容器类型，填写id或class，不填则默认为id
layout.name	text	【必选】挂载容器名称
layout.index	0和正整数	【可选】前提是layout.type为class，因为同一页面可能有多个class，此项用来确认究竟排在第几个顺位
column	odd/even	【可选】显示列数，考虑到比例问题，只提供3列和4列，odd为3列， even为4列
row	number	【可选】显示行数，默认两行，超过行数切换为滚动显示
message.descr	text	分类描述,需要和你自己的文章分类一一对应。
message.cover	url	分类背景,需要和你自己的文章分类一一对应。
custom_css	url	【可选】自定义样式，会替换默认的css链接，可以下载文档给出的cdn链接后自主修改

遇到的Bug

因为分类的排列顺序不是固定的，但message的顺序确实固定的，导致分类和描述对应关系错误，故message信息暂时留空。
点击分类跳到404页面，F12发现A标签的onclick="pjax.loadUrl("categories/Windows/");"少了一个/故不能正常跳转;
解决办法：
打开[you_blog]\node_modules\hexo-butterfly-categories-card\lib\html.pug文件，修改如下代码：

.recent-post-item(style='height:auto;width:100%;padding:0px;')
  #categoryBar
    ul.categoryBar-list
      if pjaxenable
        each cl in categories_list
          li.categoryBar-list-item(style=`background:url(` + cl.cover + `);`)
-            a.categoryBar-list-link(onclick=`pjax.loadUrl("` + cl.path + `");` href='javascript:void(0);'  )
+            a.categoryBar-list-link(onclick=`pjax.loadUrl("` + "/" + cl.path + `");` href='javascript:void(0);'  )
              span.categoryBar-list-text= cl.name
              span.categoryBar-list-count= cl.length
              span.categoryBar-list-descr= cl.descr
      else
        each cl in categories_list
          li.categoryBar-list-item(style=`background:url(` + cl.cover + `);`)  
-            a.categoryBar-list-link(href=cl.path)= cl.name
+            a.categoryBar-list-link(href="/" + cl.path)= cl.name
            span.categoryBar-list-count= cl.length
            span.categoryBar-list-descr= cl.descr