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

Good, as an experienced website operations expert, I am more than happy to elaborate on 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 statements, 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 tricky problem during the construction process: how to maintain consistency of footer information on all pages while avoiding code repetition and ensuring ease of modification in the future?

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

Why is it so important to manage footer information uniformly?

Imagine if your website has hundreds of pages, and each page's footer hardcodes the contact phone number.Once the phone number changes, you will need to modify these hundreds of files one by one, which is undoubtedly a nightmare of a 'physical job'.

  1. Enhance maintenance efficiency:All footer information only needs to be configured and modified in one place, and it will be synchronized updated across the entire site.
  2. Ensure consistency of information:Avoid missing or incorrect information displayed on different pages due to manual modifications.
  3. Optimize 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, record filing, main contact information) helps search engines better understand and index your website.

How AnQiCMS helps manage footer information?

The exquisite part of AnQiCMS lies in itsSeparation of content and presentationThe design concept. It stores the website's configuration information in the background database and throughtemplate tags (Template Tags)Mechanisms are called on demand in front-end templates. CombinedPublic code snippets (Partials/Includes)application, it can easily realize the unified management of footers.

In particular, AnQiCMS mainly provides the following key features 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 various background configuration data through concise tag syntax in template files.
  • Template inheritance and inclusion mechanism:Supports extracting common parts like the footer into independent template files and referencing them in pages where the footer needs to be displayed.

Next, we will demonstrate step by step how to build a dynamic and maintainable website footer in AnQiCMS.

Practice: Building a dynamic and maintainable website footer

To achieve the unified display of website footer information without redundant code, it mainly consists of three core steps:Configure information centrally in the background,Create a common footer template fileas well asIntroduce this file in the main template.

Step 1: Preparation: Centralize the configuration of your website information

Firstly, make sure that 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, navigate to后台设置-全局设置.
    • Here, you can find and fill in网站名称/网站LOGO/备案号码/版权信息Global website information. This information is often found in the footer.
    • Tip:If you have other general text that you want to display in the footer but is not a contact method (such as company mission, slogan, etc.), you can add it through the "Custom Settings Parameters". For example, you can add one namedCompanyMissionThe parameter, and fill in your company's mission statement in the parameter value.

  2. Contact Information Settings:

    • Navigate to:后台设置-联系方式设置.
    • 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 Setting Parameters" at the bottom of the page to add them. For example, you can add aWhatsAppLink[The parameter, and fill in your WhatsApp contact link. This will greatly enhance the footer's customization without modifying any code.]

  3. [Friend link management:]

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

Completed these backend configurations, all the necessary data for your footer are ready, and can be called at any time in the frontend.

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

AnQiCMS template design follows the principle of convention over configuration. At the root directory of the template/templatethere, there will usually be a theme folder of yours (for exampledefaultYou can create one inside this topic folder.partialCreate a directory (if it does not exist), and then create a new one namedfooter.htmlThis file will contain all the common code and dynamic information for all footers.

Openpartial/footer.htmlYou can use the template tags provided by AnQiCMS to dynamically retrieve 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 -%} 从友情