AnqiCMS as an efficient content management system not only provides rich content publishing and management functions but also offers great flexibility for the display of front-end pages.In website operation, reasonable use of tags (Tag) can effectively enhance the organization of content, user experience, and search engine optimization (SEO).When a user browses to a specific tag, if the page can directly display the detailed information of the tag, such as its description and exclusive Logo, it will undoubtedly greatly enhance the professionalism and attractiveness of the page.
Next, we will discuss how to flexibly display detailed information of specific tags on the AnqiCMS front page, such as description and Logo.
The role of the tag in AnqiCMS and the backend settings
In AnqiCMS, tags are a powerful content organization tool that allows you to link related content across different categories or models.For example, an article about 'website construction' and an article about 'SEO optimization' can both be tagged with 'marketing strategy', making it convenient for users to find related content through this common theme.
In the background management interface, you can use the 'Document Tags' feature under 'Content Management' to manage all tags on the website uniformly.Here, you can create new tags, edit the names of existing tags.It is more important that, when editing or adding tags, you can set the 'tag description' to elaborate on the meaning of the tag, and you can also upload a unique 'Tag Logo' to give the tag a stronger visual recognition.These backend configurations are the basis for displaying rich tag information on our front-end pages.Make sure to fill in detailed descriptions for important tags and upload the corresponding Logo, which is the first step in the front-end display effect.
Invoke tag details in the frontend template
AnqiCMS uses a syntax similar to the Django template engine, making it intuitive and flexible to call backend data in front-end templates. To display the description and Logo of a specific tag, we need to usetagDetailThis tag. Typically, this information is displayed on the tag detail page (for exampletag/index.htmlortag/list.htmlat the top of this template file) as an overview of the tag.
First, in your tag page template, you cantagDetailuse tags to get the details of the current tag.tagDetailTags will default to getting the tag ID of the current page, no need to specify an ID.
To get the description of the tag, you can use it like thistagDetailTags:
<div class="tag-description">
{% tagDetail with name="Description" %}
</div>
here,name="Description"Explicitly tell the template engine what we want to get is the "description" field of the current tag. If the tag description contains HTML content, to ensure correct rendering rather than displaying the original HTML code, you can cooperatesafeFilter it together, for example{{ tagDetail_description|safe }}.
Similarly, to display the logo image of the label, you can call it like thistagDetailTags:
<div class="tag-logo">
<img src="{% tagDetail with name="Logo" %}" alt="{% tagDetail with name="Title" %} Logo">
</div>
Here, name="Logo"The URL address of the label Logo image will be returned, you can embed it directly into<img>label'ssrcthe attribute. To improve accessibility and SEO, it is recommended to add an imagealtProperty, the content can be the title of the label. The label title can also be{% tagDetail with name="Title" %}Get it.
Combine these fragments, and a complete label information display area may look like this:
<div class="tag-header">
<h1>{% tagDetail with name="Title" %}</h1>
<div class="tag-details">
<div class="tag-logo">
<img src="{% tagDetail with name="Logo" %}" alt="{% tagDetail with name="Title" %} Logo">
</div>
<div class="tag-description">
<p>{% tagDetail with name="Description" %}</p>
</div>
</div>
</div>
This code will first display the label's title, followed by the Logo image and description text side by side.In this way, users can have a direct understanding of the theme of the label without delving into the specific content under the label.
**Practice and Precautions
Make good use of CSS to beautifyAfter obtaining the label description and Logo, you can use CSS to format and beautify it, making it consistent with the overall style of the website and enhancing the visual experience.
Graceful degradation handling: If a label does not have a Logo or description set, the front-end page may appear blank. To avoid this situation, you can add conditional judgments in the template. For example, judge
LogoorDescriptionThe field exists or has a value, only the corresponding HTML element is rendered when there is content:{% set tag_logo = tagDetail_logo %} {# 假设获取Logo到变量tag_logo #} {% set tag_description = tagDetail_description %} {# 假设获取Description到变量tag_description #} {% if tag_logo %} <img src="{{ tag_logo }}" alt="..."> {% endif %} {% if tag_description %} <p>{{ tag_description }}</p> {% endif %}Actually,
tagDetailLabels do not output content when fields are not found, so it can also be used directly, but it is clearer to assign values to variables explicitly and then judge.SEO-friendly: Set a unique description and high-quality logo for the tab page, which helps search engines better understand the theme of the tab page, thereby possibly improving its ranking in search results. Make sure
altLabel and SEO elements are also properly filled.Page loading performance: Make sure the logo image is optimized, with moderate size and dimensions to avoid slow page loading due to large images, which can affect user experience.AnqiCMS's 'Content Settings' provides features such as automatic image compression and WebP conversion, which can effectively help you optimize images.
By following these steps, you can display detailed information about specific tags in the AnqiCMS front page in a rich and intuitive way, providing visitors with a better browsing experience and also contributing to the website's SEO performance.
Frequently Asked Questions (FAQ)
1. What will be displayed on the front page if a Tag is not set with a Logo or description? How should I handle it?If a tag is not set with a Logo or description,{% tagDetail with name="Logo" %}or{% tagDetail with name="Description" %}This tag will not output any content. The corresponding area on the page will be left blank.To avoid ugly blank spaces on the page, you can add conditional judgments in the template to only render related HTML elements when actual content is obtained.For example, you can set a default placeholder for a label without a Logo, or hide the description area when there is no description.
How to display the document list under the Tag in the Tag detail page at the same time?Display the document list under the Tag on the Tag detail page, you can use the AnqiCMS providedtagDataListThe tag is specifically used to retrieve all relevant documents under the specified Tag.It will automatically recognize the ID of the current Tag page. You just need to add similar code to the template to loop and display document titles, links, and other information:
{% tagDataList archives with type="page" limit="10" %}
{% for item in archives %}
<a href="{{item.Link}}">{{item.Title}}</a>
<p>{{item.Description}}</p>
{% endfor %}
{% endtagDataList %}
This will list the first 10 documents under the current Tag and support pagination.
3. Can the URL structure of the Tag page be customized? How to perform pseudo-static optimization?Yes, the URL structure of the Tag page can be customized.In the AnqiCMS backend, under "Function Management" -> "SEO Rules", you can find the rule settings for "Tag List" and "Tag Details".By modifying these rules, for example, usingtag-{id}ortags/{filename}.htmlSuch forms can generate more semantically meaningful and SEO-friendly URLs.Make sure the static rules you choose or customize clearly express the page content, which helps search engines crawl and understand.