Typecho主题Joe首页底部增加友情链接

Joe是typecho下一款非常优秀的主题，本站也是使用的Joe的主题，只不过进行了一些改动。

本文实现方式只只用于Joe主题，其他主题需要自己修改

增加首页友情链接文件

在主题public文件夹下增加homefriend.php文件，文件内容如下

<!--
 * 博客底部-友情链接 
 * Joe主题在想要显示的地方直接引入即可,其他主题需根据主题自身情况修改。
 * $this->need('public/homefriend.php');
 * 
 * @Author：李森的博客
 * @site：https://lisen.cc
-->

<style>
.ls_friend_home {
    border-radius: 5px;
    margin: 0 auto;
    overflow: hidden
}

.ls_sites {
    overflow: hidden;
    padding-top: 10px
}

.ls_sites li {
    width: 31%;
    float: left;
    text-align: center;
    border-radius: 5px;
    line-height: 35px;
    margin: 0 3px;
    margin-bottom: 10px;
    position: relative
}

.ls_sites li a {
    text-decoration: none;
    color: #fff;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden
}

.ls_sites li:before,
.ls_sites li:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 3px;
    width: 0;
    background: #fff;
    transition: 400ms ease all
}

.ls_sites li:after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0
}

.ls_sites li:hover:before,
.ls_sites li:hover:after {
    width: 100%;
    transition: 800ms ease all
}

@media(min-width:576px) {
    .ls_friend_home {
        max-width: 540px
    }

    .ls_sites li {
        width: 30%
    }
}

@media(min-width:768px) {
    .ls_friend_home {
        max-width: 720px
    }

    .ls_sites li {
        width: 30%
    }
}

@media(min-width:992px) {
    .ls_friend_home {
        max-width: 960px
    }

    .ls_sites li {
        width: 16.6%
    }
}

@media(min-width:1200px) {
    .ls_friend_home {
        max-width: 1140px
    }

    .ls_sites li {
        width: 16.6%
    }
}

@media(min-width:1400px) {
    .ls_friend_home {
        max-width: 1320px
    }

    .ls_sites li {
        width: 16.6%
    }
}
</style>

<?php
    /*获取友情链接【这里Joe主题可直接使用，其他主题需要自己重写，原理相同，获取到链接进行循环。】*/ 
    $friends = [];
    $friends_color = ['#F8D800','#0396FF','#EA5455','#7367F0','#32CCBC','#F6416C','#28C76F','#9F44D3','#F55555','#736EFE','#E96D71','#DE4313','#D939CD','#4C83FF','#F072B6','#C346C2','#5961F9','#FD6585','#465EFB','#FFC600','#FA742B','#5151E5','#BB4E75','#FF52E5','#49C628','#00EAFF','#F067B4','#F067B4','#ff9a9e','#00f2fe','#4facfe','#f093fb','#6fa3ef','#bc99c4','#46c47c','#f9bb3c','#e8583d','#f68e5f'];
    $friends_text = $this->options->JFriends;
    if ($friends_text) {
        $friends_arr = explode("\r\n", $friends_text);
        if (count($friends_arr) > 0) {
            for ($i = 0; $i < count($friends_arr); $i++) {
                $name = explode("||", $friends_arr[$i])[0];
                $url = explode("||", $friends_arr[$i])[1];
                $avatar = explode("||", $friends_arr[$i])[2];
                $desc = explode("||", $friends_arr[$i])[3];
                $friends[] = array("name" => trim($name), "url" => trim($url), "avatar" => trim($avatar),"desc" => trim($desc));
            };
        }
    }
?>

<?php if (sizeof($friends) > 0) : ?>
<div class="ls_friend_home">
    <ul class="ls_sites">
        <?php foreach ($friends as $item) : ?>
            <li style="background: <?php echo $friends_color[mt_rand(0, count($friends_color) - 1)] ?>">
                <a href="<?php echo $item['url']; ?>" target="_blank" rel="noopener noreferrer" title="<?php echo $item['desc']; ?>">
                    <img width="20" height="20" class="lazyload" style="border-radius: 50%;object-fit: cover;" src="<?php _getAvatarLazyload(); ?>" data-src="<?php echo $item['avatar']; ?>" alt="<?php echo $item['name']; ?>" />
                    <?php echo $item['name']; ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
</div>
<?php endif; ?>

在需要展示的地方，引入友情链接文件

如果你想全站显示，建议放到public/footer.php的合适位置。

因为我只想在首页显示，所以我是在index.php文件引入的，位置的话，放到了最底部

<!-- 友情链接 -->
<?php $this->need('public/homefriend.php'); ?>