看handsome原生的友链也不是那么的美观,所以决定换一个样式。

直接开整!

预览:

1.png

1:首先更换/usr/themes/handsome/links.php51-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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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 width="200" height="200" 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);
}

觉得还不错就评论打个卡吧,你的鼓励是我最大的动力!


版权声明:文章转载请注明来源,如有侵权请联系博主删除!
最后修改:2020 年 05 月 11 日 03 : 02 PM
如果觉得我的文章对你有用,请随意赞赏
评论打卡也可以哦,您的鼓励是我最大的动力!