How to retrieve and display the global configuration and SEO information of the website using `system`, `contact`, and `tdk` tags?

In the daily operation of AnQiCMS (AnQiCMS), accurately displaying global configuration information, contact information, and carefully optimized SEO elements on the website front-end is the key to improving user experience and search engine visibility.Luckily, AnQiCMS provides several intuitive and powerful template tags that allow users to easily access these important data.This article will delve intosystem/contactandtdkThese three core tags help you seamlessly integrate the background configuration into various pages of the website.

Get the global configuration of the website:systemThe application of tags

When you need to display global information such as the brand name, Logo, filing number, or core address of the website,systemThe tag is your helpful assistant. This tag can directly read the preset values from the "Global Function Settings" of AnQiCMS backend and display them on the website front end.

To usesystemLabel, you usually specify the name of the configuration item you want to retrieve. For example, to display the name of the website, you can use it like this:

<div>网站名称：{% system with name="SiteName" %}</div>

If you want to display the website's logo image, make sure it links to the homepage, and has good SEO practices (alt attribute), you can write it like this:

<a href="{% system with name="BaseUrl" %}">
    <img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}" />
</a>

Here we have simultaneously calledSiteLogoto obtain the address of the Logo image,SiteNameobtain the website name as the alt text of the image, as well asBaseUrlobtain the address of the website's homepage.

In addition, like the record number,SiteIcp), copyright information (SiteCopyright）、Template Static Files Address（TemplateUrlused to load CSS or JS files), even parameters customized in the background, can be retrieved in a similar way. For example, if you customize a parameter named "HelpUrl" to store the link to the help page, you can call it in this way:

<a href="{% system with name="HelpUrl" %}" target="_blank">帮助中心</a>

By this means, you can ensure that all pages use the latest global configuration information uniformly, without modifying the template code, which greatly improves the maintainability of the website.

Display the company's contact information:contactUsage of tags

Clear and convenient contact information is the bridge to establish trust and communication with users. AnQiCMS'scontactThe label is used to retrieve and display all the information in the "Contact Settings" of the backend. Whether it's phone, email, address, or various social media links, it can easily handle it.

Assuming you want to display the company's contact phone number and email on the footer of the website or the 'Contact Us' page, you can call it like this:

<div>
    <p>联系电话：{% contact with name="Cellphone" %}</p>
    <p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
</div>

If you have set up a WeChat QR code in the backgroundQrcodeAnd hope to display on the front end so that users can scan and add, it can be implemented in this way:

<div>
    <img src="{% contact with name="Qrcode" %}" alt="微信二维码" />
    <p>微信号：{% contact with name="Wechat" %}</p>
</div>

For social media platforms such as Facebook or LinkedIn, if the backend is configured, you can also access it byname="Facebook"orname="Linkedin"in such a way. Similarly,contactTags also support calling the contact information parameters customized in the background, which provides great flexibility to meet specific display requirements.

Optimize page SEO:tdkThe essence of the tag

TDK (Title, Description, Keywords) is the foundation of website SEO, directly affecting the display effect and ranking of the page in search engine results. AnQiCMS'stdkTags are born for this, they can intelligently obtain the SEO title, keywords, description, and canonical URL of the current page.

On each page's<head>area, you will usually see such TDK settings:

<title>{% tdk with name="Title" %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">

tdkThe strength of the tag lies in its intelligence. It automatically retrieves the corresponding TDK information based on the type of the current page (home page, article detail page, category list page, etc.).For example, on the article detail page, it will display the unique SEO title, keywords, and description of the article;On the category list page, it displays the TDK of the category.

For page titlesTitle,tdkThe tag also provides several practical attributes to further control its display style:

• siteName=trueThe website name will be automatically appended to the page title. For example, if the page title is "About Us", and the website name is "AnQi CMS", the final displayed title may be "About Us - AnQi CMS".
• sep="_"Allow you to customize the separator between the page title and the website name, the default is a hyphen-.
• showParent=trueIn category or article pages, if the content has a parent category, this attribute can determine whether the title of the parent category is displayed in the title. For websites with a deep hierarchy, this helps to improve the descriptiveness of the title.

For example, a title that displays the parent category title and uses an underscore as a separator:

<title>{% tdk with name="Title" siteName=true sep="_" showParent=true %}</title>

Furthermore,tdkThe tag can also obtain the page's canonical URL, which is crucial for avoiding duplicate content and concentrating page authority:

{%- tdk canonical with name="CanonicalUrl" %}
{%- if canonical %}
<link rel="canonical" href="{{canonical}}" />
{%- endif %}

Ensure that a conditional judgment is made only when the standard link exists and output is produced<link rel="canonical">Tag, this is a robust practice

Summary

system/contactandtdkThese tags are the foundation of AnQiCMS template development, they tightly connect the global configuration, contact information, and SEO metadata of the website with the front-end display.By flexibly using these tags, you can build a highly consistent, easy-to-manage, and search engine-friendly website, thus better serving your users and achieving operational goals.Understanding and mastering them will make your AnQiCMS website operation twice as efficient.

Frequently Asked Questions (FAQ)

1. If a certain setting is not set on the back-endsystemorcontactWhat is the value of the field, which will be displayed when the front-end is called?Answer: If the backend has not set up for somesystemorcontactField setting value, when the front-end calls this label, it usually returns an empty string.This means that no content will be displayed at this location on your website, so you can judge these null values as needed when designing the template, or set default placeholder text.

2.tdkThe TDK information obtained by the tag is for the entire website or for the current page?Answer:tdkThe intelligence of the tag lies in the fact that it iscontext-awareThis means that it will automatically obtain and display the corresponding TDK information based on the type of page being accessed (such as the homepage, article detail page, category list page, single page, etc.).For example, it will display the content you configured in the "Home Page TDK Settings" in the background on the homepage;On the article detail page, it will display the TDK independently set for the article.This design greatly simplifies SEO management, ensuring that each page has its own unique optimization information.

3. Can I call information from different sites (multi-site functionality) in the same template file?systemorcontact?Answer: Yes. The multi-site function of AnQiCMS is very powerful, in order to support cross-site data calls,system/contactandtdktags support onesiteIdparameter. You can usesiteId="X"(Where X is the ID of the target site) to specify which site's configuration information to retrieve.This is very useful for building a multistorey network that shares some global information, such as unified copyright information or the contact details of the headquarters.