自从建立博客以来，在下一直喜欢拜访其他大佬的博客，发现很多博客都有书单页面，令在下也很是动心。基于在下贫弱不堪的前端水平，在下开始寻找能够给 WordPress 博客添加一个书单页面的一条龙教程或插件，可惜既没有找到满意的教程，也没有能用的插件，遂决定自己动手制作。
说到书单页面，给在下留下非常深刻印象的还属 蝉时雨 大佬的作品，其书籍以立体的形式展示而且还带有旋转效果。于是在下决定也给自己来一个这样的书单，然而对于一个发量危急的法学生来说，想实现这个效果可并没有那么简单。好在有其他大佬已经在 CSDN 分享了立体书籍旋转效果的代码，只要拿来作适当修改便是。
模板制作
接下来就开始书单模板的制作了，首先在 Wordpress 主题根目录下把 page.php 复制一份，重命名为 page-book.php ，并把开头的注释改为如下所示。
这样一来，就能在后台的新建页面界面的模板选项中看到书单模板了。 继续在 page-book.php 的注释后添加如下样式代码。 当然可以依照个人需要进行微调。
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
| <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 代码，就能使书籍的封面图获得立体旋转效果了。
1
2
3
4
5
6
7
8
9
10
11
12
| <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 代码简化成短代码等等），但要比简单粗暴直接放表格陈列好多了。况且也是自己捣鼓的东西，对于在下这个伪程序宅，还是有不小的成就感。
