看handsome原生的友链也不是那么的美观,所以决定换一个样式。
直接开整!
预览:
PC端:
手机端:
1:首先更换/usr/themes/handsome/links.php
中51-87行
的数据:
<div class="tab-pane fade in" id="tab_2">
<div class="link-box">
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "one");
?>
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
</div>
</div>
<div class="tab-pane fade in" id="tab_3">
<div class="link-box">
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "good");
?>
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
</div>
</div>
<div class="tab-pane fade in" id="tab_4">
<div class="link-box">
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
<?php
$mypattern = <<<eof
<a href="{url}" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="{title}">
<div class="thumb">
<img src={image} alt="{title}" />
</div>
<div class="content">
<p class="title">{name}</p>
</div>
</a>
eof;
Handsome_Plugin::output($mypattern, 0, "ten");
?>
<a style="display:none" href="" target="_blank" class="list-group-item no-borders box-shadow-wrap-lg" title="">
<div class="thumb">
<img src="" alt="" />
</div>
<div class="content">
<p class="title"></p>
</div>
</a>
2:将以下代码添加至后台-开发者设置-自定义CSS
。
/*自定义友链样式*/
.link-box a .thumb {
font-size: 0;
overflow: hidden;
background-color: #fff;
margin: 0;
border-top-left-radius: .25rem;
border-top-right-radius: .25rem;
width: 100%;
}
.link-box {
overflow: hidden;
padding: 20px;
margin: -3.125rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.link-box a{
width: 16%;
text-align: center;
margin: 2%;
border-radius: 1.3125rem;
}
.link-box a:hover{
box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
@media (max-width: 450px){
.OwO-open {
display: block;
}
.link-box a {
width: 100% !important;
}
.link-box img {
width: 35px !important;
}
.link-box a .thumb {
width: 35px !important;
float: left !important;
}
.link-box a .content{
float: left !important;
width: 80%;
height: 35px;
line-height: 35px;
}
}
.link-box img{
width:200px;
}
觉得还不错就评论打个卡吧,你的鼓励是我最大的动力!
能照顾一下小白吗
弄个插件多好,版本更新了还能用
Handsome8.1也适用嘛,我试了一下,有点乱,是不是替换51-87行出了问题
想问一下,这个导航里的二级菜单是怎么搞的啊,还有你这里的页面右键是怎么设置的呢
分类菜单是改动源代码的,右键的话魔改集合文章里有的
已经使用了,不过在手机上显示会很奇怪,建议做个判断,如果是手机尺寸,就显示为原来的样式
已更新,去掉源代码中img的行内样式 width="200" height="200",然后再自定义css样式中添加上面更新的手机端适配样式即可
搞定,
已经使用 , 过来吱个声 感谢
不客气啦,.link-box a这个样式中的margin刚刚更新为了2%,在不同界面更好的适配哦
滴!访客卡!请上车的乘客系好安全带,现在是:Mon Apr 20 2020 20:52:44 GMT+0800 (中国标准时间)
写的很棒呀,效果很棒可我没成功,哈哈 ::twemoji:smilecry::
为什么我发了一个评论,怎么出来两个
可能是bug吧,我手动删了
滴!访客卡!请上车的乘客系好安全带,现在是:Mon Jan 06 2020 10:48:24 GMT+0800 (中国标准时间)
高手啊,正好模仿改改handsome
哈哈,大部分也都是收集的,随便拿
不知为啥,改完没成功,又改回原样了,哈哈
额,刚下班,等周一你还没搞好的话帮你吧
文章写得不错,支持一下!
谢谢
个人博客坚持更新不易 留言支持下 加油 欢迎回访我的网站
好的,哈哈,向您学习,资源站也不容易