In website operation, friendly links are an important factor in improving website weight, increasing traffic, and enhancing user experience.AnQiCMS (AnQiCMS) provides us with a convenient way to manage and display these links.How can the list of friend links configured in the background be displayed on the website front page?This is actually simpler than imagined, mainly involving two steps: background configuration and front-end template invocation.

Step 1: Configure the friendship link in the backend

Firstly, we need to add and manage友情链接 in the Anqi CMS backend management system.According to the system design, the management function of the friendship link is usually located under the "Function Management" menu, with a special "Friendship Link" item.Here, we can add friendship links one by one, including:

  • Link Name (Title): Display text of the friendship link.
  • Link Address: The target URL of the友情链接 link.
  • Remark for Link: Some internal remark information.
  • Is Nofollow (Nofollow)?A significant SEO setting that determines whether the search engine tracks the link.

After completing these configurations, the system will automatically save this information for the front-end page to call.Safe CMS has added the backend management feature of友情链接in version V1.0.0-alpha, ensuring the perfection and availability of this basic function.

Step 2: Call the friendship link list in the front-end template.

Next, it is time to display these friendship links in the website's frontend template file. Anqi CMS, using syntax similar to Django template engine, provides a special tag -linkListto retrieve and display in a loop the friend links configured on the backend.

We can display the friend links in the template file where needed (usually the footerfooter.htmlor a dedicated friend links pagelinks.htmlIn the parenthesis, add the following code snippet:

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

Let's carefully interpret this piece of code:

  1. {% linkList friendLinks %}This is the core tag for calling the friendship link list. We specify that the obtained friendship link data will be stored in a namedfriendLinksIn the variable. This tag does not require additional parameters, it will default to fetching all friendship links under the current site.If it is necessary to call links from other sites in a multi-site environment, consider usingsiteIdParameters to specify the site ID, but usually keep the default.

  2. {% if friendLinks %} This is a conditional judgment. It checksfriendLinksWhether the variable contains any data, that is, whether the background has configured the friend link.This is to avoid displaying an empty friends link area when there are no links, improving the page's neatness.

  3. <div class="friendship-links">and<h3>友情链接</h3>Here is the addition of HTML structure and title for the friendship link list, making it convenient for us to design the style through CSS to keep it consistent with the overall style of the website.

  4. <ul>and<li>Friendship links are usually presented in the form of an unordered list, with each link occupying a list item.

  5. {% for item in friendLinks %}Due tofriendLinksis a list that contains multiple friendship links (or called an array), we need to useforloop to iterate through each link. In each loop,itemA variable represents all the information of the current friendship link being processed.

  6. <a href="{{item.Link}}" {% if item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{item.Title}}</a>: This is the key part of displaying a single friendship link.

    • href="{{item.Link}}": Passitem.LinkGet the link address configured in the background.
    • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}This is an inline conditional judgment. It checks whether the current link'sNofollowattribute is1(usually representing enabled). If enabled, it will automatically be<a>tagsrel="nofollow"Attribute, inform the search engine not to follow this link. This is very important when handling some non-recommended links or ad links.
    • target="_blank"This attribute will open the link in a new tab, avoiding the user from leaving the current website after clicking on a friendship link, thus enhancing the user experience.
    • {{item.Title}}This shows the link name configured in the background.

  7. {% endfor %}/{% endif %}/{% endlinkList %}These are corresponding end tags, ensuring the integrity of the template syntax structure.

By following these steps, we can easily display the friend link list configured on the backend on the website front-end.The label design of AnQi CMS separates content from display logic, allowing even operation personnel unfamiliar with programming to manage website content through simple template modifications.

Frequently Asked Questions (FAQ)

Q1: How to modify the style of the friendship link (such as font size, color, alignment)?

A1: The display style of the友情链接 is controlled by CSS (Cascading Style Sheets). In the above template call example, we added to the list of links.class="friendship-links"You can use this class name or other HTML tags such asul/li/a) Write style rules in your website's CSS file. For example, to change the color and font size of links, you can add something similar to the CSS file..friendship-links a { color: #333; font-size: 14px; }rules.

Q2:rel="nofollow"What is the role of the property and when should it be used?

A2: rel="nofollow"The attribute informs the search engine not to consider the link as a recommendation for your website and not to pass PageRank (page weight). It is mainly used:

  1. Paid links or advertising links: Prevent search engines from misjudging as a purchase link, affecting website ranking.
  2. User Generated Content (UGC): Such as comment sections, forums, etc., to avoid spam links affecting website SEO.
  3. I do not want to pass a weighted linkFor example, some links to competitors' friendship or content you do not fully trust.When configuring the friend link in the Anqi CMS backend, you can choose whether to enable this attribute, and the system will automatically add it to the front-end template according to your settings.

Q3: Can I display different groups of friend links on the same page? For example, one part is "Partners" and the other part is "Friend Sites".

A3: According to the provided document,linkListThe tag does not currently support filtering friendship links by the 'group name' parameter (such astype="合作伙伴"It will retrieve all the友情链接 configured in the background. If you have this need, you may need to mark it through the "链接备注" field in the background, and then pass it through the front-end template.forLoop cooperationifConditional statements are used for logical judgment to group display. Or contact the development team of Anqi CMS to see if there are plans to add this feature in future versions.