As an experienced CMS website operation person, I know that high-quality content and excellent user experience are the foundation of a successful website.With the powerful functions supported by AnQiCMS, we can not only efficiently manage content, but also provide users with a smooth and intuitive browsing experience through fine-grained template customization.Today, let's delve into how to implement dynamic breadcrumb navigation in AnQiCMS templates and flexibly customize the home page text, thereby enhancing the usability and search engine friendliness of the website.

Implement dynamic breadcrumb navigation function

Breadcrumbs navigation is an important part of the website navigation structure, displaying the user's current position within the website in the form of a hierarchical path.An elegantly designed dynamic breadcrumb navigation can not only help users clearly understand their browsing path and easily backtrack to the upper-level page, but also optimize the internal link structure of the website, which is very beneficial for search engine crawlers to understand and grasp the page hierarchy.

In AnQiCMS, it is very convenient to implement dynamic breadcrumb navigation, we mainly rely on the built-inbreadcrumbLabel.

Firstly, the usual practice is to place the breadcrumb navigation code snippet in a separate template file, for example, it can be in/template/你的模板目录/partial/in the directorybreadcrumb.htmlThe file. This modular design conforms to the template production conventions of AnQiCMS, which is helpful for code reuse and maintenance.

Inbreadcrumb.htmlin the file, we can usebreadcrumbLabel to get the breadcrumb navigation data of the current page.This tag automatically identifies the type of the current page (such as article detail page, category list page, tag page, etc.) and generates the corresponding hierarchy path.

An implementation of a basic breadcrumb navigation is as follows:

<nav class="breadcrumb-nav">
    <ul>
        {% breadcrumb crumbs %}
        {% for item in crumbs %}
            <li><a href="{{item.Link}}">{{item.Name}}</a></li>
        {% endfor %}
        {% endbreadcrumb %}
    </ul>
</nav>

This code will iteratecrumbsEach breadcrumb item included in the variable, and output its link (item.Link) and names(item.Name).

To better meet the personalized needs of the website,breadcrumbThe label provides several parameters for customization:

  • Customize the home page text: ThroughindexParameters, we can change the default display text of "Home{% breadcrumb crumbs with index="我的博客" %}.
  • Control End Title Display:titleThe parameter is used to control the display of the last element of the breadcrumb navigation (usually the title of the current page).
    • title=true(Default): Display the full document title.
    • title=false：Do not display the current document title, breadcrumbs end at its parent level.
    • title="文章详情"

Therefore, the following is an example of a more完善 dynamic breadcrumbs navigation code:

<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <ol class="breadcrumb">
        {% breadcrumb crumbs with index="网站首页" title=true %}
        {% for item in crumbs %}
            {% if forloop.Last %}
                <li class="breadcrumb-item active" aria-current="page">{{item.Name}}</li>
            {% else %}
                <li class="breadcrumb-item"><a href="{{item.Link}}">{{item.Name}}</a></li>
            {% endif %}
        {% endfor %}
        {% endbreadcrumb %}
    </ol>
</nav>

