Joe主题美化:友情链接卡片美化

Jaysun

温馨提示:这篇文章已超过429天没有更新,请注意相关的内容是否还可用!

偶然看到友圈中的友链比较简洁,所以自己也忍不住动手改了一下,做个记录,有需要的也可以copy一下。

特别说明:该修改只针对于halo博客Joe主题!!!

特别说明:该修改只针对于halo博客的joe主题!!!

特别说明:该修改只针对于halo博客的joe主题!!!

功能描述

修改joe主题的友链模块,主要是个人觉得原本的友链卡片颜色太重了,个人比较喜欢简洁一些的内容,废话不多说,先来看看效果:

1.jpg

代码使用

第一步:下载文件

下载CSS文件并引入,引入方式可参考 Joe美化增加一个大图功能中的css引入方式

隐藏内容
评论可见
前往评论

第二步:修改模板

找到joe主题,主题编辑- template-> macro-> links_item.ftl模板文件,修改以下代码:

 <!-- 原代码 -->
 <ul class="joe_detail__friends">
   
 <!-- 修改后的代码 -->
 <ul class="joe_detail__friends evan-friends">

接着找到如下代码:

    <li class="joe_detail__friends-item">
         <a class="contain" href="${link.url!}" target="_blank" style="background:${colors[nextRandom % colors?size]}" rel="noopener noreferrer">
           <span class="title">${link.name!}</span>
           <div class="content">
             <div class="desc" title="${link.description!}">${(link.description?? && link.description?trim!='')?then(link.description,'这位博主啥也没说')}</div>
             <#assign logo=(link.logo?? && link.logo!='')?then(link.logo,logo_default)>
             <img width="40" height="40" class="avatar lazyload" data-src="${logo!}" src="${BASE_RES_URL+'/source/svg/spinner-preloader.svg'}" onerror="Joe.errorImg(this)" alt="${link.name!}">
           </div>
         </a>
       </li>

将以上的代码注释掉(推荐)快捷键,选中这部分代码ctrl + /,或者替换为以下代码:

<li class="joe_detail__friends-item">
         <a class="contain" href="${link.url!}" target="_blank" style="--fcolor:${colors[nextRandom % colors?size]}" rel="noopener noreferrer">
           <div class="evan-f-left">
               <div class="f-avatar">
                   <#assign logo=(link.logo?? && link.logo!='')?then(link.logo,logo_default)>
                   <img width="40" height="40" class="avatar lazyload" data-src="${logo!}" src="${BASE_RES_URL+'/source/svg/spinner-preloader.svg'}" onerror="Joe.errorImg(this)" alt="${link.name!}">
               </div>
           </div>
           <div class="evan-f-right">
             <span class="title" style="--fcolor:${colors[nextRandom % colors?size]}">
                <span class="sub-text"> ${link.name!}</span> 
                <svg t="1658027717181" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="25920" width="200" height="200">
                     <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" title="${link.description!}">${(link.description?? && link.description?trim!='')?then(link.description,'这位博主啥也没说')}</div>
             </div>
           </div>
         </a>
       </li>


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (有 5 条评论,1307人围观)
网友昵称:zhwei
zhwei V 普通用户 Google Chrome 124.0.0.0 Windows 10 x64 地板
04-28 来自福建 回复
有人互换友链吗
网友昵称:雨薪丫
雨薪丫 V 普通用户 Safari 17.0 Apple iPhone 凉席
2023-10-10 来自广东 回复
emmmmm……看不懂怎么破?
网友昵称:83955506
83955506 V 普通用户 Google Chrome 117.0.0.0 Windows 10 x64 板凳
2023-10-02 来自浙江 回复
赞、狂赞、超赞、不得不赞、史上最赞
网友昵称:lzw666
lzw666 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 椅子
2023-05-25 来自河南 回复
看看
网友昵称:qwe2001
qwe2001 V 普通用户 Google Chrome 113.0.0.0 Windows 10 x64 沙发
2023-05-20 来自广东 回复
赞、狂赞、超赞、不得不赞、史上最赞!

目录[+]

取消
微信二维码
微信二维码
支付宝二维码