In website operation, friendship links play an important role in connecting each other, promoting traffic, and improving search engine rankings.A well-maintained, clear display of the friendship link area, which not only reflects the openness of the website, but also provides users with more valuable jump links.AnQiCMS provides users with a convenient link management function, allowing you to easily obtain and display these links on your website.

Manage your友情链接 links: backend settings

Before starting the front-end display, we need to make sure that the友情链接 link has already been configured in the Anqi CMS backend.Generally, you can find the "Friend Links" option in the "Function Management" menu on the backend.Here, you can perform the following operations:

  • Add new linkEnter the name (Title), actual URL (Link), brief remark (Remark), and whether to addrel="nofollow"Property.
  • Edit existing links: Modify the links that have been added.
  • Delete Link: Remove links that are no longer needed.
  • Sorting: Adjust the display order of the links according to your needs, ensuring that the most important links are shown first.

These backend settings are the foundation for displaying friend links on your website front end. Once the link information is entered, we can call and display them on the website pages through template tags.

UtilizelinkListTag to get friend link data

AnQi CMS uses a template engine similar to Django, which means you can use concise and clear tags to access and manipulate data. To get the list of friend links, we need to use the built-inlinkList.

The use of this tag is very intuitive. You just need to specify a variable name in the template to receive the link data, as shown below:

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

Here, friendLinksThis is the variable name we specify for the link list. WhenlinkListWhen the tag is executed, it will fetch all the configured friendship links from the background and organize these links into an "array object", assigning them tofriendLinksVariable.

For most single-site users,linkListTags do not require additional parameters to retrieve the current site's link. If you manage multiple sites and want to call the link of other sites, you can consider usingsiteIdParameters to specify the ID of a specific site. But in most cases, this is not necessary.

Displaying友情链接: Parsing and applying key fields.

obtaining tofriendLinksAfter the array, we need to traverse it to display the information of each friendship link on the web page. BecausefriendLinksis an array object, we usually combineforLoop to process each link one by one.

InforIn the loop, each friendship link object (here we assume the loop variable to beitem) will contain the following key fields:

  • item.Title: Display name of the friend link.
  • item.Link: The target URL address of the friendship link.
  • item.Remark: The remark information of the友情 link, it can sometimes be used astitlethe attribute displayed on the link.
  • item.Nofollow: A boolean value (usually 0 or 1), indicating whether the link should berel="nofollow"The attribute informs the search engine not to follow this link, used in SEO to control the transmission of weight.

With these fields, we can construct standard HTML.<a>Link label to display friend links.

The following is a complete template code example showing how to elegantly display a list of friend links on your website page.

{# 友情链接区域的开始 #}
<div class="friendship-links">
    <h3>友情链接</h3>
    {% linkList friendLinks %}
        {% if friendLinks %} {# 检查是否有友情链接数据 #}
            <ul>
                {% for item in friendLinks %}
                    <li>
                        <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>
{# 友情链接区域的结束 #}

In this code, we first use adivelement to wrap the entire link area, and give it a class name (for examplefriendship-links), which makes it easy for you to control the style with CSS.

  • {% linkList friendLinks %}and{% endlinkList %}Defined the range of data acquisition.
  • {% if friendLinks %}The statement is a very important judgment, it will checkfriendLinksIs the variable empty. If it is empty (i.e., no friend links have been set up on the backend), it will display 'No friend links available, please wait!'The prompt, to avoid blank or error on the page.
  • Inforinside the loop,{{ item.Link }}Responsible for generating link addresses,{{ item.Title }}Generate visible link text.
  • {% if item.Nofollow == 1 %} rel="nofollow" {% endif %}This line of code will intelligently add or not add to the link based on the backend settings.rel="nofollow"Property.
  • target="_blank"The attribute opens the link in a new window or tab, improving the user experience.
  • title="{{ item.Remark }}"The link's note information is displayed as the tooltip when the mouse hovers over it.

In this way, you can flexibly display your friend link list in the footer, sidebar, or a dedicated "friend links" page on the website.

Frequently Asked Questions (FAQ)

1. What will be displayed on the front page of my website if the backend does not set any friend links?

When the backend is not configured with any friend links,linkListTags retrieved from comments.friendLinksThe variable will be an empty array. In our sample code, we do it through{% if friendLinks %}This condition judgment, the page will gracefully display 'No friend links, please wait!'The prompt information should not be blank or have errors, thus maintaining the friendly interface of the website.

2. Does the link of friendship support the direct display of image Logo instead of text?

Of Security CMSlinkListThe fields provided by the tag natively (Title/Link/Remark/NofollowThere is no field directly used to store the image URL.This means you cannot display the picture Logo directly through a simple field call.If you need to display a picture logo, one workaround is to<img>The HTML code is directly written to the "Title" field of the link.However, this approach makes the backend management interface look less tidy and is not conducive to the separation of content and style.For more advanced requirements, it may be necessary to consider customization development at the template level.

3. Can the display order of friend links be customized?

Yes, the display order of the friendship links can be adjusted through the 'Function Management' -> 'Friendship Links' interface in the Anqi CMS backend.Generally, the backend provides drag-and-drop sorting or setting sorting weight features, allowing you to arrange the display order of friend links based on importance or partnership.linkListTags will respect the sorting settings of the background when fetching data, so you do not need to write additional sorting logic in the template.