Friendship links are an indispensable part of website operation, they can not only promote communication and cooperation between websites, but also have a positive effect on SEO optimization.In AnQiCMS, displaying the friend link list is a simple and efficient process, allowing website administrators to easily provide visitors with more valuable external resources.

Backend Management: Configure your friend links

In AnQiCMS, you first need to configure the friend link in the background before you can display it on the front page. This process is very intuitive:

In the left menu of the background management interface, you can find “Function Management” this item. Click to enter, and in one of the sub-functions, you will see “Friendship Link” management entry.

Here, you can easily add, edit, or delete the website's友情链接 (friendship links). When adding a friendship link, it is usually necessary to fill in theTitle(which is displayed on the website)、Link Addressand can choose whether to enableNofollowproperties (which is very important for SEO optimization, weight transmission control), and you can also add a brief remark to the link.

The system also supports API interfaces for adding and deleting friend links, providing convenience for scenarios requiring automated management.

Front-end display: usinglinkListtag calls

Once the background configuration of the friendship link is completed, the next step is to display them on the website front-end page. AnQiCMS provides special template tagslinkListto help you easily achieve this.

You only need to use the template file (such as the website footer templatefooter.html, or a special page template) where you need to display the friend link{% linkList friendLinks %}...{% endlinkList %}tag.friendLinksIt is a customizable variable name that holds all the friend link data obtained from the backend, displayed as a list for looping.

Each friendship link object includes the following key information, which you can call in the template as needed:

  • Title: The display name of the link.
  • Link: The URL address of the friendship link.
  • Remark：Linked description information (usually not directly displayed on the front end).
  • Nofollow：A boolean value (1 indicates yes, 0 indicates no), indicating whether the link hasrel="nofollow"properties.

Below is an example of a friendship link list display code in a template:

{% linkList friendLinks %}
    {% if friendLinks %} {# 检查是否存在友情链接，避免空列表出现 #}
    <div class="friendly-links">
        <h3>友情链接</h3>
        <ul>
            {% for item in friendLinks %} {# 循环遍历每个友情链接 #}
            <li>
                {# 使用item.Link作为链接地址，item.Title作为显示文本 #}
                {# 根据item.Nofollow的值，动态添加rel="nofollow"属性 #}
                {# target="_blank" 让链接在新窗口打开，提升用户体验 #}
                <a href="{{ item.Link }}" {% if item.Nofollow == 1 %}rel="nofollow"{% endif %} target="_blank">{{ item.Title }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}
{% endlinkList %}

In the above code,{% linkList friendLinks %}The tag is used to obtain the friendship link list configured in the background and assign it tofriendLinksa variable.{% if friendLinks %}Ensure that only the relevant HTML structure is rendered when there is a link, to avoid unnecessary blank spaces or titles on the page. Subsequently,{% for item in friendLinks %}Loop through each link,{{ item.Link }}and{{ item.Title }}Output the link address and display name. Particularly, we output through{% if item.Nofollow == 1 %}rel="nofollow"{% endif %}Dynamic addition based on background settings has beennofollowProperties, and throughtarget="_blank"Opens links in a new window, enhancing the user experience.

Practical considerations and advanced usage

  • SEO friendliness: As mentioned earlier,NofollowThe rational use of attributes is crucial for SEO. For external links that you do not want to pass weight or cannot fully trust, be sure to enable it in the backgroundNofollow, and render the attribute correctly in the template.
  • Multi-site support：AnQiCMS supports multi-site management. If you have created multiple sites in the system and need to call the friendship links of specific sites,linkListthe label usesiteIdparameters, such as{% linkList friendLinks with siteId="2" %}Specify the site ID you want to call.
  • Page layout and style：The friendship link is usually located at the bottom area of the website.You can use appropriate CSS styles in the template to beautify the link list and make it harmonious with the overall design style of the website.divandulTags are just structural examples. You can adjust their class names and styles as needed.

Through the above steps, you will find that AnQiCMS provides great flexibility and convenience in displaying the friend link list.Whether it is managing link content or performing personalized display on the front end, AnQiCMS can help you a hand, optimize your website structure, and enhance user experience.

Common Questions (FAQ)

  1. Is the link to the picture supported for the link?Based onlinkListThe fields available for tags (Title,Link,Remark,Nofollow），AnQiCMS default friendship link function mainly displays links in text title form.The system does not provide a dedicated image field for uploading images directly as a friend link.<img>The HTML code of the tag to achieve the effect of picture links, but this is not the system's original picture field.

  2. How to control the display order of the friend links?AnQiCMS background friend link management interface usually provides sorting function, you can directly adjust the display order of the links in the background.linkListThe tags will be displayed in the order configured on the backend automatically, without the need to set any additional sorting parameters in the template. Therefore, if you want to adjust the display order, you only need to go to the backend to perform the operation.

  3. How to open the friendship link in a new window?To enhance user experience, it is usually recommended to open friendly links in a new window to avoid visitors leaving your website. You can do so in the template code.<a>Add content inside the tag.target="_blank"To achieve this by property. As shown in the example code in the article, just make sure that your<a>tags containingtarget="_blank".