How to create and reference reusable code snippets such as sidebars, breadcrumbs, and more in templates?

In AnQi CMS, the reuse of templates revolves around its syntax similar to Django template engine, combined with a specific directory structure to organize reusable code snippets. All template files use.htmlas suffixes, and stored uniformly in/templateThe directory. To better manage code snippets, we usually create a directory namedpartial/The subdirectory, dedicated to storing these reusable code snippets, such as the sidebar (sidebar.html) Breadcrumb navigation (breadcrumb.html) Comment form (comment.html) etc.

Create and reference reusable code snippets

The AutoCMS template engine providesincludetags, which is the core mechanism for code snippet reuse.includeThe label allows us to embed content from one template file into another, thus avoiding code redundancy.

1. Create reusable sidebar code snippets

The sidebar is a common element on a website, usually containing categories, navigation, latest articles, popular tags, links to friends, or contact information.We can encapsulate these contents in a separate template file and then reference it on the pages where the sidebar needs to be displayed.

Firstly, under your template theme directory (for example/template/您的主题名称/), create a folder namedpartial/, and create a new file in it, for examplesidebar.html.

Insidebar.htmlIn the file, we can use the various tags provided by the security CMS to dynamically fill content. For example, we can display the list of article categories, the latest articles, and the contact information of the website:

