如何在前端展示网站的友情链接列表？

在网站运营中，友情链接扮演着不可或缺的角色。它们不仅有助于提升网站的外部链接质量，改善搜索引擎优化（SEO）效果，还能为网站带来额外的流量，并通过同行推荐增加网站的信誉度。安企CMS深知友情链接的重要性，因此提供了直观便捷的管理功能，并支持灵活的前端展示方式，让网站管理员能够轻松地在页面上呈现这些重要的合作资源。

一、安企CMS中的友情链接管理

在安企CMS的后台管理界面，友情链接的管理功能位于“功能管理”菜单下。在这里，你可以方便地添加、编辑或删除友情链接。每个链接都可以设置其名称（显示文本）、链接地址、备注，以及是否添加rel="nofollow"属性。这些细致的设置确保了你可以根据实际运营需求，对友情链接进行精细化管理。例如，你可以为核心合作伙伴设置普通链接，而对于一些临时性或评价不高的链接则启用nofollow，以避免不必要的SEO风险。

二、如何在前端页面展示友情链接列表？

安企CMS采用Django模板引擎语法，这意味着你可以通过简单的模板标签来调取后台配置的友情链接数据。核心的模板标签是linkList。通常情况下，友情链接列表会放置在网站的页脚（footer）或者专门的“友情链接”页面中。

以下是使用linkList标签展示友情链接列表的基本步骤和代码示例：

1. 定位或创建模板文件： 首先，你需要确定在哪个模板文件里展示友情链接。这通常是网站的公共部分，比如template/你的模板目录/partial/footer.html，或者是页脚的公共引用文件（如template/你的模板目录/bash.html中包含了页脚部分）。如果你的网站有专门的友情链接页面，则可能是在template/你的模板目录/page/links.html这样的文件中。

2. 使用linkList标签调取数据： linkList标签会获取所有在后台设置的友情链接。它会返回一个包含所有链接信息的数组对象，我们通常将其命名为friendLinks（当然，你也可以自定义其他变量名）。

   基本的用法如下：

   {% linkList friendLinks %}
   {% if friendLinks %}
       <div class="friend-links-section">
           <h4>友情链接</h4>
           <ul class="friend-links-list">
               {% for item in friendLinks %}
                   <li>
                       <a href="{{ item.Link }}"
                          {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}
                          target="_blank"
                          title="{{ item.Remark }}">
                           {{ item.Title }}
                       </a>
                   </li>
               {% endfor %}
           </ul>
       </div>
   {% endif %}
   {% endlinkList %}
   

   代码解析：

   • {% linkList friendLinks %}：这是核心标签，它将后台所有友情链接数据加载到名为friendLinks的变量中。
   • {% if friendLinks %}：这是一个判断语句，确保只有当存在友情链接数据时才渲染相关HTML，避免页面上出现空的标题或列表。
   • {% for item in friendLinks %}：由于friendLinks是一个数组（集合），我们需要使用for循环遍历其中的每一个友情链接项。在循环内部，每个链接项的变量名是item。
   • {{ item.Link }}：这会输出友情链接的URL地址。
   • {{ item.Title }}：这会输出友情链接的显示名称。
   • {{ item.Remark }}：这会输出友情链接的备注信息，通常可以作为title属性提供更详细的提示。
   • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}：这是处理nofollow属性的关键。后台设置的Nofollow字段如果为1（表示开启），那么这里就会在<a>标签中添加rel="nofollow"属性，告知搜索引擎不要追踪此链接。
   • target="_blank"：这是一个常见的HTML属性，用于让链接在新窗口或新标签页中打开，提升用户体验。
   • {% endfor %} 和 {% endif %} 和 {% endlinkList %}：这些是相应的结束标签，用于闭合循环和条件语句。

