It is crucial to maintain consistent page structure and maintainable code in website construction and content management.For a content management system like AnQiCMS, effectively referencing and managing common code snippets, such as the website header (Header) and footer (Footer), is the key to achieving this goal.By using AnQiCMS's flexible template mechanism, even users with little understanding of technical details can easily implement these features, thus building a website with clear structure and easy maintenance.
Understand the template operation of AnQiCMS
The AnQiCMS template system is designed to be very intuitive and powerful, it uses a syntax similar to the Django template engine, files are usually in.htmlas a suffix, and placed uniformly on the site/templateDirectory. In the template, double braces are used to output variables{{变量}}; While performing conditional judgment, loop control, etc., single braces and the percentage sign are used.{% 标签 %}And these tags usually need to appear in pairs, for example{% if 条件 %}...{% endif %}To ensure the normal display of the page, all template files should use UTF8 encoding.
In template design, to avoid rewriting the same code repeatedly, AnQiCMS provides a powerful template inheritance and inclusion mechanism.This is like building a house, you can first design a general framework (basic template), and then fill in or modify the local content of the framework according to the needs of different rooms (pages).
Smart useincludeTags, introduce public code snippets
Imagine the header, footer, sidebar, or navigation menu of a website, which often appears repeatedly on multiple pages.If you copy and paste this code every time, once you need to modify it, you have to operate on each page one by one, which is undoubtedly a nightmare.AnQiCMS passesincludeThe label perfectly solved this problem.
includeThe tag allows us to embed a template file (usually referred to as a "code snippet" or "partial template") into another template. For example, you can/templateCreate one under the directorypartialA folder used to store these common code snippets, such aspartial/header.html/partial/footer.htmlandpartial/sidebar.html.
To include the header and footer on a page, simply add them at the corresponding position in the page:
{% include "partial/header.html" %}
<!-- 页面主体内容 -->
{% include "partial/footer.html" %}
Such benefits are self-evident: when the website header needs to be updated, you only need to modifypartial/header.htmlthis file, all the pages that reference it will be automatically synchronized updated.
includeThe tag also has more powerful functions. If you want to pass some specific data when including a public segment, you can usewithparameters. For example, when includingheader.htmlWhen you might want it to display a custom title:
{% include "partial/header.html" with pageTitle="我的定制页面标题" %}
Thenpartial/header.htmlInside, you can pass through{{pageTitle}}To retrieve and display this value. If you need to pass multiple parameters, just separate them with spaces, such aswith title="标题" keywords="关键词".
Build the basic skeleton:extendsThe mystery of tags
For a website, most pages may share a basic layout, such as having a fixed header, footer, and the content area in the middle. AnQiCMS'extendsThe tag is just for this. It allows you to define a "master" template (for examplebase.html), which contains the overall structure of the website, and throughblockThe tag defines an area that can be overwritten or filled by a sub-template.
A typicalbase.htmlThe structure may look like this:
<!DOCTYPE html>
<html lang="{% system with name='Language' %}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head_meta %}{% endblock %} {# 用于添加页面特有的元信息 #}
<title>{% tdk with name="Title" siteName=true %}</title> {# 使用TDK标签动态生成标题 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css"> {# 引用静态资源 #}
{% block head_css %}{% endblock %} {# 用于添加页面特有的CSS #}
</head>
<body>
<header>
{% include "partial/header.html" %} {# 引入公共头部 #}
</header>
<nav>
{% include "partial/nav.html" %} {# 引入公共导航 #}
</nav>
<main>
{% block main_content %} {# 定义主体内容区域，供子模板重写 #}
<p>这里是默认的主体内容。</p>
{% endblock %}
</main>
<footer>
{% include "partial/footer.html" %} {# 引入公共底部 #}
</footer>
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script> {# 引用公共JS #}
{% block footer_js %}{% endblock %} {# 用于添加页面特有的JS #}
</body>
</html>
It should be noted that,extendsThe label must be the first label in the child template, otherwise the template inheritance will not work properly.
When you are creating a specific page (for exampleindex.htmlorarticle_detail.html) you just need to declare it at the top of the file that it inherits frombase.htmlThen rewrite what you need to modifyblockContent:
{% extends 'base.html' %}
{% block head_meta %}
<meta name="keywords" content="安企CMS, 网站运营, 模板定制">
<meta name="description" content="AnQiCMS模板公共代码引用教程。">
{% endblock %}
{% block main_content %}
<h1>欢迎来到我们的AnQiCMS网站！</h1>
<p>这是首页的独有内容。</p>
{% include "partial/featured_articles.html" %} {# 首页特有的组件 #}
{% endblock %}
{% block footer_js %}
<script src="{% system with name="TemplateUrl" %}/js/index.js"></script>
{% endblock %}
By this means,index.htmlAutomatically obtainedbase.htmlDefine the structure of the header, footer, navigation, etc., and only focus on the unique main content and specific scripts of your own.
Dynamically reference website information and navigation menu
The header and footer of a website usually need to display the name of the website, Logo, copyright information, contact information, and navigation menu, etc.AnQiCMS provides rich built-in tags for easily accessing these dynamic data.
Website name and Logo: You can use
{% system with name="SiteName" %}and{% system with name="SiteLogo" %}to dynamically display the website name and Logo. At the same time,{% system with name="BaseUrl" %}Can retrieve the root address of the website, convenient for building links.Navigation menu: The website's navigation menu can be accessed through
{% navList navs %}tags. You can traverse inpartial/nav.html.navsVariables to build navigation lists and utilizeitem.IsCurrentDetermine whether the current page is an active link to add highlight styles{% 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-menu"> {% 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 %}Contact Information: By
{% contact with name="Cellphone" %}/{% contact with name="Email" %}Tags, which can easily retrieve and display the contact information configured in the background.Page TDK: The title (Title), keywords (Keywords), and description (Description) are crucial for SEO.
{% tdk with name="Title" siteName=true %}The tag can dynamically generate a page title containing the website name, and{% tdk with name="Keywords" %}and{% tdk with name="Description" %}which is used to output the corresponding meta tag content.
Through these mechanisms, the public code snippets of the website not only maintain consistency but also can flexibly adapt to the dynamic changes of the website content and configuration, greatly improving the operational efficiency and maintenance experience of the website.
Conclusion
In AnQiCMS, by making reasonable use ofincludeandextendsThe label, with the help of rich built-in data calling labels, we can easily build modular, easy-to-maintain website template structures.This method not only ensures the consistency of the style of each page of the website, but also greatly improves the efficiency of content updates and iterations, making website operations more intuitive.
Frequently Asked Questions (FAQ)
Q1: I have createdpartial/header.htmland pass{% include "partial/header.html" %}introducing, but I found thatheader.htmlthe modified content in it did not take effect, why is that?A1: In this case, first you need to confirm whether you have saved itpartial/header.htmlFile. If confirmed saved, it may be due to the AnQiCMS system cache.Try to log in to the AnQiCMS backend, find the 'Update Cache' feature (usually at the bottom of the sidebar), and click to clear all caches.Clear the cache and visit the page again, and you should be able to see the updated content.
Q2: Atincludethe common segment that comes in, such asheader.htmlIn this case, how should I access some data on the current page, such as the article title?A2: When you go throughincludeWhen a public fragment is introduced with a tag, the fragment will by default inherit all context variables of the current template. This means that if a fragment is introduced in an article detail pageheader.htmland the page has a variable namedarchivethe article object, then inheader.htmlinside, you can use directly{{archive.Title}}to access the article title. If you want to pass data more explicitly, you can also usewithparameters such as{% include "partial/header.html" with currentTitle=archive.Title %}, then inheader.htmlis used{{currentTitle}}.
Q3: I want to display different navigation menus on different pages, but{% navList navs %}I am getting the same menu for all pages, how can I achieve this?A3: AnQiCMS navigation list labelnavListSupport onetypeIdThe parameter is used to specify which navigation category to call from the backend configuration.By default, it will call the navigation with ID 1. You can create multiple navigation categories (such as "main navigation", "footer navigation", "sidebar navigation") in the "website navigation settings" in the background, each with a different ID.Then, in your template, through{% navList navs with typeId="2" %}To call the navigation category with ID 2, to achieve the need to display different navigation menus on different pages or different areas.