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

本文参考博客Neko

引入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) &#123; %> chip-active <% &#125; else &#123; %> chip-default <% &#125; %>" 
                style="background-color: <%- color %>;"> 
            <div class="notebook-skin 
                <% if (isCategory && category.name == page.category) &#123; %> chip-active <% &#125; else &#123; %> chip-default <% &#125; %>" >
                <%- category.name %> 
            </div> 
        </div> 
        <div class="notebook-page dotted"></div> 
    </div> 
</div>

设置css样式

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

<style>
/* 文章分类书本样式 */
.chip-container .tag-chips &#123;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
&#125;
.chip-container .tag-chips a &#123;
    margin: 0 7px 10px;
&#125;
.chip-container .chip &#123;
    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;
&#125;
.chip-container .notebook-cover::before &#123;
    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%);
&#125;

.chip .notebook-skin &#123;
    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);
&#125;
.chip .notebook-skin:before &#123;
    content: '';
    position: absolute;
    width: 100%;
    height: 15px;
    left: 0;
    bottom: 0;
    background: #cddc39;
&#125;
.notebook-cover &#123;
    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;
&#125;

.moleskine-wrapper &#123;
    max-width: calc(100% / 4);
    min-width: 10em;
&#125;
.moleskine-notebook:hover .notebook-cover &#123;
    transform: rotateY(-50deg);
    z-index: 99;
    box-shadow: 20px 10px 50px rgba(0,0,0,.2);
&#125;
.moleskine-notebook &#123;
    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;
&#125;
.moleskine-notebook:hover &#123;
    transform: rotateZ(-10deg);
&#125;
.notebook-page.dotted &#123;
    background: linear-gradient(to bottom,#fbfae8 9px,#e4e4e4 1px);
    background-size: 100% 10px;
&#125;
.chip-container .chip:hover &#123;
    background: none;
&#125;
.notebook-page &#123;
    height: 100%;
    width: 140px;
    position: absolute;
    top: 10px;
    background-color: #fbfae8;
    z-index: 0;
    border-radius: 5px 16px 16px 5px;
    overflow: hidden;
&#125;
</style>

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

结束

万事无如退步人，孤云野鹤自由身；
松风十里时来往，笑揖峰头月一轮。