How to display a list of friend links in the sidebar or footer area of a website?

AanQi CMS provides a set of intuitive and powerful features to help us easily manage website content.Among them, the friendship link is an important part of the external connection of the website, not only helps the website's SEO performance, but also provides users with more valuable jump links.This article will provide a detailed introduction on how to flexibly display the friend links list in the sidebar or footer area of your website.

Manage friend links in the background

Before displaying the friend link on the website front-end, we first need to configure it in the Anqi CMS backend.

To manage the friend link, you can log in to the background, then navigate to the 'Function Management' section on the left menu, and click 'Friend Link'.Here you can see a list containing all the added friend links.Click the 'Add Friend Link' button to create a new link entry.

Each friend link entry usually requires filling in the following key information:

• Link Name (Title)This is the text displayed on the website for the friendship link, for example, 'AnQi CMS official website'.
• Link AddressThis is the target URL after clicking the link, be sure to fill in a complete and valid URL, for examplehttps://en.anqicms.com.
• Remark for LinkThis is an optional field, you can fill it as needed, for example, "partner", "recommended site", etc.This note information can be used in some cases for front-end template logic judgment, so that different types of links can be displayed in different regions.
• Link nofollow (Nofollow)This is a very important option. Checking this means adding to the friendship linkrel="nofollow"The attribute tells the search engine not to follow this link and pass on the weight. For external links, this is usually a good SEO practice, which can avoid unnecessary weight loss and indicate to the search engine that these links are submitted or sponsored by users, rather than actively recommended by your website.

After filling out this information, save it to add a friendship link to your website backend. You can add any number of friendship links as needed.

Display the friend link list in the template

After configuring the background data, the next step is to display these links on the website's frontend page.Generally, friendly links are placed in the sidebar or footer area, as these are common areas that users often notice when browsing the website.

The template system of AnQi CMS adopts syntax similar to Django template engine, usinglinkListTag to call friend link data.

1. Determine the placement location:

First, you need to determine in which template file to add the code for the友情链接 links.

• Sidebar: If your website sidebar is an independent template snippet (such as located in thepartial/Under the directorysidebar.htmlOr similar file, then you can add code to that file.
• Footer: If the footer is a public part of the website, it may be located in the main template file (for examplebash.htmlor in your theme'sfooter.html).

You can refer to the template structure of your current topic to find the appropriate insertion point.

2. UselinkListLabel call data:

After finding the appropriate template file, you can use the following code snippet to display the list of friend links.

{% linkList friendLinks %}
{% if friendLinks %}
<div class="friendly-links-section">
    <h3>友情链接</h3>
    <ul>
    {% for item in friendLinks %}
        <li>
            <a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a>
            {% if item.Remark %}
                <span>({{item.Remark}})</span>
            {% endif %}
        </li>
    {% endfor %}
    </ul>
</div>
{% endif %}
{% endlinkList %}

Let's parse this code line by line:

• {% linkList friendLinks %}This is the label called to call the friend link list.friendLinksIt is the variable name we define for this list data, and you can access each friendship link through this variable name in subsequent loops.
• {% if friendLinks %}This is a conditional judgment, it will checkfriendLinksDoes the variable contain any data (i.e., are any friendship links added)? If there are no links, the entire block will not be displayed to avoid blank pages or errors.
• <div class="friendly-links-section"> ... </div>This is an HTML structure used to wrap the list of friend links. You can add CSS styles to make it correctly layout and beautify on the page.
• <h3>友情链接</h3>List title, you can modify it according to your actual needs.
• <ul> ... </ul>Unordered list, each link will be displayed as a list item.
• {% for item in friendLinks %}This is a loop label, it will iterate overfriendLinksOf each friendship link, and assign the data of the current link toitemVariable.
• <li> ... </li>: EachitemIt will generate a list item.
• <a href="{{item.Link}}" ... target="_blank">{{item.Title}}</a>: This is the HTML code of the friendship link.
  • href="{{item.Link}}": Get the address of the friendship link.
  • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: This is a conditional judgment, if the background is setNofollowOption 1 (i.e., checked) will be added to the linkrel="nofollow"Property.
  • target="_blank": Opens the link in a new tab to improve user experience.
  • {{item.Title}}: Display the name of the friendship link.
• {% if item.Remark %} <span>({{item.Remark}})</span> {% endif %}: This code is used to display the remark information of the friendship link, which is also conditional. It will be displayed only when the remark exists.
• {% endfor %}: EndforLoop.
• {% endif %}: EndifConditional judgment.
• {% endlinkList %}: EndlinkList.

By following these steps, you can flexibly display the list of friend links configured on the background in the website's sidebar or footer area.Remember to clear the cache (Update Cache feature in the background) if the website has enabled caching after modifying the template file, to ensure that the changes take effect immediately.

Frequently Asked Questions (FAQ)

How to adjust the display order of friend links?

The display order of the友情链接 links usually depends on their arrangement in the background “Function Management” -> “友情链接”.In AnQi CMS, the background list usually supports drag-and-drop sorting or control through a 'display order' field.If your current template requires a specific sorting method, you can check if there are related settings in the background.If the backend does not have a direct sorting function, links are usually displayed in order of creation time or ID.In this case, to implement more complex sorting (such as by name, weight, etc.), it may be necessary to use front-end JavaScript or CSS'sorderAdjust the properties, but this will increase the complexity of front-end development.

2. Can I display different friend link lists in different areas of the website, such as showing "Partners" in the sidebar and "Recommended Resources" in the footer??

Yes, you can achieve this requirement. BecauselinkListThe tag will default to getting all friendship links, you can cleverly use the "Link Remark (Remark)" field for classification when editing friendship links in the background.For example, note the link in the sidebar as 'Partners', and the link in the footer as 'Recommended Resources'.Then in your template, filter the display through simple conditional judgments:

{# 侧边栏显示“合作伙伴”链接 #}
{% linkList allLinks %}
    {% for item in allLinks %}
        {% if item.Remark == "合作伙伴" %}
            <li><a href="{{item.Link}}" target="_blank">{{item.Title}}</a></li>
        {% endif %}
    {% endfor %}
{% endlinkList %}

{# 页脚显示“推荐资源”链接 #}
{% linkList allLinks %}
    {% for item in allLinks %}
        {% if item.Remark == "推荐资源" %}
            <li><a href="{{item.Link}}" target="_blank">{{item.Title}}</a></li>
        {% endif %}
    {% endfor %}
{% endlinkList %}

3. In the friend linkrel="nofollow"What is the role of this attribute? Should I add this attribute to all friend links?

rel="nofollow"The attribute tells the search engine (such as Baidu, Google) not to pass the weight of your website ("PageRank" or "link juice") to the page pointed to by the link. It indicates that you do not认可 the authority of the link or the link