AnQiCMS provides powerful and flexible features in content management, especially when building detailed article pages, which can help us efficiently present high-quality content.A well-designed article detail page can not only clearly display the core information of the article, but also effectively improve the user's reading experience and the stickiness of the website through the recommendation of related content.

Article title and core content: the soul of the page

In AnQi CMS, the core of the article detail page is the title and main content. They are the basis for attracting readers and conveying information.

To display the title of an article, the most direct way is to use built-inarchive.Titlevariables. For example, we usually place the title<h1>tags:

<h1>{{archive.Title}}</h1>

and the main content of the article througharchive.ContentShow this. Pay special attention that article content usually contains HTML tags or Markdown syntax, in order to ensure that the browser can correctly parse and render these contents, we need to cooperate with it.safeFilter. If the content is in Markdown format, an additional parameter must be addedrender=trueor|renderFilter to allow the system to convert it to HTML.

<div>
    {{archive.Content|safe}}
</div>

If the content is in Markdown format, you can write it like this:

<div>
    {{archive.Content|render|safe}}
</div>

Or use:archiveDetailTo control the tags more finely:

{% archiveDetail articleContent with name="Content" render=true %}{{articleContent|safe}}{% endarchiveDetail %}

safeThe filter tells the browser that this content is safe to be rendered as HTML directly, rather than as plain text.

Display key information: enrich the context of the page.

In addition to the title and content, the article detail page usually also needs to display a series of auxiliary information to provide a more comprehensive context and improve the user experience.

  • Published time:Display the publication or update time of the article, allowing readers to understand the timeliness of the information. Anqi CMS providesCreatedTimeandUpdatedTimea field, withstampToDatetags can be flexibly formatted to display time:

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

    Here"2006-01-02 15:04"Is the time formatting standard of the Go language, which can be adjusted as needed.

  • Read count:Count and display the number of times an article has been read, which can enhance the attractiveness of the article and show its popularity.

    <span>阅读量：{{archive.Views}} 次</span>

  • Category:Display the category of the article to help readers click and enter the category page to browse more similar articles. We can throughcategoryDetailTags to get category information:

    <span>分类：<a href="{% categoryDetail with name='Link' id=archive.CategoryId %}">{% categoryDetail with name='Title' id=archive.CategoryId %}</a></span>

    Here, we first througharchive.CategoryIdGet the category ID of the article and then usecategoryDetailTags to get the name and link of the category.

  • Article tags (Tags):Adding tags to an article is an important way to organize website content and also helps readers quickly understand the article's theme.tagListTags can be used to list all relevant tags for the current article:

    {% tagList tags with itemId=archive.Id %}
    {% for item in tags %}
        <a href="{{item.Link}}">{{item.Title}}</a>
    {% endfor %}
{% endtagList %}

    itemId=archive.IdMake sure we are getting the tags associated with the current article.

  • Custom field:The powerful content model function of Anqi CMS allows us to add unique custom fields for different types of articles.For example, a product model may require fields such as "pricearchiveParamsTags or go through directlyarchiveDetailTags to retrieve and display:

    {% archiveParams params %}
    {% for item in params %}
        <p>{{item.Name}}：{{item.Value}}</p>
    {% endfor %}
{% endarchiveParams %}

    If only specific custom fields should be displayed, such as namedauthorthe field:

    <p>作者：{% archiveDetail with name="author" %}</p>

Enhancing User Experience: Navigation and Relevance

To facilitate readers in continuing to browse conveniently after reading the current article, providing clear navigation and relevant content is indispensable.

  • Previous/Next:Guide the reader to browse in order, often used in blogs or series articles.prevArchiveandnextArchiveTags can help us achieve this function:

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

  • Recommended articles:Recommend other relevant articles based on the content or category of the article, which can effectively extend the user's stay time on the website.archiveListLabel collaborationtype="related"The parameter can achieve this function:

    <h3>相关文章</h3>
<ul>
{% archiveList archives with type="related" limit="5" %}
    {% for item in archives %}
        <li><a href="{{item.Link}}">{{item.Title}}</a></li>
    {% endfor %}
{% endarchiveList %}
</ul>

    limit="5"Control the number of related articles displayed.

  • Breadcrumbs navigation:Breadcrumb navigation can clearly display the position of an article in the website structure, helping users understand the level of the current page and easily return to the previous level.breadcrumbTags are the tools for implementing it:

    <nav class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        {% if loop.last %}{{item.Name}}{% else %}<a href="{{item.Link}}">{{item.Name}}</a> &gt; {% endif %}
    {% endfor %}
{% endbreadcrumb %}
</nav>

    index="首页"Defined the starting point of navigation,title=truethen make sure that the current article title will be displayed as the last item in the breadcrumb.

SEO optimization: Make the article easier to find

In addition to the page content itself, the page's meta information (Meta Information) is crucial for search engine optimization (SEO). AnQi CMS achieves this bytdkTags provide flexible TDK (Title, Description, Keywords) settings.

  • Page title (<title>):Bytdklabel'sname="Title"Retrieve. We usually append the website name.

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

    siteName=trueAutomatically adds the website name to the end of the article title, enhancing brand exposure.

  • Keywords (<meta name="keywords">):Bytdklabel'sname="Keywords"Retrieve.

    <meta name="keywords" content="{% tdk with name="Keywords" %}">

  • Description (<meta name="description">):Bytdklabel'sname="Description"Retrieve.

    <meta name="description" content="{% tdk with name="Description" %}">

  • Standard link (<link rel="canonical">):For pages where content may appear at multiple URLs, the standard link can specify the preferred version to avoid duplicate content issues.

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

    This judgment ensures that the label is only output when the standard link exists.

An integrated example: a typical article detail template snippet.

The following is a template fragment of an article detail page of an Aqin CMS that combines multiple functions, showing how to combine these elements to build a content-rich and user-friendly page:

`twig

<!-- 面包屑导航 -->
<nav class="breadcrumb">
{% breadcrumb crumbs with index="首页" title=true %}
    {% for item in crumbs %}
        {% if loop.last %}{{item.Name}}{% else %}<a href="{{item.Link}}">{{item.Name}}</a> &gt; {% endif %}
    {% endfor %}
{% endbreadcrumb %}
</nav>

<!-- 文章主标题 -->
<h1>{{archive.Title}}</h1>

<!-- 文章元信息：发布时间、分类、阅读量 -->
<div class="article-meta">
    <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>
    <span>阅读量：{{archive.Views}} 次</span>
</div>

<!-- 文章标签 -->
<div class="article-tags">
    <strong>标签：</strong>
    {% tagList