AnQiCMS (AnQiCMS) is an efficient and flexible content management system that, while providing powerful features, also takes into account many details in website operations, such as links' titleProperty settings.titleThe attribute is not directly visible on the page, but it plays a 'touch of class' role in enhancing user experience, assisting search engines in understanding the content of links, and improving the accessibility of the website.It can provide additional information to visitors hovering over the mouse, as well as navigation context for screen reader users.

Today, let's delve into how to cleverly set custom links for the home page and end page in AnQiCMS.titleProperties, making your website professional in every detail.

Understanding the link data structure in AnQiCMS

In AnQiCMS, whether through the backend created navigation menu or through the tag dynamically generated list, the system maintains a structured data set for each linkable entity (such as articles, products, categories, single pages, etc.). These data usually include the link address (Link）、Display Text（Title）、Description Information（Description）and some other related attributes (such as the image'sAlttext). It is these built-in data fields that allow us to flexibly customize the linkstitleThe attribute provides a solid foundation.

Navigation links on the home and last pages.titleAttribute customization

The homepage and footer often carry the most important navigation structure and core content entry of a website. In AnQiCMS, these navigation links are usually managed through the "Website Navigation Settings" feature, and throughnavListTemplate tags are rendered on the front end.

Backend configuration: Assign 'description' to navigation links.

Firstly, we need to add the corresponding description information for navigation links in the AnQiCMS backend. Enter“Back-end Settings” -> “Website Navigation Settings”. Here, you will see various navigation categories you have created, such as “Default Navigation” or the custom “Footer Navigation”.

Click to edit a specific navigation link, and you will find a field named 'Navigation Description'. This is where you set your linktitleThe **position** of the attribute.For example, if your navigation item is "About UsThese descriptions will serve as tooltips displayed when the mouse hovers over, enhancing the user experience and providing richer context for search engines.

Template Implementation: Use it cleverlynavListtags

In your front-end template file (usually the home page template)index.htmlor in the common headerpartial/header.html, or the common footerpartial/footer.html, you may have used thenavListtag to render the navigation menu.

navListTags return an array containing multiple navigation items (item) that each carryitemthe links set up in the backgroundTitle(Display Name),Link(link address) as well as the crucialDescription(Navigation description). In the template, we can bind the value like this:item.Descriptionto the attribute of the link:titleon:

{# 示例：渲染主导航菜单 #}
{% navList navs with typeId=1 %}
    <ul>
        {%- for item in navs %}
            <li>
                <a href="{{ item.Link }}" title="{{ item.Description }}">{{ item.Title }}</a>
                {# 如果存在子导航，这里可以继续循环 inner.NavList #}
                {%- if item.NavList %}
                <dl>
                    {%- for inner in item.NavList %}
                        <dd>
                            <a href="{{ inner.Link }}" title="{{ inner.Description }}">{{ inner.Title }}</a>
                        </dd>
                    {% endfor %}
                </dl>
                {% endif %}
            </li>
        {% endfor %}
    </ul>
{% endnavList %}

{# 示例：渲染页脚导航（假设你有一个typeId=2的页脚导航） #}
{% navList footerNavs with typeId=2 %}
    <ul class="footer-links">
        {% for item in footerNavs %}
            <li><a href="{{ item.Link }}" title="{{ item.Description }}">{{ item.Title }}</a></li>
        {% endfor %}
    </ul>
{% endnavList %}

In this way, the 'navigation description' configured on the backend will elegantly appear in the frontend linktitlein attributes.

dynamic content linkstitleAttribute customization

In addition to fixed navigation links, the homepage and footer often display the latest articles, popular products,友情链接(friendship links) or brand partners, etc. Dynamic content is usually througharchiveList/pageList/linkList/bannerListLabels dynamically called.

Content management: Rich description information of links.

For content such as articles, products, single pages, categories, tags, etc., AnQiCMS usually provides fields like 'Document Description' (Description), 'SEO Title' (SeoTitle), or 'Tag Description' in the backend editing interface. For link types of image content (such as Banners), there will beAltText field. These are valuable resources that can be used to fill in links.titleValuable resources for properties.

  • Article/Product/Single Page:When editing documents or pages, be sure to carefully fill in the 'Document Introduction' or 'SEO Title' in addition to filling in the title.
  • Categories/Tags:When creating or editing a category/tag, fill in 'Category Introduction' or 'Tag Description'.
  • Friendship links:In the "Friend Links" under Function Management, each link has a "Link Name" and a "Link Remark", the latter is a good place to set properties.titleA good place to set properties.
  • Home Page Banner:In image resources or specific Banner management, the image'sAlttext and description fields can serve astitlethe source of the properties.

Template implementation: Apply the properties in a loop.itemto the properties

When you usearchiveList/pageListorlinkListWhen displaying content in a loop with tags, each loop item (item) contains its own