ProTip 模板用于提升用户体验

ProTip 模板是一个强大的功能，它可以向用户显示有用的提示，指导他们如何像专业人士一样使用该平台。此模板使用 Twig。以下是如何工作以及如何在 Mautic 中有效使用它的方法。

ProTips 的 Twig 模板

当提供提示时，ProTip 模板会根据条件进行渲染。以下是其主要组件的分解：

{% if tip is defined and tip is not empty %}
<div class="col-xs-12 ai-center mt-md mb-md">
    <div class="text-muted">
        <i class="ri-lightbulb-line ri-lg"></i>
        <span class="fw-b">{{ 'mautic.core.protip'|trans }}</span>
        {{ tip|trans|raw }}
    </div>
</div>
{% endif %}

此模板检查 tip 变量是否已定义。如果已定义，则会渲染一个包含该提示的 div。Mautic 会使用灯泡图标、”ProTip” 标签（一个可翻译字符串）以及提示内容本身来显示该提示。

tip 参数通过 Twig 的 trans 过滤器传递，从而实现国际化。还应用了 raw 过滤器，这使得可以在提示内容中使用 HTML 标签。这对于包含诸如 <kbd> 标签以突出显示键盘快捷键非常有用。

要在 Mautic 中包含一个 ProTip，请使用以下语法：

{{ include('@MauticCore/Helper/protip.html.twig', {tip: 'mautic.core.protip.contacts.view'}) }}

在此示例中，它包含了 ProTip 模板并将一个翻译键 - mautic.core.protip.contacts.view - 作为提示内容传递。此特定提示告知用户如何使用 V 键在卡片和表格视图之间切换。

使用翻译键而不是硬编码的字符串可以轻松地本地化提示。它还有助于 Mautic 中的一致性，因为可以通过引用其键在多个地方重用相同的提示。

使用 ProTip 模板来提升 Mautic 的用户体验。这些提示提供上下文帮助，突出显示用户可能容易忽略的快捷方式和功能。重要的是要使提示简洁、相关且具有可操作性，以最大限度地提高它们在指导用户成为“高级用户”方面的有效性。