How to display common website elements, such as headers and footers, uniformly through template fragments (partial)?
When managing website content in AnQi CMS, you may find that many pages have similar structures, such as top navigation, footer copyright information, sidebar, or metadata tags.If you have to rewrite this code for each page every time, it is not only inefficient, but also once you need to modify it, you have to search and update it page by page, which takes a lot of time and is easy to make mistakes.Fortunately, AnQi CMS provides a very elegant solutionTemplate Fragment (Partial)It can help us manage these public elements efficiently and uniformly.
What is a template fragment (Partial)?
In simple terms, a template snippet is a small piece of code that can be reused by other template files on a website. They typically contain common structures or functional modules of the website, such as a standalone header, a universal footer, a sidebar module, or some general page elements.<head>Area code. In AnQi CMS, these template fragments are usually stored in the current theme template directory.partial/folder, with the.htmlsuffix.
Why use template fragments?
Using template snippets to manage common elements can bring various benefits to your website operation:
- Maintain the unity of your website:Ensure that all page headers, footers, and other common areas maintain a consistent style and content to enhance user experience and brand image.
- Improve development and maintenance efficiency:Store common code in a centralized location, write once and use everywhere.When changes are needed, only update one template fragment file, and all pages referencing it will be automatically updated, saving a lot of time and effort.
- Code structure is clearer:Break down large pages into logically independent modules, making template files more concise, easier to read and understand, and reducing the complexity of later maintenance.
- Promote teamwork:Different developers can focus on their respective modules without interfering with each other, improving the team's development efficiency.
How to use template fragments in AnQi CMS?
In Anqi CMS, implementing the unified display of template fragments is very intuitive, mainly divided into two steps: creating and referencing.
Step 1: Create your template fragment file.
Firstly, you need to extract the common element code of the website from the original page and create an independent.htmlfile and place it in the directory under your themepartial/folder.
Assume your theme name isdefaultThen the directory structure of your template fragment may look like this:your_anqicms_root/template/default/partial/
For example, let's create the header (header) and footer (footer):
1. Createheader.html:This file can include your website logo, main navigation, search box, and so on.
<!-- template/default/partial/header.html -->
<header class="main-header">
<div class="container">
<div class="site-branding">
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
</div>
<nav class="main-navigation">
<ul>
{% navList navs %}
{% for item in navs %}
<li {% if item.IsCurrent %}class="active"{% endif %}>
<a href="{{ item.Link }}">{{item.Title}}</a>
{% if item.NavList %}
<ul class="sub-menu">
{% for sub_item in item.NavList %}
<li {% if sub_item.IsCurrent %}class="active"{% endif %}><a href="{{ sub_item.Link }}">{{sub_item.Title}}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
{% endnavList %}
</ul>
</nav>
<div class="contact-info">
联系我们: {% contact with name="Cellphone" %}
</div>
</div>
</header>
On the aboveheader.htmlIn the snippet, we used the built-in function of Anqi CMS.systemTag to get the website logo and name, as well asnavListTags to dynamically generate navigation menus, and usecontactTags to display contact information.
2. Createfooter.html:This file can include copyright information, filing number, friendship links, and so on.
<!-- template/default/partial/footer.html -->
<footer class="main-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>
<div class="friend-links">
友情链接：
{% linkList friendLinks %}
{% for link_item in friendLinks %}
<a href="{{link_item.Link}}" {% if link_item.Nofollow == 1 %} rel="nofollow"{% endif %} target="_blank">{{link_item.Title}}</a>
{% endfor %}
{% endlinkList %}
</div>
</div>
</footer>
Here, we also took advantage ofsystemtags to obtain the copyright and record information of the website, as well aslinkListtags to display the links
Step two: Refer to the template fragment in your main template
After creating the template fragment file, you can use it in any main template file of the website (such as the homepageindex/index.html, article detail pagearchive/detail.htmlSingle Pagepage/detail.htmletc.){% include "partial/your_partial_file.html" %}to reference them.
For example, in a typical page structure, you can organize your main template file like this:
<!-- template/default/index/index.html (或其他页面模板) -->
<!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/style.css">
<!-- 更多head内容 -->
</head>
<body>
<!-- 引入页头 -->
{% include "partial/header.html" %}
<main class="main-content">
<div class="container">
<!-- 这里是当前页面的具体内容，例如文章列表、产品展示、单页内容等 -->
<h1>欢迎来到安企CMS搭建的网站！</h1>
<p>这是首页的独有内容。</p>
{% archiveList archives with type="list" limit="5" %}
{% for item in archives %}
<article>
<h2><a href="{{ item.Link }}">{{ item.Title }}</a></h2>
<p>{{ item.Description|truncatechars:100 }}</p>
</article>
{% endfor %}
{% endarchiveList %}
</div>
</main>
<!-- 引入页脚 -->
{% include "partial/footer.html" %}
<script src="{% system with name="TemplateUrl" %}/js/main.js"></script>
<!-- 更多脚本 -->
</body>
</html>
This way, you can reuse ` whenever you need as many pages as you want