How to create a "Contact Us" single page and dynamically embed all contact tags in AnQiCMS?

As an experienced website operations expert, I fully understand the importance of an efficient and easy-to-maintain "Contact Us" page for any corporate website.In such a powerful and flexible content management system as AnQiCMS, creating a page like this and dynamically embedding contact information not only enhances user experience but also greatly simplifies future content update work.Today, let me guide you step by step to achieve this goal.

How to create a "Contact Us" single page and dynamically embed all contact tags in AnQiCMS?

In the digital age, a clear and convenient 'Contact Us' page is the bridge of communication between the website and the user.It not only showcases the professional image of the company, but also serves as the first stop for potential customers to obtain key information.AnQiCMS with its flexible content model and powerful template tag system allows you to easily build a dynamic 'Contact Us' page that is both beautiful and easy to maintain.This article will detail how to use the core functions of AnQiCMS to create a single page integrated with all dynamic contact methods.

Step 1: Centralize your contact information configuration

AnQiCMS provides a centralized area to manage your website contact information, which greatly enhances the maintainability of the content.No matter how your phone number, address, or social media account changes in the future, you do not need to make in-depth code modifications, just update one place in the backend.

1. Enter contact information settings: Log in to your AnQiCMS backend management interface, navigate to the left menu's“Background Settings”and then selectthe "Contact Information Settings".
2. Fill in the default contact information: On this page, you will see a series of preset contact information fields, such as:
   • Contact: Your name or company representative.
   • Contact phone number: Your main contact phone number.
   • Contact address: Your company's detailed address.
   • Contact emailYour business email address.
   • WeChat IDYour WeChat personal account or public account name.
   • WeChat QR codeUpload your WeChat QR code image.
   • including QQ, WhatsApp, Facebook and other commonly used social media contact information. Make sure to fill in this information carefully, as it will be the basis for dynamic display on the front-end page.
3. Custom extended contact informationIf the preset fields do not fully meet your needs, for example, if you need to display a Telegram account or a specific business cooperation link, AnQiCMS also supports it. You can find it at the bottom of the page."Custom Setting Parameters"Region, click 'Add parameter' to create a new field. Just define one"Parameter name"for exampleTelegram), and fill in“Parameter value”(Your Telegram ID or link), add a brief note and you've reserved space for any future contact methods.

Second step: Create a dedicated 'Contact Us' page

Next, we need to create a separate page on the website front-end to carry these contact information. The single-page feature of AnQiCMS is very suitable for this kind of static content page.

1. Manage Page: Click on the left menu in the background management interface"Page Resources"and then select“Page Management”.
2. Add a new single page: Click above the page“Add Single Page”Button, start creating your “Contact Us” page.
3. Fill in the basic information of the page:
   • Page Name: Enter 'Contact Us', 'Contact Us' or any name you wish to display. This will be the text displayed on the page in the website navigation and title.
   • SEO title, keywords, descriptionMake sure to configure the SEO information for this page, which helps search engines better understand and index your contact page, enhancing the chances of users finding you through searches.
   • Custom URL: Set a concise and friendly URL, for example/contactor/about-us/contact. A clear URL is more friendly to users and search engines.
   • Single page contentYou can add some static, non-contact introduction text here, such as the company profile, service philosophy, or precautions that may be needed when contacting us.This content will be displayed together with the contact information tag we will dynamically embed later.
   • Single page templateThis is a critical step! Here, we will specify a dedicated template file for the 'Contact Us' page.Single page templateIn the field, you can enter the path of a custom template, for examplepage/contact.html. This setting tells AnQiCMS that when accessing this single page, it should load the specified template file to render the content.

Step 3: Customize the page template: Dynamically embed contact information

Now it's time to delve into the code level and make your contact information come to life. The template tag system of AnQiCMS makes this process intuitive and efficient.

1. Create or modify the template file:

   • First, use FTP or a file manager to find the template directory you are currently using. It is usually located/template/{您的模板名称}/below.
   • Create a file named in the directory.pageThe folder (if it does not exist).
   • InpageInside the folder, create a new HTML file and name itcontact.html(The name you entered in the second step "Single Page Template").
   • If your website already has a genericpage/detail.htmltemplate, you can choose to copy its content ascontact.htmlThe basis, then make modifications.

2. Use{% contact %}Dynamic embedding of contact information tags: AnQiCMS provides a very convenient template tag for dynamically calling contact information tags:{% contact %}. Through this tag, you can easily access all the contact information configured in the background.

   The following is anpage/contact.htmlexample code of a file that shows how to dynamically embed various contact methods.

   `twig {% extends ‘base.html’ %} {# Inherit your base template, which usually contains header, footer, and other common parts #}

   {% block title %}

   <title>{% tdk with name="Title" siteName=true %}</title> {# 动态获取页面标题，并附加网站名称 #}
   <meta name="keywords" content="{% tdk with name="Keywords" %}">
   <meta name="description" content="{% tdk with name="Description" %}">
   

   {% endblock %}

   {% block content %}

   {# 动态显示页面名称 #}
   <h1 class="page-title">{{ page.Title }}</h1>
   
   {# 调用后台配置的联系方式 #}
   <div class="contact-details">
       {% contact userName with name="UserName" %}
       {% if userName %}
           <p><strong>联系人：</strong>{{ userName }}</p>
       {% endif %}
   
       {% contact cellphone with name="Cellphone" %}
       {% if cellphone %}
           <p><strong>电话：</strong><a href="tel:{{ cellphone }}" rel="nofollow">{{ cellphone }}</a></p>
       {% endif %}
   
       {% contact contactEmail with name="Email" %}
       {% if contactEmail %}
           <p><strong>邮箱：</strong><a href="mailto:{{ contactEmail }}">{{ contactEmail }}</a></p>
       {% endif %}
   
       {% contact address with name="Address" %}
       {% if address %}
           <p><strong>地址：</strong>{{ address }}</p>
       {% endif %}
   
       {% contact wechat with name="Wechat" %}
       {% if wechat %}
           <p><strong>微信：</strong>{{ wechat }}</p>
       {% endif %}
   
       {% contact