In website construction and content management, maintaining consistent page structure and maintainable code is crucial.For a content management system like AnQiCMS, effectively referencing and managing common code snippets, such as the website's header and footer, is the key to achieving this goal.By using AnQiCMS's flexible template mechanism, even users who are not well-versed in technical details can easily implement these features, thereby constructing a website with clear structure and easy maintenance.
Understanding the template operation of AnQiCMS
The AnQiCMS template system is designed to be very intuitive and powerful, using a syntax similar to Django's template engine, files are typically named with.htmlAs a suffix, and stored uniformly at the site./templateIn the template, when variables need to be output, double curly braces will be used.{{变量}}While performing conditional judgments, loop controls, and other logical operations, single curly braces and the percent 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 be encoded in UTF8.
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 universal skeleton (basic template), and then fill in or modify the local content of the skeleton according to the needs of different rooms (pages).
Smart useincludeTag, to introduce public code snippets.
Imagine the header, footer, sidebar, or navigation menu of a website, these contents often repeat across multiple pages.If you always copy and paste this code, once you need to modify it, you have to operate on each page one by one, which is undoubtedly a nightmare.includeTag, perfectly solves this problem.
includeTags allow us to embed a template file (usually referred to as a “code snippet” or “partial template”) into another template. For example, you can/templatecreate a directory underpartialA folder used to store these public code snippets, such aspartial/header.html/partial/footer.htmlandpartial/sidebar.html.
To include the header and footer in a page, you just need to add them at the corresponding position on the page:
{% include "partial/header.html" %}
<!-- 页面主体内容 -->
{% include "partial/footer.html" %}
The benefits are obvious: When the website header needs to be updated, you only need to modifypartial/header.htmlthis file, and all the pages that reference it will be automatically synchronized for updates.
includeThe label also has more powerful functions. If you want to pass some specific data when introducing a public segment, you can usewithparameters. For example, when introducingheader.htmlWhen, you may want it to display a custom title:
{% include "partial/header.html" with pageTitle="我的定制页面标题" %}
Then inpartial/header.htmlinside, you can go through{{pageTitle}}to get 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 and footer, with the content area in the middle. AnQiCMS'sextendsLabels are born for this. They allow you to define a "master" template (for examplebase.html), which contains the overall structure of the website, and throughblockThe label defines an area that can be overwritten or filled by child templates.
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 is worth noting that,extendsThe tag must be the first tag in the child template; otherwise, template inheritance will not work properly.
When creating a specific page (such asindex.htmlorarticle_detail.html), just declare it inherits from thebase.html, and then overwrite theblockcontent you need to modify:
{% 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 %}
In this way,index.htmlis automatically obtainedbase.htmlDefine the header, footer, navigation, etc., structures, and only focus on the unique main content and specific scripts.
Dynamically refer to website information and navigation menu
The common header and footer usually need to display the website's name, Logo, copyright information, contact information, and navigation menu, etc.AnQiCMS provides a rich set of built-in tags for easily retrieving these dynamic data.
Website name and LogoYou 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" %}you can obtain the root address of the website, convenient for building links.Navigation Menu: The website's navigation menu can be
{% navList navs %}Label acquisition. You can inpartial/nav.htmlLoop throughnavsVariables to build the navigation list, and useitem.IsCurrentTo determine whether the current page is an active link, in order 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: Through
{% contact with name="Cellphone" %}/{% contact with name="Email" %}Tags can easily obtain and display the contact information configured in the background.Page TDKThe page's title (Title), keywords (Keywords), and description (Description) are crucial for SEO.
{% tdk with name="Title" siteName=true %}Tags can dynamically generate page titles 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 website content and configuration, greatly enhancing the operational efficiency and maintenance experience of the website.
Concluding remarks
In AnQiCMS, by making reasonable use ofincludeandextendsTags, combined with rich built-in data, allow us to easily build modular and maintainable website template structures.This method not only ensures the consistency of the style on each page of the website, but also greatly improves the efficiency of content updates and iterations, making website operation more intuitive.
Common Questions (FAQ)
Q1: I have already createdpartial/header.htmland by{% include "partial/header.html" %}introducing, but the changes I made inheader.htmlhave not taken effect, why is that?A1: This situation requires first confirming if you have savedpartial/header.htmlFile.If confirmed to be saved, it may be due to the AnQiCMS system cache.You can 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 the cache.After clearing the cache and visiting the page again, you should see the updated content.
Q2: Atincludeincoming public segments (like}]}header.htmlIn this context, I need to access some data from the current page, such as the article title, what should I do?A2: When you go throughincludeWhen a common fragment is introduced by a tag, the fragment will inherit all context variables of the current template by default. This means that if a fragment is introduced in the article detail page,header.htmland this page has a variable namedarchiveof the article object, then inheader.htmlinternally, you can directly use{{archive.Title}}to access the article title. If you want to pass data more explicitly, you can also usewithparameter, such as{% include "partial/header.html" with currentTitle=archive.Title %}, then inheader.htmlin{{currentTitle}}.
Q3: I want to display different navigation menus on different pages, but{% navList navs %}I get the same menu for all pages, how can I achieve this?A3: The navigation list label of AnQiCMSnavListSupports onetypeIdParameter used to specify which navigation category of the background configuration to call.It will call the navigation with ID 1 by default.You can create multiple navigation categories (such as 'Main Navigation', 'Footer Navigation', 'Sidebar Navigation') in the 'Website Navigation Settings' backend, each with a different ID.{% 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.