覆盖 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 生成的 class 名称，并且该库用于多个应用程序，而不是 Liferay 中的所有应用程序。uilt。

选项

为了解决这个问题我想我有两个选择：

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

问题

是否可以使用挂钩或其他方法（可能是 alloy-ui）覆盖 liferay-ui 导航标签库以覆盖 [=17] 中的上述行=]?

Answer 1

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

保留 JSP 更改以对实际结构进行必要的更改（如果可能）并尽可能使用 CSS。您的主题是自定义的自然位置 CSS - 恕我直言，最好在那里维护。

覆盖 liferay-ui 导航标签库

Override liferay-ui navigation taglib

java

jsp

liferay

liferay-theme

问题

选项

问题