覆盖 liferay-ui 导航标签库

Question

问题

我正在 Liferay 主题中实现一个 css 组件库，将 css 添加到 custom.css 文件中。我在实现对导航的更改时遇到了一个问题，该更改当前使用标记库liferay-ui:navigation 来生成导航并设置导航样式（在导航标记库中使用init.jsp 和page.jsp）。 taglib 在自定义导航钩子中被调用为：

<liferay-ui:navigation
bulletStyle="<%= bulletStyle %>"
displayStyle="<%= displayStyle %>"
...etc
/>

这会生成以下 html：

<div class="nav-menu nav-menu-style-dots" id="aui_3_4_0_1_406">
  <ul class="layouts level-1" id="aui_3_4_0_1_405">
    ...list items
  </ul>
</div>

taglib page.jsp 中的相关行是：

<div class="nav-menu nav-menu-style-<%= bulletStyle %>">

和

sb.append("<ul class=\"layouts level-");

组件库不使用 Liferay 生成的类名，并且该库用于多个应用程序，并非全部内置于 Liferay。

选项

要解决这个问题，我认为我有两个选择：

• 更改组件库中的 css 类以匹配 Liferay 生成的类。我不喜欢这个选项，因为这意味着在不同的应用程序中会有不同的 css 类，每个类都在做同样的事情。此外，它消除了拥有组件库的好处。
• 找到某种方法来覆盖 taglib，例如creating a custom hook 或修改我现有的导航挂钩。我更喜欢这个选项，因为它使组件库保持完整并且更易于维护。

问题

是否可以使用钩子或其他方法（可能是alloy-ui）覆盖liferay-ui导航标签库以覆盖page.jsp中的上述行？

Answer 1

是的，可以使用 jsp-hook 覆盖 taglib 实现（我刚刚通过对我的 custom navigation 应用程序的出色更新对其进行了测试，正是您提到的 jsp）。但是，如果您可以使用 css 解决您的问题，我发现这是更可取的解决方案。 CSS 的侵入性要小得多，即使您现在有两个不同的 CSS 选择器做同样的事情，另一种选择是让一个 JSP-hook 和一个 CSS 更改来做出选择。

将 JSP 更改保留为实际结构所需的更改（如果可能）并尽可能使用 CSS。您的主题是自定义 CSS 的天然场所 - 恕我直言，那里最好维护。