As an old soldier deeply understanding the CMS content operation, I know that every detail in website construction and content presentation is related to user experience and brand image.Especially when displaying key elements such as contact information, how to ensure both beauty and cleanliness in limited space while fully conveying the information, this is often a small challenge faced by operators.Today, let's delve deeply into how to cleverly truncate the display of the contact address field in the Anqi CMS template when it is too long, while ensuring that users can always obtain the complete address information.

Challenge: Balancing long addresses with interface aesthetics

When designing a website page, especially the footer, sidebar, or contact information module, we always hope that the information is presented succinctly and clearly.However, the actual business contact address often includes many details such as provinces, streets, house numbers, etc., resulting in text length exceeding expectations.Directly displaying a long address not only destroys the coordination of the overall layout, making the page look bulky, but may also cause layout chaos in responsive design, affecting the reading experience of users on different devices.

How can you keep the page clean while not missing any important address information?The flexible template mechanism and powerful built-in filters of AnQi CMS provide us with an elegant solution.

The solution of Anqi CMS: flexible templates and powerful filters

The AnQi CMS template engine supports syntax similar to Django, making customization of content presentation very simple.It can easily obtain various configuration data from the background and can also process the data in real-time through a "filter" call chain without modifying the original data.For contact address, Anqi CMS provides specialcontactTags to obtain contact information set in the background.

For example, to get the contact address configured in the "Contact Settings" in the background, we can use the following tags in the template: 

{% contact with name="Address" %}

This label will directly output the complete contact address string. But when the address is too long, we need to use the string processing tool provided by AnQi CMS - the filter.

Core skill: UtilizetruncatecharsTruncate with filter

Anqi CMS has built-in multiple practical filters, among whichtruncatecharsThe filter is specifically designed for string truncation. Its function is to truncate a string to a specified character length and automatically add an ellipsis (...) at the truncation point, thereby effectively controlling the display length.

The usage method is very intuitive:

{{ 你的变量 | truncatechars: 期望的长度 }}

For example, if our contact address is stored incontactAddressIn a variable, and we want it to display at most 30 characters, we can write it like this: 

{{ contactAddress | truncatechars:30 }}

In this case, if the address 'China Guangdong Shenzhen Nanshan District Science Park, South First Road 18A, 10th Floor' is too long, it may be displayed as 'China Guangdong Shenzhen Nanshan District Science Park, South First Road 18A, 10th Floor…', which not only prompts that the information is not fully displayed but also maintains the page's cleanliness.

How should the 'expected length' be chosen?This usually depends on your website design and layout. You may need to test on different device sizes to find a length that can ensure most of the address information is visible while avoiding line breaks or overflow.Generally, a range of 20-40 characters is quite common.

Preserve complete information: Improve user experience

It is not enough to truncate the display, we promise to "retain complete information". To achieve this, we can combine HTML'stitleCreate a tooltip by attribute.When the user hovers over the truncated address, the browser will display a tooltip containing the full address to ensure that the user can view it at any time.

