How to call and display the friendship link set in the background on the front end?

AnQiCMS provides a set of intuitive and powerful content management features, among which the management of 'friend links' is an indispensable part of website operation. It not only promotes the SEO performance of the website 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 on the website front-end.

Friendship link background configuration

Managing friend links in Anqi CMS is very simple. You just need to log in to the backend, find the "Function Management" module in the left menu bar, and click to enter "Friend Links"。Here, you can add a new link, fill in the link name, URL address, remarks, and choose whether to add this linknofollowProperty. All links configured here will be ready for front-end calls.

Front-end call core:linkListTag

To display these friendship links in the front-end template, Anqi CMS provides a dedicated template tag:linkList. This label can help you easily get all the friend link data configured in the background and organize it into an iterable list.

linkListThe basic usage of the tag 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 tag will store all the friendship links obtained from the background into this variable, as a list for you to use in{% for %}loop traversal.

Available data of the friendship link item

When you use{% for %}Loop throughfriendLinksThe variable, each loop item (usually nameditem) contain the following important data:

• item.Title: The display name of the友情链接 (friendship link).
• item.Link: The complete URL address of the friendship link.
• item.Remark: The remark set in the background for the friendship link, which is usually used as the link'stitleProperty, displayed when the mouse hovers.
• item.Nofollow: A boolean value (or a number representing a boolean), used to determine whether to add the link.rel="nofollow"Property. This is very important for SEO strategy, it can control whether the search engine tracks the link.

Actual code example and analysis

Here is a complete front-end code example that shows how to uselinkListtags to call and display the link

<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 friend link area, making it convenient for you to control the overall style through 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 label, it fetches all friend link data from the background and assigns it tofriendLinksVariable.
4. {% if friendLinks %}: This is a conditional judgment, used to checkfriendLinksWhether any links are contained in the variable. If the list is empty, it will execute{% else %}Part of the code displays a prompt such as 'No friend links, 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 will be listed as an item<li>Display.
6. {% for item in friendLinks %}: Loop throughfriendLinksEach friend link item in the list. In each loop, 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 directlyitem.LinkGet the URL configured in the background.
   • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: This is an inline conditional judgment. Ifitem.NofollowThe value is1(Means checked in the background)nofollow), then it will be for the<a>tagsrel="nofollow"This attribute tells the search engine not to pass weight to this link.
   • target="_blank": Opens the link in a new tab to avoid the user leaving the current website.
   • title="{{ item.Remark }}": Set the remark information set in the background as a link'stitleattribute, which will display the remark when the user hovers over the link, enhancing the user experience.
   • {{ item.Title }}: Display the link text, use it directly.item.TitleGet the link name set in the background.

Additional consideration

• Customize the style:The code above only provides the HTML structure. You need to design the overall website according to it, to.friendship-links-section/.friendship-links-list/.link-itemandaAdd the appropriate CSS styles to the tag so that it matches your website's style.
• Multi-site support:If you have used the multi-site management function of Anqi CMS and want to call the友情链接 of a specific site,linkListTags also supportsiteIdParameters. For example:{% linkList friendLinks with siteId="2" %}.But in most cases, the default call to the current site's link is sufficient.

By following these steps, you can flexibly and efficiently display the friendship links you have carefully configured in the backend on the frontend of Anqi CMS.

Frequently Asked Questions (FAQ)

1. Why did I add it on the front-end page?linkListBut the link to friends did not show up?First, make sure you have added at least one friend link in the "Function Management" -> "Friend Links" section of the Anqi CMS backend. Second, check that your template code is using 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. Friends link inrel="nofollow"What is the role of the property? When should I use it? rel="nofollow"The attribute tells the search engine not to pass 'link weight' 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 misinterpreting it as a buying and selling link).When adding a friend link in the Anqi CMS backend, you can check the corresponding options to automatically add this attribute.

3. Can I customize the display order of friends links?The friendship link management interface of Anqi CMS backend usually provides sorting function, you can adjust the display order of the links.If there is no direct drag and drop or numerical sorting function in the background, links are usually displayed in the order of addition or the default ID order.If you need a more advanced sorting (such as alphabetical or specific attribute), you may need to obtain the link data in the template after which, use the sorting function built into the template (such assortedFilter, if supported), for secondary processing, but this usually requires some template development experience.