How to design a basic template and allow other pages to inherit it?
Building a website in Anqi CMS, an 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.AnQi CMS uses a syntax similar to the Django template engine, making template inheritance intuitive and powerful.
Lay the Foundation: Create Your Basic Template
First, let's create the basic skeleton template of a website. All template files are stored in Anqicms./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.html(or any name you like, conventionally, this is a basic layout file) file as the common basis for all pages. This file includes the overall structure of the website, such as<head>Blocks, top navigation, footer, etc., and define the areas of the page that will change according to different content as "blocks" that can be inherited and modified by the page.
Inbash.htmlIn Chinese, we use{% block 你的区块名称 %}{% endblock %}Such labels 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 of Anqi CMS:
{% system with name="..." %}: Retrieve global website configuration, such as language, website name, Logo, filing number, base URL, template static resource path, etc.{% tdk with name="..." %}: Dynamically retrieve the SEO title, keywords, and description of the current page, ensuring that each page has optimized TDK information.{% navList navs %}: Generate the main navigation menu of the website.{% contact with name="..." %}: Obtain the website's contact information for display in the footer and other locations.{% block ... %}{% endblock %}: Definedhead_extra/main_contentandbody_extraThree sections; these are areas on the subpages that can be overlaid or extended.
Modular construction: usingincludeTag
In addition to inheriting the basic template, Anqi CMS also provides{% include "你的片段文件.html" %}Tags used to introduce some small, reusable code snippets.These fragments usually do not contain the complete HTML structure but are like sidebars, breadcrumb navigation, ad slots, etc., which can be independently inserted into multiple pages.
For example, we can introducepartialCreate in the directorysidebar.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>
Thenbash.htmlor in other sub-templates, you can usemain_contentwithin the block to introduce{% include "mytheme/partial/breadcrumb.html" %}it.includeTags can help us better organize template files, reducing duplicate code.
Inheritance and override: implementation of other pages.
Now, when we need to create the home page, article detail page, category list page, and other specific pages of a website, we do not need to write the complete HTML structure from scratch. We just need to make these pages inheritbash.htmlthen rewrite as neededblockblock as needed
in the first of any sub-template file**