In website operation, friendship links play a crucial role in connecting each other, promoting traffic, and improving search engine rankings.A well-maintained, clearly displayed link area that not only reflects the openness of the website but also provides users with more valuable jump paths.AnQiCMS provides users with a convenient link management function, allowing you to easily obtain and display these links on your website.

Manage your friend links: Backend settings

Before starting the front-end display, we need to ensure that the友情链接 link has been configured in the Anqi CMS backend.Generally, you can find the item 'Friend Links' in the 'Function Management' menu on the backend.

  • Add a new linkEnter the name (Title) of the friendship link, the actual URL (Link) it points to, a brief remark (Remark), and whether it needs to be addedrel="nofollow"properties.
  • Edit existing linkModify the links that have already been added.
  • Delete LinkRemove links that are no longer needed.
  • SortingAdjust the display order of links according to your needs to ensure that the most important links are displayed first.

These backend settings are the foundation for displaying friend links on your website's frontend. Once the link information is entered, we can call and display them on the website pages through template tags.

UtilizelinkListTag retrieve friendship link data

AnQi CMS adopts the syntax of a Django-like template engine, which means you can retrieve and manipulate data through concise and clear tags. To get the list of友情链接 (friendship links), we need to use the built-inlinkListLabel.

The usage of this tag is very intuitive. You just need to specify a variable name in the template to receive the friend link data, as shown below:

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

Here,friendLinksThis is a variable name specified for the友情链接 list.linkListTags are executed, it will fetch all the configured友情链接 (friend links) from the background, and organize these links into an 'array object', and assign it tofriendLinksa variable.

For most single-site users,linkListTags can be retrieved without any additional parameters to obtain the current site's friendship links. If you manage multiple sites and want to call the friendship links of other sites,siteIdSpecify the ID of a specific site using the parameter. But in general cases, this is usually not necessary.

Display friendly links: parsing and applying keyword fields

Get tofriendLinksAfter the array, we need to traverse it, and display the information of each friendship link on the web page. SincefriendLinksis an array object, we usually combineforIterate to process each link one by one.

InforIn the loop, each friend link object (here we assume the loop variable to be)item) will contain the following key fields:

  • item.Title: The display name of the friendship link.
  • item.LinkThe target URL address of the友情链接 link.
  • item.RemarkThe remark information of the 友情链接 link, which can sometimes be used as.titleProperties displayed on the link.
  • item.NofollowA boolean value (usually 0 or 1), indicating whether the link should haverel="nofollow"This attribute informs search engines not to follow this link, and is used to control weight transmission in SEO.

With these fields, we can construct standard HTML.<a>Tag to display friend links.

The following is a complete template code example, showing how to elegantly display the friend links list on your website page:

{# 友情链接区域的开始 #}
<div class="friendship-links">
    <h3>友情链接</h3>
    {% linkList friendLinks %}
        {% if friendLinks %} {# 检查是否有友情链接数据 #}
            <ul>
                {% 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>
        {% else %}
            <p>暂无友情链接，敬请期待！</p> {# 当没有友情链接时的提示 #}
        {% endif %}
    {% endlinkList %}
</div>
{# 友情链接区域的结束 #}

In this code, we first use andivelement to wrap the entire friend link area, and give it a class name (such as)friendship-links), which is convenient for you to control the style with CSS.

  • {% linkList friendLinks %}and{% endlinkList %}Defined the range of data acquisition.
  • {% if friendLinks %}A statement is a very important judgment, it will checkfriendLinksIs the variable empty.If it is empty (i.e., no friend links are set on the backend), it will display "No friend links available, please wait!Avoid blank or error messages on the page.
  • InforInside the loop,{{ item.Link }}Responsible for generating the link address,{{ item.Title }}Generate visible link text.
  • {% if item.Nofollow == 1 %} rel="nofollow" {% endif %}This line of code will intelligently add or not add a link based on the backend settings.rel="nofollow"properties.
  • target="_blank"The attribute allows the link to open in a new window or new tab page, enhancing user experience.
  • title="{{ item.Remark }}"The link's note information is displayed as the tooltip text on mouse hover.

In this way, you can flexibly display your list of friend links at positions such as the footer of the website, the sidebar, or a dedicated "Friend Links" page.

Common Questions (FAQ)

What will be displayed on the front page if there are no friend links set up on the backend of my website?

When there are no friend links configured on the backend,linkListthe tags you getfriendLinksThe variable will be an empty array. In our example code, it is achieved by{% if friendLinks %}This condition judgment will display 'No friendship links available, please wait!' elegantly.This prompt information should not appear as blank areas or errors, instead, it should maintain the friendliness of the website interface.

2. Does the link support direct display of image Logo instead of text?

Anqi CMS'slinkListfields provided by the native tag (Title/Link/Remark/NofollowIn it, there is no field directly used to store the image URL.This means you cannot directly display the Logo image through simple field calls.<img>The HTML code of the tag is directly written into the 'Title' field of the friend link.However, this approach makes the backend management interface look less tidy and is not conducive to the separation of content and style.For more advanced requirements, customization development at the template level may be needed.

3. Can the display order of the friendship links be customized?

Yes, the display order of the friendship links can be adjusted through the 'Function Management' -> 'Friendship Links' interface on the Anqi CMS backend.通常，the background will provide drag-and-drop sorting or the ability to set sorting weights, allowing you to arrange the display order of friendship links based on importance or cooperative relationships.linkListTags will respect the sorting settings of the backend when fetching data, so you do not need to write additional sorting logic in the template.