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

1. Friend link management in Anqi CMS

In the Anqi CMS backend management interface, the management function of the friend link is located under the 'Function Management' menu.You can conveniently add, edit, or delete friend links here.Each link can be set to have its name (display text), link address, notes, and whether to addrel="nofollow"Properties. These detailed settings ensure that you can manage friendship links in a fine-grained manner according to actual operational needs.For example, you can set a regular link for core partners, while enabling links for some temporary or low-rated onesnofollowTo avoid unnecessary SEO risks.

How to display the friend link list on the front-end page?

The AnQi CMS adopts Django template engine syntax, which means you can retrieve the data of the background-configured friendship link through simple template tags. The core template tags arelinkList. Usually, the friendship link list is placed in the footer of the website or on a special "friendship link" page.

The following is usedlinkListHow to display the basic steps and code examples of the tag showing friendship link list:

  1. Locate or create a template file:First, you need to determine in which template file to display the friend link. This is usually the public part of the website, such astemplate/你的模板目录/partial/footer.htmlor in the public reference file of the footer (such astemplate/你的模板目录/bash.htmlIt includes the footer part). If your website has a dedicated friends link page, it may be intemplate/你的模板目录/page/links.htmlsuch a file.

  2. UselinkListtag to fetch data: linkListThe tag retrieves all the friendship links set in the background. It returns an array object containing all the 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, it loads all the friendship link data in the background to the name offriendLinks.
    • {% if friendLinks %}: This is a conditional statement to ensure that related HTML is rendered only when there is friendship link data, to avoid empty titles or lists on the page.
    • {% for item in friendLinks %}: Due tofriendLinksis an array (set), we need to useforloop through each friendship link item. Inside the loop, the variable name of each link item isitem.
    • {{ item.Link }}This will output the URL address of the friendship link.
    • {{ item.Title }}This will output the display name of the friendship link.
    • {{ item.Remark }}This will output the remark information of the friendship link, which is usually used astitleThe attribute provides more detailed hints.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}: This is the processingnofollowThe key attribute. Set by the backend.NofollowThe field is if1(means on), then this will be in<a>the tag withrel="nofollow"Attribute, inform 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 to improve user experience.
    • {% endfor %}and{% endif %}and{% endlinkList %}These are the corresponding end tags used to close loops and conditional statements.

  3. Data calls in a multi-site environment (optional):If you are using the multi-site management feature of Anqi CMS and want to retrieve the friend links of other sites (not the current site),linkListTags also supportsiteIdparameter. For example, to retrieve the ID of2The site's link can be used like this:

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

Chapter 3: Style Customization and Layout Suggestions

The code example provided is the basic HTML structure. To make the friend link list look beautiful 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, and layout (horizontal alignment or vertical alignment) and so on.
  • Responsive DesignEnsure that the friend link list displays well on different devices (PC, tablet, mobile), which usually requires combining CSS media queries.
  • Icon embellishmentIf the number of friend links is not much, you can consider adding some small icons before the links to increase visual interest.

Summary

Provided by Anqi CMSlinkListTemplate tag, showing the website's friendship link list becomes very simple and intuitive.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.Combine the flexible use of HTML and CSS, and you can create a unique style for the friendship link area, thereby enhancing the operation and user experience of the website.

Frequently Asked Questions (FAQ)

Q1: Why did the friend link not display on the front-end page after I added it in the background?A1: Please check the following points:

  1. Are the template tags correctly introduced?Ensure that the front-end template file (such as the footer file) has been used correctly{% linkList friendLinks %}such tags.
  2. Whether there is data presentCheck the friend link list in the background, confirm whether the link has been added. If there are no links at all, then{% if friendLinks %}This judgment will cause the entire area not to display.
  3. Cache issueSometimes website cache may cause new content not to be displayed in time. Try to clear the Anqie CMS system cache or refresh 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 friendship link opens in a new window, what should I add to the link?rel="nofollow"Should I add the attribute?A2: Whether to addrel="nofollow"Depends on your trust in the friendship link and SEO strategy.

  • If you have a deep cooperative relationship with a website and trust its content quality and relevance, you usually do not need to addnofollowLet search engines track this link, which helps pass on 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 addrel="nofollow"It is a good practice. It tells search engines not to pass your website's 'trust rank' to these links, thereby protecting your website's SEO ranking.The Anqi CMS backend can individually set whether each link is addednofollowThis provides you with great flexibility.

Q3: I want my friend link list to be vertically aligned instead of the default horizontal alignment, how should I implement it?A3: This is mainly controlled by CSS styles. In the above code example, the link of friendship is wrapped in<ul>and<li>tags. By default,<li>The element is a block-level element and is automatically arranged vertically. If your links are displayed horizontally, it may be because your global CSS styles are affectingul liupdisplay: inline-blockorfloat: leftproperties. To make them vertically aligned, you can target them in your CSS file, for.friend-links-list liOr.friend-links-list asettingdisplay: 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 link.