安企CMS是一款高效灵活的内容管理系统，它为用户提供了丰富的模板标签和过滤器，帮助我们轻松定制网站的方方面面。今天，我们将探讨一个实用的模板技巧：如何利用 ljust 过滤器，让您的导航菜单文本实现整齐的左对齐并智能填充空格，从而提升网站的视觉一致性和用户体验。

在网站设计中，导航菜单扮演着至关重要的角色，它不仅引导用户浏览网站内容，其视觉呈现也直接影响网站的专业度。当我们面临导航菜单文本长短不一的情况时，如果直接展示，很容易出现菜单项宽度参差不齐、对齐混乱的问题。这时，ljust 过滤器便能大显身手。

安企CMS模板基础回顾

在安企CMS中，模板是构建网站界面的核心。我们主要通过两种方式与模板互动：双大括号 {{ 变量 }} 用于输出内容，而单大括号加百分号 {% 标签 %} 则用于控制逻辑，比如条件判断和循环。过滤器（Filters）则是处理这些变量的小工具，它们能帮助我们对数据进行格式化、转换或美化，例如将文本转为大写，或者像我们今天要讨论的，调整文本对齐方式。

认识 ljust 过滤器

ljust 是一个专门用于字符串处理的过滤器，它的作用是将文本内容左对齐，并在文本右侧填充指定数量的空格，直到达到我们设定的总长度。这对于那些希望保持菜单项视觉宽度一致、避免因文本长度差异造成视觉错乱的场景来说，是一个非常实用的功能。

它的基本用法非常直观： {{ "您的文本"|ljust:目标总长度 }}

其中，"您的文本" 是你需要处理的原始字符串，而 目标总长度 是一个整数，表示你希望字符串最终达到的字符总数。如果原始文本的长度小于 目标总长度，ljust 就会在文本右侧自动填充空格；如果原始文本的长度等于或大于 目标总长度，文本将保持原样显示，不会被截断。

ljust 在导航菜单中的实际应用

在安企CMS模板中，我们通常使用 navList 标签来获取网站的导航菜单数据。这个标签会返回一个包含导航项的数组，每个导航项都具有 Title（显示名称）、Link（链接地址）等属性，甚至还可能包含 NavList 用于二级菜单。

现在，我们来看一个如何在导航菜单中使用 ljust 过滤器的例子：

<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>

在这段代码中，我们首先使用 {% navList navs %} 获取了所有的导航数据，并将其赋值给 navs 变量。接着，我们通过 {% for item in navs %} 循环遍历每一个主导航项。在 <a> 标签内部，我们对 {{ item.Title }} 应用了 |ljust:15 过滤器。这意味着，无论 item.Title 的原始长度是多少，它都将被左对齐，并且右侧将填充空格，直到整个字符串达到15个字符的视觉宽度。如果 item.Title 像“首页”这样只有两个字，那么它后面会被填充13个空格；如果像“企业解决方案”这样本身就比较长，只要不超过15个字符，它也会被填充相应的空格以达到15个字符；如果超过15个字符，它则会保持原样显示。

对于二级菜单 sub_item.Title，我们也同样应用了 ljust 过滤器，并为其设置了 20 的目标长度，这可以根据子菜单的实际内容和设计需求进行调整。

通过这种方式，即使菜单项的文字长度各不相同，最终在浏览器中渲染出来的每个 <a> 标签内的文本在视觉上都将保持一个统一的宽度，从而使整个导航菜单看起来更加整齐、专业。当然，这里的 15 和 20 只是示例，您应该根据实际菜单文本的最长长度和期望的填充效果来调整这个数字。

进阶考量与相关过滤器

  • 长度不足时的行为： ljust 过滤器只负责填充，不会截断原始文本。如果您的导航文本可能非常长，超出了您设定的目标长度，它会保持原样显示。在这种情况下，您可能需要考虑结合 truncatechars 或 truncatewords 过滤器，在应用 ljust 之前对文本进行截断处理，以避免布局被撑开。
  • 动态长度： 在某些高级场景中，您可能需要根据实际页面内容或最长导航项的长度来动态计算 ljust 的目标长度，这可能需要通过JavaScript在前端进行一些辅助处理，或者在模板渲染时，通过计算获取到最大长度值。
  • 其他对齐方式： 除了 ljust（左对齐），安企CMS还提供了 rjust 和 center 过滤器：
    • rjust：在文本左侧填充空格，实现右对齐