直接修改模板文件（最直接）
这种方法的核心思想是,DedeCMS默认的友情链接标签 {dede:flink/} 会生成一个包含所有链接的 <dl> 列表，我们可以修改这个标签，让它为每一个链接都生成一个独立的列表项，从而实现竖向排列。
（图片来源网络，侵删）
步骤 1：找到并打开模板文件
你需要找到当前网站主题（模板）中包含友情链接的文件，这个文件通常是：
index.html(首页模板)footer.htm(页脚模板)
用文本编辑器（如 Dreamweaver、VS Code 或 Notepad++）打开这个文件。
步骤 2：修改友情链接标签
找到类似这样的代码：
{dede:flink/}
这行代码默认会生成类似下面的HTML结构：
（图片来源网络，侵删）
<dl id="link">
<dt>友情链接</dt>
<dd>
<a href="https://www.example1.com" target="_blank">网站名称1</a>
<a href="https://www.example2.com" target="_blank">网站名称2</a>
<a href="https://www.example3.com" target="_blank">网站名称3</a>
...
</dd>
</dl>
可以看到,所有链接都在一个 <dd> 标签内，是横向排列的。
步骤 3：使用带参数的友情链接标签
为了实现竖向排列,我们需要让 {dede:flink/} 为每个链接都生成一个 <dd> 标签，DedeCMS 提供了 row 和 linktype 等参数。
将原来的代码替换为：
{dede:flink row='50' linktype='2'}
<a href="[field:url/]" target="_blank">[field:name/]</a>
{/dede:flink}
参数解释：
（图片来源网络，侵删）
row='50'：表示调用50个友情链接，你可以根据需要修改这个数字。linktype='2'：表示调用“文字链接”，如果你想调用图片链接，可以设置为1。[field:url/]：调用友情链接的网址。[field:name/]：调用友情链接的网站名称。
修改后生成的HTML结构会是这样的：
<a href="https://www.example1.com" target="_blank">网站名称1</a> <a href="https://www.example2.com" target="_blank">网站名称2</a> <a href="https://www.example3.com" target="_blank">网站名称3</a> ...
每个链接都是独立的,它们会自然地根据容器宽度进行换行，形成竖向排列。
步骤 4：添加CSS样式（可选但推荐）
为了让链接看起来更美观,你可以给它们添加一些CSS样式，在模板的 <head> 部分或者在专门的CSS文件中添加以下样式：
/* 为友情链接容器添加样式 */
.link-container {
/* 你可以根据需要调整这些样式 */
line-height: 2.5; /* 增加行高，让链接之间有更多间距 */
font-size: 14px;
text-align: center; /* 如果是居中显示 */
padding: 10px;
}
.link-container a {
color: #333; /* 链接颜色 */
text-decoration: none; /* 去掉下划线 */
margin: 0 10px; /* 链接之间的左右间距 */
transition: color 0.3s; /* 鼠标悬停时的颜色过渡效果 */
}
.link-container a:hover {
color: #0066cc; /* 鼠标悬停时的颜色 */
text-decoration: underline; /* 悬停时显示下划线 */
}
然后在你的HTML模板中,给友情链接包裹一个 div 并赋予这个class：
<div class="link-container">
{dede:flink row='50' linktype='2'}
<a href="[field:url/]" target="_blank">[field:name/]</a>
{/dede:flink}
</div>
通过CSS控制（更灵活）
如果你不想修改模板文件,或者你的友情链接标签结构比较复杂，也可以通过CSS强制将横向排列的链接变成竖向排列。
步骤 1：保持模板标签不变
在你的模板文件中,保持原来的友情链接标签 {dede:flink/} 不变。
步骤 2：添加CSS样式
在CSS文件中,找到 #link dd 这个选择器（这是DedeCMS默认生成的结构），然后添加 display: block; 属性。
/* 在你的CSS文件中添加以下代码 */
/* 强制将dd内的链接块状化，使其独占一行 */
#link dd a {
display: block; /* 关键属性：将行内元素变成块级元素 */
text-align: center; /* 可选：居中显示 */
margin: 5px 0; /* 可选：增加上下间距 */
color: #555; /* 可选：设置颜色 */
}
CSS属性解释：
display: block;：这是最关键的一步，它会把<a>标签从默认的inline（行内）元素变成block（块级）元素，块级元素会自动占据一整行，从而实现了竖向排列。margin: 5px 0;：给每个链接块添加一些上下外边距，让它们之间有间隔，不至于挤在一起。
总结与建议
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| 修改模板 | HTML结构更清晰、更符合语义，易于维护和扩展。 | 需要修改模板文件，对新手可能有一点点门槛。 | 推荐使用，特别是当你想要完全自定义友情链接的显示方式时。 |
| CSS控制 | 无需修改模板，操作简单快速。 | 修改了元素的显示类型，可能不符合原始的HTML语义。 | 当你只是想快速实现竖向效果，且不想动模板文件时。 |
对于大多数情况,我强烈推荐使用方法一，因为它生成的代码更干净，也更容易进行后续的样式调整，方法二则是一个非常快速有效的备选方案。
