In website operation, the header, footer, and sidebars play a crucial role in common areas.They not only carry the brand image and navigation function, but are also the key to improving user experience and content distribution efficiency.For those using AnQiCMS, understanding how to efficiently set up and display these areas will greatly enhance the professionalism and operational convenience of the website.
AnQiCMS is an enterprise-level content management system developed based on the Go programming language, which has fully considered the flexibility and scalability of templates 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 handle 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 the header and footer, they are typically placed in a directory namedbash.htmlin the file. This file is like the 'skeleton' of your website, providing a unified structure for all pages.
And content such as sidebars, breadcrumb navigation, which may appear in different forms on different pages, or as independent modules referenced by multiple pages, is classified aspartial/Exists in the directory as a code snippet.This modular design concept makes the management of the website's public areas organized and orderly, with changes made in one place taking effect globally, greatly improving maintenance efficiency.
Elegant Page Header Presentation: Brand Logo and Core Navigation
The header is the first part that catches the user's eye when they enter 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 representation of the brand image, and you can easily upload and manage your logo image in the 'Global Feature Settings' section of the backend. Once uploaded, through the templates,{% system with name="SiteLogo" %}Tags, it can be called and displayed in the header. At the same time, the name of the website can also be{% system with name="SiteName" %}Label acquisition, which helps unify the brand image and ensures easy updates across the entire website.
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".{% navList navs with typeId="导航类别ID" %}Dynamically acquire and render these navigation items using labels. For example, you can specifytypeId=1Call your main navigation, thenforiterate over the loopnavsvariable, displaying each navigation item's title and link. If there is a sub-navigation under the navigation item,item.NavListproperties will help you further expand.
Sometimes, you may also want to display some contact information or important promotional banners in the header. You can do this by using the information configured in the 'Contact Information Settings'.{% contact with name="Cellphone" %}or{% contact with name="Email" %}These 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 accessed by{% bannerList banners %}Labels,配合后台的“Home Banner List”设置，灵活地展示出来。【en】
Structured footer display: copyright information and auxiliary links。【en】
The website's footer, although located at the bottom, carries important content such as legal statements, copyright information, auxiliary navigation, and friend links. It plays a non-negligible role in the trustworthiness of the website and SEO.
AnQiCMS also provides a convenient way to manage these contents. The website filing number and copyright information can be filled in under 'Global Function Settings'. Then, through{% system with name="SiteIcp" %}and{% system with name="SiteCopyright" %}Tags, 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', etc. At this time, you can create a separate navigation category in the 'Website Navigation Settings', for example, named 'Footer Navigation', and assign a uniquetypeIdThen, using the tag in the footer template again, you can easily render these auxiliary links.{% navList navs with typeId="你的页脚导航ID" %}Tag, you 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 site.AnQiCMS provides a special "Friend Link Management" feature, where you can add and edit friend links in the background.{% linkList friendLinks %}Tags, you can dynamically display these friendship links and determine whether to add them according to your needsnofollowproperties.
Rich and diverse sidebar: content discovery and user interaction
The sidebar is a crucial area for improving the discoverability and user engagement of website content. In AnQiCMS, you can use flexible template snippets (partial/) and various content tags to build a rich and diverse sidebar.
To create a sidebar, you would typically first create a file in the directory.partial/For example, create a file under the directory.sidebar.htmlThen, in the page template that needs to display the sidebar, use{% include "partial/sidebar.html" %}tag to include it.
Common elements of the sidebar include:
- Category list: to guide users through different content categories. Use
{% categoryList categories with moduleId="文章模型ID" parentId="0" %}Tags, you can get all top-level categories under a specified content model, and you can further get 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 of the website.
{% archiveList archives with type="list" limit="10" order="id desc" %}(Latest article) ororder="views desc"(Popular articles), you can easily get and display a specified number of document lists. - Tag cloudDisplay 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 active tags on the website. - Single-page content or advertisement slotsYou may need to display some "About Us" introduction 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 requirements. - Breadcrumbs navigation: Although it often appears below the page header, it is also a public navigation component. Through
{% breadcrumb crumbs %}Tags can help users understand the position of the current page in the website structure.
When displaying these lists, combine{% for item in list %}loop and{% if condition %}Judgment, you can finely control the display of content, such as adding highlight styles to the current category, or only displaying articles with thumbnails.
Flexible customization: Make public areas smarter
The strength of AnQiCMS lies not only in its ability to display static content, but also in its high level of customization, which allows public areas to become more intelligent according to the context.
For example, if you want a unique Banner image for a specific category or single page, you can edit that category (under "Content Management" > "Document Category") or single page (under "Page Resources" > "Page Management") in the backend