装饰手机最新话题

开发
1

我正在开发一个主题组件，用于阻止包含自定义用户字段中关键字的帖子。我已成功实现此功能，可在桌面视图的“最新”或“热门”列表中隐藏回复和主题，但在应用程序或移动设备上查看时，它会附加“主题已阻止”的通知，但不会将“blocked”类应用于内容。在主题内阻止回复在移动设备或应用程序上均可正常工作。

查看 components 时，看起来移动设备没有使用不同的 .hbs 文件，我是否遗漏了什么？

const discourseComputed = require("discourse-common/utils/decorators").default;

function addIgnoredTopicClass() {
    if (currentUser) {
        api.container.lookup('store:main').find('user', currentUser.username).then((user) => {
            const blocklist = user.user_fields[1];
            const case_sensitive = user.user_fields[2];
            const whole_words = user.user_fields[3];
    
            const blocked = blocklist.split(",").map(function(item) {
                if (case_sensitive) {
                    return item.trim();
                } else {
                    return item.trim().toLowerCase();
                }
            });
            let classList = this._super(...arguments);
            let elem = document.querySelectorAll("[data-topic-id='" + this.topic.id.toString() + "']")[0];
            console.log(elem);
            const title = (case_sensitive) ? this.topic.fancy_title : this.topic.fancy_title.toLowerCase();
            const excerpt = (case_sensitive) ? this.topic.excerpt : this.topic.excerpt.toLowerCase();
            let result = "";
            
            for (let index = 0; index < blocked.length; ++index) {
                    let pattern = (whole_words) ? new RegExp('(?:\\b|\\s|^)' + blocked[index] + '(?:\\b|\\s|$)') : new RegExp(blocked[index]);
                    // console.log(pattern)
                    if (pattern.test(title)) {
                        classList += "blocker-blocked"
                        const found = blocked.filter(text => title.includes(text));
                        if (found.length >= 2) {
                            const last = found.pop();
                            result = found.join(', ') + ' and ' + last;
                        } else {
                            result = found.join(', ');
                        }
                        const newNode = document.createElement("a");
                        const textNode = document.createTextNode("Blocked for containing " + result + ".");
                        newNode.classList.add("block-notice")
                        newNode.appendChild(textNode);
                        newNode.onclick = function() { showComment(this); };
                        elem.children[0].insertBefore(newNode, elem.children[0].children[0]);
                        for (let index = 0; index < elem.children.length; ++index) {
                            if (elem.children[index].classList.contains('main-link')) {
                                elem.children[index].classList.add("blocker-blocked");
                            }
                        }
                        newNode.classList.remove("blocker-blocked");
                    }
                }
            
            // console.log(classList);
            return classList;
        });
    }
}

api.modifyClass("component:topic-list-item", {
    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});
    
api.modifyClass("component:latest-topic-list-item", {
    
    @discourseComputed()
    unboundClassNames() {
        return addIgnoredTopicClass.call(this);
    }
});
2

或者至少，我以为我搞定了。我去做了点别的事情，现在它又不行了 :thinking: 也许是遇到了api.modifyClass的这个问题？

3

出于好奇，这与内置的监视词功能有何不同？

1 个赞
4

据我所理解，Watched Words 是一个适用于所有用户的管理员设置，对吗？我想做的是允许用户拥有自己的“已关注词语”过滤器，可以筛选出符合论坛规则但用户可能出于自身原因不想看到的帖子。

虚构场景：一个宠物论坛可能有一个关于处理宠物毛发的一般性帖子，主要话题没有标记特定的动物种类。用户 A 回复关于他们的狗，用户 B 回复关于他们的猫，但用户 A 完全不想看到任何关于猫的信息。这个主题组件可以让用户 A 将“猫”放入他们的屏蔽列表中，然后任何地方出现的“猫”都会被替换为“因包含猫而被屏蔽”，并附带一个“显示”按钮。

它的目的是处理那些符合论坛总体规则但可能未被标记或出现在用户 A 想要查看的某个主题的回复中的内容。我正在迁移的论坛之前使用了一个小型的浏览器用户脚本在页面加载后扫描页面，而 Discourse 的一个吸引力在于可以将屏蔽功能直接内置其中，使其在移动设备上也能正常工作（我们使用的用户脚本在移动浏览器上无法运行）。如果用户可以自行决定不查看某个内容而不违反规则，这可以减少标记和关于什么内容属于一般性帖子的争论。

我认为我不会将此作为正式的主题组件发布，因为它需要在管理员面板中创建三个用户字段（我认为这需要一个插件来自动创建？）。我使用的是基础托管计划，因此不进行插件的修改，但我可以在完成后发布完成的主题组件代码和用户字段设置。

4 个赞
5

这听起来很棒。 :slight_smile: 我能想到有几个论坛会觉得这个功能很有用。

3 个赞
6

是的，我看到了潜力。甚至可以用来扩展用户静音功能。因为我有一个用户抱怨 :man_facepalming: 他仍然可以看到其他人对被他静音的用户做出的回应。哈哈

有很多有趣的潜力。我会关注你的项目。
:vulcan_salute::smiling_face_with_sunglasses::+1:

1 个赞
7

我该如何着手找出问题所在？使用 Chrome 开发者工具的移动模式，它可以正常工作，但在实际手机上的 Chrome 和 Android 应用中却无法正常工作。使用 Plugin Outlets 主题组件，似乎没有相关的 outlet，因为我试图修改的是 topic-list-item 本身。

如果这是一个基本问题，我很抱歉，这是我第一次使用 Ember。

1 个赞
8

我在移动设备上实现了这个功能，一旦获准加入，我就会发布到 #theme-component。移动设备上的这个问题是我给具有“main-link”类的 topic-list 子元素添加了一个类，但在移动设备上，这个 main-link 子元素比桌面设备上的层级要深几步。

1 个赞