3. 多站点环境下的数据调用（可选）： 如果你在使用安企CMS的多站点管理功能，并且希望调取其他站点（而非当前站点）的友情链接，linkList标签也支持siteId参数。例如，要调取ID为2的站点的友情链接，可以这样使用：

   {% linkList otherSiteLinks with siteId="2" %}
       {% for item in otherSiteLinks %}
           {# ... 展示链接的代码 ... #}
       {% endfor %}
   {% endlinkList %}
   

三、样式定制与布局建议

上述代码示例提供的是基础的HTML结构。要让友情链接列表看起来美观且符合你的网站风格，你需要为其添加CSS样式。你可以：

• 利用div和ul/li的类名：在上述示例中，我们使用了friend-links-section和friend-links-list等类名。在你的CSS文件中，可以针对这些类名编写样式规则，例如调整字体大小、颜色、间距、布局（水平排列或垂直排列）等。
• 响应式设计：确保友情链接列表在不同设备（PC、平板、手机）上都能良好显示，这通常需要结合CSS媒体查询来实现。
• 图标点缀：如果友情链接数量不多，可以考虑在链接前添加一些小图标，增加视觉趣味性。

总结

通过安企CMS提供的linkList模板标签，展示网站的友情链接列表变得非常简单直观。你只需在后台配置好链接信息，然后在模板文件中使用相应的标签和循环结构，就能将这些重要的外部资源呈现在网站前端。结合HTML和CSS的灵活运用，你还可以打造出独具风格的友情链接区域，从而为网站的运营和用户体验增光添彩。

---

常见问题 (FAQ)

Q1：我在后台添加了友情链接，为什么前端页面没有显示？ A1：请检查以下几点：

1. 模板标签是否正确引入：确保在前端模板文件（如页脚文件）中正确使用了{% linkList friendLinks %}这样的标签。
2. 是否有数据存在：检查后台的友情链接列表，确认是否已经添加了链接。如果一个链接都没有，那么{% if friendLinks %}这个判断就会导致整个区域不显示。
3. 缓存问题：有时网站缓存可能导致新添加的内容未能及时显示。尝试清除安企CMS的系统缓存，或刷新浏览器缓存。
4. 模板文件是否正确：确认你修改的模板文件是当前网站正在使用的模板，并且修改的文件路径正确。

Q2：友情链接在新窗口打开后，我应该在链接中添加rel="nofollow"属性吗？ A2：是否添加rel="nofollow"取决于你对该友情链接的信任程度和SEO策略。

• 如果你与某个网站是深度合作关系，且信任其内容质量和相关性，通常可以不添加nofollow，让搜索引擎追踪此链接，这有助于传递权重（PageRank）和提升双方网站的SEO。
• 如果友情链接是付费性质的，或者你无法完全控制链接网站的内容质量，或者仅仅是为了美观而放置的链接，那么添加rel="nofollow"是一个良好的实践。它告诉搜索引擎不要将你的网站的“信任票”传递给这些链接，从而保护你的网站的SEO排名。安企CMS后台可以单独设置每个友情链接是否添加nofollow，这为你提供了极大的灵活性。

Q3：我希望我的友情链接列表是垂直排列而不是默认的水平排列，应该如何实现？ A3：这主要是通过CSS样式来控制的。在上面的代码示例中，友情链接被包裹在<ul>和<li>标签中。默认情况下，<li>元素是块级元素，会自动垂直排列。如果你的链接显示为水平排列，可能是因为你的全局CSS样式对ul li设置了display: inline-block或float: left等属性。 要让它们垂直排列，你可以在你的CSS文件中，针对.friend-links-list li或者.friend-links-list a设置display: block;，并调整合适的margin-bottom来增加垂直间距。

/* 示例CSS，你需要根据自己的网站样式表进行调整 */
.friend-links-section {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.friend-links-section h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

.friend-links-list {
    list-style: none; /* 移除默认的列表点 */
    padding: 0;
    margin: 0;
    display: flex; /* 默认让它们在一行显示，如果想垂直，移除此行或改为 flex-direction: column; */
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 链接之间的间距 */
}

.friend-links-list li {
    /* 如果想垂直显示，可以这样 */
    display: block; 
    margin-bottom: 5px; /* 垂直间距 */
}

.friend-links-list li a {
    display: inline-block; /* 让链接本身可设置宽度高度，如果垂直显示，可以不改 */
    padding: 5px 10px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.friend-links-list li a:hover {
    background-color: #f0f0f0;
    color: #007bff;
    border-color: #007bff;
}

通过调整CSS，你可以完全掌控友情链接的展示效果。