基于紫罗兰主题修改，其它主题也可以使用。
本来是想写个鼠标悬停显示摘要的，但是我又要换回nexmoe了就直接弃坑了hhh
紫罗兰用户
如果你是紫罗兰用户，只需要进行以下几步修改就可以了
打开 index.php 找到第 174 行的这段代码删掉即可
1
2
3
| <div class="card-body">
P.S把这一块全删掉，由于是收费主题所以就不把具体的贴出来了
</div>
|
然后连着上面的题图输出整段替换成
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="show">
<div class="card d-block"><div class="card-img-bili">
<img style="z-index:100;"class="card-img-top b-lazy" src="<?php echo theurl; ?>img/load.gif" data-url="<?php showThumbnail($this); ?>" alt="<?php $this->title(); ?>">
<a href="<?php $this->permalink() ?>">
<div class="black">
<h1 style="z-index:101; position:absoulte!important;">
<?php $this->title() ?></h1>
<div align="center">
<hr>
<span> <?php $this->date('F j, Y'); ?> </span>
<span><?php $this->category(','); ?></span>
<span> <?php $this->author(); ?> </span>
</div>
</div></a> </div></div>
|
然后加入样式内容
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
| .black {
position:absolute;
height: 100%;
z-index:101;
width:100%;
background-color: rgba(0,0,0,.3);
color: #fff!important;
transition: all .3s;
}
.black h1 {
margin-top:25%;
text-align:center;
font-size:38px;
}
#widget-to-top {
z-index:102;
}
.show:hover {
box-shadow:0px 1rem 2rem 0px rgb(182,178,188);
transform:translate(0,-5px);
transition: all .3s;
}
.show {
margin-top:10px;
}
.black a {
color:white;
font-size:20px;
}
.black span {
text-align:center;
font-size:20px;
}
@media screen and (max-width: 1028px) {
.about {
display: none;
}
}
@media screen and (max-width: 370px) {
.black a {
font-size: 13px !important;
}
.black span {
font-size: 13px !important;
}
.black h1 {
font-size:25px !important;
}
}
@media screen and (max-width: 600px) {
.black h1 {
font-size:30px;
}
.black span {
font-size: 18px;
}
.black a {
font-size: 18px;
}
}
@media screen and (max-width: 1400px) {
.black h1 {
font-size:35px;
}
.black span {
font-size: 18px;
}
.black a {
font-size: 18px;
}
}
@media screen and (max-width: 1141px) {
.black h1 {
font-size:30px;
}
.black span {
font-size: 18px;
}
.black a {
font-size: 18px;
}
}
@media screen and (max-width: 890px) {
.black span {
font-size: 15px;
}
.black a {
font-size: 15px;
}
}
@media screen and (max-width: 830px) {
.black h1 {
font-size:26px;
}
.black span {
font-size: 14px;
}
.black a {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.black a {
font-size:20px;
}
.black span {
text-align:center;
font-size:20px;
}
#horizontal-topbar-placeholder {
display: block !important;
}
.black h1 {
font-size:40px;
}}
@media screen and (max-width: 470px) {
.black a {
font-size:18px;
}
.black span {
text-align:center;
font-size:18px;
}
.black h1 {
font-size:30px;
}}
|
针对不同的设备字体也是不同的，就是这个实现方法太硬核了hhh
如果你想要预览图中左侧的个人介绍，可以移步到这篇文章侧边栏增加个人介绍
其他用户
其实并没有多复杂，只需要加上泽泽之前写的获取缩略图就可以了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| /** 输出文章缩略图 */
function showThumbnail($widget)
{
// 当文章无图片时的默认缩略图
$rand = rand(1,5); // 随机 1-5 张缩略图
$random = $widget->widget('Widget_Options')->themeUrl . '/img/sj/' . $rand . '.jpg'; // 随机缩略图路径
// $random = $widget->widget('Widget_Options')->themeUrl . '/img/mr.jpg'; // 若只想要一张默认缩略图请删除本行开头的"//"
$attach = $widget->attachments(1)->attachment;
$pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
if (preg_match_all($pattern, $widget->content, $thumbUrl)) {
echo $thumbUrl[1][0];
} else if ($attach->isImage) {
echo $attach->url;
} else {
echo $random;
}
}
|
大功告成~（又水了一篇
