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

直接开整！

预览：

1.png

1：首先更换/usr/themes/handsome/links.php中51-100行的数据：

                    <div class="tab-pane fade in" id="tab_2">
                        <div class="link-box">
                            <?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");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_3">
                        <div class="link-box">
                            <?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");
                            ?>
                        </div>
                    </div>

                    <div class="tab-pane fade in" id="tab_4">
                        <div class="link-box">
                            <?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");

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: 4.375rem 2.1875rem 2.1875rem;
    margin: -3.125rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.link-box a{
    width: 16%;
    text-align: center;
    margin: 14px;
    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 年 01 月 05 日 08 : 04 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