觉得分类页面不是很好看，打算魔改一下分页页面，恰好店长有写过首页分类的磁贴插件，于是打算利用店长的插件中的配置来进行魔改一番(具体效果可查看分类页面)，下面记录一下魔改步骤~

修改源码

  1. 修改 [Blogroot]\themes\butterfly\layout\includes\page\categories.pug

    1
    2
    3
    4
    5
    6
    .category-lists
    - .category-title.is-center= _p('page.category')
    -   |  - 
    -   span.category-amount= site.categories.length
    - div!= list_categories()
      div!= list_category()

  2. 新建 [Blogroot]\themes\butterfly\scripts\helpers\category.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    'use strict'

    hexo.extend.helper.register('list_category', function (categories, options) {
        if (!options && (!categories || !Object.prototype.hasOwnProperty.call(categories, 'length'))) {
            options = categories;
            categories = this.site.categories;
        }

        if (!categories || !categories.length) return '';
        options = options || {};

        const { style = 'list', transform, separator = ', ', suffix = '' } = options;
        const showCount = Object.prototype.hasOwnProperty.call(options, 'show_count') ? options.show_count : true;
        const className = options.class || 'category';
        const depth = options.depth ? parseInt(options.depth, 10) : 0;
        const orderby = options.orderby || 'name';
        const order = options.order || 1;
        const showCurrent = options.show_current || false;
        const childrenIndicator = Object.prototype.hasOwnProperty.call(options, 'children_indicator') ? options.children_indicator : false;
        let enable = false, cover = [], descr = [];
        let categoryConfig = {};
        if(hexo.theme.config.categoryBar){
            categoryConfig = hexo.theme.config.categoryBar;
        }

        if(hexo.theme.config.category){
            categoryConfig = hexo.theme.config.category;
        }

        enable = categoryConfig.enable;
        cover = categoryConfig.cover;
        descr = categoryConfig.descr;

        const prepareQuery = parent => {
            const query = {};

            if (parent) {
                query.parent = parent;
            } else {
                query.parent = {$exists: false};
            }

            return categories.find(query).sort(orderby, order).filter(cat => cat.length);
        };

        const hierarchicalList = (level, parent) => {
            let result = '';

            prepareQuery(parent).forEach((cat, i) => {
                let child;
                if (!depth || level + 1 < depth) {
                    child = hierarchicalList(level + 1, cat._id);
                }

                let isCurrent = false;
                if (showCurrent && this.page) {
                    for (let j = 0; j < cat.length; j++) {
                        const post = cat.posts.data[j];
                        if (post && post._id === this.page._id) {
                            isCurrent = true;
                            break;
                        }
                    }

                    // special case: category page
                    isCurrent = isCurrent || (this.page.base && this.page.base.startsWith(cat.path));
                }

                const additionalClassName = child && childrenIndicator ? ` ${childrenIndicator}` : '';

                result += `<li class="${className}-list-item${additionalClassName}">`;

                result += `<a class="${className}-list-link${isCurrent ? ' current' : ''}" href="/${cat.path}${suffix}">`;
                result += transform ? transform(cat.name) : cat.name;
                result += '</a>';

                if (showCount) {
                    result += `<span class="${className}-list-count">${cat.length}</span>`;
                }

                if (child) {
                    result += `<ul class="${className}-list-child">${child}</ul>`;
                }

                result += '</li>';
            });

            return result;
        };

        const flatList = (level, parent) => {
            let result = '';

            prepareQuery(parent).forEach((cat, i) => {
                if (i || level) result += separator;

                result += `<a class="${className}-link" href="/${cat.path}${suffix}">`;
                result += transform ? transform(cat.name) : cat.name;

                if (showCount) {
                    result += `<span class="${className}-count">${cat.length}</span>`;
                }

                result += '</a>';

                if (!depth || level + 1 < depth) {
                    result += flatList(level + 1, cat._id);
                }
            });

            return result;
        };

        const barList = (level, parent) => {
            let picture = cover.map(item => {
                return item.slice(5, -2);
            })

            let result = '';
            prepareQuery(parent).forEach((cat, i) => {
                if(i || level) result += separator;
                
                result += '<figure class="effect-apollo">';
                result += `<img src="${picture[i]}" alt="${descr[i]}"><figcaption>`;
                result += '<h3>';
                result += transform ? transform(cat.name) : cat.name;
                result += '</h3>';
                if (showCount) {
                    result += `<p>${cat.length}</p>`;
                }
                result += `<a class="${className}-list-link" href="/${cat.path}${suffix}">${cat.name}</a>`;
                result += '</figcaption></figure>'
            })

            return result;
        }

        if(enable){
            return `<div class="category_card_wrap">${barList(0)}</div>`
        }

        if (style === 'list') {
            return `<ul class="${className}-list">${hierarchicalList(0)}</ul>`;
        }

        return flatList(0);
    })

  3. 新建 [Blogroot\themes\butterfly\source\css\costom.css]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    .category_card_wrap{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .category_card_wrap figure {
        position: relative;
        overflow: hidden;
        margin: 10px 1%;
        width: 30%;
        height: auto;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
    }

    .category_card_wrap figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        opacity: 0.8;
    }

    figure.effect-apollo p {
      position: absolute;
      right: 0;
      bottom: 0;
        margin-right: 1em;
      padding: 0 1em;
      max-width: 150px;
        height: 1em;
        line-height: 1em;
        vertical-align: middle;
      border-right: 4px solid #fff;
      text-align: right;
      opacity: 0;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }

    figure.effect-apollo:hover p {
      opacity: 1;
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
    }

    .category_card_wrap figure figcaption {
        padding: .8em 1em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .category_card_wrap figure figcaption::before,
    .category_card_wrap figure figcaption::after {
        pointer-events: none;
    }

    .category_card_wrap figure figcaption,
    .category_card_wrap figure figcaption > a {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .category_card_wrap figure figcaption > a {
        z-index: 1000;
        text-indent: 200%;
        white-space: nowrap;
        font-size: 0;
        opacity: 0;
    }

    .category_card_wrap figure h3 {
        color: #fff;
        word-spacing: -0.15em;
        font-weight: 300;
    }

    .category_card_wrap figure h3{
        margin: 0;
    }


    .category_card_wrap figure.effect-apollo img {
        opacity: 0.95;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: scale3d(1.05,1.05,1);
        transform: scale3d(1.05,1.05,1);
    }

    .category_card_wrap figure.effect-apollo figcaption::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.5);
        content: '';
        -webkit-transition: -webkit-transform 0.6s;
        transition: transform 0.6s;
        -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
        transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    }

    .category_card_wrap figure.effect-apollo h3 {
        text-align: left;
    }

    .category_card_wrap figure.effect-apollo:hover img {
        opacity: 0.6;
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }

    .category_card_wrap figure.effect-apollo:hover figcaption::before {
        -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
        transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
    }

  4. 在 _config.butterfly.yml.yml 的 inject 中引用 css

  5. 如果使用店长的插件，不需要做任何配置即可在分类页面中看到不一样的分类，如果没有使用店长的插件，可以在 _config.butterfly.yml.yml 配置以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    category:
      enable: true # 控制分类魔改是否开启，false，表示使用原分类样式
      descr:  
        - 作品集
        - 听力练习
        - 学习&教程
      cover: # 分类图片
        - url('https://cdn.jsdelivr.net/gh/milkdue/cdn@2.9/img/girl2.jpg')
        - url('https://cdn.jsdelivr.net/gh/milkdue/cdn@2.9/img/three.jpg')
        - url('https://cdn.jsdelivr.net/gh/milkdue/cdn@3.0/img/four1.jpg')