更换友情链接卡片样式

技术
0

第一步
修改 friends.php 文件,文件目录 Joe主题文件/friends.php

把以下代码进行替换(友情提示:修改前先备份,不喜欢可以换回去)

<ul class="joe_detail__friends evan-friends">
                            <?php foreach ($friends as $item) : ?>
                                <li class="joe_detail__friends-item">
         <a class="contain" href="<?php echo $item['url']; ?>" target="_blank" rel="noopener noreferrer" style="background: <?php echo $friends_color[mt_rand(0, count($friends_color) - 1)] ?>">
           <div class="evan-f-left">
               <div class="f-avatar">

                   <img width="40" height="40" class="avatar lazyload" src="<?php _getAvatarLazyload(); ?>" data-src="<?php echo $item['avatar']; ?>" alt="" />
               </div>
           </div>
           <div class="evan-f-right">
             <span class="title">
                <span class="sub-text"><?php echo $item['name']; ?></span> 
                <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
                     <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="25921"></path>
                      <path
                         d="M989.866667 512c0 263.918933-213.947733 477.866667-477.866667 477.866667S34.133333 775.918933 34.133333 512 248.081067 34.133333 512 34.133333s477.866667 213.947733 477.866667 477.866667z"
                         fill="#FF7744" p-id="25922"></path>
                     <path
                         d="M787.114667 339.285333a51.2 51.2 0 0 1 0 72.362667l-307.2 307.2a51.2 51.2 0 0 1-72.362667 0l-170.666667-170.666667a51.2 51.2 0 0 1 72.362667-72.362666L443.733333 610.235733l271.018667-271.018666a51.2 51.2 0 0 1 72.362667 0z"
                         fill="#FFFFFF" p-id="25923"></path>
                 </svg>
             </span>
             <div class="content">
                 <div class="desc"><?php echo $item['desc']; ?></div>
             </div>
           </div>
         </a>
       </li>

第二步
下载CSS文件放入服务器,然后后台代码引入CSS

文件下载地址:下载文件

第三步
引用文件,插入:

<link rel="stylesheet" href="这里填写你的CSS文件直链地址">

最后更新 2022-09-21
评论 ( 0 )
OωO
隐私评论