AnQi CMS is an efficient and flexible content management system that provides users with a rich set of template tags and filters, helping us easily customize every aspect of the website. Today, we will explore a practical template technique: how to useljustThe filter allows your navigation menu text to be aligned neatly to the left and intelligently fill in spaces, thus enhancing the visual consistency and user experience of the website.

In web design, the navigation menu plays a crucial role, not only guiding users through the website content but also directly affecting the professionalism of the website's visual presentation.When faced with the situation where the text length of the navigation menu is uneven, if it is displayed directly, it is easy to appear uneven in the width of the menu items and chaotic alignment.ljustThe filter can shine.

AnQi CMS template basic review

In AnQi CMS, templates are the core of building website interfaces. We mainly interact with templates in two ways: double curly braces{{ 变量 }}Used for output content, and single curly braces plus percent sign{% 标签 %}Used for controlling logic, such as conditional judgments and loops.Filters are small tools that process these variables, helping us to format, convert, or beautify data, such as converting text to uppercase, or as we will discuss today, adjusting the text alignment.

Get to knowljustFilter

ljustIt is a special filter used for string processing, its function is to align the text content to the left and fill the specified number of spaces on the right until it reaches the total length we set.This is a very practical feature for those who want to maintain consistent visual width of menu items and avoid visual chaos caused by differences in text length.

Its basic usage is very intuitive:{{ "您的文本"|ljust:目标总长度 }}

Among them,"您的文本"It is the original string you need to process, and目标总长度is an integer representing the total number of characters you want the string to reach. If the length of the original text is less than目标总长度,ljustwill automatically fill in spaces on the right side of the text; if the length of the original text is equal to or greater than目标总长度the text will be displayed as is without being truncated.

ljustactual application in the navigation menu

In AnQi CMS template, we usually usenavListtags to obtain the website's navigation menu data. This tag will return an array containing navigation items, each withTitle(Display name),Link(Link address) properties, even possibly containingNavListUsed for the second-level menu.

Now, let's see an example of how to useljusta filter in the navigation menu:

<nav class="main-navigation">
    <ul>
        {# 使用 navList 标签获取主导航菜单数据 #}
        {% navList navs %}
            {# 遍历每一个主导航项 #}
            {% for item in navs %}
                <li class="nav-item">
                    <a href="{{ item.Link }}">
                        {# 应用 ljust 过滤器，将导航文本左对齐并填充到15个字符的视觉宽度 #}
                        {{ item.Title|ljust:15 }}
                    </a>
                    {# 如果存在二级菜单，则进一步遍历 #}
                    {% if item.NavList %}
                        <ul class="sub-nav">
                            {% for sub_item in item.NavList %}
                                <li class="sub-nav-item">
                                    <a href="{{ sub_item.Link }}">
                                        {# 子菜单文本也可以应用 ljust，可以设置不同的目标长度 #}
                                        {{ sub_item.Title|ljust:20 }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endif %}
                </li>
            {% endfor %}
        {% endnavList %}
    </ul>
</nav>

In this code, we first use{% navList navs %}Retrieved all navigation data and assigned it tonavsthe variable. Then, we traversed{% for item in navs %}each main navigation item in a loop. Inside<a>the tag, we applied{{ item.Title }}the|ljust:15The filter means that regardlessitem.Titleof the original length, it will be left-aligned and spaces will be filled on the right until the entire string reaches a visual width of 15 characters. Ifitem.TitleLike "Home

For the secondary menusub_item.TitleWe also applied it toljustthe filter and set its20target length, which can be adjusted according to the actual content and design requirements of the submenu.

In this way, even if the text length of each menu item is different, each one will be rendered in the browser.<a>The text within the tags will maintain a uniform width visually, making the entire navigation menu look more orderly and professional. Of course, here the15and20This is just an example, you should adjust the number based on the actual menu text length and the expected filling effect.

Advanced considerations and related filters

  • Behavior when the length is insufficient: ljustThe filter is responsible for padding and will not truncate the original text.If your navigation text may be very long and exceeds the target length you have set, it will display as it is.truncatecharsortruncatewordsFilter, in useljustTruncate text before to avoid layout expansion.
  • Dynamic length: In some advanced scenarios, you may need to dynamically calculate based on the actual page content or the length of the longest navigation itemljustThe target length, which may require some辅助 processing on the front end using JavaScript, or through calculation during template rendering to obtain the maximum length value.
  • Other alignment method:exceptljust(Left aligned), Anqi CMS also provides:rjustandcenterFilter:
    • rjust: Fill spaces on the left side of the text to achieve right alignment