How to include common header, footer, and other code snippets in AnQiCMS templates to unify the display style?
How to include common header, footer, and other code snippets in AnQiCMS templates to unify the display style?
When building a website, whether it is a personal blog, a corporate website, or a marketing site, maintaining consistency in page visuals and functionality is crucial.Imagine if each page's top navigation, footer copyright information, and even the sidebar were all different, the user experience would suffer greatly, and the professionalism of the website would also be greatly reduced.AnQiCMS provides a powerful and flexible template engine that can help us easily achieve unified style management of the website, the core practice of which is to modularize and uniformly introduce common header, footer, and other frequently used code snippets.
In this way, we can not only ensure that each page of the website has a consistent brand identity and operational experience, but also greatly improve development efficiency and the convenience of later maintenance.When the navigation structure, contact information, or copyright statement of a website needs to be updated, we only need to modify one piece of code to synchronize the update of all related pages, thus avoiding the麻烦 of modifying each page one by one.
How should we operate specifically in AnQiCMS?
Understand the basics of AnQiCMS template engine
AnQiCMS's template engine adopts a syntax style similar to Django, which is very friendly for friends familiar with template development. Its template files are usually written in.htmlwith suffix, and stored uniformly in/templatedirectory. In the template file, we mainly use two types of markers:
- double curly braces
{{ 变量名 }}: is used to output variable content, such as website name, article title, etc. - curly brace followed by percent sign
{% 标签名 参数 %}used for controlling logical flow, such as conditional judgment, loop traversal, and importing other template files.
To achieve the unity of page style, we mainly use the two core features of the template engine:Template inheritance (extendsandblock)andTemplate inclusion (include).
Template inheritance: building the skeleton of the website
Template inheritance is the cornerstone of building a unified website layout. It allows us to create a "basic template" (usually namedbase.htmlor based ondesign-director.mdrecommend naming in thebash.htmlwhere it defines the overall structure of the website, such as the HTML document declaration,headsections, header, main content area, footer, etc. The variable parts of the basic template are then accessed throughblockDefine the tag.
For example, a basic template (base.html) might 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">
{# 引入页面的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 %}
{# 引入公共样式表 #}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/main.css">
{% block head_extra %}{% endblock %} {# 预留额外头部内容的区块 #}
</head>
<body>
<header id="header">
{% block header %}
{% include "partial/header.html" %} {# 引入公共页头片段 #}
{% endblock %}
</header>
<main id="main-content">
{% block content %}{% endblock %} {# 页面主体内容的区块，由子模板填充 #}
</main>
<footer id="footer">
{% block footer %}
{% include "partial/footer.html" %} {# 引入公共页脚片段 #}
{% endblock %}
</footer>
{# 引入公共脚本文件 #}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
{% block scripts_extra %}{% endblock %} {# 预留额外脚本的区块 #}
</body>
</html>
in thisbase.htmlIn it, we definedtitle/keywords/descriptionThese TDK information through{% tdk %}Dynamically retrieve and use tags{% system with name="TemplateUrl" %}Get the static resource path of the template, ensure that styles and scripts can be loaded correctly. The key is{% block header %}/{% block content %}and{% block footer %}Labels, they are areas that child templates can override and fill in.
Any page that wants to maintain a consistent style, such as the home page (index.html) or article detail page (archive/detail.html) Just use it at the top of the file{% extends "base.html" %}Inherit this basic template and then fill or override as neededblockAs defined in it.
For example, an article detail page (archive/detail.html): May be inherited and filled like this:
{% extends "base.html" %}
{% block head_extra %}
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/detail.css">
{% endblock %}
{% block content %}
<div class="container article-detail">
<h1>{% archiveDetail with name="Title" %}</h1>
<div class="meta-info">
<span>发布日期: {{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
<span>分类: <a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
</div>
<article class="content">
{%- archiveDetail archiveContent with name="Content" %}
{{ archiveContent|safe }}
</article>
{# 显示上一篇/下一篇文章 #}
<nav class="pagination-nav">
{% prevArchive prev %}
{% if prev %}
<a href="{{ prev.Link }}">上一篇: {{ prev.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endprevArchive %}
{% nextArchive next %}
{% if next %}
<a href="{{ next.Link }}">下一篇: {{ next.Title }}</a>
{% else %}
<span>没有了</span>
{% endif %}
{% endnextArchive %}
</nav>
</div>
{% endblock %}
{% block scripts_extra %}
<script src="{% system with name="TemplateUrl" %}/js/detail.js"></script>
{% endblock %}
As can be seen, the article detail page focuses only on its unique 'content' part, while the header, footer, and other common elements arebase.htmlresponsible for introducing and managing.
Templates include: modular code snippets
includeTags are used to introduce smaller, independent, reusable code snippets. They are very suitable for those in multipleblockMay appear, or not part of the overall layout but functionally independent modules, such as navigation menus, sidebars, copyright information blocks, contact card, etc. AnQiCMS recommends placing these fragments inpartial/directory.
Abovebase.htmlAs an example, it goes through{% include "partial/header.html" %}and{% include "partial/footer.html" %}It introduced separate header and footer files.
A common header (partial/header.html) Example:
<div class="top-bar">
<div class="container">
欢迎访问{% system with name="SiteName" %}！
电话：{% contact with name="Cellphone" %}
</div>
</div>
<div class="main-header">
<div class="container">
<a href="{% system with name="BaseUrl" %}" class="logo">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %} Logo">
</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 %}
<dl>
{%- for inner in item.NavList %}
<dd class="{% if inner.IsCurrent %}active{% endif %}">
<a href="{{ inner.Link }}">{{inner.Title}}</a>
</dd>
{% endfor %}
</dl>
{% endif %}
</li>
{% endfor %}
</ul>
{% endnavList %}
</nav>
</div>
</div>
And the common footer (partial/footer.html) Example may include:
`html