On the AnQiCMS website, displaying the list of friend links in the backend management is a very practical feature. It not only helps to improve the website's SEO effect but also provides visitors with more valuable external resources.AnQiCMS provides a simple and efficient mechanism for managing and displaying these links, allowing even new users to easily get started.

To implement the display of friend links, we mainly proceed in two steps: first, configure and maintain the friend links in the AnQiCMS background management system; second, call these links and lay them out in the front-end template files of the website.

Back-end management friendship link

After entering the AnQiCMS admin interface, you will find that all core functions are concentrated in the navigation bar on the left.The management of friend links is located under the "Function Management" menu.Click on "Function Management" and find and select the "Friend Links" option, which is where we add, edit, and delete friend links.

When adding a new friendship link, the system will prompt you to fill in several key pieces of information:

  • Link NameThis is the name displayed on the front end for the友情链接, for example “AnQiCMS official website”.
  • Link AddressThis is the target URL of the友情链接, which is usually a complete website address, such ashttps://en.anqicms.com.
  • Link note: You can add a brief description or tip to the link, which can be used in some templates astitlean attribute display to provide a better user experience.
  • NofollowThis is a very important option.Check this means to tell the search engine not to track this link and not to pass the current website's weight to the target website.When linking to some non-core content, promotional collaborations, or worrying about weight loss on websites, using the Nofollow attribute reasonably helps maintain the SEO health of your website.

After completing the information entry, save to add the friendship link to the list.The backend interface also supports editing, sorting, and deleting existing links, ensuring you can flexibly manage link content.

Link called in front-end template

After the friendship links in the background are properly configured, the next step is to present them on the website's front-end page. AnQiCMS provides a special tag in its powerful template system.linkListCall the friend link data.

The usage of this tag is very intuitive, it needs a variable to carry the data of the friend link, for example, we can name itfriendLinksThe basic calling structure is like this:{% linkList friendLinks %} ... {% endlinkList %}.

InfriendLinksIn this variable, we can access the detailed information of each friendship link by traversing the loop. Each link object includes various fields that we set up in the background, such asitem.Title(Link name),item.Link(link address),item.Remark(Note) anditem.NofollowDid you check the Nofollow attribute?.

Here is a typical example of a friend link list display code block, which is usually placed in the footer template file of a website or a dedicated friend link page:

{% linkList friendLinks %}
    {% if friendLinks %} {# 确保只有存在友情链接时才显示整个区域，避免页面出现空白标题 #}
    <div class="friend-links-section">
        <h3>友情链接</h3>
        <ul class="friend-links-list">
            {% 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>
    </div>
    {% endif %}
{% endlinkList %}

In this code block:

  • We first use{% linkList friendLinks %}To retrieve friend link data.
  • {% if friendLinks %}This judgment is to ensure that when there are no friend links set on the backend, the frontend will not display the title 'Friend Links', keeping the page tidy.
  • {% for item in friendLinks %}Loop through each link of friendship.
  • href="{{item.Link}}"Set the target address of the link.
  • target="_blank"Ensure that the link opens in a new window or tab when clicked, to avoid users leaving the current website.
  • {% if item.Nofollow == 1 %}rel="nofollow"{% endif %}Will automatically add to the link based on the backend settingsrel="nofollow"Properties. In the template, boolean fields are usually converted toNofollowFields are usually converted to1(true) or0(false).
  • title="{{item.Remark}}"Set the remark from the background as the link hint information.
  • {{item.Title}}Displays the link name.

To keep the friendship link list consistent with the overall style of the website, don't forget to.friend-links-sectionand.friend-links-listas well as<li>/<a>Label and CSS classes to define styles that integrate into the website design.

By using AnQiCMS's simple and clear backend management and powerful template tag features, displaying the friend link list becomes effortless.Using friendship links wisely can not only help your website perform better in search engines, but also provide visitors with more valuable resources, thereby enhancing the overall user experience.

Frequently Asked Questions (FAQ)

1. If there is no friend link set in the background, will the front-end page display the title 'Friend Links'?No. We specifically added it in the provided template code.{% if friendLinks %}This judgment. It will checkfriendLinksWhether the variable has data, only when the background actually exists friendship links,<h3>友情链接</h3>and<ul>The list will be rendered. If there are no links, the entire friend link area will not be displayed, thus keeping the page tidy.

2. Can I display the friendship links in different groups, such as "Partners" and "Technical Exchange"?According to AnQiCMSlinkListThe current design of the tag, it will uniformly retrieve all the友情链接 configured on the backend, and there is no built-in parameter to directly group them.If you need to implement such grouping display, you may need to add specific identifiers in the background link notes (for example, "Partner-Link Name"), and then manually assign links to different groups in the front-end template through more complex logic (such as string matching) for display.

3. What is the role of the 'Nofollow' option? When should I check it?