{# 假设我们已经通过 contact 标签获取了完整的联系地址到 contactAddress 变量 #}
{% contact contactAddress with name="Address" %}

{% if contactAddress %}
    <span class="truncated-address" title="{{ contactAddress }}">
        {{ contactAddress | truncatechars:35 }}
    </span>
{% else %}
    <span class="no-address">暂无联系地址</span>
{% endif %}

In this code block:

  1. We first use{% contact contactAddress with name="Address" %}Get the complete addresscontactAddressVariable.
  2. {% if contactAddress %}Check if the address exists to avoid displaying empty content.
  3. <span class="truncated-address" title="{{ contactAddress }}">It is crucial. We will present the completecontactAddressAssign totitleProperty.
  4. {{ contactAddress | truncatechars:35 }}It is responsible for displaying the truncated address.
  5. elseBranch handles the case where the address is empty, providing a more friendly prompt.

In this way, when users browse the page, they see a concise truncated address, and when they need detailed information, they simply hover the mouse over the address, and the complete address will be presented in the form of a tooltip, perfectly balancing aesthetics and the completeness of information.

In addition to the hover tip, if the address information is extremely complex, or contains map links, navigation instructions, etc., you can also consider adding a "View Details" or "Contact Us" link next to the truncated address, pointing to a standalone page containing all the detailed information.

{# 额外补充：如果想提供完整的地址链接到地图或其他页面 #}
{% contact contactAddress with name="Address" %}
{% if contactAddress %}
    <p>
        联系地址：
        <span class="truncated-address" title="{{ contactAddress }}">
            {{ contactAddress | truncatechars:35 }}
        </span>
        {# 利用 urlencode 过滤器，确保地址作为URL参数时不会出错 #}
        <a href="https://maps.google.com/?q={{ contactAddress | urlencode }}" target="_blank" rel="nofollow">查看地图</a>
    </p>
{% endif %}

Here we also added extra:urlencodeThe filter. When we use the address as part of the URL (such as jumping to Google Maps), the address may contain spaces, commas, or other special characters, which, if used directly, will cause the link to fail.urlencodeThe filter can automatically encode these special characters to ensure the validity of the link.

Comprehensive example

Now, let's integrate these techniques into an actual website footer template snippet:

{# partial/footer.html 文件片段 #}
<footer>
    <div class="container">
        <div class="contact-info">
            <h3>联系我们</h3>
            <p>联系电话：{% contact with name="Cellphone" %}</p>
            <p>
                联系地址：
                {% contact fullAddress with name="Address" %}
                {% if fullAddress %}
                    <span class="truncated-address" title="{{ fullAddress }}">
                        {{ fullAddress | truncatechars:35 }}
                    </span>
                    <a href="https://maps.google.com/?q={{ fullAddress | urlencode }}" target="_blank" rel="nofollow" class="view-map-link">
                        <i class="icon-map"></i> 查看地图
                    </a>
                {% else %}
                    <span>暂无</span>
                {% endif %}
            </p>
            <p>联系邮箱：<a href="mailto:{% contact with name="Email" %}">{% contact with name="Email" %}</a></p>
        </div>
        <div class="copyright">
            <p>{% system with name="SiteCopyright" %}</p>
            <p><a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">{% system with name="SiteIcp" %}</a></p>
        </div>
    </div>
</footer>

In this example, we elegantly handled the display issue of the contact address, while ensuring the completeness and practicality of the information through hover tips and map links.

Operation steps and precautions

  1. Confirm the modification location:Find the template file that needs to display the contact address, for examplepartial/footer.htmlorpartial/aside.html.
  2. Backup file:Make sure to back up any template files before modifying them, just in case.
  3. Apply the code:Integrate the above example code into your template and adjust the truncation length as needed (truncatechars:35The number in Chinese.)
  4. Local test:Preview the effect on the local development environment or test server, ensure that it displays normally on different resolutions and devices, and the hover tip function also works properly.
  5. Clear the cache:If the contact address is modified in the background and the front-end is not updated, remember to go to the Anqicms background to 'update cache' and clear the site cache.

By using these simple and practical techniques, your website can not only present a more professional interface, but also highlight your attention to user experience in the details.

Frequently Asked Questions (FAQ)

  1. Ask: Will truncating the address have an impact on the website's SEO?

    • Answer:In most cases, this level of frontend truncation display will not have a negative impact on SEO.The web crawler of a search engine reads the complete HTML code of a page when crawling the web, rather than the visual effects processed by CSS or JavaScript in the user's browser.therefore, included intitleThe complete address in the attribute, even the parts that were not truncated but hidden in the original tag, can still be recognized and indexed by the crawler.

  2. How should I choose?truncatecharsthe truncation length?

    • Answer:**The truncation length has no fixed standard, it mainly depends on your website design layout and target user group.Suggest that you test on the PC, tablet, and mobile versions of the website separately.For example, on mobile devices, it may be necessary to truncate text more succinctly to avoid line breaks, while on PC, it can be relaxed appropriately.Choose a length that can maintain the layout beauty in most cases and allow users to roughly understand the address information, and detailed information can be provided through hover tips or 'View Map' links.

  3. If my contact address contains HTML tags (such as links or styles),truncatecharswill