In AnQiCMS template, what is the advantage of the `{%- if condition %}` syntax over `{% if condition %}`?

Use the Anqi CMS template wisely:{%- if condition %}Why is{% if condition %}better?

As an expert with years of experience in website operations, I am well aware of the importance of an efficient and tidy template system for content management.On a platform like AnQiCMS, which is dedicated to providing efficient and customizable solutions, every detail may affect the final user experience and website performance.{%- if condition %}with{% if condition %}.

Understanding the mystery of 'blank' in the template

In the AnQiCMS template engine syntax similar to Django, we often use{% if condition %}This tag is used for conditional judgment. It is very intuitive, and the content inside the tag will be rendered when the condition is met.However, many AnQiCMS users may not have noticed that this default writing style may leave some unnecessary 'whitespace' (including newlines, spaces, and tabs) in the generated HTML code in some cases.

Imagine you have a condition to determine if a user is logged in:

<div>
    {% if user_logged_in %}
        <p>欢迎回来，{{ user.name }}！</p>
    {% else %}
        <p>请登录。</p>
    {% endif %}
</div>

This code looks neat in the template file. But whenuser_logged_inWithtrue, the generated HTML might be like this:

<div>
    
        <p>欢迎回来，张三！</p>
    
</div>

You will find that,{% if ... %}and{% else %}The line containing the tag and the indentation between them will be rendered as actual whitespace.Although browsers usually ignore these extra whitespace characters, they do indeed exist in the HTML source code.

{%- if condition %}: The elegant terminator of whitespace

Now, let's introduce the hyphenated style:{%- if condition %}The key here is the percentage sign followed bythe hyphen (-)This little symbol plays the role of a 'whitespace remover' in the AnQiCMS template parser.

When you are on the left side of the template tag (such as{%- if ... %}) or on the right side (such as{% ... -%}When you add a hyphen, it tells the template engine: "Please remove the line where this tag is located and its adjacent lines"All whitespace characters.

Let's see the modified example:

<div>
    {%- if user_logged_in %}
        <p>欢迎回来，{{ user.name }}！</p>
    {%- else %}
        <p>请登录。</p>
    {%- endif %}
</div>

Ifuser_logged_inWithtrueThe generated HTML will be more compact:

<div><p>欢迎回来，张三！</p></div>

Here, the newline characters and spaces generated by the tag are elegantly removed. If you want to removeendifthe whitespace on the right side of the tag, you can write it as{%- endif -%}Typically, to have full control, we use both sides of the hyphen where precise control of spacing is needed:{%- if condition -%}.

Why is this style more favored?

Now let's delve deeper into why this seemingly minor difference is a skill worth mastering for AnQiCMS users and website operation experts:

1. Cleaner and more readable HTML source code:Redundant whitespace can make the generated HTML source code look messy, especially in complex page structures.For developers or operations personnel who need to frequently review page elements and debug front-end code, clean source code can greatly improve work efficiency.It allows developers to locate actual DOM elements faster, rather than being distracted by a bunch of blank lines and spaces.

2. Improve page loading speed and SEO performance:AnQiCMS is developed based on the Go language, known for its high performance and high concurrency features, and emphasizes SEO optimization.Although a single whitespace character is negligible in size, for large websites or pages containing a lot of dynamic content and conditional judgments, the cumulative redundant whitespace characters can significantly increase the size of the HTML file.The larger the file, the longer the time required for downloading and parsing.Reduce these redundant bytes, which means faster page loading speed, directly related to user experience (UX) and search engine optimization (SEO).Search engines tend to rank websites that load quickly, and AnQiCMS's own high-performance advantages can also be further utilized through such details.

3. Reduce network transmission bandwidth:Although modern network bandwidth is generally high, reducing the amount of data transmitted in each HTTP request is still worth optimizing for mobile users or those accessing under poor network conditions, as well as for server bandwidth costs.Especially in the advantageous scenarios of AnQiCMS in global deployment, multi-site management, and fine optimization of the content model, it will bring greater benefits.

4. Avoid potential rendering issues:Although modern browsers usually handle whitespace characters in HTML well, but in some special cases, such as using certain CSS layouts (such asinline-blockElement spacing) or when JavaScript scripts manipulate the DOM, unintended whitespace characters can cause unexpected layout shifts or behavior anomalies.Use hyphens to control spacing, which can avoid potential problems from the source.

5. Complies with the efficient and lightweight design philosophy of AnQiCMS:The AnQiCMS project documentation repeatedly mentions its{%- if condition %}This meticulous optimization is a reflection of its efficient and lightweight concept.It encourages template developers to write code that is both feature-rich and high-performance, ensuring that the advantages of AnQiCMS are fully utilized in every aspect.

Summary

In the template development of AnQiCMS, the following method is adopted{%- if condition %}This hyphenated style is an important practice for writing high-quality, high-performance templates.It is not only for the visual neatness, but also the embodiment of refined operation of the website from many aspects such as website performance, user experience, search engine optimization, and system resource utilization.Mastering this skill will help you better utilize the powerful functions of AnQiCMS to build a more competitive website.

Frequently Asked Questions (FAQ)

Q1: Do I need to use this writing style on all template tags{%- ... -%}？

A1: It is not necessary to use all of it. This hyphenated style is mainly used to control the whitespace in HTML structures. For those that will be rendered into the text content in the code (such as in<span>Label internal output variable), or you really need to retain line breaks and indentation to improve the readability of the source code, you can continue to use it.{% if ... %}Standard writing. **Practice is in the conditional judgment and loop conditions that can generate unnecessary blank lines or white blocks (such as{% if %}/{% for %}Use it on the start and end tags to ensure the output HTML structure is compact.

Q2: If I only use{%- if condition %}(the left hyphen) or{% if condition -%}(Right hyphen), what effect will it have?

A2: Using only one side hyphen is also valid.{%- if condition %}Will removeifThe white space on the left side of the tag (usually all before it). And{% if condition -%}it will be removed.ifThe whitespace to the right of the label (usually everything that follows). For example, if you want a conditional statement block to be close to the previous HTML element, but the internal content needs to retain formatting, you can onlyifThe left side of the tag uses a hyphen. The most comprehensive whitespace removal usually requires hyphens on both sides of the tag, for example{%- if condition -%}.

Q3: Have I already got a lot of website templates? Is it worth it to modify all the templates to add this hyphen? Does it really have a big impact on SEO or performance?

A3: For websites that have been launched and have a huge amount of traffic, it indeed requires careful evaluation to batch modify all templates.But in the long run, especially in scenarios where content marketing and SEO optimization are continuously carried out, this optimization is worthwhile.A few KB saved on a single page may not seem like much, but if a website has tens of thousands of pages and is visited by a large number of people every day, the cumulative savings will be very considerable, which can effectively reduce server bandwidth consumption, improve user access speed, and indirectly have a positive impact on search engine rankings.AnQiCMS itself has laid a solid foundation for the website with its high-performance architecture, and this template-level optimization further strengthens the advantages of AnQiCMS.It is recommended to start gradually applying from newly developed templates or the most visited key pages.