As an experienced website operations expert, I fully understand the importance of efficient communication between websites and users.In today's digital age, WeChat, as an important social tool, has become an indispensable part of enterprises attracting attention, providing services, and accumulating users through its QR code.For operators using the AnQiCMS (AnQi Content Management System), how to skillfully embed WeChat QR code pictures on the website to maintain the professional image of the website while conveniently allowing users to scan and follow, is the key to improving user experience and conversion rate.
AnQiCMS with its efficient, customizable, and scalable features based on the Go language, aims to provide a lightweight and powerful content management platform for small and medium-sized enterprises and content operation teams.It focuses on SEO-friendly system design and ease of operation, allowing even non-technical operation personnel to get started easily.Today, I will guide you to deeply understand the contact label of AnQiCMS, and teach you step by step how to elegantly display your WeChat QR code picture on the website.
Step 1: Upload your WeChat QR code image to the AnQiCMS media library
Before we begin, please make sure you have a clear, appropriately sized WeChat official account or personal WeChat QR code image. This image will be the foundation of our operation.
AnQiCMS provides a convenient "image resource management" feature, allowing you to centrally manage all the images and video resources on your website. To upload your WeChat QR code image, you need to log in to the AnQiCMS backend, and then navigate to"Page Resources", select“Image Resource Management”. Here, you can easily upload your QR code image, and you can classify the image for later search and management.After uploading, the system will generate a unique access address for your image, which is crucial for our subsequent operations.
The second step: Configure the WeChat QR code information in the AnQiCMS background
The "Contact Information Settings" of AnQiCMS is the center for managing the website's external contact information.It not only includes common information such as contacts, phone numbers, and addresses, but also specially reserves a setting entry for the WeChat QR code.
After uploading the image, please return to the main interface of the background, click“Background Settings”and then selectthe "Contact Information Settings". You will see a series of default contact information fields. Scroll down to findWeChat QR CodeThis item. Click the corresponding edit button or selection box, and you will see a media library selector.Here, you can select your WeChat QR code image from the just uploaded image resources.After saving the settings, AnQiCMS has already associated your WeChat QR code image address with the background "WeChat QR Code" field.
It should be noted that AnQiCMS allows you to add additional contact information fields through 'custom settings parameters'.If you have multiple WeChat QR codes (such as public account QR codes and customer service WeChat QR codes), you can use this feature to add new custom fields, such as naming it 'Customer Service WeChat QR code', then upload and associate another image.But for this tutorial, we mainly focus on the default 'WeChat QR code' field.
Step 3: Use the "Contact Information Tag" to embed the WeChat QR code in the website template
AnQiCMS's template system is flexible and powerful, it draws on the syntax of the Django template engine, separating content from display, making it intuitive and efficient to adjust the layout and content display of the website. For our need to insert a WeChat QR code, AnQiCMS provides a namedcontactThe dedicated template tag, it can easily obtain all the information configured in the background "Contact Information Settings".
To display WeChat QR code images on the front end of a website, you need to edit the website template files. AnQiCMS template files are usually stored in/templateThe folder and named with.htmlas a suffix. For example, you may want to display a QR code in the footer of the website (footer.html) or on the "Contact Us" page (contact.htmlorpage/detail.html).
Open the template file you need to modify, then find the location where you want to display the QR code. Use the following tag to retrieve and display your WeChat QR code image:
<img src="{% contact with name="Qrcode" %}" alt="请扫描我们的微信二维码" />
The meaning of this code is:
<img>The standard HTML image tag.src="... "Specify the image source address.{% contact with name="Qrcode" %}This is an AnQiCMS template tag, it will extract from the background "Contact Information Settings".nameThe field value for "Qrcode", which is the WeChat QR code image URL we previously configured, and use it assrcthe value of the attribute.alt="请扫描我们的微信二维码"Provide alternative text for images, which is friendly to visually impaired users and also helps search engines understand image content, improving SEO effects.
If you want to assign the image URL to a variable and then perform more complex operations, you can also write it like this:
{% contact wechatQrcodeUrl with name="Qrcode" %}
{% if wechatQrcodeUrl %}
<img src="{{ wechatQrcodeUrl }}" alt="请扫描我们的微信二维码，了解更多" style="width: 150px; height: 150px;" />
{% endif %}
Here, we first assign the obtained QR code URL towechatQrcodeUrlthe variable, then through{% if %}Determine whether the variable exists (i.e., whether the QR code is configured on the backend), and then embed it last<img>Label. We can also pass it directly here.styleOr a CSS file from outside to adjust the image size and style.
Step 4: Save and preview your website.
After modifying the template file, save the file. If your AnQiCMS has enabled caching, you may need to access the background through the“Update Cache”The function clears old cache to ensure new changes take effect immediately.
Now, open your website's front-end page, navigate to the location where you modified the template. You should be able to see your WeChat QR code image successfully displayed on the website!
Operation tips: Improve the effect of WeChat QR code
- Clear guidance languagePut clear text such as 'Scan and follow our WeChat official account' or 'Add customer service WeChat for exclusive service' next to the QR code to guide users to the next step.
- The appropriate locationBesides the footer and contact us page, it can also be considered to display the QR code at the side bar, the end of the article, or in a pop-up window at the right time, but it should avoid interfering with the user's reading.
- Responsive DesignEnsure that the QR code image is clearly displayed on different devices (PC, mobile, tablet) and automatically adjusts the size according to the screen size.AnQiCMS supports adaptive, code adaptation, PC + mobile independent site modes, and you can adjust according to your template type.
- Regular updatesIf your WeChat QR code changes, remember to update the image and settings in the AnQiCMS backend in time.
By using AnQiCMS's powerful features and simple operation, you can easily integrate WeChat QR codes into your website, providing your users with a more convenient interactive channel to help with your content operation and business development.
Frequently Asked Questions (FAQ)
1. How can AnQiCMS implement adding multiple WeChat QR codes (such as official accounts and customer service)?
AnQiCMS provides a "Contact Settings" by default which includes a "WeChat QR code" field. If you need more, you can access the "Contact Settings" page at the bottom."Custom Setting Parameters"To implement the function. Click "Add Custom Parameter" to create a new parameter, such as entering the parameter nameCustomerServiceWechatQrcode(Customer WeChat QR code)，“parameter value”upload another QR code image and add remarks. After that, you can use{% contact with name="CustomerServiceWechatQrcode" %}this tag to call it.
2. My WeChat QR code image has been uploaded and configured, the template code has also been added, but why is it not displayed on the website?
First, make sure you have alreadySaved the contact information settings in the backgroundNext, check if youCleared the cache of AnQiCMSYou can find the "Update Cache" feature in the left navigation bar of the background. Again, check yourtemplate file is uploaded correctly and is effective.Finally, confirm whether your QR code image file isaccessible normallyYou can directly enter the image URL in the browser to verify. If the image path or file is damaged, it may also cause the image to not display.
How to adjust the size and style of the WeChat QR code image?
The size and style of the WeChat QR code image on the website are mainly controlled by standard HTML and CSS. Insert into the template<img>After the tag, you can adjust it in the following ways:
- Inline styles: Directly in
<img>Used in tagsstyleproperties, such as<img src="..." style="width: 150px; height: 150px;" />. - CSS class: for
<img>Add a CSS class to the tag, for example<img src="..." class="wechat-qrcode" />And then define the style of this class in your CSS file, for example.wechat-qrcode { width: 150px; height: auto; display: block; margin: 0 auto; }This method is recommended because it can better manage styles. - The static resources of AnQiCMS templates (such as CSS files) are usually stored in
/public/static/Under the directory, you can find and modify your stylesheet.