自從建立博客以來,在下一直喜歡拜訪其他大佬的博客,發現很多博客都有書單頁面,令在下也很是動心。基於在下貧弱不堪的前端水平,在下開始尋找能夠給 WordPress 博客添加一個書單頁面的一條龍教程或插件,可惜既沒有找到滿意的教程,也沒有能用的插件,遂決定自己動手製作。

說到書單頁面,給在下留下非常深刻印象的還屬 蟬時雨 大佬的作品,其書籍以立體的形式展示而且還帶有旋轉效果。於是在下決定也給自己來一個這樣的書單,然而對於一個發量危急的法學生來說,想實現這個效果可並沒有那麼簡單。好在有其他大佬已經在 CSDN 分享了立體書籍旋轉效果的代碼,只要拿來作適當修改便是。

接下來就開始書單模板的製作了,首先在 WordPress 主題根目錄下把 page.php 複製一份,重命名為 page-book.php ,並把開頭的注釋改為如下所示。

/**
 * Template Name: 書單模版
 */

這樣一來,就能在後台的新建頁面界面的模板選項中看到書單模板了。
繼續在 page-book.php 的注釋後添加如下樣式代碼。
當然可以依照個人需要進行微調。

<style>
    .group:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    * html .group {
        height: 1%;
    }

    *:first-child+html .group {
        min-height: 1px;
    }

    body {
        line-height: 1.9em;
        background-color: #0b3065;
        background-size: cover;
        font-family: arial,
        sans-serif;
    }

    .container {
        max-width: 60em;
        margin: 0 auto;
        padding: 0 2em;
    }

    .text.container {
        max-width: 38em;
        text-align: center;
        margin: 50px auto 100px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
    }

    a {
        color: #da9803;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    h.main-title {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        color: #fff;
        font-weight: normal;
        margin: 1.25em;
        text-align: center;
        font-size: 2.75em;
        letter-spacing: -1px;
    }

    p {
        margin-bottom: 1em;
        font-size: 1.25em;
    }

    hr {
        margin: 2em 0;
    }

    .book-container {
        width: 100%;
        margin: 0 auto;
        display: block;
        -webkit-perspective: 1000px;
        -moz-perspective: 1000px;
        perspective: 1000px;
    }

    .book {
        z-index: 5;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        -webkit-transition: 0.75s;
        -moz-transition: 0.75s;
        transition: 0.75s;
        -webkit-transform-style: preserve-3d;
        -moz-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform-origin: 33% 0;
        -moz-transform-origin: 33% 0;
        transform-origin: 33% 0;
    }

    .book:after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 3px;
        width: 7px;
        background: url(翻頁轉角處的圖片) repeat-y;
        z-index: 20;
        -webkit-transform: translateZ(1px);
    }

    .book:hover {
        -webkit-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
        -moz-transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
        transform: translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
    }

    .book-cover {
        position: relative;
        z-index: 10;
    }

    .book-cover img {
        vertical-align: bottom;
        max-width: 100%;
        height: auto;
    }

    .book-spine {
        position: absolute;
        color: #fff;
        bottom: 0;
        top: 0;
        width: 10%;
        z-index: 5;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
        background: url(書的側面圖片) -64px 0 no-repeat;
        background-size: auto 100%;
        -webkit-transform: rotateY(-90deg) translateX(-100%);
        -moz-transform: rotateY(-90deg) translateX(-100%);
        transform: rotateY(-90deg) translateX(-100%);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .book-spine h {
        display: block;
        width: 100%;
        text-align: left;
        color: #fff;
        position: absolute;
        top: 0;
        left: 19%;
        text-indent: 43px;
        text-transform: uppercase;
        font-family: "league_gothic_condensedRg", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 2em;
        opacity: 0.75;
        font-weight: normal;
        -webkit-font-smoothing: antialiased;
        -webkit-transform: rotateZ(90deg);
        -moz-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        transform-origin: 0 0;
    }

    .book-spine:before {
        display: block;
        content: "";
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
    }
</style>

一切就緒之後就可以使用模板了,只要在模板當中輸入以下 HTML 代碼,就能使書籍的封面圖獲得立體旋轉效果了。

<div class="container group" valign="top">
                <a class="book-container">
                    <div class="book">
                        <div class="book-cover">
                        <img src="書籍封面圖" alt="" />
                        </div>
                        <div class="book-spine">
                        <h>書脊文字</h>
                        </div>
                    </div>
                </a>
            </div>

此時可以結合使用 <div> 塊或是表格來進行排版,添加更多的書籍信息和其他元素,最終打造出書單頁面。

雖然這個模板做得十分笨拙,立體旋轉效果也不如蟬時雨大佬的書單精緻,且存在很多可以優化的地方(例如可以把那一大塊 HTML 代碼簡化成短代碼等等),但要比簡單粗暴直接放表格陳列好多了。況且也是自己搗鼓的東西,對於在下這個偽程序宅,還是有不小的成就感。(°∀°)ノ`


封面來源:和洋折衷ライブラリー | 藤原 #pixiv https://www.pixiv.net/artworks/61930743