{# partial/sidebar.html 内容示例 #}
<aside class="sidebar">
    <div class="widget">
        <h3>文章分类</h3>
        <ul>
            {% categoryList categories with moduleId="1" parentId="0" %}
                {% for category in categories %}
                    <li><a href="{{ category.Link }}">{{ category.Title }}</a></li>
                {% endfor %}
            {% endcategoryList %}
        </ul>
    </div>

    <div class="widget">
        <h3>最新文章</h3>
        <ul>
            {% archiveList latestArchives with moduleId="1" order="id desc" limit="5" %}
                {% for archive in latestArchives %}
                    <li><a href="{{ archive.Link }}">{{ archive.Title }}</a></li>
                {% endfor %}
            {% endarchiveList %}
        </ul>
    </div>

    <div class="widget">
        <h3>联系我们</h3>
        <p>电话：{% contact with name="Cellphone" %}</p>
        <p>邮箱：{% contact with name="Email" %}</p>
        <p>地址：{% contact with name="Address" %}</p>
    </div>
</aside>

Create itsidebar.htmlAfter that, you can reference it in any page template that needs to display the sidebar. For example, on the article detail pagearticle/detail.htmlor list pagesarticle/list.htmlyou can use it like thisincludeTags:

{# article/detail.html 或 article/list.html 内容示例 #}
{% extends 'bash.html' %} {# 假设您有一个基础布局模板 #}

{% block content %}
    <div class="main-content">
        {# 页面主要内容区域 #}
        <article>
            <!-- 文章内容 -->
        </article>
    </div>
    
    {# 引用侧边栏 #}
    {% include "partial/sidebar.html" %}
{% endblock %}

This is,sidebar.htmlEnglish content will be embedded here{% include "partial/sidebar.html" %}at the location.

2. Create reusable breadcrumb navigation code snippets

Breadcrumbs navigation is very important for improving user experience and website SEO, as it can clearly show the user's position within the website.In the AnQi CMS, breadcrumb navigation is usually dynamically generated, and we can encapsulate it in a reusable snippet.

Similarly, inpartial/in the directorybreadcrumb.html[en] of the file.

Inbreadcrumb.htmlin the file, we will use the Anqi CMS.breadcrumbLabel to get breadcrumb data, andforLoop through and display:

{# partial/breadcrumb.html 内容示例 #}
<nav class="breadcrumb">
    {% breadcrumb crumbs with index="首页" title=true %}
        <ul>
            {% for item in crumbs %}
                <li>
                    {% if not forloop.Last %} {# 判断是否是最后一个链接，最后一个通常不需要链接 #}
                        <a href="{{ item.Link }}">{{ item.Name }}</a>
                        <span>&gt;</span>
                    {% else %}
                        <span>{{ item.Name }}</span>
                    {% endif %}
                </li>
            {% endfor %}
        </ul>
    {% endbreadcrumb %}
</nav>

Then, reference it in the page template where you need to display the breadcrumb navigation. For example, at the top of the article detail page or category list page:

{# article/detail.html 或 category/list.html 内容示例 #}
{% extends 'bash.html' %}

{% block content %}
    {# 引用面包屑导航 #}
    {% include "partial/breadcrumb.html" %}

    <div class="main-content">
        {# 页面主要内容区域 #}
        <!-- ... -->
    </div>
{% endblock %}

Through this method, whether it is an article page, product page, or other category page, as long as it is referencedbreadcrumb.html, the correct navigation path will be displayed automatically.

3. More Advanced Reusability Mechanism: Template Inheritance and Macro

ExceptincludeTags, in addition, Aqy CMS also supportsextendsandmacroetc., more advanced reusability mechanisms, which can further improve the flexibility and maintainability of templates.

• Template inheritance (extends): For the overall layout of the website (such as header, footer, main content area framework), we usually create abase.htmlAs the “skeleton” template. All other page templates inherit{% extends 'base.html' %}from this skeleton, and through{% block content %}Use tags to rewrite the content of specific areas. In this way, common parts such as headers and footers can be managed uniformly, and all inherited pages will automatically have these elements.base.htmlIn this way, common parts such as headers and footers can be managed uniformly, and all inherited pages will automatically have these elements.

• Macro function (}macro): When you need to reuse a small segment of HTML structure in a template, and this structure will differ according to the incoming data,macroextremely useful.It is similar to functions in programming languages, where you can define parameters and then generate different HTML based on the passed parameters.archiveListorcategoryListcall it in the loop.

Summary

In AnQi CMS, creating and referencing reusable code snippets such as sidebars, breadcrumbs, etc. is the key to improving website operation efficiency and template management level. By reasonably planning the template structure, public elements can be extracted topartial/The independent files under the directory, and utilizinginclude/extendsandmacroTemplates tags can greatly reduce duplicate code, ensure the consistency of the website style, and only need to modify one place to affect the whole when adjustments are needed. This greatly simplifies the maintenance and iteration of the website.High-quality code reuse allows content operation personnel to focus more on content creation and optimization, rather than on cumbersome template code.

---

Common Questions and Answers (FAQ)

1. What code snippets should I abstract into reusable components?

2. Why do I go throughincludeThe template file content is not displayed correctly, or the variable has not been passed?First, please checkincludeIs the file path referenced in the tag correct, make sure it matches with/templatethe actual path in the directory. Next,includeThe label will inherit all variables of the current template by default. If you want to pass only specific variables, or to avoid variable conflicts, you can usewithandonlykeywords. For example,{% include "partial/header.html" with title="我的标题" only %}only thetitleVariable passed toheader.html. Make sure to use variables when outputting content that is an HTML structure,|safeFilter, for example{{ archiveContent|safe }}to prevent the content from being escaped and unable to display HTML normally.

3.includeandextendsWhat are the differences between tags, and how should I choose to use them? extendsTags are used to implement template inheritance, and they define a basic page layout (such asbase.html），包含所有页面共享的结构（页头、页脚、CSS/JS引用等），并用 Englishblock标签定义可被子模板重写的内容区域。子模板通过 EnglishextendsInherit the basic layout, then use the same nameblocklabel to fill or modify these areas.includeLabels are used to embed an independent, smaller code snippet (such as a sidebar, breadcrumbs) into a specific location of any template. In simple terms,extendsUsed to build the "skeleton" of the page,includeUsed to fill specific "muscle" or "organ" in the "skeleton". If your code snippet is part of the overall page layout and shared across pages, considerextendsIf it is an independent function module within the page, considerinclude.