What template codes can be edited online in the AnQiCMS backend template editing feature?

As an experienced website operations expert, I know that a successful website cannot do without flexible and variable design and efficient content presentation.The backend template editing function of AnQiCMS (AnQiCMS) is exactly designed to meet this core requirement, giving operators great freedom to directly fine-tune the "front door" of the website, without the cumbersome local development and upload process, greatly improving work efficiency.

What exactly does the AnQiCMS backend template editing function support us in modifying the template code online?In simple terms, it supports modifying almost all code files that make up the front-end interface of your website, which collectively define the visual presentation and interaction logic of the website.

The skeleton and soul of the website interface: various HTML template files

The template system of Anqi CMS uses.htmlAs the suffix of template files, and place them in a unified location/templateIn the template folder. This means that all HTML files defining the layout and content of different web pages can be modified online. This includes but is not limited to:

1. Core page template: such as the home page of the website(index/index.htmlorindex.html) which is the first impression of the user visiting the website; the document detail page({模型table}/detail.html) defines the display method of articles or product content; as well as the document list page({模型table}/list.htmlThe arrangement of the content list is determined by.
2. Special function page templateFor example, a single page detail page(page/detail.html) used for independent pages such as "About Us", "Contact Us"; Comment list page(comment/list.html) Online留言页(guestbook/index.html) Search results page(search/index.html) And tag-related homepage(tag/index.html) And list page(tag/list.html).
3. System-level prompt page: Common error pages like 404 error pages(errors/404.html), 500 error pages(errors/500.html), and site closure notification pages(errors/close.html), can also be customized in terms of content and style.
4. Public code snippets: To improve code reusability, Anqi CMS encourages extracting common modules such as page header(bash.html), footer, sidebar, navigation, and storing them inpartial/Under the directory. These "code snippets" also support online editing, ensuring the consistency of the website's global style and the convenience of maintenance.
5. Template configuration file: Each template theme has oneconfig.jsonA file used to define the name, version, author, and other metadata of the template. Although this is not the code displayed on the page, it is also an important configuration item that can be edited online in the template package.
6. Mobile Exclusive TemplateIf your website has adopted code adaptation or PC + mobile independent station mode, Anqi CMS also supports inmobile/The directory contains a set of independent mobile template files, which can also be edited online to provide a ** mobile user experience.

It is worth mentioning that Anqi CMS also supports custom template file names, for example, you can specify a unique one for a specific article, category, or single page..htmlTemplate, these custom template files can be modified online as long as they are in the corresponding directory.

The elements of template code: HTML, CSS, JS and AnQiCMS exclusive language

When you edit these online.htmlWhen you are handling a file, you are actually operating on a mixture of the following code:

1. Standard HTML, CSS and JavaScriptThis is the foundation for building any web page. You can write HTML structure, embed CSS styles (whether inline, internal style sheet or through<link>Tags to include external style files) and add JavaScript scripts (whether inline or through<script>Label to reference external JS files to achieve rich visual effects and dynamic interaction.

2. AnQiCMS template language (Django-like syntax)This is the core of AnQi CMS template, it adopts the syntax style similar to Django template engine, making the display of dynamic content intuitive and powerful.

   • Variable outputThrough double curly braces{{ 变量名 }}Output dynamic data, for example{{ archive.Title }}Used to display the article title. Variable names follow camel case naming conventions.
   • Control logic: Use.{% ... %}Tag to handle logic, for example{% if 条件 %}For conditional judgment,{% for item in 列表 %}Perform loop traversal. These logical tags usually need{% endif %}or{% endfor %}End tags follow.
   • Rich built-in tags: Anqi CMS is built-in with up to 38 commonly used tags, which are powerful tools for obtaining and displaying various types of website data. For example:
     • systemTagGet the website name, Logo, filing number, and other global system configurations.
     • contactTagGet contact information, phone number, address, and other contact information.
     • tdkTagGet the page's SEO title, keywords, and description.
     • navListTagDynamically generate the website navigation menu.
     • categoryListandcategoryDetailTagGet the category list and category details.
     • archiveListandarchiveDetailTagGet the list and details of articles/products.
     • tagListandtagDataListTagGet the tag list and associated documents.
     • commentListandguestbookTagProcess the comment and message form.
     • linkListTagGet the friendship link.
     • paginationTagCreate pagination navigation. These tags allow you to flexibly display background data on any position of the website.
   • Practical Filters (Filters): To make the data presentable on the frontend more refined, AnQiCMS also provides various filters for processing and formatting variables. For example:truncatecharsUsed to truncate a string and add an ellipsis;stampToDateUsed to format a timestamp into a readable date;safeUsed to output HTML content without escaping;addPerform concatenation of numbers or strings;replacePerform content replacement, etc.
   • Helper Tags: such asincludeUsed to include other template files to achieve modular development;extendsUsed for template inheritance, defining the common layout of the website;macroUsed to define reusable code snippets, improve efficiency.

Points to note and **practice during template editing.