How to quickly build a shared sidebar, navigation, or other UI components using the `include` tag?

As an experienced website operations expert, I know the importance of website efficiency and user experience, and these two often cannot be separated from a set of excellent, easy-to-maintain template system.The AnQiCMS (AnQiCMS) provides us with powerful content management capabilities with its simple and efficient features.includeLabels, see how they help us quickly build reusable, maintainable website UI components to enhance overall operational efficiency.

Advanced SafeCMS: How to Make Good Use Of ItincludeLabel builds efficient and reusable UI components

In the development and operation of modern websites, we often encounter such a scenario: elements such as the sidebar, top navigation, and footer information on the website appear on almost every page, but the content may be slightly different.If each page has to rewrite this code, it is not only inefficient but also a nightmare for subsequent maintenance.includeLabel is like a magician, able to turn these repetitive tasks into magical modular management.

includeLabel: The cornerstone of modular website construction

The template engine syntax of AnQi CMS is similar to Django, it allows us toincludeLabels, embed an independent code snippet (usually called a "fragment" or "component") into another template file. Imagine that your website is like a set of Lego blocks,includeTags are the interfaces that connect these building blocks, allowing you to easily insert pre-made "sidebar blocks

The core benefit of doing this is:Efficiency, consistency, and maintainability.

  • efficiency: Write once, use anywhere, saving a lot of time copying and pasting.
  • Consistency: All references to the sameincludeThe component of the file, whose style and structure are consistent, avoiding a sense of scattered vision.
  • MaintainabilityWhen modifying a shared component, you only need to modify one file, and all the pages referencing it will be updated automatically, greatly reducing maintenance costs.

Set up your modular component workspace

In the Anqi CMS, all template files are stored in/templateThe root directory. To better organize and manage these reusable components, we usually create a subdirectory namedpartial. For example, the structure of your template directory may look like this:

/template
└── your_theme_name/
    ├── config.json
    ├── index/
    │   └── index.html
    ├── partial/
    │   ├── header.html
    │   ├── footer.html
    │   └── sidebar.html
    └── ... 其他模板文件

Here,header.html/footer.htmlandsidebar.html就是我们准备通过include标签引入的共享组件。请记住，所有的模板文件都应该以.html为后缀，并采用UTF-8编码，以确保内容正常显示。

includeThe basic usage and advanced skills of tags

Basic Introduction: Make components come to life

UseincludeTags are very intuitive, you just need to specify the path to the template file you want to import:

{# 假设这是你的页面主体模板文件，如 index/index.html #}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的安企CMS网站</title>
    {# 引入 CSS 和 JS 等静态资源，这里使用系统标签 TemplateUrl 获取模板静态文件地址 #}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
</head>
<body>
    {# 引入顶部导航 #}
    {% include "partial/header.html" %}

    <main class="main-content">
        <div class="left-col">
            {# 引入侧边栏 #}
            {% include "partial/sidebar.html" %}
        </div>
        <div class="right-col">
            <h1>欢迎来到我的网站！</h1>
            <p>这里是页面的主要内容区域。</p>
        </div>
    </main>

    {# 引入页脚 #}
    {% include "partial/footer.html" %}
</body>
</html>

In the above example,header.html/sidebar.htmlandfooter.htmlThe content will be embedded into the corresponding position of the main page template as is.

Pass data: Make the component smarter

很多时候，我们的共享组件需要根据当前页面的上下文动态显示内容。这时，includeTagswithThe parameter comes into play. It allows you to pass custom variables to the imported template:

{# 在页面主体模板中，向侧边栏传递一个标题 #}
{% include "partial/sidebar.html" with sidebar_title="最新文章推荐" %}

Andpartial/sidebar.htmlIn it, you can use it as you would a regular variable:

{# partial/sidebar.html 文件内容 #}
<aside class="sidebar">
    <h2>{{ sidebar_title }}</h2> {# 这里会显示“最新文章推荐” #}
    <ul>
        {% archiveList archives with type="list" limit="5" order="id desc" %}
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        {% endarchiveList %}
    </ul>
</aside>

You can also pass multiple variables, even throughonlyParameter limits only pass the specified variables to prevent unnecessary variable pollution from being introduced into the template namespace:

{% include "partial/header.html" with current_page="about" user_name="访客" only %}

Graceful degradation: Avoid page crashes

If someincludeThe file may not exist, to avoid page errors, you can useif_existsparameter. If the file is missing, the Safe CMS will silently ignore it instead of interrupting the page rendering:

{# 如果 special_promo.html 存在则引入，否则忽略 #}
{% include "partial/special_promo.html" if_exists %}

Combine with AnQi CMS tags to build rich components

AnQi CMS comes with a rich set of template tags, which can be used withincludePerfectly combined to build powerful shared components.

  • Navigation bar ()partial/header.html) Generally usednavListtags to retrieve website navigation data.

    "`twig {# partial/header.html #}"

    <div class="logo">
    <a href="/"><img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}" /></a>
</div>
<nav>
    <ul>
        {% navList navs with typeId=1 %} {# 假设typeId=1是主导航 #}
            {% for item in navs %}
                <li class="{% if item.IsCurrent %}active{% endif %}">
                    <a href="{{ item.Link }}">{{ item.Title }}</a>
                    {% if item.NavList %} {# 如果有二级导航 #}
                        <ul class="submenu">
                            {% for sub_item in item.NavList %}
                                <li><a href="{{ sub_item.Link }}">{{ sub_item.Title }}</a></li>
                            {% endfor %}
                        </ul>
                    {% endif %}