How to display the full article content on the article detail page, including lazy-loaded images?

AutoCMS: How to elegantly display full content and lazy loading images on article detail pages

In website content operation, the article detail page is an important touchpoint for users to obtain information and gain in-depth understanding of the brand and products.An article detail page with a well-designed, quick loading, and complete content display, which can greatly enhance user experience and effectively assist in SEO optimization.For users of Aanqi CMS, fully utilizing its powerful template tag system can easily achieve the complete presentation of article content, and combine with modern web technology to implement lazy loading of images, making your website both beautiful and efficient.

Core: Understanding the structure of article detail pages

Step 1: Prepare your article detail template

The template of Anqi CMS follows a clear directory structure and naming conventions. Usually, the template file for the article detail page is located under the current template theme.{模型table}/detail.htmlfor examplearchive/detail.htmlorproduct/detail.htmlIf you have special categories or documents that require unique layouts, you can also specify custom templates in the background, such asdownload.html.

First, make sure yourdetail.htmlThe file inherits the basic template for reusing the website's common header, footer, and styles:

{% extends 'base.html' %}

{% block content %}
    {# 在这里编写文章详情页的具体内容 #}
{% endblock %}

Step 2: Call the key tags for the full content of the article ---archiveDetail

AnQi CMS providesarchiveDetailLabel to get the details of the article (document). To display the full content of the article, you need to usename="Content"Parameter.

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

There are several key points to note:

  1. name="Content": This is the parameter specified to get the main content of the article.
  2. archiveContentThis is a custom variable name used to store the retrieved article content. You can customize it as you like.
  3. |safeFilter:This step is crucialThe article content usually includes HTML tags (such as<p>,<img>,<strong>etc.), if not added|safeFilter, for security reasons, Anqi CMS will default to escaping all HTML tags, resulting in a mess of codes displayed on the page instead of well-formatted content.|safeTell the template engine that this content is safe HTML and can be rendered directly.

Handle image lazy loading

To enhance the page loading speed, especially for articles with many images, lazy loading (Lazy Load) is a very effective optimization method. The Anqi CMS'sarchiveDetailThe label built-in support for the lazy loading attribute conversion.

You can add bylazy="data-src"parameters, so that the system automatically converts the content of the article.<img>TagssrcThe attribute converts todata-srcproperties.

{% archiveDetail articleContent with name="Content" lazy="data-src" %}
    {{ articleContent|safe }}
{% endarchiveDetail %}

When you set it like this, the security CMS will automatically convert all image tags in the article content (for example<img src="https://en.anqicms.com/uploads/image.jpg" />) to English.<img data-src="https://en.anqicms.com/uploads/image.jpg" />.

Please note:lazy="data-src"Just modified the image attribute name. To truly implement lazy loading, you also need to introduce the corresponding JavaScript lazy loading library on the front-end and initialize it according to the requirements of the library, so that it can identifydata-srcautodata-srcproperties.

Rendering Markdown content

If your article content is written in Markdown format and the Markdown editor is enabled in the "Global Settings" -> "Content Settings" backend, you may need to handle it extra to ensure it is rendered correctly as HTML.

archiveDetailTags providerender=trueThe parameter automatically converts Markdown content to HTML:

{% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
    {{ articleContent|safe }}
{% endarchiveDetail %}

So, your Markdown content can be correctly parsed and rendered on the page. At the same time, you also need to include the CSS styles required for Markdown rendering and possibly a JS library,help-markdown.mdmentioned ingithub-markdown-css.

Third step: Enrich the other information of the article detail page

An article detail page should not only include the content itself but also display the title, publish time, category, tags, reading volume, and other auxiliary information, which can also be presented througharchiveDetailLabel or other related labels acquisition.

  • Article title:{% archiveDetail with name="Title" %}
  • publication time:{{stampToDate(archive.CreatedTime, "2006-01-02")}}
  • category:{% categoryDetail with name='Title' %}
  • tags: UsetagListLoop through labels to get all related tags of the article.
  • View count:{% archiveDetail with name="Views" %}
  • Custom ParametersIf your content model defines additional fields, you can usearchiveParamsLoop through tags for display.

Integration and Optimization: A complete detail page snippet

The core code of the article detail page that integrates the above elements, with complete content display and lazy loading functions, is roughly as follows:

auto

{% block content %}

<article class="article-detail-container">
    {# 文章标题 #}
    <h1 class="article-title">{% archiveDetail with name="Title" %}</h1>

    {# 文章元信息：分类、时间、浏览量 #}
    <div class="article-meta">
        <span>分类：<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
        <span>发布于：{{stampToDate(archive.CreatedTime, "2006-01-02")}}</span>
        <span>阅读量：{% archiveDetail with name="Views" %}</span>
    </div>

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

    {# 文章主体内容：包含懒加载和Markdown渲染 #}
    <div class="article-content markdown-body"> {# 假设您已引入github-markdown-css，并使用markdown-body类 #}
        {% archiveDetail articleContent with name="Content" lazy="data-src" render=true %}
            {{ articleContent|safe }}
        {% endarchiveDetail %}
    </div>

    {# 更多自定义参数（如果需要） #}
    <div class="article-custom-params">
        {% archiveParams params %}
            {% for item in params %}
                <p><strong>{{item.Name}}：</strong>{{item.Value}}</p>
            {% endfor %}
        {% endarchiveParams %}
    </div>

    {# 上一篇/下一篇文章导航 #}
    <div class="article-nav">
        {% prevArchive prev %}
            {% if prev %}
                <a href="{{prev.Link}}" class="prev-article">上一篇：{{prev.Title}}</a>
            {% else %}
                <span class="prev-article-none">没有了</span>
            {% endif %}
        {% endprevArchive %}
        {% nextArchive next %}
            {% if next %}
                <a href="{{next.Link}}"