In website operation, friend links are an important aspect for improving website authority, increasing traffic, and enhancing user experience.AutoCMS (AutoCMS) provides a convenient way for us to manage and display these links.How to display the backend-configured friend link list on the website front-end page?This is actually simpler than imagined, mainly involving two steps: backend configuration and frontend template invocation.

Step 1: Configure the friend link in the background

Firstly, we need to add and manage friend links in the background management system of Anqi CMS.According to system design, the management function of friend links is usually located under the "Function Management

  • Link Name (Title)：The display text of the friendship link.
  • Link address (Link)：The target URL of the friendship link.
  • Link Remark (Remark))：Some internal remark information.
  • Is Nofollow (Nofollow)A significant SEO setting that determines whether search engines will follow the link.

After completing these configurations, the system will automatically save this information for frontend page calls.The AnQi CMS has already added the friend link backend management function in version V1.0.0-alpha, ensuring the perfection and availability of this basic feature.

第二步：In the front-end template, call the friend link list

Next, it is time to display these friendship links in the front-end template files of the website. The Anqi CMS uses syntax similar to the Django template engine and provides a dedicated taglinkList，used to get and loop to display the background configuration of the friendship link.

We can display the friendship link template file (usually the footer) where we need to display itfooter.htmlor a special friendship link pagelinks.htmlIn，add the following code snippet:

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

Let's go through this code in detail:

  1. {% linkList friendLinks %}： This is the core tag for calling the friend link list. We specify that the obtained friend link data will be stored in a namedfriendLinksThe variable is.This tag does not require any additional parameters, it will default to getting all friendship links under the current site.siteIdAn argument is used to specify the site ID, but it is usually fine to keep the default.

  2. {% if friendLinks %}: This is a conditional judgment. It checksfriendLinksDoes the variable contain any data, that is, whether the background has configured the friend link.This is done to avoid displaying an empty friend link area when there are no links, thus improving the page's tidiness.

  3. <div class="friendship-links">and<h3>友情链接</h3>Here is the HTML structure and title added for the friend link list, which is convenient for us to design the style through CSS, so that it can maintain consistency with the overall style of the website.

  4. <ul>and<li>： Friend links are usually presented in the form of an unordered list, with each link occupying an item in the list.

  5. {% for item in friendLinks %}： Due tofriendLinksis a list (or sometimes called an array) containing multiple friendship links, we need to useforto iterate over each link one by one. In each iteration,itemVariable represents all the information of the current processing friend link.

  6. <a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a> This is the key part of displaying a single friend link.

    • href="{{item.Link}}": Throughitem.LinkGet the link address configured in the background.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}：This is an inline condition judgment. It checks the current link'sNofollowattribute is1(usually represents enabled). If enabled, it will automatically for<a>Label addrel="nofollow"属性，inform the search engine not to follow this link. This is very important when dealing with some non-recommended links or advertisement links.
    • target="_blank"This property will open the link in a new tab, avoiding users from leaving the current website after clicking on the friendship link, thereby improving the user experience.
    • {{item.Title}}It shows the link name configured in the background.

  7. {% endfor %}/{% endif %}/{% endlinkList %}These are the corresponding end tags, ensuring the integrity of the template syntax structure.

We can easily display the friend link list configured on the back-end on the website front-end through the above steps.The tag design of AnQi CMS separates content and display logic, allowing even operation personnel who are not familiar with programming to manage website content through simple template modifications.

Common Questions (FAQ)

Q1: How to modify the style of the friend link (such as font size, color, and arrangement)?

A1:友情链接的显示样式是通过CSS（层叠样式表）来控制的。在上面的模板调用示例中，我们为友情链接列表添加了Englishclass="friendship-links"English, you can use this class name or other HTML tags (such asul/li/aWrite style rules in the CSS file of your website. For example, to change the color and font size of links, you can add something like.friendship-links a { color: #333; font-size: 14px; }rules.

Q2:rel="nofollow"What is the role of the attribute, and when should it be used?

A2： rel="nofollow"属性是告知搜索引擎不要将该链接视为您网站的推荐，也不要传递PageRank（页面权重）。它主要用于：

  1. 付费链接或广告链接To prevent search engines from misjudging as a purchase link and affecting the website ranking.
  2. User Generated Content (UGC)To prevent spam links from affecting website SEO in comment sections, forums, etc.
  3. Do not pass weight linksFor example, some competitors' friendly links, or content you do not fully trust.In the security CMS background, when configuring the friend links, you can choose whether to enable this attribute. The system will automatically add it to the front-end template according to your settings.

Q3：Can I display different groups of friend links on the same page? For example, one part is "Partners", and the other part is "Friend Sites".

A3:According to the provided document,linkListThe tag currently does not explicitly support filtering friend links by 'group name' parameter (such astype="合作伙伴"It will retrieve all the background-configured friendship links. If you have this need, you may need to mark it through the "link note" field in the background, and then through the front-end template.forLoop cooperationifUse conditional statements to make logical judgments for grouping display. Or contact the development team of Anqi CMS to see if there are plans to add this feature in future versions.