Fantasic主题链接模块样式修改

1.说明

原主题的链接个人不是很喜欢,url直接放在后面,没有文字超出缩略。

2.操作

首页 >> 外观 >> 主题编辑 >> 根目录\layout\widget\links.ftl

第9行到第22行代码,替换成以下代码:

<!-- ↓↓↓ 替换的ul代码 ↓↓↓ -->
<ul class="menu-list" style="display: grid;grid-template-columns: repeat(3, 33.33%);grid-row-gap: 8px;">
    <#list links as link>
        <li style="display: inline-block;text-align: center;overflow: hidden;padding: 4px;">
            <a style="display: block;text-decoration: none;" href="${link.url!}" target="_blank">
                <#if link.logo?? && link.logo!=''>
                    <img style="width: 32px;height: 32px;border-radius: 4px;"
                         src="${link.logo!}" alt="">
                    <#else>
                        <img style="width: 32px;height: 32px;border-radius: 4px;"
                             src="https://www.kuxiaoxin.com/upload/2021/03/link-d79e5ba0427540e490e377d8cb917c05.svg" alt="">
                        </#if>
                    <div style="margin-top: 4px;font-size: 12px;line-height: 14px;width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">${link.name}</div>
                    </a>
                </li>
        </#list>
</ul>
<!-- ↑↑↑ 替换的ul代码 ↑↑↑ -->

3.注意

  1. repeat(3, 33.33%);这里我把图标换成了3等分,因为下面的文字太挤了。如果你觉得宽度充裕就换成repeat(4, 25%);
  2. 链接的默认Logo,我使用的是我的站点资源,大家最好换成自己站点的资源。
  3. 这个主题感觉还是有一点瑕疵的,有时间再写个主题吧。
# Halo 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×