根据 ModX Revo 中显示的内容设置 html class

Question

在我的 modx revo 项目中，我有 link 文章列表，如果我单击 link 相应的文章将显示在下面。 link 是可设置样式的，而引用显示的文章需要设置样式的则不同。所以我需要向 link 添加特定的 html class，例如

<div>
    <a class="link">1st article</a>
    <a class="link">1nd article</a>
    <a class="link active">3rd article</a> <!-- this one was selected -->
    <a class="link">4th article</a>
</div>
<article>
    <!-- 3rd article text goes here -->
</article>

每篇文章都是 modx 资源内容，links 列表是打开它的模板的一部分。有什么办法可以做到吗？

Answer 1

最简单的方法是使用 Wayfinder 等额外工具来构建您的菜单，该菜单会根据您正在查看的资源自动处理添加 "active" class。

这是文档中的 Wayfinder 示例，它在网站根目录下获取 1 层深度的页面，并自动将 class "active" 添加到您正在查看的页面。

[[Wayfinder? &startId=`0`&level=`1`]]

默认情况下，它输出所有项目的无序列表。然后可以使用额外的参数，特别是 outerTpl 和 rowTpl 对其进行自定义以适合您的站点（更多信息在 Wayfinder 的文档页面上：https://docs.modx.com/extras/revo/wayfinder）

Answer 2

简单的方法是使用诸如 pdoMenu（在 pdoTools 包中可用）之类的额外工具来生成导航。

使用以下片段调用：[[pdoMenu? &parents=`0` &level=`1`]]

这将根据 default templates 生成导航。活动的 li 元素将具有 class .active，因此您可以相应地设置它的样式。

pdoTools 还为您提供了大量其他有用的片段，您可以在 here.

中找到这些片段

根据 ModX Revo 中显示的内容设置 html class

Set html class depending on showed content in ModX Revo

modx

modx-revolution