In website operation, friend links have always been an important means to enhance website authority, increase external traffic, and strengthen user trust.If you are using AnQiCMS to manage your website and want to display a list of friend links on the front page, you will find that this process is surprisingly simple and efficient.Anqi CMS with its simple design and powerful features makes content management easy, and the display of friend links is no exception.

Next, let's see how to implement the display of friend links in Anqi CMS together.

Step 1: Manage friend links in the background

Firstly, we need to add and manage friend links in the Anqi CMS backend. This is a very intuitive process:

Log in to your AnQi CMS backend, and you will find the "Function Management" menu in the left navigation bar.Click to enter and you can see various auxiliary function options, including "Friendship Link Management".

Enter the "Friend Links Management" page, where you can easily add new friend links. For each link, you need to fill in the following information:

  • Link NameThis is the text displayed for the friend link on the front-end page.
  • Link AddressThis is the actual URL that the friend link points to.
  • Nofollow attributeThis is a very practical SEO feature.When you do not want to pass the weight of your website to a link in the friendship link, or link to some external sites, you can choose to enable the 'Nofollow' attribute.This tells the search engine not to track this link, which helps maintain the SEO health of your website.

You can add any number of friendship links as needed, and you can edit or delete them at any time.

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

After completing the friendship link settings on the backend, the next step is to display them on the website's frontend page.AnQi CMS provides special template tags to retrieve this data, allowing you to avoid writing complex database query code.

Generally, friend links are displayed in the footer, sidebar, or an independent "Friend Links" page of a website. The template files of Ananqi CMS are located/templateUnder the directory, you can choose to modifybash.html(usually contains the common header and footer code of the website) or inpartial/For example, a code snippet file in the directoryfooter.htmlTo display uniformly. Of course, if you only want to display it on a specific page, just add it to the template file of that page.

The tag used by AnQi CMS to call the friend link islinkList. It will fetch all the friendship link data configured in the background and encapsulate it in a variable available for iteration.

The following is the basic code structure you can use in the template:

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

Let's take a detailed look at this code:

  • {% linkList friendLinks %}This is a core tag, it retrieves all the friendship link data from the background and assigns it tofriendLinksthis variable.
  • {% if friendLinks %}and{% endif %}This is a conditional judgment, which is very important. It ensures that only whenfriendLinksthere is indeed data in the variable (i.e., the back-end has set up friend links), will this entire section be rendereddivBlock. This can prevent an empty title or list from appearing on the page when there are no friend links, keeping the page tidy.
  • {% for item in friendLinks %}and{% endfor %}: This is a loop structure, it will traversefriendLinksEach item in the collection. In each iteration, the data of the current link will be assigned toitemVariable.
  • {{item.Link}}: Used to output the URL address of the current link.
  • {{item.Title}}Used to output the display name of the current friendship link.
  • {% if item.Nofollow == 1 %} rel="nofollow"{% endif %}This is a clever conditional judgment that checks the background settings for the current link.NofollowProperty. If this property is set to 1 (indicating enabled), it will automatically be<a>tagsrel="nofollow"Property, perfectly supporting your SEO strategy.
  • target="_blank"This is a standard HTML attribute that indicates that the target website will open in a new browser tab after clicking the link, enhancing the user experience.

Add this code to the template file where you want to display the friend links, save and refresh your website page, and you will see the list of friend links configured in the background.

Step 3: Beautify the display style of the link

After the code deployment is complete, you may still need to make some style adjustments to the friend link list to better integrate it into the overall design of the website.You can control the layout, font, color, spacing, and other elements of the list with CSS.

In the static resource directory of your website (usually/public/static/css/), you can target the style file defined in the above code.classfor example.friendship-links-section/.section-title/.friendship-links-list/.link-itemand.link-anchorAdd CSS rules. For example, you can make links horizontal or set hover animation effects to make the page look more professional and beautiful.

The Anqi CMS template engine supports Django template engine syntax, giving you great flexibility in customizing these personalized front-end features. You can create a unique style of friendship link display area according to your design needs.

In general, Anqi CMS provides a very smooth solution for friend links from backend management to frontend display.It is not only simple to operate but also well considered in SEO optimization, helping your website better connect with the outside world.

Frequently Asked Questions (FAQ)

Question 1: Can I display the list of friendship links at any position on the website?Answer: Yes, you can place the template call code for the friendship link anywhere in the front-end template file where you want to display it. Whether it's the footer, sidebar, a standalone page, or a specific location within the article content, just paste the correspondinglinkListLabel code, the friend link list can be rendered correctly.

Question 2: What will the front-end page display if I do not set any friend links in the background?Answer: If you have not set any friendship links in your background or all links have been deleted, the code snippet provided in our article will be affected by{% if friendLinks %}This condition judgment will not render the entire friend linkdivsection. This means that there will be no empty "friend link" title on the page, keeping the page clean and tidy.

Question 3: Can the order of the friend links be adjusted?Answer: In the Anqi CMS backend "Friend Link Management" function, you can adjust the display order of the links by editing them.Generally, the system arranges items according to the order in which they were added or most recently edited. You can find options to adjust the order in the background or change the position in the list by editing the link.