下面我将为你详细介绍如何使用这个标签,并提供一些常用的示例。
基础调用方法
这是最基本、最常用的调用方式，它会按照后台设置的默认方式（通常是按名称排序）显示所有友情链接。
代码示例：
<div class="friendlink">
<h3>友情链接</h3>
<div class="link-content">
{dede:flink/}
</div>
</div>
效果说明：
这段代码会直接输出后台“友情链接”管理中所有类型为“文本链接”的链接，格式为：网站名称。
带参数的高级调用
{dede:flink/} 标签支持丰富的参数，让你可以精确控制友情链接的显示方式,以下是常用参数的说明：
按类型调用
友情链接在后台添加时，可以选择“类型”，文字链接”、“图片链接”等，你可以通过 type 参数来指定调用哪种类型的链接。
- 文字链接：
type='text' - 图片链接：
type='image' - FLASH链接：
type='flash' - 所有类型：
type=''(或不设置)
示例：只调用文字链接
<div class="friendlink">
<h3>友情链接</h3>
<div class="link-content">
{dede:flink type='text'/}
</div>
</div>
示例：只调用图片链接
<div class="friendlink-img">
<h3>合作伙伴</h3>
<div class="img-content">
{dede:flink type='image'/}
</div>
</div>
限制显示数量
使用 row 参数可以限制输出的链接数量。
示例：只显示前10个文字链接
<div class="friendlink">
<h3>友情链接</h3>
<div class="link-content">
{dede:flink type='text' row='10'/}
</div>
</div>
按分类调用
如果你对友情链接进行了分类（门户类”、“资源类”），可以使用 typeid 参数来调用指定分类下的链接。
示例：调用分类ID为 "1" 的友情链接
<div class="friendlink">
<h3>推荐网站</h3>
<div class="link-content">
{dede:flink typeid='1' type='text'/}
</div>
</div>
注意： typeid 参数需要你在后台添加友情链接时,已经为链接指定了分类。
自定义链接的显示格式
默认情况下，文字链接的格式是固定的，你可以使用 linktype 和 textname 等参数来自定义链接的HTML结构。
linktype='text'：指定为文本链接。textname='网站名称'：自定义链接中显示的文字。'网站标题'链接的title` 属性。
示例：自定义文字链接的格式，并添加“更多”链接
<div class="friendlink">
<h3>友情链接</h3>
<div class="link-content">
{dede:flink type='text' row='12' linktype='text' textname='[field:webname/]'/}
<a href="/plus/flink.php" target="_blank" class="more-link">更多链接</a>
</div>
</div>
在这个例子中，[field:webname/] 是织梦的字段标签,用于输出网站名称。
图片链接的高级调用
对于图片链接，默认输出是 <a href="..."><img src="..." /></a>，你可以自定义其显示方式,比如给图片加上边框或限制大小。
示例：自定义图片链接的样式
<div class="friendlink-img">
<h3>合作伙伴</h3>
<div class="img-content">
{dede:flink type='image' row='8' linktype='image' imgwidth='88' imgheight='31'/}
</div>
</div>
imgwidth：设置图片宽度。imgheight：设置图片高度。
完整实例与CSS样式
下面是一个完整的例子，包含了HTML结构和对应的CSS样式,你可以直接使用或根据自己的需求修改。
HTML 代码 (放在首页模板的合适位置)
<!-- 友情链接区域 -->
<div class="friend-links">
<div class="container">
<h2 class="title">友情链接</h2>
<div class="links">
<!-- 文字链接部分 -->
<div class="text-links">
<h3>文字链接</h3>
<ul>
{dede:flink type='text' row='10'/}
</ul>
</div>
<!-- 图片链接部分 -->
<div class="image-links">
<h3>图片链接</h3>
<div class="img-list">
{dede:flink type='image' row='6' imgwidth='120' imgheight='40'/}
</div>
</div>
</div>
</div>
</div>
CSS 样式代码 (放在模板的CSS文件中)
/* 友情链接容器 */
.friend-links {
background-color: #f8f8f8;
padding: 20px 0;
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
margin-top: 30px;
}
.container {
width: 1200px; /* 根据你的网站宽度调整 */
margin: 0 auto;
}
{
text-align: center;
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.links {
display: flex;
justify-content: space-between;
}
/* 文字链接样式 */
.text-links h3, .image-links h3 {
font-size: 16px;
margin-bottom: 15px;
color: #555;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
display: inline-block;
}
.text-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
.text-links ul li {
margin-right: 20px;
margin-bottom: 10px;
}
.text-links ul li a {
color: #666;
text-decoration: none;
transition: color 0.3s;
}
.text-links ul li a:hover {
color: #007bff;
}
/* 图片链接样式 */
.img-list {
display: flex;
flex-wrap: wrap;
gap: 15px; /* 图片之间的间距 */
}
.img-list a {
display: block;
border: 1px solid #ddd;
padding: 5px;
transition: all 0.3s;
}
.img-list a:hover {
border-color: #007bff;
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.img-list img {
display: block;
width: 120px;
height: 40px;
object-fit: contain; /* 保证图片不变形 */
}
后台设置友情链接
别忘了，要在织梦后台正确添加友情链接,标签才能调用出内容。
- 登录织梦后台。
- 在左侧菜单栏找到 “核心” -> “友情链接”。
- 点击 “增加友情链接”。
- 填写相关信息：
- 网站名称： 显示的文字。
- 网站地址： 链接的URL。
- Logo地址： 图片链接的图片URL（如果选择图片类型）。
- 类型： 选择“文本链接”或“图片链接”。
- 排序： 数字越小,排序越靠前。
- 分类： 如果你设置了分类,可以选择对应的分类。
- 点击“确定”保存。
完成以上步骤后,你的首页就能正确显示你设置的友情链接了。
