织梦友情链接样式如何自定义修改？

准备工作：找到模板文件

在修改之前,您需要先找到您当前网站使用的友情链接模板文件，这个文件通常位于您的模板目录下。

路径： /templets/您的模板目录/

在这个目录下,您会找到一个名为 flink.htm 的文件，这就是控制友情链接显示样式的核心文件，请用您的FTP工具或主机控制面板的文件管理器将其下载到本地，然后用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开它。

简单的CSS样式美化（推荐入门）

这是最简单也是最常用的方法,通过修改 flink.htm 文件中的 HTML 结构，并添加自定义 CSS 样式，来实现美化。

步骤 1：修改 flink.htm 文件

打开 flink.htm，您会看到类似这样的默认代码：

{dede:flink type='text' row='24'/}

这行代码会调用24个文字类型的友情链接,我们可以给它加上一个 div 容器，并给每个链接加上特定的 class，方便我们用CSS来控制。

修改后的代码示例：

<div class="dede-flink">
    <h3>友情链接</h3>
    <ul>
        {dede:flink type='text' row='24'}
        <li><a href="[field:url/]" target="_blank" title="[field:webname/]">[field:webname/]</a></li>
        {/dede:flink}
    </ul>
</div>

代码解释：

1. <div class="dede-flink">：我们给整个友情链接区域加了一个 div 容器，并命名为 dede-flink。
2. <h3>友情链接</h3>：添加了一个标题，您可以根据需要修改或删除。
3. <ul>...</ul>：将链接包裹在一个无序列表中，这是标准的HTML结构。
4. <li>...</li>：每个链接都被一个 li 标签包裹。
5. [field:url/]：友情链接的网址。
6. [field:webname/]：友情链接的网站名称。
7. target="_blank"：让链接在新窗口打开，这是友情链接的常见做法。

如果您想同时显示文字和图片链接，可以这样修改：

织梦默认会分开调用文字和图片链接,您可以在 flink.htm 中同时调用它们。

<div class="dede-flink">
    <h3>友情链接</h3>
    <!-- 文字链接 -->
    <div class="text-links">
        <h4>文字链接</h4>
        <ul>
            {dede:flink type='text' row='24'}
            <li><a href="[field:url/]" target="_blank" title="[field:webname/]">[field:webname/]</a></li>
            {/dede:flink}
        </ul>
    </div>
    <!-- 图片链接 -->
    <div class="image-links">
        <h4>图片链接</h4>
        <ul>
            {dede:flink type='image' row='6'}
            <li><a href="[field:url/]" target="_blank"><img src="[field:logo/]" alt="[field:webname/]" width="88" height="31" /></a></li>
            {/dede:flink}
        </ul>
    </div>
</div>

步骤 2：添加CSS样式

打开您模板的CSS文件（通常在 /templets/您的模板目录/style/ 目录下，文件名可能是 style.css, main.css 等），在文件末尾添加以下样式代码。

示例1：简单的横向排列和间距

/* 友情链接基础样式 */
.dede-flink {
    margin: 20px 0;
    padding: 15px;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.dede-flink h3, .dede-flink h4 {
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
}
/* 链接列表样式 */
.dede-flink ul {
    list-style: none; /* 去掉默认的列表小圆点 */
    padding: 0;
    margin: 0;
}
.dede-flink li {
    display: inline-block; /* 让列表项横向排列 */
    margin: 0 12px 12px 0; /* 设置间距 */
    line-height: 1.5;
}
.dede-flink a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
}
.dede-flink a:hover {
    color: #007bff;
    text-decoration: underline;
}

示例2：更现代的卡片式图片链接

如果您想让图片链接看起来像一张张小卡片：

/* 图片链接容器 */
.image-links ul {
    list-style: none;
    padding: 0;
    display: flex; /* 使用flex布局实现灵活排列 */
    flex-wrap: wrap; /* 允许换行 */
    gap: 15px; /* 设置卡片之间的间距 */
}
.image-links li {
    /* 卡片样式 */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}
.image-links li:hover {
    transform: translateY(-5px); /* 鼠标悬停时上浮 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.image-links img {
    display: block;
    max-width: 150px; /* 可以设置一个最大宽度 */
    height: auto;
}
.image-links a {
    display: block; /* 让a标签撑满整个li */
}

使用织梦标签进行更灵活的控制

如果您想对文字链接和图片链接进行更精细的控制,比如按分类显示，可以在 flink.htm 中使用更详细的织梦标签。

{dede:flink} 标签支持 typeid 属性，可以调用指定分类的友情链接。

在后台设置友情链接分类

登录织梦后台 -> 核心 -> 友情链接管理 -> 链接分类，在这里添加分类，门户网站”、“个人博客”等。

在后台添加友情链接并选择分类

添加友情链接时,记得选择对应的分类。

修改 flink.htm 文件

现在您可以在模板中分别调用不同分类的链接了。

<div class="dede-flink">
    <h3>合作伙伴</h3>
    <!-- 分类ID为1的链接 -->
    <div class="flink-category">
        <h4>门户网站</h4>
        <ul>
            {dede:flink typeid='1' row='10'}
            <li><a href="[field:url/]" target="_blank">[field:webname/]</a></li>
            {/dede:flink}
        </ul>
    </div>
    <!-- 分类ID为2的链接 -->
    <div class="flink-category">
        <h4>个人博客</h4>
        <ul>
            {dede:flink typeid='2' row='10'}
            <li><a href="[field:url/]" target="_blank">[field:webname/]</a></li>
            {/dede:flink}
        </ul>
    </div>
</div>

然后您就可以为 .flink-category 这个新的CSS类编写样式，实现不同分类不同样式的效果。

直接修改PHP文件（不推荐，仅限高级用户）

直接修改PHP文件可以改变数据获取逻辑,但非常不推荐，因为：

• 升级织梦版本时,您的修改会被覆盖。
• 容易出错,导致网站无法正常运行。

如果您确实需要,可以修改 /include/taglib/flink.lib.php 文件，但这通常只用于改变默认的 row（显示数量）或 type（链接类型）等参数，而不是修改HTML结构，对于样式修改，方法一和方法二是最佳选择。

总结与建议

1. 首选方法一：对于99%的样式修改需求，修改 flink.htm 的HTML结构 + 添加自定义CSS 是最灵活、最安全、最推荐的方法。
2. 善用开发者工具：如果您不确定某个CSS类名或元素结构，可以使用浏览器（如Chrome、Firefox）的“开发者工具”（按F12打开）来实时查看和调试您的样式。
3. 备份文件：在任何修改之前，请务必备份您的 flink.htm 和CSS文件，以防修改出错可以快速恢复。
4. 响应式设计：如果您希望友情链接在手机等小屏幕上也能良好显示，可以在CSS中使用媒体查询（@media），将 display: inline-block 改为 display: block; width: 100%;，在小屏幕上让链接纵向排列。

希望这份详细的指南能帮助您成功修改织梦友情链接的样式！