How to obtain and display the website's friend link list in the template?

Managing and displaying friendship links in AnQiCMS is a very practical feature, which plays an important role in increasing external links of the website, enhancing SEO effects, and facilitating users to access partner websites.AnQiCMS provides a simple and efficient way for us to easily obtain and display these friendship links in templates.

Step 1: Manage and configure website友情 links in the background

Before displaying the friend link on the website front end, we need to add and manage it in the AnQiCMS backend system. The management of the friend link is locatedfunction managementUnder the module. Here, you can add new friend links, set titles (which are displayed on the website), link addresses (URL), notes, and whether to addnofollowProperties. Properly configuring this information is the basis for correct display in the template. EspeciallynofollowAn attribute that is very important for the website's SEO strategy, it can control whether the search engine tracks the link and passes on weight.

Step two: Call the friend link data in the template.

AnQiCMS's template system is based on the Django template engine syntax, providing intuitive tags to call background data. To get the list of friendship links, we need to uselinkListThis core tag.

linkListThe typical usage of the tag is as follows:

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

Here, friendLinksThis is a variable name we give to the list data of friendship links, you can name it according to your habits. AnQiCMS will retrieve and assign all the friendship link data configured in the background to thisfriendLinksVariable.

linkListThe tag supports an optional parametersiteIdThis is mainly used in an environment where multi-site management is required, if you need to call data from other sites, you can pass throughsiteId="X"to specify, whereXIs the ID of the target site. For most single-site users, this parameter is usually not required.

due tofriendLinksis an array containing multiple friendship link objects, we need to useforLoop through it to display each link one by one.

Each friendship link object (we usually call ititem) contains the following available fields:

• item.Title: The display name or title of the friendship link.
• item.Link: The target URL address of the friendship link.
• item.Remark: A note for the friend link, which is usually used astitleattribute or additional description.
• item.Nofollow: A boolean value (or 0/1) indicating whether it has beennofollowattribute. When its value is1when, it means that the link should be addedrel="nofollow".

Practice: A complete example of a friendship link display

Now, let's look at a complete code example of how to display a list of links in the footer of a website (or any place you want to show off your links).This example considers the page structure, the SEO attributes of links, and the user experience.

{# 使用 linkList 标签获取友情链接数据，并将其赋值给 friendLinks 变量 #}
{% linkList friendLinks %}
    {# 判断是否有友情链接数据，避免在没有数据时显示空区域 #}
    {% if friendLinks %}
    <div class="footer-links-section">
        <h4 class="section-title">友情链接</h4>
        <ul class="links-list">
            {% for item in friendLinks %}
            <li>
                {# 使用 item.Link 作为 href 属性，item.Title 作为显示文本 #}
                {# 根据 item.Nofollow 的值动态添加 rel="nofollow" 属性，同时设置 target="_blank" 让链接在新窗口打开 #}
                <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 %}

In the code above:

1. We first use{% linkList friendLinks %}Get the list of friendship links.
2. {% if friendLinks %}Ensure that this part of the HTML is rendered only when there is indeed a link in the background, to avoid unnecessary blank areas on the page.
3. OnedivContainer(footer-links-section), andulList(links-list）used for structuring and styling friend links.
4. {% for item in friendLinks %}Loop through each friendship link.
5. {{ item.Link }}and{{ item.Title }}Fill in the link address and display text separately.
6. {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}This line of code is crucial, as it will automatically add according to the background settings.nofollowThe attribute link added with this tag is very friendly for SEO management.
7. target="_blank"Make sure that when clicking on the friend link, it will open in a new browser tab, enhancing the user experience.
8. title="{{ item.Remark }}"Then the remark information in the background will be used as a link.titleAttribute, a tooltip will be displayed when the mouse hovers over it.

Place this code in your template file (for example)footer.html, then bebase.htmlor other pagesincludeIn the appropriate position, save and refresh the web page, and you will see the list of友情链接(friendship links) configured in the background. Don't forget to give.footer-links-sectionand.links-listAdd the corresponding CSS styles to the class names to make them look more beautiful.

Provided by AnQiCMSlinkListThe tag makes it exceptionally simple and efficient to obtain and display friend links, greatly reducing the manual maintenance workload and able to better adjust to SEO strategies.

Common questions

Q1: I have added the友情 links in the background, why are they still not displayed on the website front end?

A1: If the友情 links are not displayed, please check the following points first:

1. Is the template code correct?Confirm that you have copied and pasted the example code correctly into the template file, especially{% linkList friendLinks %}and{% for item in friendLinks %}Whether the tags are complete and spelled correctly.
2. Cache problem:AnQiCMS may have cache to improve performance.Try to clear the system cache (usually there is an option to 'Update Cache' in the background) or force refresh the page in the browser (Ctrl+F5 or Cmd+Shift+R).
3. Back-end link status:Make sure the友情链接 you added in the background is enabled, and the link address, title, and other information have been filled in.

Q2: Can I group display the friendship links, such as 'Partners' and 'Technical Support'?

A2: Currently, AnQiCMS'linkListThe tag design does not provide grouping functionality directly, it retrieves all enabled friend links as a list. If you need to display friend links in groups, you can consider the following two alternative methods:

1. Batch calling:If you can distinguish different groups in the background in some way (for example, through specific keywords in the link notes), you may need to call the template multiple times.linkListLabel, and add a condition judgment in each loop to filter links belonging to a specific group. But this requires clear identification tags in the background data.
2. Custom background fields (advanced):Consider adding a custom field to identify groups in the "Friend Links Management" section of the background, and then filter and display according to this field in the template.This requires a certain understanding of the extensibility of AnQiCMS.

Q3: Why is my friend link image not displaying? How should I add an image to the friend link?

A3: In the documentlinkListthe tags returned byitemThe field does not directly contain the image address. This means that the built-in friend link function of AnQiCMS mainly focuses on text links.If you need to display a friend link with an image, you may need to:

1. Custom field:In the background friendship link management, you can try to add a picture URL field for each friendship link by custom fields. Then in the template, through similar{{ item.CustomImageField }}The way to call and display the image.
2. Implementation of the content model:Another more flexible but complex way is to not use the "friend link" feature, but to create a dedicated "image link" or "partner" content model. In this model, you can customize the title, link, and image fields, then usearchiveListLabel to call and display the data of these custom content models.