关于给hexo文章分类页面按钮仿书本样式美化

前言：最近成迷于美化hexo博客样式，发现了这个超好看的样式，美化了一下，基于matery主题设置的，其他主题原理也一样可参考。

废话不多说，先上图：


源网页：
hexo文章分类页面按钮仿书本样式美化

• 特点: 都是div+css美化效果，所以没啥难度，可以直接复制我以下的代码，或者做修改都可。

引入html代码

• 1、首先，找到位置为/layout/category-cloud.ejs的文件，后面的html和css代码都放在此category-cloud.ejs文件即可。
• 2、然后，定位到href=”<%- url_for(category.path) %>”的a标签位置：

  <!-- 定位到该位置 -->
  <a href="<%- url_for(category.path) %>" title="<%- category.name %>: <%- category.length %>">
  

• 3、直接将该a标签里面的内容全部替换为以下代码：

    <div class="moleskine-wrapper">
        <div class="moleskine-notebook">
            <div class="chip notebook-cover center-align waves-effect waves-light
            <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                    style="background-color: <%- color %>;">                                               
                <div class="notebook-skin
                    <% if (isCategory && category.name == page.category) { %> chip-active <% } else { %> chip-default <% } %>"
                    ><%- category.name %>                                  
                </div>
            </div>
            <div class="notebook-page dotted"></div>
        </div>
    </div>
  

设置css样式

这部分同样放在此category-cloud.ejs文件即可。

    <style>
    /* 文章分类书本样式 */
    .chip-container .tag-chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .chip-container .tag-chips a {
        margin: 0 7px 10px;
    }
    .chip-container .chip {
        max-width: calc(100% / 4);
        min-width: 10em;
        height: 200px;
        position: relative;
        transition: .5s linear;
        padding: 19px 0;
        line-height: 20px;
        z-index: 990;
        border-radius: 5px 15px 15px 5px;
        transform-origin: left center 0;
    }
    .chip-container .notebook-cover::before {
        content: "";
        position: absolute;
        width: 10px;
        height: calc(100% + 2px);
        top: -1px;
        z-index: 100;
        border-radius: 2px;
        right: 25px;
        transition: 2s ease;
        /* background: linear-gradient(to right,#9c2e2b 0,#cc4b48 12%,#9c2e2b 25%,#cc4b48 37%,#9c2e2b 50%,#cc4b48 62%,#9c2e2b 75%,#cc4b48 87%,#9c2e2b 100%); */
        background: linear-gradient(to right,#1e606e 0,#2e95aa 12%,#1e606e 25%,#2e95aa 37%,#1e606e 50%,#2e95aa 62%,#1e606e 75%,#2e95aa 87%,#1e606e 100%);
    }

    .chip .notebook-skin {
        height: 50px;
        width: 100%;
        background: #e8e8e0;
        margin-top: 42px;
        padding: 10px 32px 64px 10px;
        font-size: 19px;
        position: relative;
        z-index: 10;
        color: #222;
        text-align: left;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
    }
    .chip .notebook-skin:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 15px;
        left: 0;
        bottom: 0;
        background: #cddc39;
    }
    .notebook-cover {
        background: #cc4b48;
        height: 200px;
        width: 140px;
        position: absolute;
        border-radius: 5px 15px 15px 5px;
        z-index: 10;
        transition: .5s linear;
        transform-style: preserve-3d;
        transform-origin: left center 0;
    }

    .moleskine-wrapper {
        max-width: calc(100% / 4);
        min-width: 10em;
    }
    .moleskine-notebook:hover .notebook-cover {
        transform: rotateY(-50deg);
        z-index: 99;
        box-shadow: 20px 10px 50px rgba(0,0,0,.2);
    }
    .moleskine-notebook {
        height: 200px;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        transition: .5s linear;
        border-radius: 5px 15px 15px 5px;
        transform-origin: left center 0;
    }
    .moleskine-notebook:hover {
        transform: rotateZ(-10deg);
    }
    .notebook-page.dotted {
        background: linear-gradient(to bottom,#fbfae8 9px,#e4e4e4 1px);
        background-size: 100% 10px;
    }
    .chip-container .chip:hover {
        background: none;
    }
    .notebook-page {
        height: 100%;
        width: 140px;
        position: absolute;
        top: 10px;
        background-color: #fbfae8;
        z-index: 0;
        border-radius: 5px 16px 16px 5px;
        overflow: hidden;
    }
    </style>

至此，结束。很简单，但超好看。

本文参考了以下博客：如果你使用的是和我一样的matery主题，则可以直接复制上面代码，再做酌情修改样式即可，其他主题的也一样，逻辑都是一样的。

Sanarous’s Blog