How to display the detailed content page of articles or products?

In AnQi CMS, the display of article or product detailed content pages is the core link of website content operation.A well-designed, comprehensive detail page that not only effectively conveys content value but also enhances user experience and search engine optimization.The Anqi CMS provides a powerful and flexible toolkit that allows us to easily achieve these goals.

The cornerstone of content: content model and template files

In AnQi CMS, all articles and products are uniformly regarded as "content" (archive). They can display different forms, such as a news article and a product detail, thanks to the flexibleContent modelFunction. We can customize content models according to business needs, configuring exclusive fields for different types of content (such as "article model" or "product model"), for example, articles may have "author" or "publish date", while products have "price" or "inventory" and so on.These custom fields are the source of personalized information displayed on the detail page.

After the content is created and published in the background, how to present it to the user on the front-end depends onTemplate Filesdecides. The template system of Anqi CMS adopts a syntax similar to the Django template engine, using.htmlAs a template file suffix. For detailed content pages of articles or products, it is usually used{模型table}/detail.htmlsuch naming conventions. For example, if your content model is "article" (usually corresponding toarticleThe table, then the default detail page template file isarticle/detail.html. If you want a specific article or product to use a unique layout, you can also specify a custom template file for it in the background, for examplearticle/your-special-story.htmlAs long as this file exists, the system will prioritize it.

Core feature: clever applicationarchiveDetailTag

To dynamically display content data on the detail page, we need to rely on Anqi CMS.Template TagAmong the most crucial isarchiveDetailThis tag is the key to obtaining all the details of the current article or product

We can use it in many waysarchiveDetailTags:

• Directly access the current page field:In any article or product detail page, you can directly use{{archive.文档字段}}to call the various information of the current content. For example, to display the title, directly{{archive.Title}}Just do it.
• to specify the field to obtain:If you want to get a field more explicitly, you can use{% archiveDetail with name="字段名称" %}. For example, get the title of the current content:{% archiveDetail with name="Title" %}.
• Display rich text content safely:For rich text content such as article or product descriptions that may contain HTML tags (Contentfield), we must use|safeFilter, for example{{archive.Content|safe}}This ensures that the HTML content is correctly parsed and rendered, rather than being displayed as plain text.If your content is in Markdown format, Anqi CMS can also automatically render it, and it can also berender=trueparameters for manual control, for example{{archive.Content|render|safe}}.
• images and multimedia:The detail page often needs to display images.archiveDetailIt is convenient to get thumbnails (Thumb) and cover main image (Logo) even a set of images (Images, and needs to be accessed byforLoop through and display).
• Custom field display:For various custom fields defined in your content model (such as "Product Model", "Author"), you can usearchiveParamsLabel to retrieve and display. You can iterate over all custom parameters to display uniformly, or directly through{% archiveDetail with name="您的自定义字段名" %}to retrieve the value of a specific field.

For example, a typical article detail page may look like this:

<article>
    <h1>{% archiveDetail with name="Title" %}</h1>
    <div class="meta-info">
        <span>发布时间：{{ stampToDate(archive.CreatedTime, "2006-01-02") }}</span>
        <span>浏览量：{% archiveDetail with name="Views" %}</span>
        <a href="{% categoryDetail with name='Link' %}">分类：{% categoryDetail with name='Title' %}</a>
    </div>
    <div class="content">
        {% archiveDetail articleContent with name="Content" render=true %}{{ articleContent|safe }}
    </div>
    {% if archive.自定义字段名 %}
    <div class="custom-field">
        自定义信息：{% archiveDetail with name="自定义字段名" %}
    </div>
    {% endif %}
</article>

Enhancing user experience: the details are exquisite

An excellent detail page is not just a pile of content, it also needs to consider the user's browsing experience and information acquisition efficiency. Anqi CMS provides various auxiliary tags to enrich the functionality of detail pages:

• Clear navigation path: breadcrumbs(breadcrumbTag) By using breadcrumb navigation, users can clearly understand the position of the current page in the website structure, making it convenient to backtrack. In the template, use{% breadcrumb crumbs %}It can be generated.
• Linked: previous and next articles.(prevArchiveandnextArchiveTag) Add "Previous" and "Next" links at the bottom of articles or product details to effectively guide users to continue browsing related content and extend their stay time.
• Smart recommendation: related content(archiveListtags, with the help oftype="related") Based on the content of the current detail page (such as same category, same keywords), intelligent recommendations for related articles or products can improve the discovery rate and user stickiness.
• Interactive feedback: Comment system(commentListLabel) If your website allows users to comment, you can integrate a comment list and comment form at the bottom of the detail page to enhance user engagement.The comment submission and like function both provide the corresponding API interface.
• Optimize visibility: TDK settings(tdkLabel) Although most of the TDK (title, keywords, description) of the detail page have been set when the content was published, but the template tagtdkcan be on the pageheadEnsure that these key SEO information is correctly output, for example:

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

URL structure and SEO: The power of pseudo-statics

The URL structure of the detail page is crucial for search engine optimization (SEO). Anqi CMS supports powerfulStatic rulesCustomization, we can configure the URL of the article or product detail page to display in a friendly and meaningful way, rather than with long dynamic parameters. For example,/article?id=123Optimize to `/article/my-great-