As an experienced website operations expert, I fully understand how important it is to maintain consistency in website structure and development efficiency in a content management system.Especially when using a high-efficient and flexible system like AnQiCMS, it is reasonable to refer to the common header and footer files, which can not only greatly improve the maintenance efficiency of templates but also ensure the consistency of the overall style.Today, let's delve into how to achieve this goal in the AnQiCMS template.
AnQiCMS with its high-performance architecture based on Go language and Django-style template syntax, provides great convenience for developers and operators.It supports us to manage content in a modular way, and the common parts in the template, such as the website's navigation bar, footer information, CSS and JavaScript references, are excellent practice points for modular design.By cleverly using the template tags provided by AnQiCMS, we can easily implement the reference to common files.
ApplicationincludeTags: Implementing flexible reuse of local code
In the AnQiCMS template system,includeTags are the most direct and commonly used way to refer to public code snippets.It allows us to insert small, independent template files into any main template that needs them.Imagine, your website header includes Logo, main navigation, search box and other elements, which appear on almost every page.If each page has to rewrite this code, the workload will be huge once a modification is needed.includeLabels are the tools to solve this problem.
通常，我们会将这些可复用的代码片段存放在模板目录下的partial/In a subfolder. For example, you can create one under the directory of the template you are currently using.partial/header.htmlandpartial/footer.html.
Let's take a look at what these files might contain:
template/你的模板目录/partial/header.html
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<!-- 引入其他公共CSS或JS文件 -->
</head>
<body>
<header class="main-header">
<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 class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</header>
<main>
template/你的模板目录/partial/footer.html
</main>
<footer class="main-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
<!-- 引入其他公共JS文件，如统计代码等 -->
{{- pluginJsCode|safe }}
</footer>
</body>
</html>
Next, in your main page template file, for example,index.html/article/detail.htmlIn English, simply useincludeLabels to introduce them:
template/你的模板目录/index.html
{% include "partial/header.html" %}
<section class="hero-section">
<h1>欢迎来到 {% system with name="SiteName" %}</h1>
<p>{% tdk with name="Description" %}</p>
</section>
<!-- 首页的其他内容 -->
{% include "partial/footer.html" %}
This is,header.htmlandfooter.htmlcontent will be rendered toindex.htmlIf one day you need to modify the website logo or navigation structure, you just need to modifyheader.htmlAn item that updates all the pages that refer to it, greatly improving maintenance efficiency.
In addition,includeTags also support some advanced usage:
if_exists：If you are unsure whether a file included exists, you can use{% include "partial/sidebar.html" if_exists %}，so that the page will not report an error even if the file does not exist.with：You can pass additional variables to the included template. For example,{% include "partial/ad.html" with ad_type="banner" ad_id="123" %},"inad.htmlcan be used after that{{ ad_type }}and{{ ad_id }}.
ApplicationextendsLabel: Build the global template skeleton
When you need to define a unified overall layout for a website, for example, all pages share the same basic HTML structure, CSS and JS file references, while only specific areas of the content change.extendsLabels make it very powerful.It implements the concept of template inheritance, just like the master page in Office software. You define a 'skeleton' template, and then other child templates fill in and modify it on this basis.
We usually create a file namedbase.htmlas the basic skeleton of a website. In this file, we define the general structure of the page and throughblockTag the areas that allow child templates to override or extend.
template/你的模板目录/base.html
`html <!DOCTYPE html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head_meta %}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}
{% endblock head_meta %}
{% block head_css %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
<!-- 全局CSS引用 -->
{% endblock head_css %}
{% block head_js %}
<!-- 全局JS引用 -->
{% endblock head_js %}
{% block header %}
<header class="main-header">
<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 class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</header>
{% endblock header %}
<main>
{% block content %}
<!-- 子模板将在这里填充具体内容 -->
{% endblock content %}
</main>
{% block footer %}
<footer class="main-footer">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a>