In the template design of AnQi CMS, dynamically displaying the document title of the current page is a basic and important feature.It not only concerns the intuitive perception of users while browsing the website, but is also an indispensable part of search engine optimization (SEO) strategy.The autoCMS provides a simple and efficient way to meet this requirement, let's explore how to flexibly use it in templates.
Understanding the template context of AnQiCMS
In the template rendering mechanism of AnQi CMS, the system will intelligently provide the relevant data context for each page.This means that when you visit a document detail page, all the information of the document (including title, content, categories, etc.) will be encapsulated in a specific variable and can be used directly in the template.
The most direct way to get the document title
For the document detail page, Anqi CMS usually maps all the data of the current document to a name ofarchiveThe template variable on it. Therefore, the most direct and most commonly used method to dynamically display the current document's title is to use it directly in the template.{{ archive.Title }}.
For example, if you want to display a large title (usually) at the top of the document content<h1>label), you can write it like this:
<h1>{{ archive.Title }}</h1>
Here are thearchiverepresents the document object of the current page,TitleThe title field of the document object. This method is concise and clear, and is the preferred method for handling the document title of the current page.
UsearchiveDetailTag to get the document title
Besides directly accessing the context variablearchiveEnglisharchiveDetailEnglish{{ archive.Title }}It is very convenient, but in certain scenarios, such as when you need more fine-grained control, or to obtain the title of a specific document that is not on the current page,archiveDetaillabels are particularly useful.
Get the current page document title:
When you are usingarchiveDetailthe label in the document detail page, if the parameter is omittedidortokenit will default to getting the document information of the current page. To get the title, you can specifyname="Title":
<p>当前文档标题：{% archiveDetail with name="Title" %}</p>
Get the title of the specified document:
If you need to display the title of a specific document on other types of pages (such as the homepage, category list page), you can specify the document throughidortokenthe parameter:
<p>ID为1的文档标题：{% archiveDetail with name="Title" id="1" %}</p>
Of course, you can also assign the obtained title to a custom variable so that it can be used multiple times in the template or further processed:
{% archiveDetail myDocTitle with name="Title" %}
<p>我的自定义标题变量：{{ myDocTitle }}</p>
In<title>the label usetdkOptimize page title with tags
of the page<title>Labels are the first window through which search engines and users understand the theme of a page. Anqi CMS providestdkLabels, it can not only dynamically obtain the title of the current page, but also flexibly combine the website name and custom separator to achieve better SEO effect and user experience.
English, usually, you will find the template's<head>template usetdktag to build the complete page title:
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
<!-- 其他 meta 标签或 CSS 链接 -->
</head>
Here:
name="Title"indicatetdktag to get the document title of the current page.siteName=trueThe website name will be automatically appended after the document title (configured in the backend system settings).sep=" - "Then defines the separator between the document title and the website name, you can set it to other characters as needed, such as_or|.
Passtdktags, you can ensure that each page has<title>Contains the core document title, while also considering brand recognition and SEO requirements. If the current document is set to 'SEO Title',tdkThe tag will prioritize the use of this custom SEO title to provide stronger SEO optimization capabilities.
Comprehensive use: Display the document title correctly on the page.
In practical website design, we usually combine these methods to ensure that the page title is displayed properly in different positions.
An example of a typical page structure may look like this:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>{% tdk with name="Title" siteName=true sep=" - " %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
<!-- 引入样式文件 -->
<link rel="stylesheet" href="{% system with name="TemplateUrl" %}/css/style.css">
</head>
<body>
<!-- 网站顶部导航和Logo等内容 -->
<header>
<a href="{% system with name="BaseUrl" %}">
<img src="{% system with name="SiteLogo" %}" alt="{% system with name="SiteName" %}">
</a>
<!-- 其他导航链接 -->
</header>
<main>
<section class="document-detail">
<!-- 当前页面的文档大标题 -->
<h1>{{ archive.Title }}</h1>
<!-- 文档的其他元信息，如发布时间、分类等 -->
<div class="meta-info">
<span>发布于：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
<span>分类：<a href="{% categoryDetail with name="Link" id=archive.CategoryId %}">{% categoryDetail with name="Title" id=archive.CategoryId %}</a></span>
</div>
<!-- 文档内容，通常需要 |safe 过滤器以防止HTML被转义 -->
<div class="content">
{{ archive.Content|safe }}
</div>
</section>
</main>
<!-- 网站底部信息 -->
<footer>
<p>{% system with name="SiteCopyright" %}</p>
<a href="https://beian.miit.gov.cn/" target="_blank">{% system with name="SiteIcp" %}</a>
</footer>
</body>
</html>
In this example, we usetdkThe tag represents the entire HTML document:<title>Elements dynamically generate titles, and at the same time, they are displayed in the page content area through{{ archive.Title }}To display the H1 large title of the document. This method meets the SEO requirements and also provides a clear page structure for users.
By using the above method, you can easily dynamically display the document title of the current page in the Anqie CMS template, thus building a more attractive and SEO-friendly website.The strength and flexibility of AnQi CMS are manifested in these seemingly minor but crucial functional implementations.
Common Questions (FAQ)
1. Why use it on a certain page{{ archive.Title }}却不显示任何内容？
Answer:This is usually because the page you are visiting is not the document detail page, or the current page context has not mapped the document information toarchivefilter to the variable.archiveThe variable is mainly available on the document detail page (such as articles, product detail pages). If you try to use it directly on other types of pages (such as the homepage, category list page, single page){{ archive.Title }}，it may be empty. On these pages, you may need to usearchiveListtags to loop through the document list, or usepageDetail/categoryDetailtags to get the title of the page or category.
2. I want the page onH1Title and the title displayed in the browser tab (<title>) are different, can AnQi CMS achieve this?
Answer:Yes, this can be fully achieved. The title displayed in the browser tab (<title>) is usually determined bytdkLabel generation, it can optionally use the document's 'SEO title' (if set) or the default title, and concatenate the website name. And the page content containsH1the title can be used directly{{ archive.Title }}To display the original document title, or if you set the 'SEO title' when 'publishing documents' in the background and wantH1Also use this SEO title, then on the document detail page,{{ archive.SeoTitle }}you can also get it. In this way, you can optimize the title display for SEO and user experience separately.
3. In addition to the document title, I can also get the information of the document through variables.archiveWhat information can I get from the variables?
Answer: archiveThe variable is an object that contains all the information of the current document. In addition toTitle(Title), you can also get many other useful fields, such as:archive.Content(Document content),archive.Description(Document introduction),archive.Keywords(Keywords)、archive.CreatedTime(publish time),archive.Views（Views）、archive.Link(Document Link)、archive.Thumb(Thumbnail) etc. Specific available field names can be found intag-/anqiapi-archive/142.htmlthe document.nameThe list of available fields.