Building websites in Anqi CMS, efficient and flexible template design is the key to improving development efficiency and maintaining consistency of the website.Among them, designing a basic template and allowing other pages to inherit it is the core strategy to achieve this goal.The Anqi CMS adopts syntax similar to the Django template engine, making template inheritance intuitive and powerful.
Lay a solid foundation: Create your basic template
Firstly, let's create the basic skeleton template for a website. In Anqi CMS, all template files are stored in/templateUnder the directory, each topic has its own independent folder. For example, if your topic name ismytheme, then the template path is/template/mytheme/.
Within this topic folder, we usually create a folder namedbash.htmlThe file named (or any name you like, conventionally, this is a basic layout file) serves as the common base for all pages. This file contains the overall structure of the website, such as<head>Blocks, top navigation, footer, etc., and the areas in the page that change according to different content are defined as "blocks" that can be inherited and modified by the page.
Inbash.htmlIn, we use{% block 你的区块名称 %}{% endblock %}Tags like this are used to define these variable areas. For example:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面TDK信息，这些标签会根据当前页面自动获取，如果当前页未设置，则获取后台配置的首页TDK -->
<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 %}
<!-- 引入网站的样式文件，TemplateUrl 会指向当前模板文件夹的静态资源路径 -->
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
{% block head_extra %}{% endblock %} {# 预留给子页面添加额外的头部内容，如特定页面的CSS/JS #}
</head>
<body>
<header class="site-header">
<div class="container">
<!-- 网站Logo和名称 -->
<a href="{% system with name='BaseUrl' %}" class="logo">
<img src="{% system with name='SiteLogo' %}" alt="{% system with name='SiteName' %}">
</a>
<!-- 导航菜单 -->
<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 %}
<ul class="sub-nav">
{% for subItem in item.NavList %}
<li class="{% if subItem.IsCurrent %}active{% endif %}">
<a href="{{ subItem.Link }}">{{ subItem.Title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</div>
</header>
<main class="site-main">
<div class="container">
{% block main_content %}
<!-- 这里的默认内容，如果子页面不重写此block，则会显示 -->
<p>这是基础模板的默认内容区域。</p>
{% endblock %}
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>{% system with name="SiteCopyright" %}</p>
<p><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">{% system with name="SiteIcp" %}</a></p>
<address>
联系人：{% contact with name="UserName" %} | 电话：{% contact with name="Cellphone" %} | 邮箱：{% contact with name="Email" %}
</address>
</div>
</footer>
<!-- 引入网站的JavaScript文件 -->
<script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
{% block body_extra %}{% endblock %} {# 预留给子页面添加额外的脚本 #}
</body>
</html>
As can be seen in thisbash.htmltemplate, we have used multiple built-in tags from the A security CMS:
{% system with name="..." %}Retrieve the global configuration of the website, such as language, website name, Logo, filing number, base URL, static resource path of templates, etc.{% tdk with name="..." %}【en】：Dynamically retrieve the current page's SEO title, keywords, and description, ensuring each page has optimized TDK information.{% navList navs %}【en】：Generate the main navigation menu of the website.{% contact with name="..." %}：Obtain the contact information of the website, convenient for display in the footer and other places.{% block ... %}{% endblock %}：Definedhead_extra/main_contentandbody_extraThree blocks, these are places that the subpage can override or extend.
Modular construction: usingincludetags
In addition to inheritance from the basic template, AnQi CMS also provides{% include "你的片段文件.html" %}Tags used to introduce some small, reusable code snippets.These fragments usually do not contain a complete HTML structure, but are like sidebars, breadcrumb navigation, ad spaces, etc., which can be independently inserted into multiple pages.
For example, we canpartialdirectory createsidebar.htmlorbreadcrumb.html:
/template/mytheme/partial/breadcrumb.html:
<div class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
{% for item in crumbs %}
{% if forloop.Counter < forloop.Length %}
<a href="{{item.Link}}">{{item.Name}}</a> >
{% else %}
<span>{{item.Name}}</span>
{% endif %}
{% endfor %}
{% endbreadcrumb %}
</div>
Then inbash.htmlor other sub-templates, you canmain_contentuse it within the block{% include "mytheme/partial/breadcrumb.html" %}to include it.includeTags can help us better organize template files and reduce duplicate code.
Inheritance and Overriding: Implementation on Other Pages
Now, when we need to create specific pages such as the homepage, article detail page, category list page, etc. for a website, we do not need to write the complete HTML structure from scratch. We just need to let these pages inheritbash.htmlThen rewrite the corresponding as needed.blockBlock as needed.
In the **first of any sub-template file