The AutoCMS provides a set of intuitive and powerful features to help us easily manage website content.Among them, friendship links are an important part of the external connections of a website, not only helping the website's SEO performance, but also providing users with more valuable jump-in entries.This article will introduce how to flexibly display the friend links list in the sidebar or footer area of your website.

Manage friend links in the background

Before displaying the friend links on the website frontend, we first need to configure them in the Anqi CMS backend.

To manage the friend links, you can log in to the backend, then navigate to the "Function Management" section on the left-hand menu, and click on "Friend Links".Here, you can see a list that contains all the added friendship links.Click the "Add Friend Link" button, you can create a new link entry.

Each friendship link entry usually requires filling in the following key information:

  • Link Name (Title)This is the text displayed on the website for the friendship link, for example, 'AnQi CMS Official Website'.
  • Link Address (Link)This is the target URL after clicking the link, be sure to fill in a complete and valid website, for examplehttps://en.anqicms.com.
  • Link Remark (Remark)This is an optional field, you can fill it as needed, such as "partnerThis note information can be used in certain cases for logical judgments in the front-end template, so that different types of links can be displayed in different regions.
  • Link nofollow (Nofollow)This is a very important option. Checking this option means addingrel="nofollow"Property.This attribute tells the search engine not to track this link and pass weight. For external links, this is usually a good SEO practice, which can avoid unnecessary weight loss and indicate to search engines that these links are submitted or sponsored by users, rather than actively recommended by your website.

Complete the information entry and save to add the friendship link to your website backend. You can add any number of friendship links as needed.

Display friend link list in template

Configure the background data first, and the next step is to display these friend links on the front page of the website.通常，友情链接会放置在侧边栏或页脚区域，因为这些位置是用户浏览网站时经常会注意到的公共区域。

The template system of Anqi CMS adopts syntax similar to Django template engine, usinglinkListtags to call friend link data.

1. Determine the placement location:

Firstly, you need to determine in which template file to add the code for the friend link.

  • SidebarIf your website sidebar is an independent template fragment (for example, locatedpartial/the directory.sidebar.htmlor similar files), you can add code to this file.
  • Footer：If the footer is a public part of the website, it may be located in the main template file (for examplebash.htmlor your theme'sfooter.html）in it.

You can refer to the template structure of your current theme to find a suitable insertion point.

2. UselinkListLabel call data:

After finding a suitable template file, you can use the following code snippet to display the friend link list:

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

Let's parse this code line by line:

  • {% linkList friendLinks %}This is the label called for the friend link list.friendLinksIt is the variable name we define for this list data, you can access each friend link by this variable name in the subsequent loop.
  • {% if friendLinks %}This is a conditional judgment, which checksfriendLinksVariable contains any data (i.e., if any friendship links have been added). If no links are present, the entire block will not display to avoid blank spaces or errors on the page.
  • <div class="friendly-links-section"> ... </div>This is an HTML structure used to wrap the list of friend links. You can add CSS styles to it so that it is properly laid out and beautified on the page.
  • <h3>友情链接</h3>English: List title, you can modify it according to your actual needs.
  • <ul> ... </ul>English: Unordered list, each friendship link will be displayed as a list item.
  • {% for item in friendLinks %}English: This is a loop tag, it will iterate overfriendLinksThe friendship link in each, and assign the data of the current link toitema variable.
  • <li> ... </li>EachitemAn item of the list will be generated.
  • <a href="{{item.Link}}" ... target="_blank">{{item.Title}}</a>This is the HTML code of the friendship link.
    • href="{{item.Link}}"To obtain the address of the friendship link.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}This is a conditional judgment, if the background is setNofollowOption 1 (i.e., checked) is selected, then it will add to the linkrel="nofollow"properties.
    • target="_blank": Open the link in a new tab to improve user experience.
    • {{item.Title}}：Display the name of the friendship link.
  • {% if item.Remark %} <span>({{item.Remark}})</span> {% endif %}：This code is used to display the remarks of the friendship link, which is conditional as well. It will only be displayed when the remarks exist.
  • {% endfor %}：EndforLoop.
  • {% endif %}：Endifcondition judgment.
  • {% endlinkList %}：EndlinkListLabel.

Through the above steps, you can flexibly display the list of friend links configured in the background on the website sidebar or footer area.Remember to clear the cache (click on the 'Update Cache' feature in the admin panel) after modifying the template file if the website has cache enabled, to ensure that the changes take effect immediately.

Common Questions (FAQ)

1. How to adjust the display order of friend links?

The display order of the friend links usually depends on their arrangement in the background "Function Management" -> "Friend Links".In the security CMS, the backend list usually supports drag-and-drop sorting or control through a 'display order' field.If your current template requires a specific sorting method, you can check if there are related settings in the background.If the backend does not have a direct sorting feature, links are usually displayed in order of creation time or ID.orderProperties are adjusted, which will increase the complexity of front-end development.

2. Can I display different lists of friendship links in different areas of the website, such as showing “Partners” in the sidebar and “Recommended Resources” in the footer?

Yes, you can achieve this requirement. SincelinkListThe label will automatically retrieve all friend links, and you can use the 'Link Remark (Remark)' field to categorize them when editing the friend links in the background.For example, annotate the sidebar links as "Partners

{# 侧边栏显示“合作伙伴”链接 #}
{% linkList allLinks %}
    {% for item in allLinks %}
        {% if item.Remark == "合作伙伴" %}
            <li><a href="{{item.Link}}" target="_blank">{{item.Title}}</a></li>
        {% endif %}
    {% endfor %}
{% endlinkList %}

{# 页脚显示“推荐资源”链接 #}
{% linkList allLinks %}
    {% for item in allLinks %}
        {% if item.Remark == "推荐资源" %}
            <li><a href="{{item.Link}}" target="_blank">{{item.Title}}</a></li>
        {% endif %}
    {% endfor %}
{% endlinkList %}

3. The function of therel="nofollow"attribute? Should I add this attribute to all friend links?

rel="nofollow"The attribute tells search engines (such as Baidu, Google) not to pass the weight ("PageRank" or "link juice") of your website to the page that the link points to. It indicates that you do not acknowledge the authority of the link or the link