How to display a list of website friend links in the front-end template?

In website operation, friendship links are not only bridges for communication between websites, but also one of the important strategies to improve website authority, increase external traffic, and optimize search engine rankings.Reasonably configure and display friendship links, which can effectively improve the website's SEO performance and provide users with more valuable external resources.AnQiCMS as an efficient content management system fully considers this requirement and provides a simple and intuitive way to manage and display friend links in the front-end template.

Backend management: Setting and maintenance of friend links

To display the friend link on the front-end page, you first need to manage and configure it in the AnQiCMS backend.The system provides a dedicated module for you to easily complete these operations.

You can navigate to the 'Function Management' module through the backend and then find the 'Friend Link Management'. Here, you can easily add, edit, or delete friend links, and set the name, URL, notes, and whether to add for each link.nofollowProperty information.nofollowThe setting of the property is particularly important, as it helps you control the relationship between the website and external links, avoid unnecessary SEO risks, and ensure link quality.

Front-end display: How to call the friend link through the template tag

Once the friend link is set up in the background, the next step is how to display them in the website's front-end template.AnQiCMS uses a syntax similar to the Django template engine, allowing dynamic data calls with concise template tags.For the list of友情 links, the system provides a special label-linkListThis tag can help us easily get all the configured friend link data.

To display友情链接 on your website template, you can place the following code snippet at the desired location, for example, the footer of the website ( footer.html) or sidebar (sidebar.html):

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

Let's go into a detailed explanation of this code:

first, {% linkList friendLinks %}It is the core tag for calling the friendship link. It will retrieve all the configured friendship link data from the AnQiCMS background and store it in a namedfriendLinksthe variable is used later.{% endlinkList %}marks the end of the tag call.

Then,{% if friendLinks %}The statement is a conditional judgment, it checksfriendLinksDoes the variable have actual data. It is a good programming habit to avoid displaying an empty area on the page when there are no friendship links, enhancing the user experience.

If there is a link to friendship, the code will enter adivcontainer, usually you can add some CSS classes (such asfriendly-links-section) for style control. Among them<h3>友情链接</h3>Is a title, you can modify or remove it according to your needs.

The core display logic lies in{% for item in friendLinks %}Loop. This loop will traversefriendLinksEach friendship link in the list, with each iteration, the data of the current link is assigned toitemVariable.

Inside the loop,<li>an element is used to wrap a single friendship link.item.LinkThe URL address is obtained from the link settings you have set in the background,item.Titlewhich is the display name of the link.

Especially note that{% if item.Nofollow == 1 %} rel="nofollow"{% endif %}This code. It will automatically add the 'nofollow' option in the HTML tag based on whether you have checked the 'nofollow' option for this friendship link in the backgroundrel="nofollow"Properties. This is crucial for informing search engines not to follow this link and pass on weight, which helps maintain the SEO health of your website. At the same time,target="_blank"The attribute is a common practice that will make the friendship link open in a new window or new tab, to avoid users leaving your website.

Finally,{% if item.Remark %}<span class="link-remark">（{{ item.Remark }}）</span>{% endif %}Allow you to display remarks added to the link in the background, which is very useful for some friendship links that require additional explanations.

Flexible application and precautions

This code provides the core data calling logic. As for the style and layout of the friend link, you can beautify and adjust it according to the overall design of the website, such as setting link color, font size, list spacing, etc.

If you are using the multi-site management feature of AnQiCMS and want to call the friendship link of other sites, you canlinkListthe tag withsiteIdparameters, for example{% linkList friendLinks with siteId="2" %}. Here,"2"represent the ID of the target site you want to call.

provided by AnQiCMSlinkListTags and flexible template syntax make displaying friend links very simple and efficient.This not only helps you optimize the SEO performance of your website, but also provides users with a better navigation experience.

Frequently Asked Questions (FAQ)

1. The friend link'snofollowWhat is the role of the property? When should I use it?

nofollow