As an experienced CMS website operation person, I know that high-quality content and excellent user experience are the foundation of website success.Under the powerful support of AnQiCMS, we can not only manage content efficiently, but also provide users with a smooth and intuitive browsing experience through refined template customization.Today, let's delve into how to implement dynamic breadcrumb navigation in the AnQiCMS template, and flexibly customize the homepage text to enhance 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, which displays the user's current position in the website in the form of a hierarchical path.A well-designed dynamic breadcrumb navigation can not only help users clearly understand their browsing path and easily backtrack to the upper page, but also optimize the internal link structure of the website and greatly benefit the understanding and crawling of the page hierarchy by search engine spiders.

In AnQiCMS, implementing dynamic breadcrumb navigation is very convenient, we mainly rely on the built-inbreadcrumb.

Firstly, the usual practice is to place the breadcrumb navigation code snippet in a separate template file, for example, you can/template/你的模板目录/partial/Create a file namedbreadcrumb.htmlThe file. This modular design conforms to the template creation conventions of AnQiCMS, which helps with code reuse and maintenance.

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

A basic breadcrumb navigation implementation 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 traversecrumbsEach breadcrumb item contained in the variable, and output its link (item.Link) and names (item.Name)

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

  • Customize the home page text: PassindexParameter, we can change the default display text of the 'Home' in the breadcrumb navigation. For example, if you want to display it as 'My Blog' or 'Website Homepage', you can set it like this:{% breadcrumb crumbs with index="我的博客" %}.
  • Display the end title:titleThe parameter is used to control the display of the last element in 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 stop at the parent level.
    • title="文章详情"Custom display text, for example, display "Article Details" at the end of the breadcrumb on all article detail pages instead of the specific article title.We can flexibly apply it according to specific design requirements.

Therefore, here is a more完善的 dynamic breadcrumb navigation code example:

<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.htmlIn the template file that needs to display breadcrumbs, use{% include "partial/breadcrumb.html" %}Label this code snippet to enable 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 optimizing the website.

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 "Home TDK Settings" in the background to optimize search engine crawling, we also often need to display some custom text content directly in the home page template, such as greetings, brand declarations, and specific announcements.AnQiCMS provides a flexible way to display these customized text.

To customize the text content on the homepage, we can make use of the 'Global Function Settings' in the AnQiCMS backend. This allows us to define arbitrary key-value pairs and use them in templates throughsystemCall the tag.

First, you need to configure it in the AnQiCMS backend:

  1. Log in to the AnQiCMS backend.
  2. Navigate to "Backend Settings" > "Global Function Settings".
  3. In the "Custom Settings Parameters" area, click "Add New Parameter".
  4. For example, you can add a namedHomepageWelcomeTextThe parameter, its value is "Welcome to our official website, explore more exciting content!" (parameter value), and add the corresponding remarks.

After completing the background settings, you can call these custom texts in the homepage template file (usually/template/你的模板目录/index/index.htmlor/template/你的模板目录/index.html).

To call a custom homepage 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>

In this way, you can manage any custom text content that needs to be displayed on the homepage, such as "Our Mission", "Latest Activities", "Service Commitments", etc., as independent parameters in the background, and flexibly call them in the front-end template.This method not only makes content updates more convenient, but also avoids the risk of introducing errors by directly modifying the template code.

In addition to custom text, the TDK (Title, Keywords, Description) settings on the homepage are also of great importance for SEO optimization.AnQiCMS provides a dedicated configuration interface in the "Background Settings" -> "Home TDK Settings".In the template, we usetdkLabel to call this information:

  • Page Title (Title):{% tdk with name="Title" siteName=true %}. Here,siteName=trueIt will automatically add the website name as a suffix after the page title,sep="-"You 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, it will help improve the visibility and ranking of the homepage in search engines, attracting more target users to visit.

By using 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 an excellent navigation experience and rich homepage information, while achieving the optimization goal of website SEO.

Frequently Asked Questions (FAQ)

Q1: In AnQiCMS, on which pages can I use the breadcrumb navigation label? Does it automatically adapt to the page type?A1:breadcrumbLabels can be used in any AnQiCMS template and have dynamic adaptability. This means that regardless of whether the user is accessing the article detail page, product list page, category page, or label page,breadcrumbThe label is automatically generated according to 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 functionality throughout the site without needing 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: Can. In the AnQiCMS backend's "Global Function Settings" under "Custom Setting Parameters", you can enter text content containing HTML tags in the "Parameter Value" field.For example, you can enter<p>提供<b>高质量</b>的服务和解决方案。</p>. When calling the template on the front end, to ensure that the HTML tags are parsed and rendered correctly, you need to use the variable when outputting it|safefor example:{% system homepageFeatures with name="OurFeatures" %}{{ homepageFeatures|safe }}This will safely output HTML tags without escaping.

Q3: Can I set different home page titles, keywords, and descriptions (TDK) for different templates (such as PC端 templates and mobile end templates)?A3: The "Home TDK Settings" of AnQiCMS is a site-level configuration, which means it is usually applied to the entire site, without directly distinguishing between PC and mobile templates. However, if your website uses the "code adaptation" or "PC+mobile independent site" mode and has a completely independent mobile template, you can use conditional judgment or in the mobile template.systemlabel'sMobileUrlTo provide more detailed TDK control, try implementing it. But usually, to maintain SEO consistency and management convenience, it is recommended to keep the homepage TDK consistent on both PC and mobile devices.For deeper customization needs, it may be necessary to carry out more advanced secondary development of the template logic of AnQiCMS.