In the operation of a website, friendship links play an indispensable role.They not only help to enhance the quality of external links to the website, improve the search engine optimization (SEO) effect, but also bring additional traffic to the website and increase the credibility of the website through peer recommendations.AnQi CMS understands the importance of friendship links, therefore it provides an intuitive and convenient management feature, and supports flexible frontend display methods, allowing website administrators to easily present these important cooperative resources on the page.

1. Friend links management in Anqi CMS

In the background management interface of AnQi CMS, the management function of the friendly link is located under the "Function Management" menu.Here, you can conveniently add, edit, or delete友情链接 friendship links.rel="nofollow"Property.These detailed settings ensure that you can manage friendship links in a fine-grained manner according to your actual operational needs.nofollowto avoid unnecessary SEO risks.

How to display a list of friend links on the front-end page?

The Anqi CMS uses the Django template engine syntax, which means you can retrieve the friend link data configured in the background by using simple template tags. The core template tags arelinkListThe friendship link list is usually placed at the footer of the website or on a dedicated "Friendship Links" page.

The following useslinkListDisplaying the basic steps and code examples of the tag display friendship link list:

  1. Locating or creating a template file:Firstly, you need to determine which template file to display the friend links. This is usually the public part of the website, such astemplate/你的模板目录/partial/footer.htmlor the public reference file in the footer (such astemplate/你的模板目录/bash.htmlThis includes the footer section). If your website has a dedicated friends link page, it may be in this file.template/你的模板目录/page/links.htmlSuch files.

  2. UselinkListTag to fetch data: linkListTags will retrieve all friendship links set in the background. It will return an array object containing all link information, which we usually namefriendLinksOf course, you can also customize other variable names.

    Basic usage is as follows:

    {% linkList friendLinks %}
{% if friendLinks %}
    <div class="friend-links-section">
        <h4>友情链接</h4>
        <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 %}

    Code analysis:

    • {% linkList friendLinks %}: This is the core tag, which loads all the background link data into a namedfriendLinks.
    • {% if friendLinks %}This is a conditional statement that ensures only when there is friendship link data, the relevant HTML is rendered, to avoid empty titles or lists on the page.
    • {% for item in friendLinks %}Due tofriendLinksis an array (collection), we need to useforto iterate over each friendship link item. Inside the loop, the variable name for each link item isitem.
    • {{ item.Link }}This will output the URL address of the friend link.
    • {{ item.Title }}This will output the display name of the friend link.
    • {{ item.Remark }}This will output the remark information of the friend link, which is usually used astitleProperties provide more detailed hints.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: This is the processingnofollowof the property key. Settings made in the background.NofollowIf the field is1(indicating enabled), then there will be<a>tag.rel="nofollow"Attribute, informs the search engine not to track this link.
    • target="_blank": This is a common HTML attribute used to open links in a new window or tab, enhancing user experience.
    • {% endfor %}and{% endif %}and{% endlinkList %}These are the corresponding end tags used to close loops and conditional statements.

  3. Data call in a multi-site environment (optional):If you are using the multi-site management feature of AnQi CMS and want to retrieve the friendship links of other sites (not the current site),linkListLabels are supportedsiteIdparameter. For example, to retrieve the ID of2The site's友情链接 can be used like this:

    {% linkList otherSiteLinks with siteId="2" %}
    {% for item in otherSiteLinks %}
        {# ... 展示链接的代码 ... #}
    {% endfor %}
{% endlinkList %}

Section 3: Style Customization and Layout Suggestions

The code example provided is a basic HTML structure. To make the list of links look nice and match your website style, you need to add CSS styles. You can:

  • Utilizedivandul/liThe class nameIn the above example, we usedfriend-links-sectionandfriend-links-listClass names. You can write style rules for these class names in your CSS file, such as adjusting font size, color, spacing, layout (horizontal or vertical alignment), etc.
  • Responsive DesignEnsure that the友情链接列表 friendship link list displays well on different devices (PC, tablet, mobile), which usually requires combining CSS media queries to achieve this.
  • Icon embellishmentIf the number of friendship links is not many, consider adding some small icons in front of the links to increase visual interest.

Summary

Through the CMS provided by AnQilinkListTemplate tags make it very simple and intuitive to display the website's list of friendly links.You just need to configure the link information in the background, and then use the corresponding tags and loop structures in the template file to display these important external resources on the website front end.With the flexible application of HTML and CSS, you can also create a unique style for the friendship link area, thereby adding luster to the operation of the website and enhancing the user experience.

Common Questions (FAQ)

Q1: I added a friend link in the background, why isn't it displayed on the front-end page?A1: Please check the following points:

  1. Are the template tags correctly imported?Ensure that the template file (such as the footer file) is correctly used in the front end{% linkList friendLinks %}Such tags.
  2. Whether there is existing dataCheck the background friend link list and confirm if the links have been added. If none of the links are added, then{% if friendLinks %}this judgment will cause the entire area not to display.
  3. Cache issuesThe website cache may cause newly added content to not be displayed in time. Try clearing the system cache of AnQi CMS or refreshing the browser cache.
  4. Is the template file correct?Confirm that the template file you have modified is the template currently being used by the website, and the file path is correct.

Q2: After the friend link opens in a new window, should I add anything to the link?rel="nofollow"attributes?A2: Whether to addrel="nofollow"It depends on how much trust you have in this friendship link and your SEO strategy.

  • If you have a deep partnership with a website and trust its content quality and relevance, you can usually not addnofollowLet the search engine track this link, which helps to pass on the weight (PageRank) and improve the SEO of both websites.
  • If the friendship link is paid, or you cannot fully control the content quality of the linked website, or simply placed for aesthetics, then addingrel="nofollow"It is a good practice.It tells search engines not to pass your website's 'trust votes' to these links, thereby protecting your website's SEO ranking.nofollowThis provides you with great flexibility.

Q3: I want my list of friendship links to be vertically aligned instead of the default horizontal alignment. How should I achieve this?A3: This is mainly controlled by CSS styles. In the above code example, the friendly link is wrapped in<ul>and<li>tags by default.<li>The element is a block-level element, which is automatically arranged vertically. If your links appear to be horizontally aligned, it may be because your global CSS styles are affectingul liSetdisplay: inline-blockorfloat: leftsuch properties. To make them vertically aligned, you can adjust in your CSS file for.friend-links-list lior.friend-links-list aSetdisplay: block;and adjust the appropriatemargin-bottomto increase the vertical spacing.

/* 示例CSS，你需要根据自己的网站样式表进行调整 */
.friend-links-section {
    margin-top: 30px;
    padding: 20px;
    border-top: 1px solid #eee;
}

.friend-links-section h4 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
}

.friend-links-list {
    list-style: none; /* 移除默认的列表点 */
    padding: 0;
    margin: 0;
    display: flex; /* 默认让它们在一行显示，如果想垂直，移除此行或改为 flex-direction: column; */
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 链接之间的间距 */
}

.friend-links-list li {
    /* 如果想垂直显示，可以这样 */
    display: block; 
    margin-bottom: 5px; /* 垂直间距 */
}

.friend-links-list li a {
    display: inline-block; /* 让链接本身可设置宽度高度，如果垂直显示，可以不改 */
    padding: 5px 10px;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.friend-links-list li a:hover {
    background-color: #f0f0f0;
    color: #007bff;
    border-color: #007bff;
}

By adjusting CSS, you can fully control the display effect of the friend links.