How to uniformly manage the alignment format of text in AnQiCMS multi-site templates?

In the multi-site environment of AnQiCMS, implementing unified management of text alignment formats across different sites is the key to enhancing brand consistency, optimizing user experience, and simplifying post-maintenance.}Although each site may have independent templates and content, we can certainly establish an efficient and unified alignment management strategy by巧妙ly utilizing the template mechanism and front-end technology of AnQiCMS.

AnQiCMS template mechanism and the foundation of unified management

AnQiCMS is renowned for its powerful multi-site management and flexible template customization capabilities. In the system architecture, all template files are uniformly stored in/templateUnder the directory, each site can have an independent template directory, for exampledefault/siteAAnd at the same time, static resources such as CSS, JavaScript, and images are usually placed in/public/static/Under the directory, for template reference.

Implement unified management of text alignment formats, the core lies in utilizing this layered structure. AnQiCMS uses syntax similar to Django template engine, supportingextends(Template inheritance) andinclude(Template reference) and other features, all of which are important tools for us to build a unified style basis.

The core strategy for unified text alignment format: CSS priority principle

The text alignment, such as left alignment, center alignment, right alignment, or both ends alignment, is essentially a presentation layer style of web content.**Practice is to delegate it to CSS (Cascading Style Sheets) for unified control, rather than manually setting it in each rich text editor.

Why emphasize CSS precedence? The reasons are as follows:

1. Consistency guarantee:Through CSS, you can style text elements throughout the entire site or specific types of text elements (such as paragraphs<p>, headings<h1>-<h6>, lists<ul>Align rules once. Regardless of how the content changes, their alignment will remain consistent.
2. Maintain efficiency:If in the future you need to adjust the alignment, you only need to modify one line of CSS code, and all affected sites and pages will be updated immediately, greatly reducing redundant labor.
3. Avoid conflict and confusion:The alignment settings in a rich text editor are usually inline styles (inline style), which have a very high priority and are prone to overriding global styles, making it difficult to unify and debug styles.At the same time, it also makes the content tightly coupled with the presentation layer, which is not conducive to decoupling.
4. Responsive design friendly:CSS can easily implement media queries, automatically adjust the text alignment according to the screen size of the device, and provide a **reading experience for different terminals.

Based on this, we recommend avoiding setting the text alignment format directly in the AnQiCMS backend rich text editor (such as in "Publish Document" or "Page Management"), and letting the global CSS take the lead.

Implement the steps for unified alignment management

1. Create or identify a shared global CSS file:To ensure that all sites can share alignment rules, **the method is to create one or use a public CSS file that all site templates will load. You can choose to load it in/public/static/global/Create a file namedglobal.css.

2. In the public header file (such asbash.html), include this CSS file:AnQiCMS templates usually have a common header file, such as one in the template directory underbash.htmlor a similar name. All page templates will go through{% extends 'bash.html' %}or{% include 'partial/header.html' %}It is introduced in this way. In this public header file, use<link>tag to introduce the one we createdglobal.css. AnQiCMS providessystemtag to get the base URL, convenient for cross-site references:

   <link rel="stylesheet" href="{{system.BaseUrl}}/public/static/global/global.css">
   

   Make sure this<link>tag is loaded before all other style sheets so that the site-specific CSS can override as needed.

3. Inglobal.cssDefine global alignment rules:in thisglobal.cssIn the file, you can define uniform alignment rules for common text elements. For example:

   /* 全局默认左对齐 */
   body {
       font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', Arial, sans-serif;
       line-height: 1.6;
       color: #333;
       text-align: left; /* 默认左对齐 */
   }
   
   /* 段落默认左对齐 */
   p {
       text-align: left;
       margin-bottom: 1em;
   }
   
   /* 标题居中 */
   h1, h2, h3, h4, h5, h6 {
       text-align: center;
       margin-top: 1.5em;
       margin-bottom: 1em;
   }
   
   /* 特定内容的居中（例如图片说明） */
   .caption {
       text-align: center;
       font-size: 0.9em;
       color: #666;
   }
   
   /* 如果有需要，可以为内容区定义两端对齐 */
   .article-content {
       text-align: justify;
   }
   

   You can choose different HTML tags or use class names (class) to finely control alignment according to your actual needs.

4. (Optional) Implement site-specific fine-tuning and overrides:If