如何在前端调用并显示后台设置的友情链接？

安企CMS (AnQiCMS) 提供了一套直观而强大的内容管理功能，其中“友情链接”管理是网站运营中不可或缺的一部分，它不仅能促进网站的SEO表现，还能为用户提供便捷的导航。本篇文章将详细介绍如何在网站前端调用并优雅地展示您在后台设置的友情链接。

友情链接的后台配置

在安企CMS中管理友情链接非常简单。您只需登录后台，找到左侧菜单栏中的“功能管理”模块，点击进入“友情链接”。在这里，您可以添加新的友情链接，填写链接名称、URL地址、备注信息，并选择是否为该链接添加 nofollow 属性。所有在这里配置的链接，都将为前端调用做好准备。

前端调用核心：linkList 标签

要在前端模板中显示这些友情链接，安企CMS提供了一个专用的模板标签：linkList。这个标签能够帮助您轻松获取后台配置的所有友情链接数据，并将其组织成一个可遍历的列表。

linkList 标签的基本使用方式如下：

{% linkList friendLinks %}
    {# 在这里处理您的友情链接列表 #}
{% endlinkList %}

在这里，friendLinks 是一个自定义的变量名，您可以根据自己的喜好来命名（例如 friend_links、links 等）。linkList 标签会将后台获取到的所有友情链接存储到这个变量中，作为一个列表供您在 {% for %} 循环中遍历。

友情链接项的可用数据

当您使用 {% for %} 循环遍历 friendLinks 变量时，每一个循环项（通常命名为 item）都包含以下重要数据：

• item.Title: 友情链接的显示名称。
• item.Link: 友情链接的完整URL地址。
• item.Remark: 在后台设置的友情链接备注，通常可以作为链接的 title 属性，在鼠标悬停时显示。
• item.Nofollow: 一个布尔值（或表示布尔的数字），用于判断是否需要为该链接添加 rel="nofollow" 属性。这对于SEO策略非常重要，可以控制搜索引擎是否追踪该链接。

实际代码示例与解析

下面是一个完整的前端代码示例，展示了如何使用 linkList 标签来调用并显示友情链接：

<div class="friendship-links-section">
    <h3>合作伙伴</h3>
    {% linkList friendLinks %}
        {% if friendLinks %}
        <ul class="friendship-links-list">
            {% for item in friendLinks %}
            <li class="link-item">
                <a href="{{ item.Link }}"
                   {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}
                   target="_blank"
                   title="{{ item.Remark }}">
                    {{ item.Title }}
                </a>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p>暂无友情链接，期待您的加入！</p>
        {% endif %}
    {% endlinkList %}
</div>

让我们来详细解析这段代码：

1. <div class="friendship-links-section">...</div>: 这是一个外部容器，用于包裹友情链接区域，方便您通过CSS进行整体样式控制。
2. <h3>合作伙伴</h3>: 这是友情链接区域的标题，您可以根据实际需求修改。
3. {% linkList friendLinks %} ... {% endlinkList %}: 这是核心标签，它从后台获取所有友情链接数据，并将其赋值给 friendLinks 变量。
4. {% if friendLinks %}: 这是一个条件判断，用于检查 friendLinks 变量中是否包含任何链接。如果列表为空，则会执行 {% else %} 部分的代码，显示“暂无友情链接，期待您的加入！”这样的提示。这能有效避免在没有链接时显示一个空的列表。
5. <ul class="friendship-links-list"> ... </ul>: 这是一个无序列表，每个友情链接都将作为列表项 <li> 显示。
6. {% for item in friendLinks %}: 循环遍历 friendLinks 列表中的每一个友情链接项。在每次循环中，当前链接的数据会存储在 item 变量中。
7. <a href="{{ item.Link }}" ... >{{ item.Title }}</a>: 这是显示友情链接的核心HTML代码。
   • href="{{ item.Link }}": 设置链接的跳转地址，直接使用 item.Link 获取后台配置的URL。
   • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: 这是一个内联的条件判断。如果 item.Nofollow 的值为 1（表示在后台勾选了 nofollow），则会为该 <a> 标签添加 rel="nofollow" 属性。这告诉搜索引擎不要传递权重给这个链接。
   • target="_blank": 强制链接在新标签页中打开，避免用户离开当前网站。
   • title="{{ item.Remark }}": 将后台设置的备注信息作为链接的 title 属性，当用户鼠标悬停在链接上时会显示该备注，提升用户体验。
   • {{ item.Title }}: 显示链接的文本，直接使用 item.Title 获取后台设置的链接名称。

额外考量

• 样式定制： 上述代码仅提供了HTML结构。您需要根据网站的整体设计，为 .friendship-links-section、.friendship-links-list、.link-item 和 a 标签添加相应的CSS样式，使其与您的网站风格保持一致。
• 多站点支持： 如果您使用了安企CMS的多站点管理功能，并希望调用特定站点的友情链接，linkList 标签也支持 siteId 参数。例如：{% linkList friendLinks with siteId="2" %}。但在大多数情况下，默认调用当前站点的链接已足够。

通过以上步骤，您就可以在安企CMS的前端页面上，灵活而高效地展示您在后台精心配置的友情链接了。

常见问题 (FAQ)

1. 为什么我在前端页面上添加了 linkList 标签，但友情链接却没有显示出来？ 首先，请确保您已经在安企CMS后台的“功能管理”->“友情链接”中添加了至少一个友情链接。其次，检查您的模板代码是否正确使用了 {% linkList %} 和 {% for %} 循环，并且确保变量名拼写无误。此外，友情链接功能可能与网站缓存有关，尝试清除系统缓存或浏览器缓存后刷新页面。

2. 友情链接中的 rel="nofollow" 属性有什么作用？我应该在什么时候使用它？ rel="nofollow" 属性是告诉搜索引擎不要将“链接权重”或“信任度”从您的网站传递到目标网站。这在SEO中非常重要。您应该在以下情况使用它：当您链接的网站内容与您的网站不完全相关、您不信任链接内容的质量，或者该链接是付费广告链接（防止搜索引擎误认为是买卖链接）。在安企CMS后台添加友情链接时，您可以勾选相应的选项来自动添加此属性。

3. 我能否自定义友情链接的显示顺序？ 安企CMS后台的友情链接管理界面通常会提供排序功能，您可以调整链接的显示顺序。如果后台没有直接的拖拽排序或数字排序功能，链接通常会按照添加的时间顺序或者默认的ID顺序显示。如果需要更高级的排序（例如按字母顺序或特定属性），则可能需要在模板中获取链接数据后，使用模板自带的排序功能（如 sorted 过滤器，如果支持）进行二次处理，但这通常需要一些模板开发经验。