AnQiCMS Template Development: Smartly integrate public code snippets to make your website maintenance more efficient

When operating a website, we often find that many pages share the same basic structure, such as the website header, footer, sidebar navigation, or a common advertising block.If you have to write this code repeatedly for each page, it is not only inefficient, but also a nightmare for website maintenance whenever you need to make modifications.AnQiCMS is an enterprise-level content management system developed in Go language, which fully considers this requirement in template design. It provides a flexible and powerful mechanism that allows us to easily introduce and manage these common code snippets, thus greatly improving the development and maintenance efficiency of the website.

AnQiCMS's template system borrows the syntax style of Django template engine, which allows engineers accustomed to front-end development to quickly get started. It uses.htmlAs a template file suffix, and place all template files in/templateThe directory. The static resources required by the website, such as styles, JavaScript scripts, images, etc., are unified in./public/static/The directory. This clear structure has laid a solid foundation for our effective management of public code.

The next step is to delve into the two main strategies for introducing header, footer, and other common code segments in AnQiCMS templates: utilizingincludeLabel code snippet reuse and adoption.extendsBuild the template inheritance system with labels.

Flexible code snippet reuse:includeThe magic use of tags

Imagine that your website has a delicate navigation menu, or a sidebar that showcases the latest articles.These small and independent modules often need to appear on multiple pages.include标签便是你的得力助手，它更像是代码片段的“即插即用”，让你能够将这些可复用的小块代码拆分成独立的文件，然后在需要的地方引用它们。

通常，these reusable code snippets are placed in the template directory.partial/folder, for example.partial/header.html(header),partial/footer.html(Footer),partial/sidebar.html(Sidebar) etc. When you need to include these codes on a page, simply use{% include "partial/header.html" %}This syntax will do.

includeThe power of tags goes far beyond this. If you need to pass specific data to these segments, you can usewithKeywords. For example, your header may need to display a dynamic title, and you can pass it like this when importing:

{% include "partial/header.html" with pageTitle="当前页面标题" %}

Then inpartial/header.htmlyou can use it just like a regular variable.{{ pageTitle }}It is worth noting that,includeThe template being entered will inherit all variables from the parent template. But if you want the fragment you are introducing to use only the variables you explicitly pass, and not inherit all variables from the parent template, you can useonlyKeywords, such as{% include "partial/header.html" with pageTitle="当前页面标题" only %}This helps to avoid variable name conflicts and makes code segments more independent and controllable.

In addition, if you are unsure whether a code segment file exists, you can useif_existsTo avoid program errors,{% include "partial/optional_ad.html" if_exists %}this style of writing will automatically ignore it when the file does not exist, without affecting the page rendering.

Build the website skeleton:extendstemplate inheritance system of tags

For the overall layout of the website, such as the shared HTML structure, CSS and JavaScript file references, the top navigation bar, and the bottom copyright information, we are more inclined to use template inheritance.extendsTags allow you to define a website's 'skeleton' or 'template' (usually namedbase.htmlorbash.htmlThis skeleton contains the common structure for all pages. Then, other sub-page templates simply 'inherit' this skeleton and fill in or modify the defined specific areas.

Inbase.html(or}bash.htmlThis skeleton file, you need to use{% block name %}and{% endblock %}to define areas that can be overridden or filled by child pages. For example:

<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
    <meta charset="UTF-8">
    {% block title %}
        <title>{% tdk with name="Title" siteName=true %}</title>
    {% endblock %}
    <meta name="keywords" content="{% tdk with name="Keywords" %}">
    <meta name="description" content="{% tdk with name="Description" %}">
    <link href="{% system with name="TemplateUrl" %}/css/style.css" rel="stylesheet">
    {% block head_extra %}{% endblock %}
</head>
<body>
    {% include "partial/header.html" %} {# 这里可以再引入一个页头片段 #}

    <main class="container">
        {% block content %}
            {# 这是主要内容区域，子页面会覆盖它 #}
        {% endblock %}
    </main>

    {% include "partial/footer.html" %} {# 这里可以再引入一个页脚片段 #}
    {% block body_extra %}{% endblock %}
</body>
</html>

Abovebase.htmlIn it, we define.title/head_extra/contentandbody_extra等多个区块。When the child page needs to use this skeleton, just declare it at the top of the file{% extends 'base.html' %}，then you can overwrite the correspondingblockto customize the content：

{# article/detail.html #}
{% extends 'base.html' %}

{% block title %}
    <title>{% archiveDetail with name="Title" %} - {% system with name="SiteName" %}</title>
{% endblock %}

{% block head_extra %}
    <link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/article-detail.css">
{% endblock %}

{% block content %}
    <article>
        <h1>{% archiveDetail with name="Title" %}</h1>
        <div>
            {% archiveDetail with name="Content" render=true|safe %}
        </div>
    </article>
{% endblock %}

It is particularly important to note,{% extends %}The label must be the first label in the sub-page template file, otherwise the template inheritance will not work properly.

How to choose and combine usage?

UnderstoodincludeandextendsThe principle of operation after choosing which way becomes clear:

  • UseextendsBuild a global layoutWhen you need a unified page framework, such as all pages having the same header, footer, and sidebar positions, but the middle content area being different.extendsIt is**the choice. It provides a solid and consistent framework for your website.
  • UseincludeModular local components：For those small, self-contained code blocks that can be used independently at different locations on a website (such as breadcrumb navigation, contact modules, comment forms, etc.),includeTags can help you encapsulate them into independent segments. Even, you can inbase.htmlsuch a parent template,includeLabel to introduce your header and footer snippets, realizing more fine-grained modular management.

For example, yourbase.htmlskeleton can be used{% include "partial/header.html" %}and{% include "partial/footer.html" %}to introduce the common header and footer, whilepartial/header.htmlandpartial/footer.htmlIt is an independent fragment file, separately containing the specific HTML code for the header and footer.This combination of use can ensure the consistency of the website structure and make each functional module highly flexible and maintainable.

In summary, AnQiCMS provides template functions that encourage developers to organize code with a modular and inheritance-based mindset. By making reasonable use ofincludeandextendsYou can greatly improve the development efficiency of website templates, simplify the subsequent modification and maintenance work, making website operation more efficient and relaxed.

Common Questions (FAQ)

  1. How to beincludeIn the file, do you use the variables of the parent template?Answer: By default, when a template file isincludeWhen switching to another template, it will automatically inherit all variables defined in the parent template. This means you can use anyincludeany{{ 变量名 }}in the file. If you only want toincludeThe file uses specific variables, which can beincludeadded after thewithkeyword to pass variables, and you can also choose toonlykeyword to limit the use to only these explicitly passed variables, such as{% include "partial/nav.html" with activePage="about" only %}.

  2. **includeandextendsWhat is the essential difference, how should I choose?