How to display the friend link list of the website in AnQiCMS template?

As an experienced CMS website operation personnel of AnQi, I fully understand that in website operation, friendship links are not only the embodiment of external resource cooperation, but also an important part of SEO optimization and user experience construction.AnQiCMS has always been committed to providing simple and efficient solutions in content management and template integration, and displaying the list of friendly links is no exception.

Now, I will introduce to you how to elegantly display the list of friend links on the AnQiCMS template.

In modern website operation, friendship links (also often referred to as "partners" or "recommended sites") play a crucial role in connecting websites to external resources, enhancing search engine visibility, and enriching user navigation.A well-designed, easy-to-manage and display area for friendship links, which can effectively increase the authority of the website, improve the external link structure, and provide users with more valuable information.AnQi CMS is an efficient content management system that fully considers this need, providing built-in functions and template tags to allow website operators to easily implement the display of friendship links.

Understand AnQiCMS's friend link management mechanism

The Anqi CMS integrates the management of friend links into its "Function Management" module on the backend. Here, you can add, edit, and delete friend links, including setting the link name, URL address, notes, and whether to addnofollowProperty. Built-in system.linkListTemplate tags are the core tools for front-end templates to retrieve these background data.This label is designed to be intuitive and easy to use, conforming to the syntax style of the Django template engine, even beginners in template development can quickly get started.

Steps to display the friend link list in the template.

To display the friend link list in the AnQiCMS template, you mainly need to do two things: determine the display location, and use the correct template tags.

Step 1: Select the appropriate template file and display location

Friendship links are usually placed at the footer (footer), sidebar (sidebar) or an independent "friendship links" page on a website.

If you want to display友情链接 at the bottom of all pages, you may need to edit the template directory used for the common partbash.htmlfile, or define the footer in your themepartial/footer.htmlThese files are usually accessed by other pages.{% include %}references.}

If the link to friendship is only displayed on specific pages, such as the homepage, then you can edit.index/index.htmlfile.

Find the area of code you decide to display the friend link.

Step two: uselinkListTag to get and traverse the friend link data.

AnQiCMS providedlinkListThe tag is used specifically to retrieve friend link data from the background database. The usage of this tag is very concise.

First, you need to use{% linkList 变量名 %}Define a variable that will store the collection of all友情链接 For example, we can name itfriendLinks.

{% linkList friendLinks %}
    {# 在这里处理 friendLinks 变量 #}
{% endlinkList %}

OncefriendLinksThe variable is defined, it will be an array object containing all the friendship link information. Next, you need to useforLoop to traverse this array and display the details of each friendship link one by one.

In each loop,itemThis variable represents an independent friendship link object, it contains the following available fields:

• item.Title: The display name of the友情链接 (friendship link).
• item.Link: Friend link URL address.
• item.Remark: Optional remark information for the friendship link.
• item.NofollowA boolean value (or 1/0), indicating whether the link should be addedrel="nofollow"Property.

The following is an example of the complete code for displaying a list of friendship links:

{% linkList friendLinks %}
    {% if friendLinks %} {# 检查是否存在友情链接，避免在没有链接时显示空标题或区域 #}
    <div class="footer-links">
        <h3>友情链接</h3>
        <ul class="friend-links-list">
            {% for item in friendLinks %}
            <li class="friend-link-item">
                <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:

1. {% linkList friendLinks %}The tag is used to retrieve all the友情链接 configured in the background and assign it tofriendLinksVariable.
2. {% if friendLinks %}Ensure that the entire friend link area is rendered only when there is a friend link present, to prevent the page from appearing blank or with meaningless titles.
3. <h3>友情链接</h3>and<ul>/<li>The HTML tags are used to build the structure of a list and provide a title. You can adjust these HTML structures and CSS classes according to your website design.
4. {% for item in friendLinks %}Loop throughfriendLinksEach friendship link in the array.
5. <a href="{{ item.Link }}" ...>Created the actual link.{{ item.Link }}Will output the URL of the friendship link.
6. {% if item.Nofollow == 1 %}rel="nofollow"{% endif %}This line is very critical. It dynamically adds links based on the backend settings.rel="nofollow"Properties. This is particularly important for SEO management, as it can control the transmission of link weight and avoid unnecessary negative impacts.
7. target="_blank"Properties make the link open in a new tab, enhancing user experience.
8. title="{{ item.Remark }}"Set the remark from the background as the link hint information.
9. {{ item.Title }}Display the name of the friendship link.
10. {% endfor %}and{% endif %}End separatelyforloop andifConditional judgment.

Stylized friendship link

The code provided is the basic HTML structure and does not include any CSS styles.To make the friend link list display beautifully on your website, you need to style it with CSS.You can use the code indiv.footer-links/ul.friend-links-list/li.friend-link-itemAnd class names, define the corresponding styles in your theme CSS file.

For example, you can set the color of the link, font size, adjust the spacing between list items, or align the list items horizontally, etc.

Summary

Provided by Anqi CMSlinkListTemplate tags and concise Django template syntax make it a direct and flexible process to display a list of friendship links on the website frontend.The operation personnel only needs to manage the friend link data in the background, and then integrate the above template code snippet into the corresponding position of the website, and it can be easily implemented.This method not only simplifies the development process, but also provides strong support for website external link management and SEO optimization.

Frequently Asked Questions (FAQ)

How to manage friend links in Anqi CMS backend?

You can log in to the Anqi CMS backend, navigate to the "Function Management" menu, and then find the "Friend Links" option. On this page, you can conveniently add new friend links, edit the names, URLs, notes, and whether to enable existing linksnofollowAttribute, you can also delete the links that are no longer needed.

2. Why do you need to set up friend links?rel="nofollow"?

rel="nofollow"is an HTML attribute used to inform search engines not to consider the link target as an endorsement of the site and not to pass PageRank (page weight). For friendly links, usenofollowAvoid potential SEO negative impacts due to linking to low-quality websites or excessive link exchanges, while maintaining the naturalness and control of external links on the website.The AnQi CMS provides a direct option to set this attribute in the background, making it convenient for operations personnel to manage according to SEO strategies.

3. Can I display different categories of friendship links on different pages?

The current Anqi CMSlinkListThe tag defaults to fetching all the links managed under the "Friend Links" feature module in the background, and does not provide parameters for filtering based on "Group" or "Type". If you have this requirement, you may need to create multiple separate pages in the background (such as "Partner A", "Partner B"), and manually insert the corresponding friend link list content on each page, or customize the development tolinkListAdd logic on the tag to identify different link groups.