In website operation, efficiency and consistency are the key to success.When you manage a website, you will find many elements repeatedly appearing on different pages, such as headers, footers, navigation bars, sidebars, and so on.If you manually copy and paste this code each time, it is not only inefficient but also prone to errors, not to mention the tediousness of adjusting one by one when modifications are needed later.
It is fortunate that the template system of AnQiCMS is designed to be very flexible, it provides powerful mechanisms to help us efficiently reuse these common display elements, ensuring a unified website style and making maintenance easier.AnQiCMS uses syntax similar to Django's template engine, making it easy for even non-professional developers to quickly get started.Below, let's take a detailed look at how to effectively reuse these elements in the AnQiCMS template.
Method one: useextendsTag builds the template skeleton
Imagine your website has a unified 'skeleton' or 'template': the header area, the footer area, the content area, and some fixed CSS and JavaScript file references.extendsLabels are used to define this 'frame'.
通常，我们会创建一个名为base.htmlThe file, as the basic layout for all pages.In this file, you can put all the public HTML structure, CSS, and JS references.{% block 块名称 %}{% endblock %}such a label to define it as a replaceable 'content block'.
For example, abase.htmlmight look like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
{% block title %}<title>我的AnQiCMS网站</title>{% endblock %}
<link rel="stylesheet" href="{% system with name='TemplateUrl' %}/css/style.css">
<!-- 其他公共CSS和JS引用 -->
</head>
<body>
<header>
<!-- 这里是公共的网站头部，例如Logo、主导航等 -->
{% include "partial/header.html" %}
</header>
<nav>
<!-- 公共导航栏 -->
{% include "partial/nav.html" %}
</nav>
<main>
<div class="container">
{% block content %}
<!-- 这里是主要内容区，每个页面都会替换掉这里的内容 -->
<p>默认内容...</p>
{% endblock %}
</div>
</main>
<footer>
<!-- 这里是公共的网站底部，例如版权信息、友情链接等 -->
{% include "partial/footer.html" %}
</footer>
<!-- 底部公共JS -->
<script src="{% system with name='TemplateUrl' %}/js/main.js"></script>
</body>
</html>
When you need to create a new page (such asindex.htmlorarticle_detail.html), just use it at the top of the file. Then,{% extends 'base.html' %}you can work on the correspondingblockFill or replace content in the label.
{% extends 'base.html' %}
{% block title %}<title>AnQiCMS - 首页</title>{% endblock %}
{% block content %}
<div class="index-banner">
<!-- 首页独有的轮播图或其他元素 -->
</div>
<section class="latest-articles">
<h2>最新文章</h2>
<!-- 调用文章列表标签 -->
{% archiveList archives with type="list" limit="5" %}
<ul>
{% for item in archives %}
<li><a href="{{ item.Link }}">{{ item.Title }}</a></li>
{% endfor %}
</ul>
{% endarchiveList %}
</section>
{% endblock %}
This is,index.htmlOnly focus on the presentation of the content itself, without needing to rewrite common header and footer code.
Method two: useincludeInsert code snippet using the tag
extendsThe tag is used to define the overall structure of the page, andincludethe tag is like a 'plug and play' component, suitable for those that appear repeatedly in the local area of the page, or need to be differentblockCode snippets shared between. For example, the Logo section of a website, breadcrumb navigation, a list of recommended articles under a certain category, etc.
To better manage these code snippets, AnQiCMS recommends creating apartial/folder under the template directory to store them.
For example, you canpartial/header.htmlPlace the website header logo and main navigation:
<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><a href="{{ inner.Link }}">{{ inner.Title }}</a></dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
Then inbase.htmlor any place needed, through{% include "partial/header.html" %}simply introducing.
includeThe label can also pass variables. If you want a snippet to display different content based on the context of different pages, you can achieve this throughwithparameters:
{% include "partial/sidebar.html" with currentCategory="新闻中心" %}
Inpartial/sidebar.htmlin, you can use{{ currentCategory }}This variable.
Moreover, to enhance the robustness of the template, you can useif_existsparameters, so that even if the file included does not exist, it will not cause the page to report an error:
{% include "partial/custom_feature.html" if_exists %}
Method three: withmacroLabel definition of reusable function
macroTags are an advanced feature of the AnQiCMS template system, allowing you to define reusable 'functions'. When you find that a certain HTML structure needs to be rendered multiple times with different data, macroIt is very useful.
For example, you may need to display the 'card' information (title, thumbnail, introduction) in the same style at different locations on the website. You can define a macro to handle this structure:
Inmacro_helpers.htmlDefine macros in the file:
{% macro article_card(article) %}
<div class="article-card">
<a href="{{ article.Link }}">
{% if article.Thumb %}<img src="{{ article.Thumb }}" alt="{{ article.Title }}"/>{% endif %}
<h3>{{ article.Title }}</h3>
<p>{{ article.Description|truncatechars:100 }}</p>
<span>发布日期：{{ stampToDate(article.CreatedTime, "2006-01-02") }}</span>
</a>
</div>
{% endmacro %}
Then, in your page template, use the tag toimportinclude this macro, and call it in a loop:
{% import "macro_helpers.html" article_card %}
<section class="featured-articles">
<h2>精选文章</h2>
<div class="article-grid">
{% archiveList featuredArchives with flag="c" limit="4" %}
{% for item in featuredArchives %}
{{ article_card(item) }} {# 调用宏，传入文章数据 #}
{% endfor %}
{% endarchiveList %}
</div>
</section>
This way, wherever you need to display article cards, just callarticle_card宏，Pass the corresponding article data in, greatly reducing code repetition.
Template file organization: makes management easier.
Organizing template files rationally can make your website structure clear and easy to maintain. The root directory of the AnQiCMS template is/template. Each template package should be in/templateThe directory has its own content, including oneconfig.jsonfile to describe template information.
Within the template directory, you can organize files according to the following conventions:
base.html: As the master layout for the entire site.index.html: Website homepage template.{模型table}/: Stores different content models (such asarticle//product/) list page (list.html) and detail page (detail.html) templates.page/Store single page (detail.html) templates.- **`