Finally, in your main template file (such asbase.html或在Other breadcrumb display template files中，使用{% include "partial/breadcrumb.html" %}Tag this code snippet to implement a dynamic and customizable breadcrumb navigation across the entire site.This not only improves the user's navigation experience, but also provides clear website structure information for search engines, which is an indispensable part of website optimization.

Customize the home page text

The homepage of the website is the first entry point for users to visit, and its content and information display are crucial.In addition to configuring the website's meta title (Title), keywords (Keywords), and description (Description) through the "Homepage TDK Settings" on the backend to optimize search engine crawling, we also often need to display some customized text content directly in the homepage template, such as greetings, brand statements, and specific announcements.AnQiCMS provides a flexible way to display these custom text.

To customize the text content on the homepage, we can make use of the "Global Function Settings" and the "Custom Settings Parameters" feature in AnQiCMS backend. This allows us to define arbitrary key-value pairs and use them in templates.systemtags to call.

Firstly, you need to configure in the AnQiCMS backend:

  1. Log in to the AnQiCMS admin panel.
  2. Navigate to “Backend Settings” -> “Global Feature Settings”.
  3. In the "Custom settings parameters
  4. For example, you can add a name ofHomepageWelcomeTextThe parameter name, with the value 'Welcome to our official website, explore more exciting content!' (parameter value), and add the corresponding remarks.

Complete the background settings and you can call these custom texts in the home page template file (usually/template/你的模板目录/index/index.htmlor/template/你的模板目录/index.html).

To call the custom home page welcome text, you can usesystemLabel, and specify the parameter name:

<section class="welcome-section">
    <h1>{% system with name="SiteName" %}</h1> {# 调用网站名称作为主标题 #}
    <p>{% system with name="HomepageWelcomeText" %}</p> {# 调用自定义的欢迎文本 #}
    <div class="site-info">
        <span>版权所有 &copy; {% now "2006" %} {% system with name="SiteCopyright" %}</span>
        <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">{% system with name="SiteIcp" %}</a>
    </div>
</section>

By this method, you can manage any custom text content that needs to be displayed on the homepage, such as "Our MissionThis method not only makes content updates more convenient, but also avoids the risks that may be introduced by directly modifying the template code.

tdkCall these pieces of information with the label:

  • Page Title (Title):{% tdk with name="Title" siteName=true %}Here,siteName=trueMeans that the site name will be automatically appended as a suffix after the page title,sep="-"Can customize the separator.
  • page keywords (Keywords):<meta name="keywords" content="{% tdk with name="Keywords" %}">.
  • Page Description (Description)):<meta name="description" content="{% tdk with name="Description" %}">.

Properly configure these TDK information will help improve the visibility and ranking of the homepage in search engines, attracting more target users to visit.

Through the above method, the operator of AnQiCMS can efficiently implement dynamic breadcrumb navigation and flexibly customize the text content of the homepage, thereby providing users with excellent navigation experience and rich homepage information, while achieving the optimization goal of website SEO.

Common Questions (FAQ)

Q1: In AnQiCMS, on which pages can I use the breadcrumb navigation tag? Does it adapt automatically to the page type?A1:breadcrumbLabels can be used in any template of AnQiCMS, and it has dynamic adaptability. This means that no matter which page the user is accessing, it could be the article detail page, product list page, category page, or label page,breadcrumbTags will be automatically generated for the corresponding hierarchy path based on the current URL and content model.You only need to introduce this tag once in the template, and it will provide consistent and accurate navigation functions throughout the site without the need to write separate breadcrumb logic for different page types.

Q2: If I need to set custom text for a specific block on the homepage (such as "Our Featured Services") and the text may contain HTML tags, can AnQiCMS handle it?A2: English.In the "AnQiCMS admin panel's" Global Function Settings" under "Custom Setting Parameters<p>提供<b>高质量</b>的服务和解决方案。</p>In the frontend template, when calling the variable, in order to ensure that the HTML tags can be correctly parsed and rendered, you need to use|safeFilter, for example:{% system homepageFeatures with name="OurFeatures" %}{{ homepageFeatures|safe }}. In this way, HTML tags will be output safely and not be escaped.

Q3: Can I set different home page titles, keywords, and descriptions (TDK) for different templates (such as PC template and mobile template)?A3: AnQiCMS's 'Home TDK Settings' is a site-level configuration, which means it is usually applied to the entire site without distinguishing between PC and mobile templates. However, if your website uses 'code adaptation' or 'PC+mobile independent site' mode, and has a completely independent mobile template, you can use conditional judgment orsystemTagsMobileUrl等信息，来尝试实现更细致的TDK控制。But in most cases, for the consistency of SEO and convenience of management, we recommend maintaining the consistency of the homepage TDK on PC and mobile.For more advanced customization requirements, it may be necessary to perform higher-level secondary development on AnQiCMS templates.