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

AnQi CMS: How to elegantly display full content and lazy loading images on the article detail page

In website content operation, the article detail page is an important touchpoint for users to obtain information and deeply understand the brand and product.A well-designed, fast-loading, and comprehensive article detail page that can greatly enhance user experience and effectively assist in SEO optimization.For users of Anqi CMS, taking full advantage of 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 the article detail page

In AnQi CMS, the full content of the article, including text, images, videos, and other multimedia elements, is stored in the "document content" field you edited when publishing the article.When the user visits the article detail page, we need to extract the content stored in the database through template tags and render it in the browser.At the same time, it is particularly important to introduce a lazy loading mechanism to optimize the page loading speed, especially for articles with many images.

Step 1: Prepare your article detail template

The AnqiCMS template 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.html. If you have a special category or document that requires a unique layout, you can also specify the use of a custom template in the background, such asdownload.html.

First, make sure yourdetail.htmlThe file inherits the basic template to reuse the common header, footer, and styles of the website:

{% extends 'base.html' %}

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

Step two: Call the key tags of the full content of the article ——archiveDetail

AnQi CMS providesarchiveDetailTag to get the detailed information 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 %}

Here are some 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 article content obtained. You can customize it according to your preference.
  3. |safeFilter:This step is crucial.. The article content usually includes HTML tags (such as<p>,<img>,<strong>etc.), if not added|safeThe filter, Anqi CMS defaults to escaping all HTML tags for security reasons, resulting in a display of a lot of code instead of well-formatted content on the page.|safeTell the template engine that this content is safe HTML and can be rendered directly.

Handle image lazy loading

To improve page loading speed, especially for articles with many images, lazy loading (Lazy Load) is a very effective optimization method. Anqi CMS'sarchiveDetailThe tag is built-in with support for lazy loading of image attributes.

You can add tolazy="data-src"Parameters, so that the system can automatically convert the content of the article.<img>label'ssrcproperties todata-srcProperty.

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

After you set it like this, Anqi CMS will replace all image tags in the article content (such as<img src="https://en.anqicms.com/uploads/image.jpg" />) to<img data-src="https://en.anqicms.com/uploads/image.jpg" />.

Please note:lazy="data-src"It is just to modify the attribute name of the image. 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-src(or any specified attribute) and load on demand. Most lazy loading libraries on the market support this.data-srcProperty.

Rendering of Markdown content

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

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

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

This way, your Markdown content can be correctly parsed and rendered on the page. At the same time, you also need to introduce the CSS styles and possible JS libraries required for Markdown rendering, such ashelp-markdown.mdmentionedgithub-markdown-css.

Step 3: Enrich the other information on the article detail page

A complete article detail page not only needs to show the content itself, but also needs to display the title, publication time, category, tags, reading volume, and other auxiliary information, which can also be displayed througharchiveDetailTag or other related tags to obtain.

  • Article title:{% archiveDetail with name="Title" %}
  • Release Time:{{stampToDate(archive.CreatedTime, "2006-01-02")}}
  • Category:{% categoryDetail with name='Title' %}
  • Tag: Use.tagListLoop tags to obtain all tags associated with the article.
  • view count:{% archiveDetail with name="Views" %}
  • Custom parameterIf your content model defines additional fields, you can usearchiveParamsLoop tag display.

Integration and Optimization: A complete detail page fragment

Integrate the above elements, and the core code of an article detail page with complete content display and lazy loading function is roughly as follows:

"twig {% extends 'base.html' %}"

{% 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}}"