How to get and display the detailed information of a single article in AnQiCMS?

Manage and display content in AnQiCMS is one of its core functions.When you need to present detailed content of a specific article to visitors, it is crucial to understand how to accurately retrieve and display this information in the template.AnQiCMS provides a straightforward and powerful template tag system that allows you to flexibly control the layout and content of the article detail page.

Overview of AnQiCMS template system

AnQiCMS's template uses syntax similar to the Django template engine. In the template files, you will encounter two main tags:

• Double curly braces{{ 变量 }}: is used to output the value of a variable.
• Single curly braces and percentage signs{% 标签 %}English for controlling the logic flow (such as conditional judgments, loops) or calling specific function tags.

通常，单篇文章的详情页模板文件会遵循一定的命名约定，比如存放在English{模型table}/detail.htmlSuch a path. For example, if your article belongs to the "Article Model", then the detail page template may bearticle/detail.html.

Get the core information of a single article:archiveDetailtags

To get and display the detailed information of a single article, AnQiCMS provides a specialarchiveDetailtag. This tag is the basis for building the article detail page.

archiveDetailbasic usage

When you use the template on the article detail pagearchiveDetailtags, it will default to retrieving the article data of the current page. You just need to specify the name of the field you want to retrieve.

For example, to display the article title, you can write it like this:

<h1>{% archiveDetail with name="Title" %}</h1>

Here,name="Title"Tell the system the title of the article you want to retrieve. Similarly, you can retrieve other commonly used fields:

• Article content (Content)The main content of the article, usually containing HTML format. To ensure that the HTML content is rendered correctly rather than displayed as plain text, you need to use|safeFilter. If the article content uses the Markdown editor in the background, AnQiCMS will also automatically render it as HTML, but you can also throughrender=trueParameter forced rendering, orrender=falseto cancel rendering.

  
  <div>{% archiveDetail archiveContent with name="Content" %}{{ archiveContent|safe }}</div>
  

• Article description (Description): Usually the summary or introduction of the article.

  
  <p>{% archiveDetail with name="Description" %}</p>
  

• Article link (Link)：Article access address.

  
  <a href="{% archiveDetail with name="Link" %}">查看原文</a>
  

• Article thumbnail (LogoorThumb)：The cover image or thumbnail of the article.

  
  <img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />
  

• Publish time (CreatedTime)：AnQiCMS stores timestamps, you need to usestampToDatea function to format them into a readable date and time.

  
  <span>发布日期：{{ stampToDate(archive.CreatedTime, "2006-01-02 15:04") }}</span>
  

• Views (Views)：The number of times the article has been accessed.

  
  <span>阅读量：{% archiveDetail with name="Views" %}</span>
  

• 文章ID (Id) And Category ID (CategoryId)These are the unique identifiers for the articles and categories, often used to further obtain related information.

  
  <span>文章ID：{% archiveDetail with name="Id" %}</span>
  

Specify a specific article

If you are not on the article detail page, or need to obtain detailed information about other articles, you canidortokenParameters to specify:

{# 获取ID为10的文章标题 #}
<h2>{% archiveDetail with name="Title" id="10" %}</h2>
{# 获取URL别名为"my-first-article"的文章内容 #}
<div>{% archiveDetail with name="Content" token="my-first-article" %}{{archiveContent|safe}}</div>

Deeply obtain the related information of the article

An article is often not just its own content, but is closely connected with categories, tags, custom properties, and other information.AnQiCMS's template system allows you to easily obtain these associated data.

Obtain the detailed information of the category to which the article belongs

archiveDetailLabels can be obtained althoughCategoryId, but it only provides IDs. To get the category name and link, we need to combinecategoryDetailLabel.

{# 先获取当前文章的完整对象（通常在详情页中，直接用`archive`变量即可，或者通过archiveDetail获取） #}
{% archiveDetail currentArchive with name="Id" %} {# 确保有archive对象，或先获取 #}
<p>所属分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></p>

Here,id=archive.CategoryIdwill pass the current article's category ID tocategoryDetailTags, thus obtaining the name and link of the category.

Get the tag list of the article

If your article has multiple tags, you can usetagListtags to display them.

<div class="article-tags">
    <strong>标签：</strong>
    {% tagList tags with itemId=archive.Id %}
        {% for tag in tags %}
            <a href="{{ tag.Link }}">{{ tag.Title }}</a>
        {% endfor %}
    {% endtagList %}
</div>

itemId=archive.Idparameters to ensuretagListThe tags related to the current article are retrieved.

Display custom parameters of the article

AnQiCMS allows you to add custom fields to the article model. These fields can bearchiveParamsLabel acquisition, also can be accessed directlyarchiveDetaila tag specificationnameParameters can be obtained.

{# 遍历显示所有自定义参数 #}
<div class="article-params">
    {% archiveParams params %}
        {% for item in params %}
            <p>{{ item.Name }}：{{ item.Value }}</p>
        {% endfor %}
    {% endarchiveParams %}
</div>

{# 如果您知道自定义字段的名称，可以直接获取，例如一个名为“author”的字段 #}
<p>作者：{% archiveDetail with name="author" %}</p>

Previous and next articles

At the bottom of the article detail page, links to the 'previous' and 'next' articles are usually displayed to facilitate user browsing.

<div class="navigation-links">
    {% prevArchive prev %}
        {% if prev %}
            <a href="{{ prev.Link }}">上一篇：{{ prev.Title }}</a>
        {% else %}
            <span>上一篇：没有了</span>
        {% endif %}
    {% endprevArchive %}

    {% nextArchive next %}
        {% if next %}
            <a href="{{ next.Link }}">下一篇：{{ next.Title }}</a>
        {% else %}
            <span>下一篇：没有了</span>
        {% endif %}
    {% endnextArchive %}
</div>

Get the page SEO information

Article detail page of<head>The area needs to be set with appropriate SEO titles, keywords, and descriptions.tdkTags can help you dynamically get this information.

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

siteName=trueThe parameter will be appended to the article title automatically, enhancing SEO friendliness.

Comprehensive Example: Build a basic article detail page

Below is an example of an integrated article detail page template for the above functions, which you can adjust and beautify according to your needs:

`twig {% extends ‘base.html’ %} {# Inherit the base template, usually containing common areas such as header and footer #}

{% block head_meta %}

{# 动态设置页面SEO信息 #}
<title>{% tdk with name="Title" siteName=true %}</title>
<meta name="keywords" content="{% tdk with name="Keywords" %}">
<meta name="description" content="{% tdk with name="Description" %}">
{# 规范链接 #}
{% tdk canonical with name="CanonicalUrl" %}
{% if canonical %}<link rel="canonical" href="{{canonical}}" />{% endif %}

{% endblock %}

{% block main_content %} <