How to display all AnQiCMS contact information uniformly at the footer of the website without repeating code?

Good, as an experienced website operation expert, I am very willing to explain to you in detail how to implement unified management and display of website footer contact information in AnQiCMS, ensuring the efficiency of content maintenance and the conciseness of code.

Say goodbye to repetitive labor: Efficiently manage website footer contact information in AnQiCMS

In website operation, the footer usually contains important information such as the company's contact information, copyright statement, friend links, filing number, etc.This information is not only an important way for users to obtain the basic situation of the site, but also a key component of Search Engine Optimization (SEO).However, many websites often face a difficult problem during the construction process: how to maintain consistency of the footer information on all pages, while avoiding code repetition and ensuring convenience for future modifications?

AnQiCMS as an efficient and customizable enterprise-level content management system perfectly solves this pain point.It separates content configuration from template rendering strategies, complements with a powerful template tag system, allowing you to easily achieve centralized management and dynamic display of footer information, thereby saying goodbye to繁琐 repetitive code and significantly improving website maintenance efficiency.

Why is it so important to manage footer information uniformly?

Imagine if your website has hundreds of pages, and the footer contact information is hardcoded on each page.Once the phone number changes, you will need to modify these hundreds of files one by one, which is undoubtedly a nightmare of physical labor.Unified management of footer information, its importance is reflected in the following aspects:

  1. Improve maintenance efficiency:All footer information needs to be configured and modified in one place, and it can be synchronized updated throughout the site.
  2. Ensure information consistency:Avoid missing or incorrect information due to manual modification, resulting in different pages displaying different versions of the information.
  3. Optimizing user experience: Users can find accurate and up-to-date contact information on any page, enhancing the professionalism and credibility of the website.
  4. Beneficial for Search Engine Optimization (SEO):Stable, high-quality footer information (such as copyright, filing, main contact information) helps search engines better understand and index your website.

How AnQiCMS helps manage footer information?

The subtlety of AnQiCMS lies in itsContent and presentation separationThe design concept. It stores the configuration information of the website in the background database and throughTemplate TagsThe mechanism is called as needed in the front-end template. CombinedPublic code snippets (Partials/Includes)With the application of this, unified footer management can be easily achieved.

In particular, AnQiCMS mainly provides several key functions to support this goal:

  • Backend centralized configuration:Provide a dedicated interface for configuring the global information of the website (such as website name, filing number) and contact information.
  • Flexible template tags: Allow developers to directly read the various configuration items of the background through concise tag syntax in the template file.
  • Template inheritance and inclusion mechanism:Support to extract common parts like the footer into independent template files and reference them on pages where the footer needs to be displayed.

We will demonstrate how to build a dynamic and maintainable website footer in AnQiCMS through specific steps.

Practice: Build a dynamic and maintainable website footer

To implement the unified display of website footer information without repeating code, it is mainly divided into three core steps:Configure information centrally in the background,Create a common footer template file, as well asInclude the file in the main template.

Step 1: Preparation: Centralize your website configuration information

Firstly, make sure that all your website's basic information and contact details have been entered in the AnQiCMS backend. This is the foundation for dynamic data display.

  1. Global website settings:

    • Log in to the AnQiCMS backend and navigate to后台设置-u003e全局设置.
    • Here, you can find and fill in网站名称/网站LOGO/备案号码/版权信息Global website information. This information often appears in the footer.
    • Tip:If you have any other general text that needs to be displayed in the footer but is not a contact method (such as company mission, Slogan, etc.), you can add it through the "custom settings parameter". For example, you can add one namedCompanyMissionThe parameter, and fill in your company's mission in the parameter value.

  2. Contact information settings:

    • Navigate to后台设置-u003e联系方式设置.
    • Here are standardized contact information fields such as联系人/联系电话/联系地址/联系邮箱/微信号/微信二维码/QQetc. Please fill in according to your actual situation.
    • Flexible expansion:If you need to display other social media links (such as WhatsApp, Facebook, Twitter, Instagram, etc.), you can also use the 'Custom Settings Parameters' at the bottom of the page to add them. For example, you can add aWhatsAppLinkEnter the parameter and fill in your WhatsApp contact link. This will greatly enhance the footer's customization capabilities without modifying any code.

  3. Friendship link management:

    • Navigate to功能管理-u003e友情链接.
    • Add the links you want to display in the footer here. AnQiCMS will manage them uniformly and provide tags for the frontend to call.

Completed these backend configurations, all the data required for your footer is ready and can be used in the frontend at any time.

Step two: Create a common footer template file (partial/footer.html)

The template design of AnQiCMS follows the principle of convention over configuration. At the root directory of the template/template, there is usually a theme folder for you (for exampledefault), you can create one in this topic folderpartialdirectory (if it doesn't exist), and create a new one namedfooter.htmlThe file. This file will carry all the common code and dynamic information of the footer.

Open.partial/footer.htmlYou can use the template tags provided by AnQiCMS to dynamically obtain and display the information configured in the background.

`html

<div class="container">
    <div class="footer-contact-info">
        <h3>联系我们</h3>
        <ul>
            {%- comment -%} 从联系方式设置中获取联系人信息 {%- endcomment -%}
            {%- if contact with name="UserName" -%}
            <li>联系人：<span>{% contact with name="UserName" %}</span></li>
            {%- endif -%}

            {%- comment -%} 从联系方式设置中获取联系电话 {%- endcomment -%}
            {%- if contact with name="Cellphone" -%}
            <li>电话：<a href="tel:{% contact with name="Cellphone" %}" rel="nofollow">{% contact with name="Cellphone" %}</a></li>
            {%- endif -%}

            {%- comment -%} 从联系方式设置中获取联系邮箱 {%- endcomment -%}
            {%- if contact with name="Email" -%}
            <li>邮箱：<a href="mailto:{% contact with name="Email" %}" rel="nofollow">{% contact with name="Email" %}</a></li>
            {%- endif -%}

            {%- comment -%} 从联系方式设置中获取联系地址 {%- endcomment -%}
            {%- if contact with name="Address" -%}
            <li>地址：<span>{% contact with name="Address" %}</span></li>
            {%- endif -%}

            {%- comment -%} 从联系方式设置中获取微信号（假设后台自定义了一个WhatsAppLink） {%- endcomment -%}
            {%- if contact with name="Wechat" -%}
            <li>微信：<span>{% contact with name="Wechat" %}</span></li>
            {%- endif -%}
            {%- if contact with name="WhatsAppLink" -%}
            <li>WhatsApp：<a href="{% contact with name="WhatsAppLink" %}" target="_blank" rel="nofollow">联系我们</a></li>
            {%- endif -%}
        </ul>
        {%- comment -%} 也可以直接获取二维码图片 {%- endcomment -%}
        {%- if contact with name="Qrcode" -%}
        <div class="qrcode">
            <img src="{% contact with name="Qrcode" %}" alt="微信二维码">
            <p>扫码咨询</p>
        </div>
        {%- endif -%}
    </div>

    <div class="footer-links">
        <h3>友情链接</h3>
        <ul>
            {%- comment -%} 从友情