How to reuse header, footer and other common display elements in AnQiCMS templates?

In website operation, efficiency and consistency are the key to success.When you manage a website, you will find that many elements appear repeatedly on different pages, such as headers, footers, navigation bars, sidebars, and so on.If you copy and paste this code manually every time, it's not only inefficient, but also prone to errors, not to mention the繁琐 of adjusting one by one later.

It is good that AnQiCMS's template system is designed to be very flexible, providing a powerful mechanism to help us efficiently reuse these common display elements, ensuring a unified website style and easier maintenance.AnQiCMS uses a syntax similar to the Django template engine, even if you are not a professional developer, you can quickly get started.Below, we will delve into how to effectively reuse these elements in the AnQiCMS template.

Method one: utilizeextendsThe tag builds the template skeleton.

Imagine that your website has a unified "skeleton" or "template": the header area, the footer area, the content area, and some fixed CSS and JavaScript file references.extendsTags are used to define this "frame".

Usually, we create a namedbase.htmlThe file, as the basic layout for all pages. In this file, you can put all the public HTML structure, CSS, and JS references.For parts that will change on different pages, such as page titles, main content areas, sidebars, etc., we use{% block 块名称 %}{% endblock %}such tag to define it as a replaceable "content block".

For example, abase.htmlmight look like this:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    {% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
    <link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
    <!-- 其他公共CSS和JS引用 -->
</head>
<body>
    <header>
        <!-- 这里是公共的网站头部，例如Logo、主导航等 -->
        {% include "partial/header.html" %}
    </header>

    <nav>
        <!-- 公共导航栏 -->
        {% include "partial/nav.html" %}
    </nav>

    <main>
        <div class="container">
            {% block content %}
                <!-- 这里是主要内容区，每个页面都会替换掉这里的内容 -->
                <p>默认内容...</p>
            {% endblock %}
        </div>
    </main>

    <footer>
        <!-- 这里是公共的网站底部，例如版权信息、友情链接等 -->
        {% include "partial/footer.html" %}
    </footer>

    <!-- 底部公共JS -->
    <script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
</body>
</html>

When you need to create a new page (such asindex.htmlorarticle_detail.html), just use it at the top of the file. Then, you can inherit the{% extends 'base.html' %}skeleton in the correspondingblockFill or replace the content in the tag.

{% extends 'base.html' %}

{% block title %}<title>AnQiCMS - 首页</title>{% endblock %}

{% block content %}
    <div class="index-banner">
        <!-- 首页独有的轮播图或其他元素 -->
    </div>
    <section class="latest-articles">
        <h2>最新文章</h2>
        <!-- 调用文章列表标签 -->
        {% archiveList archives with type="list" limit="5" %}
        <ul>
            {% for item in archives %}
                <li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
            {% endfor %}
        </ul>
        {% endarchiveList %}
    </section>
{% endblock %}

Thus,index.htmlOnly focus on the presentation of the content itself, without repeating the header, footer, and other common codes.

Method two: useincludeTag inserts code snippets

extendsTags are used to define the overall structure of a page, whileincludetags are like 'plug and play' components, suitable for those that appear locally on a page or need to be used in differentblockShared code snippets. For example, the website's logo section, breadcrumb navigation, recommended article lists under a category, etc.

To better manage these code snippets, AnQiCMS recommends creating apartial/folder to store them.

For example, you canpartial/header.htmlPlace the website header logo and main navigation:

<div class="logo">
    <a href="{% system with name='BaseUrl' %}">
        <img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}">
    </a>
</div>
<nav class="main-nav">
    {% navList navs %}
    <ul>
        {% for item in navs %}
            <li class="{% if item.IsCurrent %}active{% endif %}">
                <a href="{{ item.Link }}">{{ item.Title }}</a>
                {% if item.NavList %}
                <dl>
                    {% for inner in item.NavList %}
                        <dd><a href="{{ inner.Link }}">{{ inner.Title }}</a></dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
    {% endnavList %}
</nav>

Thenbase.htmlThrough any place needed,{% include "partial/header.html" %}simply introduce.

includeLabels can pass variables. If you want a certain fragment to display different content based on the context of different pages, you can achieve this throughwithparameters:

{% include "partial/sidebar.html" with currentCategory="新闻中心" %}

Inpartial/sidebar.htmlin, you can use{{ currentCategory }}this variable.

In addition, to increase the robustness of the template, you can useif_existsparameters, so that even if the file being imported does not exist, it will not cause the page to report an error:

{% include "partial/custom_feature.html" if_exists %}

Method three: withmacrotag to define reusable functions

macroThe tag is an advanced feature of the AnQiCMS template system, which allows you to define reusable “functions”. When you find that a certain HTML structure needs to be rendered multiple times based on different data,macroit becomes very useful.

For example, you may need to display the "card" information of an article in the same style at different locations on the website (title, thumbnail, summary). You can define a macro to handle this structure:

Inmacro_helpers.htmlDefine a macro in the file:

{% macro article_card(article) %}
    <div class="article-card">
        <a href="{{ article.Link }}">
            {% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}"/>{% endif %}
            <h3>{{ article.Title }}</h3>
            <p>{{ article.Description|truncatechars:100 }}</p>
            <span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
        </a>
    </div>
{% endmacro %}

Then, use the tag to include this macro in your page template,importand call it in a loop:

{% import "macro_helpers.html" article_card %}

<section class="featured-articles">
    <h2>精选文章</h2>
    <div class="article-grid">
        {% archiveList featuredArchives with flag="c" limit="4" %}
            {% for item in featuredArchives %}
                {{ article_card(item) }} {# 调用宏，传入文章数据 #}
            {% endfor %}
        {% endarchiveList %}
    </div>
</section>

This way, wherever you need to display an article card, just callarticle_cardMacros, pass in the corresponding article data and it greatly reduces code repetition.

Template file organization: make management easier.

Well-organized template files can make your website structure clear and easy to maintain. The root directory of AnQiCMS templates is/template. Each template package should be in/templateHas its own directory and contains oneconfig.jsonFile to describe the template information.

Inside the template directory, you can organize files according to the following conventions:

  • base.html: As the master layout of the entire website.
  • index.html: Website home page template.
  • {模型table}/: Store different content models (such asarticle//product/) List page (list.html) and detail page (detail.html) templates.
  • page/: Store single-page (detail.html) templates.
  • **`