## 1.说明原主题的链接个人不是很喜欢，`url`直接放在后面，没有文字超出缩略。 ## 2.操作首页 >> 外观 >> 主题编辑 >> `根目录\layout\widget\links.ftl`。第9行到第22行代码，替换成以下代码： ```html ${link.name} ``` ## 3.注意 1. `repeat(3, 33.33%);`这里我把图标换成了3等分，因为下面的文字太挤了。如果你觉得宽度充裕就换成`repeat(4, 25%);`。 2. 链接的默认Logo，我使用的是我的站点资源，大家最好换成自己站点的资源。 3. 这个主题感觉还是有一点瑕疵的，有时间再写个主题吧。

Fantasic主题链接模块样式修改

VXiaoXin

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.注意

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