AnQiCMS provides a set of intuitive and powerful content management features, among which the 'Friend Links' management is an indispensable part of website operation. It not only promotes the website's SEO performance but also provides users with convenient navigation.This article will introduce how to call and elegantly display the friend links you set in the background.

Backend configuration of friend links

Managing friend links in AnQi CMS is very simple.You only need to log in to the background, find the "Function ManagementnofollowProperty. All links configured here will be prepared for front-end calls.

Front-end call core:linkListtags

To display these friendship links in the front-end template, Anqi CMS provides a dedicated template tag: linkListThis tag can help you easily get all the friendship link data in the background configuration and organize it into a traversable list.

linkListThe basic usage of tags is as follows:

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

Here,friendLinksis a custom variable name, you can name it according to your preference (for examplefriend_links/linksetc.).linkListThe label will store all the friendship links obtained from the background into this variable, as a list for you to use.{% for %}the loop.

Available data for friendship link items.

When you use{% for %}to iteratefriendLinksWhen the variable is used, each loop item (usually nameditem）All of them contain the following important data:

  • item.Title[The display name of the friendship link].
  • item.Link: The full URL address of the friendship link.
  • item.Remark: The remarks of the friendship link set in the background, which can usually be used as the link'stitleProperty, displayed when the mouse hovers over.
  • item.Nofollow: A boolean value (or a number representing a boolean), used to determine whether to addrel="nofollow"Properties. This is very important for SEO strategies, as it can control whether the search engine tracks the link.

Actual code examples and analysis

The following is a complete front-end code example that shows how to uselinkListtags to call and display the friend links:

<div class="friendship-links-section">
    <h3>合作伙伴</h3>
    {% linkList friendLinks %}
        {% if friendLinks %}
        <ul class="friendship-links-list">
            {% for item in friendLinks %}
            <li class="link-item">
                <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>

Let's analyze this code in detail:

  1. <div class="friendship-links-section">...</div>This is an external container used to wrap the friendship link area, making it convenient for you to control the overall style with CSS.
  2. <h3>合作伙伴</h3>: This is the title of the friend link area, you can modify it according to your actual needs.
  3. {% linkList friendLinks %} ... {% endlinkList %}: This is the core tag, which fetches all the friend link data from the background and assigns it tofriendLinksa variable.
  4. {% if friendLinks %}: This is a conditional judgment, used to checkfriendLinkswhether any links are included in the variable. If the list is empty, it will execute{% else %}The code shows a prompt such as 'No friendship links available, looking forward to your participation!' This can effectively avoid displaying an empty list when there are no links.
  5. <ul class="friendship-links-list"> ... </ul>: This is an unordered list, each link in the friendship will be listed as an item<li>displayed.
  6. {% for item in friendLinks %}: Loop throughfriendLinksEach item of the link in the list. In each iteration, the data of the current link will be stored initemthe variable.
  7. <a href="{{ item.Link }}" ... >{{ item.Title }}</a>: This is the core HTML code for displaying the friend link.
    • href="{{ item.Link }}": Set the jump address of the link, use directly.item.LinkGet the URL configured by the background.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: This is an inline conditional judgment. Ifitem.Nofollowhas a value of1(means that it is checked in the background)nofollow) will be set for the<a>Label addrel="nofollow"attribute. This tells the search engine not to pass weight to this link.
    • target="_blank": 强制链接在新标签页中打开，避免用户离开当前网站。
    • title="{{ item.Remark }}": 将后台设置的备注信息作为链接的。titleProperty, when the user hovers over the link, the note will be displayed to enhance the user experience.
    • {{ item.Title }}: Display the text of the link, use directlyitem.TitleGet the link name set in the background.

Additional considerations

  • Style Customization:The above code only provides the HTML structure. You need to add the corresponding CSS styles for the tags according to the overall design of the website..friendship-links-section/.friendship-links-list/.link-itemandaAdd the corresponding CSS styles for the tags to maintain consistency with your website style.
  • Multi-site support:If you have used the multi-site management feature of Anqi CMS and want to call the friend links of a specific site,linkListLabels are supportedsiteIdFor example:{% linkList friendLinks with siteId="2" %}. But in most cases, calling the link of the current site by default is enough.

Through these steps, you can flexibly and efficiently display the友情链接 you have meticulously configured on the frontend of the Anqi CMS.

Common Questions (FAQ)

1. Why did the link not appear on the front page even though I added it?linkList标签，but the friendship link did not show up?Firstly, make sure you have added at least one friend link in the "Function Management" -> "Friend Links" section of the Anqi CMS backend. Secondly, check if your template code has used it correctly.{% linkList %}and{% for %}Loop, and make sure the variable name is spelled correctly. Additionally, the friend link feature may be related to website caching. Try clearing the system cache or browser cache and refresh the page.

2. English links in therel="nofollow"属性有什么作用？我应该在什么时候使用它？ rel="nofollow"The attribute tells the search engine not to pass 'link authority' or 'trustworthiness' from your website to the target website.This is very important in SEO.You should use it in the following situations: when the content of the linked website is not completely relevant to your website, you do not trust the quality of the linked content, or the link is a paid advertisement link (to prevent search engines from mistaking it as a trading link).When adding a friend link in the AnQi CMS backend, you can select the corresponding option to automatically add this attribute.

3. Can I customize the display order of English links?The friendship link management interface of the Anqi CMS backend usually provides sorting functionality, you can adjust the display order of the links.If there is no direct drag-and-drop sorting or numeric sorting function on the back end, links are usually displayed in the order of addition or by default ID order.sortedfilterer, if supported) for secondary processing, but this usually requires some template development experience.