如何修改织梦友情链接的显示格式?

99ANYc3cd6
预计阅读时长 17 分钟
位置: 首页 织梦建站 正文
  1. 修改模板文件(最推荐、最灵活) - 这是最常用且最安全的方法,因为它不会影响数据库结构,且修改后可以立即看到效果。
  2. 修改数据库(不推荐,除非有特殊需求) - 这种方法直接修改数据库,比较“硬核”,有一定风险,且通常需要配合模板修改才能完全实现自定义格式。

下面我将详细介绍这两种方法。

织梦修改友情链接格式
(图片来源网络,侵删)

修改模板文件(推荐)

这种方法的核心是:织梦在调用友情链接时,会读取一个固定的模板文件,我们只需要修改这个模板文件,就能改变所有友情链接的显示样式。

步骤 1:找到友情链接模板文件

织CMS的友情链接模板文件位于:

/templets/default/flink-list.htm

这个文件控制着友情链接列表页的显示方式。 /templets/default/flink.htm 这个文件控制着网站首页底部或其他调用友情链接标签时的默认显示方式。

织梦修改友情链接格式
(图片来源网络,侵删)

注意: 如果你使用的是非默认模板(比如你自定义的模板),你需要去你自己的模板目录下寻找这两个文件,/templets/你的模板名/flink.htm

步骤 2:编辑模板文件,修改HTML和CSS代码

打开 flink.htm 文件,你会看到类似下面这样的代码:

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

这里的 {dede:flink} 就是织梦的友情链接调用标签,它的显示样式是由这个标签本身的属性和它外层的HTML/CSS代码共同决定的。

只修改文字链接的样式

默认的文字链接调用代码很简单,可能没有外层标签,如果你想给它加上一些样式,比如让它居中、加间距、改变颜色等,可以这样修改:

原始代码(可能在 flink-list.htm 或直接调用时):

<div class="dede-flink">
    {dede:flink type='text' row='24'/}
</div>

修改后的代码:

<div class="dede-flink">
    <ul class="friend-links text-style">
        {dede:flink type='text' row='24'/}
    </ul>
</div>

说明:

  • 我们给链接外层加了一个 <ul> 列表,并添加了 friend-linkstext-style 两个CSS类名,方便我们进行样式控制。
  • 现在去你的CSS文件(通常是 /templets/你的模板名/style.css)中添加以下样式:
/* 友情链接文字样式 */
.friend-links.text-style {
    list-style: none; /* 去掉列表前的点 */
    padding: 0;
    margin: 0;
    text-align: center; /* 居中显示 */
    line-height: 2.5; /* 行高,增加间距 */
}
.friend-links.text-style a {
    color: #333; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    margin: 0 10px; /* 左右间距 */
    transition: color 0.3s; /* 鼠标悬停时的颜色过渡效果 */
}
.friend-links.text-style a:hover {
    color: #0066cc; /* 鼠标悬停时的颜色 */
    text-decoration: underline; /* 悬停时显示下划线 */
}

修改图片链接的样式

图片链接的调用方式是 type='image',默认情况下,图片链接是垂直排列的,我们可以修改为水平排列,并加上边框和间距。

原始调用:

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

修改后的代码(放在一个容器里):

<div class="dede-flink-img">
    <ul class="friend-links img-style">
        {dede:flink type='image' row='24'/}
    </ul>
</div>

说明:

  • 同样,我们用 <ul> 包裹,并添加了CSS类 img-style
  • 在CSS文件中添加以下样式:
/* 友情链接图片样式 */
.friend-links.img-style {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用Flexbox实现水平排列 */
    flex-wrap: wrap; /* 允许换行 */
    justify-content: center; /* 居中对齐 */
    gap: 15px; /* 图片之间的间距 */
}
.friend-links.img-style li {
    /* 可以给每个图片链接加个边框或阴影 */
    border: 1px solid #eee;
    padding: 5px;
    transition: all 0.3s;
}
.friend-links.img-style li:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.friend-links.img-style img {
    display: block; /* 避免图片下方有空隙 */
    max-width: 88px; /* 限制图片宽度,防止过大 */
    height: 31px; /* 统一高度 */
}

步骤 3:更新缓存

修改完模板和CSS文件后,登录织梦后台,点击 “系统” -> “一键更新网站”,然后勾选“更新HTML”和“更新CSS”,最后点击“开始更新”,这样就能看到最新的效果了。


修改数据库(不推荐,除非必要)

这种方法适用于你想从根本上改变织梦存储友情链接信息的方式,或者实现一些模板无法实现的复杂逻辑。普通用户强烈不建议使用此方法。

场景:想在文字链接后面加上网站的分类名称

织梦默认的 flink 标签不支持直接调用网站分类,我们可以通过修改数据库,给 dede_flink 表增加一个字段,然后在模板中调用。

步骤 1:备份数据库! 在进行任何数据库操作前,务必备份数据库。

步骤 2:修改数据库表结构 登录你的phpMyAdmin,找到织梦的数据库,打开 dede_flink 表。 点击“添加字段”,添加一个新字段,

  • 字段名typename
  • 类型varchar
  • 长度/值50
  • 保存

步骤 3:修改织梦程序文件 织梦处理友情链接数据的文件是 /include/taglib/flink.lib.php。 打开这个文件,找到类似 SELECT * FROM dede_flink 的SQL查询语句,修改为 SELECT id,typename,url,img,webname FROM dede_flink(确保你新加的字段 typename 在被查询的列表中)。

步骤 4:修改模板文件 现在你可以在模板文件中使用 {dede:flink} 循环标签,并调用 typename 字段了。

修改后的 flink.htm 模板:

<div class="dede-flink">
    <ul class="friend-links">
        {dede:flink type='text' row='24'}
        <li>
            <a href="[field:url/]" title="[field:webname/]" target="_blank">[field:webname/]</a>
            <span class="link-type">([field:typename/])</span>
        </li>
        {/dede:flink}
    </ul>
</div>

步骤 5:添加CSS样式 为了让括号和分类名样式好看一些,在CSS文件中添加:

.friend-links li {
    display: inline-block;
    margin-right: 15px;
}
.link-type {
    color: #999;
    font-size: 12px;
    margin-left: 5px;
}

步骤 6:更新缓存 同样,最后需要在后台更新缓存。


总结与建议

特点 修改模板 修改数据库
推荐度 ⭐⭐⭐⭐⭐ (强烈推荐) (不推荐)
安全性 ,不涉及数据库,不会破坏数据。 ,操作不当可能导致网站出错。
灵活性 ,可以自由控制HTML结构和CSS样式。 有限,需要编程知识,且最终仍需模板配合。
适用场景 99% 的友情链接样式修改需求。 需要增加/修改数据库字段,实现模板标签无法实现的功能。
操作难度 ,会HTML和CSS即可。 ,需要了解数据库和PHP编程。

对于绝大多数用户来说,请优先选择方法一,它简单、安全、灵活,完全能满足自定义友情链接样式的需求,只有在你有非常特殊且模板无法实现的需求时,才考虑方法二。

-- 展开阅读全文 --
头像
织梦如何调取单篇文章
« 上一篇 前天
织梦如何修改字体大小?
下一篇 » 前天

相关文章

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

目录[+]