MODX Revo中根据显示内容为文章链接设置HTML类

嘿，我来帮你搞定MODX Revo里给当前显示的文章链接加差异化样式的需求！下面给你几种实用的实现方式，根据你的场景选就行：

方法1：动态资源列表自动判断（推荐） #

如果你的文章链接是通过MODX的资源列表动态生成的（比如用pdoResources或者getResources），可以直接在模板Chunk里用MODX的输出过滤器做判断，自动给当前文章的链接加上active类。

首先，在你的模板里调用资源列表：

[[!pdoResources?
    &parents=`你的父资源ID`  <!-- 替换成存放文章的父资源ID，比如如果文章都在ID为5的容器里就写5 -->
    &tpl=`articleLinkTpl`   <!-- 这个是用来渲染单个链接的Chunk名称 -->
    &limit=`0`              <!-- 0表示显示所有文章，按需调整 -->
]]

然后创建名为articleLinkTpl的Chunk，内容如下：

<a class="link[[+id:is=`[[*id]]`:then=` active`]]" href="[[~[[+id]]]]">[[+pagetitle]]</a>

逻辑说明： #

• [[+id]]是循环中每篇文章的资源ID
• [[*id]]是当前正在浏览的文章的资源ID
• :is=[[*id]]:then= active``是MODX的输出过滤器，当两个ID相等时，就会在link类后面追加 active，完美实现差异化样式。

方法2：手动维护的链接列表 #

如果你的文章链接是手动写在模板里的，那可以给每个链接单独加判断逻辑：

<a class="link[[*id:is=`123`:then=` active`]]" href="[[~123]]">1st article</a>
<a class="link[[*id:is=`456`:then=` active`]]" href="[[~456]]">2nd article</a>
<a class="link[[*id:is=`789`:then=` active`]]" href="[[~789]]">3rd article</a>

把上面的123、456、789替换成对应文章的实际资源ID就行，每次打开某篇文章时，对应的链接就会自动加上active类。

方法3：Ajax无刷新加载场景 #

如果你的文章是通过Ajax点击链接后无刷新加载到页面下方的，那需要配合前端JS来控制active类的切换：

1. 先给链接加上data-id属性方便识别：

<a class="link" data-id="[[+id]]" href="[[~[[+id]]]]">[[+pagetitle]]</a>

2. 然后添加JS逻辑：

// 获取所有文章链接
const articleLinks = document.querySelectorAll('.link');
// 给每个链接绑定点击事件
articleLinks.forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault(); // 阻止默认跳转行为
        
        // 移除所有链接的active类
        articleLinks.forEach(el => el.classList.remove('active'));
        // 给当前点击的链接加上active类
        this.classList.add('active');
        
        // 这里写加载文章内容的逻辑，比如用fetch获取内容
        const articleId = this.dataset.id;
        fetch(`/path-to-your-article-loader?articleId=${articleId}`) // 替换成你的文章加载接口
            .then(res => res.text())
            .then(content => {
                // 把内容插入到下方的容器里
                document.getElementById('article-container').innerHTML = content;
            });
    });
});

这种方式适合不需要刷新页面就能切换文章的场景，前端直接控制样式切换，体验更流畅。

小提示： #

如果你的MODX用了友好URL，获取资源ID的方式可能需要调整，比如给链接加data-id属性是最稳妥的做法，避免从URL里解析ID出错。

内容的提问来源于stack exchange，提问作者Voletcat