How to uniformly display the common elements of a website, such as headers and footers, through template fragments (partial)?

In 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, etc.If you have to rewrite this code for each page repeatedly, it is not only inefficient, but also time-consuming and prone to errors when you need to make modifications, as you have to search and update each page individually.Template Fragments (Partial)It can help us manage these public elements efficiently and uniformly.

What is a template fragment (Partial)?

In simple terms, template snippets are small pieces of code that can be reused by other template files within a website. They typically contain common structures or functional modules of a website, such as an independent header, a universal footer, a sidebar module, or some general page features.<head>Area code. These template fragments are usually stored in the current theme template directory in AnQi CMS.partial/folder, with.htmlsuffix.

Why use template fragments?

Using template fragments to manage common elements can bring many benefits to the operation of your website:

  1. Maintain the unity of the website:Ensure that the headers, footers, and other common areas of all pages are consistent in style and content to enhance user experience and brand image.
  2. Improve development and maintenance efficiency:Store public code centrally, write once and use everywhere.When it needs to be modified, only one template fragment file needs to be updated, and all the pages that refer to it will be updated automatically, which greatly saves time and effort.
  3. Code structure is clearer:Break large pages into logically independent modules, making template files more concise, easy to read and understand, and reducing the complexity of later maintenance.
  4. promoting team collaboration:Different developers can focus on their respective modules, without interference, to improve the team's development efficiency.

How to use template fragments in the Anqi CMS?

In AnQi CMS, it is very intuitive to implement the unified display of template fragments, mainly divided into two steps: creation and reference.

Step 1: Create your template fragment file.

Firstly, you need to extract the public element code of the website from the original page, create an independent.htmlfile, and place it in your theme directory underpartial/the folder.

Assume your topic name isdefaultThen your template fragment directory structure may be as follows:your_anqicms_root/template/default/partial/

Let's take creating a page header (header) and footer (footer) as an example:

1. Createheader.html:This file can include your website Logo, main navigation, search box, etc.

<!-- 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>

Aboveheader.htmlSection, we used the built-in Anqi CMSsystemLabel to obtain the website logo and name, andnavListLabel to dynamically generate navigation menus, andcontactLabel to display contact information.

2. Createfooter.html:This file can include copyright information, filing number, friend links, etc.

<!-- 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 usedsystemtags to obtain the copyright and filing information of the website, as well aslinkListLabel to display the friend link.

Step 2: Refer to the template snippet in your main template.

After creating the template snippet file, you can use it in any main template file of the website (such as the homepageindex/index.html, article detail page)archive/detail.html、Single-pagepage/detail.html等）使用{% include "partial/your_partial_file.html" %}They are referred to by tags.

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, no matter how many pages you need, you can reuse the `