How to get and display the detailed content of the current article in AnQiCMS template?

Build a content-rich website, the article detail page is undoubtedly the core.It carries the most specific and valuable information of the website, and it is also one of the pages where users stay the longest and interact the most.In AnQiCMS (AnQi CMS), with its flexible template engine and rich tag system, we can easily obtain and elegantly display the detailed content of the current article.

AnQiCMS's template system is designed to be simple and efficient, similar to Django template syntax, using double curly braces{{变量}}Get variable value, single curly braces followed by a percentage sign{% 标签 %}Invoke feature tags. This allows developers who are not familiar with the Go language to quickly get started with template customization.

Core tags:archiveDetailDetails

To get the detailed content of the current article on the article detail page, the most core tag isarchiveDetailIt is named accordingly, it is specifically used to obtain the detailed information of a single 'archive' (i.e., article or product, etc.).

When we visit a detailed article page, AnQiCMS will automatically identify the article ID of the current page and provide all the data of the article. Usually, you do not need to make any additional configuration and use it directlyarchiveDetailLabel, you can get the article data of the current page.

archiveDetailThe basic usage of tags is{% archiveDetail with name="字段名称" %}. Among themnameThe parameter specifies a specific field of the article you want to retrieve.

The following are some common article fields and their retrieval methods:

  • Article title (Title)： To display the article title, you can use{% archiveDetail with name="Title" %}。This will directly output the current article title.
  • Article summary (Description)： Article summaries are typically used for abstracts or SEO descriptions, and the retrieval method is{% archiveDetail with name="Description" %}.
  • Article body (Content)This is the core content of the article.Since the article body may contain HTML tags or Markdown syntax, special attention is needed when displaying in the template.|safeA filter to ensure that HTML tags are parsed correctly and not displayed as plain text. For example：{{ archiveDetail with name="Content" | safe }}If your article content is written using the Markdown editor, AnQiCMS providesrender=truethe parameters automatically convert Markdown to HTML:{% archiveDetail with name="Content" render=true | safe %}Moreover, if you need to implement lazy loading for images in the text, you can also specify the image parameters throughlazy="data-src"such assrcthe alternative name of the property to work with the front-end lazy loading script.
  • Publish time (CreatedTime) and update time (UpdatedTime)： These time fields are usually stored in timestamp format. AnQiCMS providesstampToDateAn auxiliary function to format timestamps into readable date strings. For example, display the release date in the format “2006-01-02”:{{ stampToDate(archiveDetail with name="CreatedTime"), "2006-01-02") }}.
  • Cover image (Logo,Thumb,Images):Logo通常指文章主图或大图，Thumb是缩略图。它们可以直接通过<img>标签引用：<img src="{% archiveDetail with name="Logo" %}" alt="{% archiveDetail with name="Title" %}" />。 如果文章包含多张封面图片（如产品图集），ImagesField will return an array of image URLs. At this time, you need to usefora loop to iterate over and display these images:
    
{% archiveDetail articleImages with name="Images" %}
<div class="image-gallery">
    {% for imgUrl in articleImages %}
    <img src="{{ imgUrl }}" alt="图片描述" />
    {% endfor %}
</div>
{% endarchiveDetail %}
  • Category (Category): Category information of the article can be obtained througharchiveDetailto directly get its category ID, then combinecategoryDetailLabel acquisition of category name and link:
    
{% set categoryId = archiveDetail with name="CategoryId" %}
<a href="{% categoryDetail with name='Link' id=categoryId %}">
    {% categoryDetail with name='Title' id=categoryId %}
</a>
    Or use it directly{{archive.Category.Title}}to access.
  • Views (Views): Simply display the number of times the article has been viewed:{% archiveDetail with name="Views" %}.
  • Custom fields： AnQiCMS supports adding custom fields for different content models (such as articles, products). If you have added custom fields like 'author' and 'source' for the article model in the backend, you can access them in two ways:
    1. Directly access a single field:{% archiveDetail with name="author" %}.
    2. Loop through all custom fields.: UsearchiveParamsTag. This is very useful when it is necessary to dynamically display all additional properties:
      
{% archiveParams params %}
<ul class="article-meta">
    {% for item in params %}
    <li><span>{{ item.Name }}：</span>{{ item.Value }}</li>
    {% endfor %}
</ul>
{% endarchiveParams %}

Actual application example: Build an article detail page

Summarizing the above tags, a typical article detail page template may look like this, showing the title, category, publish time, tags, view count, and body of the article:

<article class="article-detail">
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1>
    <div class="article-meta-info">
        {# 获取文章分类信息 #}
        {% set categoryId = archiveDetail with name="CategoryId" %}
        <span class="category-link">
            分类：<a href="{% categoryDetail with name='Link' id=categoryId %}">{% categoryDetail with name='Title' id=categoryId %}</a>
        </span>
        {# 格式化显示发布时间 #}
        <span class="publish-date">发布于：{{ stampToDate(archiveDetail with name="CreatedTime"), "2006-01-02") }}</span>
        {# 显示文章浏览量 #}
        <span class="views-count">阅读：{% archiveDetail with name="Views" %}次</span>
        {# 获取并显示文章标签 #}
        <div class="article-tags">
            标签：
            {% tagList tags with itemId=archive.Id limit="5" %}
            {% for tag in tags %}
            <a href="{{ tag.Link }}">{{ tag.Title }}</a>
            {% endfor %}
            {% endtagList %}
        </div>
    </div>

    {# 显示文章主图，如果存在的话 #}
    {% set articleLogo = archiveDetail with name="Logo" %}
    {% if articleLogo %}
    <div class="article-thumbnail">
        <img src="{{ articleLogo }}" alt="{% archiveDetail with name='Title' %}" />
    </div>
    {% endif %}

    <div class="article-content">
        {# 显示文章正文，如果为Markdown则渲染，并确保HTML安全解析 #}
        {% archiveDetail articleContent with name="Content" render=true %}
        {{ articleContent | safe }}
        {% endarchiveDetail %}
    </div>

    {# 显示上一篇和下一篇文章链接 #}
    <div class="article-navigation">
        <div class="prev-article">
            {% prevArchive prev %}
            上一篇：{% if prev %}<a href="{{ prev.Link }}">{{ prev.Title }}</a>{% else %}没有了{% endif %}
            {% endprevArchive %}
        </div>
        <div class="next-article">
            {% nextArchive next %}
            下一篇：{% if next %}<a href="{{ next.Link }}">{{ next.Title }}</a>{% else %}没有了{% endif %}
            {% endnextArchive %}
        </div>
    </div>
</article>

This code demonstrates how to combine multiple tags to build a relatively complete article detail page.

Advanced Techniques and Precautions

  • Get specific article detailsAlthougharchiveDetail默认获取当前页面的文章，但你也可以通过idortoken参数来指定获取其他文章的详情。例如：{% archiveDetail with name="Title" id="123" %}将获取ID为123的文章标题。
  • 调试变量In the process of template development, if the structure of a variable is uncertain, you can use|dumpThe filter to print its detailed structure, which is very helpful for debugging:{{ archive|dump }}.
  • SEO optimization：Article detail page TDK (Title, Description, Keywords) can be obtained throughtdktags,archiveDetailTagsSeoTitle/Keywords/DescriptionThe field directly corresponds to the article's own SEO settings. In addition, standard links (CanonicalUrl) are also an important part of SEO, which can be retrieved and applied by{% tdk with name="CanonicalUrl" %}.

Through these tags and techniques, AnQiCMS users can flexibly and efficiently obtain and display detailed content in templates, meeting diverse website content display needs.

Common Questions (FAQ)

  1. How to display an article?