How to set and display the common areas of the website such as header, footer, and sidebar in AnQiCMS?

In website operation, header, footer, and sidebar public areas play a crucial role.They not only carry the brand image and navigation function, but are also the key to improving user experience and content distribution efficiency.For friends using AnQiCMS, understanding how to efficiently set up and display these areas will greatly enhance the professionalism and operational convenience of the website.

AnQiCMS as an enterprise-level content management system developed based on the Go language, has fully considered the flexibility and scalability of the template from the beginning of its design.This means that whether you are creating a simple corporate website or a content-rich self-media platform, you can easily master the layout and content of these public areas.

Build the skeleton of a website: template basics and common code

AnQiCMS follows clear conventions in template design. When you delve into the template files of the website, you will find a file named/templateThe root directory, which contains all the templates your website is using. For those common parts that appear on every page, such as headers and footers, they are usually placed in a folder namedbash.htmlThe file in. This file is like the "skeleton" of your website, providing a unified structure for all pages.

And content like sidebars, breadcrumb navigation, which may appear in different forms on different pages, or as independent modules referenced by multiple pages, is classified aspartial/Under the directory, existing in the form of code snippets. This modular design concept makes the management of the website's common area organized, and modifying one place can take effect globally, greatly improving the maintenance efficiency.

Gracefully present the page header: brand identity and core navigation

The header is the first part that appears to the user when entering the website, carrying the website's Logo, main navigation, and some important contact information.In AnQiCMS, setting these elements is an intuitive and flexible process.

The website's logo is a direct manifestation of the brand image, you can easily upload and manage your logo picture in the background's global feature settings. Once uploaded, through the template in the{% system with name="SiteLogo" %}The tag can be called and displayed in the header. At the same time, the name of the website can also be accessed through{% system with name="SiteName" %}Label acquisition, which helps unify the brand image and ensure easy updates across the entire website.

The core navigation is the key to guiding users to explore the website. AnQiCMS provides a powerful 'website navigation settings' feature, allowing you to create multiple navigation categories, such as 'top main navigation', 'footer navigation', and even 'sidebar navigation'.After setting up the navigation links and levels in the background (AnQiCMS supports two-level navigation), you can then use them in the template{% navList navs with typeId="导航类别ID" %}Labels to dynamically acquire and render these navigation items. For example, you can specifytypeId=1Call your main navigation, thenforTraverse in a loopnavsVariable, display the title and link of each navigation item. If there is a sub-navigation under the navigation item,item.NavListproperties will help you expand further.

Sometimes, you may also want to display some contact information or important promotional banners in the page header. By using the information configured in the "Contact Information Settings", you can display through{% contact with name="Cellphone" %}or{% contact with name="Email" %}Tags can dynamically display phone numbers, email addresses, and other information in the page header. The carousel or important promotional images in the page header can be displayed through{% bannerList banners %}Tags, combined with the background "Homepage Banner List" settings, can be flexibly displayed.

Structured display of the footer: copyright information and auxiliary links

The website footer, although located at the bottom, carries important content such as legal statements, copyright information, auxiliary navigation, and friend links, which play an indispensable role in the trustworthiness and SEO of the website.

AnQiCMS also provides a convenient way to manage this content. The website's filing number and copyright information can be filled in at the "Global Function Settings". Then, through{% system with name="SiteIcp" %}and{% system with name="SiteCopyright" %}Label, this information can be accurately displayed in your footer.

For the convenience of users, the footer usually also includes some auxiliary navigation, such as "About Us", "Privacy Policy", and so on. At this point, you can create an independent navigation category in the "Website Navigation Settings", for example, named "Footer Navigation", and allocate a uniquetypeIdThen, use it again in the footer template{% navList navs with typeId="你的页脚导航ID" %}Tags can easily render these auxiliary links.

Friendship links are an indispensable part of many websites, helping to establish external links and enhance the weight of the website.AnQiCMS provides a special "Friend Link Management" feature, where you can add and edit friend links in the background.In the footer template, use{% linkList friendLinks %}Label, you can dynamically display these friendship links and can judge whether to add them according to your needsnofollowProperty.

Rich and diverse sidebar: content discovery and user interaction

The sidebar is an important area for improving the discoverability and user engagement of website content. In AnQiCMS, you can use flexible template fragments (partial/) and various content tags to build a rich and diverse sidebar.

To create a sidebar, you would typically first create one inpartial/the directory, for examplesidebar.html. Then, in the page template where the sidebar needs to be displayed, use{% include "partial/sidebar.html" %}tag to include it.

Common elements of the sidebar include:

• Category List: to guide users to browse different content categories. Use{% categoryList categories with moduleId="文章模型ID" parentId="0" %}Label, you can get all top-level categories under the specified content model, and you can further obtain their child categories in a loop to build a multi-level category navigation.
• Latest or popular articles：Attract users to click and read the active content on the website. Through{% archiveList archives with type="list" limit="10" order="id desc" %}(Latest articles) ororder="views desc"(Popular articles), you can easily obtain and display a specified number of document lists.
• Tag Cloud: Display the popular tags of the website, making it convenient for users to explore content through their interests.{% tagList tags with limit="20" %}Tags can help you list the active tags on the website.
• Single-page content or ad spaceYou may need to display some "About Us" introductions in the sidebar, or place advertisements. Through{% pageList pages %}Tags to get specific single-page content, or directly insidebar.htmlWrite static HTML code, which can meet these needs.
• Breadcrumbs navigation: Although it often appears below the page header, it is also a public navigation component. Through{% breadcrumb crumbs %}Tags, which can help users understand the position of the current page in the website structure.

Combine with the display of these lists,{% for item in list %}loop and{% if condition %}Judge, you can finely control the way content is displayed, such as adding a highlight style to the current category, or displaying only articles with thumbnails.

Flexible customization: Make the public area smarter

The strength of AnQiCMS lies not only in its ability to display static content, but also in its high degree of customization, which allows public areas to become smarter according to the context.

For example, if you want a unique Banner image for a specific category or single page, you can edit the category ("Content Management" > "Document Category") or single page ("Page Resources" > "Page Management") in the background when