Managing and displaying friend links in AnQiCMS is a very practical feature, which plays an important role in increasing external links of the website, improving SEO effect, and facilitating users to access partner websites.AnQiCMS provides a concise and efficient way that allows us to easily obtain and display these links in the template.

Step 1: Background management and configuration of friend links

Before displaying the friendship link on the website front-end, we need to add and manage it in the AnQiCMS back-end system. The management of the friendship link is locatedFunction ManagementModule below. Here, you can add new friendship links, set titles (which is the name displayed on the website), link addresses (URL), notes, and whether to addnofollowProperties. Properly configuring this information is the basis for correctly displaying it in templates. 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 friendship link data in the template

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

linkListThe typical usage of the tag is as follows:

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

Here,friendLinks是我们给友情链接列表数据自定义的一个变量名，你可以根据自己的习惯命名。AnQiCMS会将后台配置的所有友情链接数据获取并赋值给这个EnglishfriendLinksa variable.

linkListThe label supports an optional parametersiteIdIt is mainly used in the environment of multi-site management, if you need to call data from other sites, you cansiteId="X"to specify, whereXThis is the ID of the target site. For most single-site users, this parameter usually does not need to be set.

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

Each friend link object in the loop (we usually call it)item) includes the following available fields:

  • item.Title: The display name or title of the friend link.
  • item.LinkThe target URL address of the友情链接 link.
  • item.Remark：Friend link remark information, usually can be used astitleAttribute or additional description.
  • item.Nofollow：A boolean value (or 0/1), indicating whether the attribute has been set.nofollowAttribute. When its value is1When, indicates 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 friend links at the footer of a website (or any place you want to show friend links).This example considers the page structure, SEO attributes of links, and 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 above code:

  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 friend link in the background, to avoid unnecessary blank areas on the page.
  3. AndivContainer (footer-links-section) andulList (links-list）used for structuring and styling friendship 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, it will automatically add this tag to the link of the property based on the backend settings, which is very friendly for SEO management.nofollowThe addition of this tag to the link of the property based on the backend settings, which is very friendly for SEO management.
  7. target="_blank"Ensure that clicking the friendship link will open in a new browser tab, enhancing the user experience.
  8. title="{{ item.Remark }}"Then use the remark information in the background as the linktitleProperties, a tooltip will be displayed when the mouse hovers over it.

Place this code in your template file (for examplefooter.html, then it wasbase.htmlor other pagesincludeIn the appropriate location, save it after, and refresh the website page, you will be able to see the friend link list configured on the backend. Don't forget to give.footer-links-sectionand.links-listAdd corresponding CSS styles to the class names to make them look more beautiful.

Through the services provided by AnQiCMS,linkListTags, getting and displaying friend links becomes extremely simple and efficient, greatly reducing the manual maintenance workload and able to better adjust to SEO strategies.

Common Questions

Q1: I have added the friend link on the backend, why is it still not displayed on the website front end?

A1: If the friend link is not displayed, please check the following points first:

  1. Is the template code correct:Confirm that you have copied and pasted the above 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 issue:AnQiCMS may have cache to improve performance.Attempt to clear the system cache (usually there is an option for "Update Cache" in the background) or force refresh the page in the browser (Ctrl+F5 or Cmd+Shift+R).
  3. Background link status:Ensure that the友情链接 link you added in the background is enabled, and that the link address, title, and other information have been filled in.

Q2: Can I group the友情链接 friendship links for display, such as "Partners" and "Technical Support"?

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

  1. Batch call:If you can distinguish different groups in the background in some way (for example, by using specific keywords in the link notes), you may need to call the template multiple timeslinkListLabels, and add condition judgment in each loop to filter links belonging to a specific group. But this requires clear distinguishing identifiers in the background data.
  2. Customize background fields (advanced):The content can be customized in the “Friend Link Management” on the background, consider adding a custom field to identify the group, and then filter and display according to this field in the template.This requires a certain understanding of AnQiCMS's extensibility.

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

A3: In the documentlinkListTag returnsitemThe field does not directly contain the image address.This means that the AnQiCMS built-in friend link function mainly focuses on text links.

  1. Custom field:In the background友情链接 management, you can try to add an image URL field for each link by customizing fields. Then in the template, through similar{{ item.CustomImageField }}The way to call and display images.
  2. Implementation of content model:Another more flexible but complex approach is to not use the "Friendship Links" feature, but instead create a dedicated "Image Link" or "Partner" content model. In this model, you can customize the title, link, and image fields, and then usearchiveListLabel to call and display the data of these custom content models.