如何正确地将我的脚本移动到组件的新 JS 选项卡中？

开发
,
1

[管理员通知] 主题“_Base”包含需要更新的代码。（ID：discourse.script-tag-discourse-plugin）（了解更多）

我在一个论坛上，通过将我的 JS 脚本移动到新的 JS 自定义选项卡，就解决了这个消息。

在我的另一个论坛上，它没有那么容易。

这是一个旧的覆盖，只在接受标签的类别中显示撰写器的标签字段：

<script type="text/discourse-plugin" version="1.4.0">    
    // show tag chooser in the composer only when necessary
    const discourseComputed = require("discourse-common/utils/decorators").default;
    const EmberObject = require("@ember/object").default;
    function toggleTagChooser(display = "hide") {
        if (display == "show") {
            document.getElementsByClassName("mini-tag-chooser")[0].style.display = "block";
            document.getElementsByClassName("reply-area")[0].classList.add("with-tags");
            return;
        }
        // Verify the existence of the tag choser
        let tagChoser = document.getElementsByClassName("mini-tag-chooser");
        if(tagChoser.length > 0) {
            tagChoser[0].style.display = "none";
            document.getElementsByClassName("reply-area")[0].classList.remove("with-tags");
        }
        return;
    }
    api.modifyClass('controller:composer', {
        pluginId: "toggleTagChoser",
        @discourseComputed("model.category", "model.tags", "lastValidatedAt")
        tagValidation(category, tags, lastValidatedAt) {
            // custom code to toggle the tag choser
            toggleTagChooser("hide");
            if(category != null) {
                if (
                    category.allow_global_tags == true ||
                    category.allowed_tag_groups.length > 0 ||
                    category.allowed_tags.length > 0
                ) {
                    toggleTagChooser("show");
                }
            }
            // end of the custom code
            const tagsArray = tags || [];
            if (this.site.can_tag_topics && !this.currentUser.staff && category) {
                // category.minimumRequiredTags incorporates both minimum_required_tags, and required_tag_groups
                if (category.minimumRequiredTags > tagsArray.length) {
                    return EmberObject.create({
                        failed: true,
                        reason: I18n.t("composer.error.tags_missing", {
                            count: category.minimumRequiredTags,
                        }),
                        lastShownAt: lastValidatedAt,
                    });
                }
            }
        }
    });
</script>

这个脚本很大程度上基于 meta 上发布的一个类似（且很旧，2019 年或更早）的修改，但我再也找不到原始帖子了。

总之，有两个问题：

  1. 如何正确地将其移动到 JS 选项卡？有可能吗，还是我应该创建一个主题组件？

  2. 有没有更优雅的方法来隐藏/显示撰写器的标签选择器，仅在某些类别中显示？我的论坛只在一个类别中使用标签（一个广告类别，带有 #search 和 #offer 标签）

1 个赞
2

我猜你可以使用 CSS 来根据 body 上的类别类来显示/隐藏标签字段，但这是否更优雅还有待商榷 :slight_smile:

1 个赞
3

这并不能解决员工的问题^ [除非我们 Make category tag rules / restrictions apply to moderators too]，但如果你将标签限制在该类别，它们就不能在其他类别中使用（非员工）。从类别 /edit/tags：

上面指定的标签和标签组仅在此类别和其他也指定了它们的类别中可用。它们不能在其他类别中使用。

1 个赞
5

我查看了它的工作方式，因为已经很久了。

  • 标签输入在创建新主题时会显示在编辑器中，无论选择哪个类别（即使该类别没有管理员以外的其他可用标签），这是我想阻止的
  • 仅 CSS 将不起作用，因为编辑器可以在任何页面上打开，并且没有父 CSS 可以定位到所需的类别，这有助于隐藏编辑器中的标签输入，我相信这就是我使用javascript的原因。

所以，除非我遗漏了什么，否则我仍然需要一个脚本来实现我的目标。

关于此功能的原始#feature主题在这里：

我猜这个功能没有获得足够的关注，而且根据Sam的说法，#pr-welcome在这里是不受欢迎的。

所以，我被困在一个自定义JS解决方案上（我需要修复它 :smiling_face_with_tear: ）

1 个赞
6

直接复制/粘贴即可。JS 选项卡中的内容运行方式与 html <script type='text/discourse-plugin'> 完全相同。如果不起作用，能否分享一下代码？

使用一些非常现代的 CSS，这是可能的：

.d-editor-container:has(.category-input .select-kit-header[data-name="Support"]) .tags-input {
    display: none !important;
}

^^ 这会隐藏 Meta 上“支持”类别的标签输入。

您可以将 [data-name="Support"] 替换为 :not(data-name="Support") 来反转逻辑。

4 个赞
7

我的天哪！看来我 2012 年的 CSS 技能已经跟不上了。这有点奇怪，因为我明明记得 2012 年就像是昨天一样！

我选择了

.d-editor-container:not(:has(.category-input .select-kit-header\[data-name=“Trading Post”\])) .tags-input {
    display: none;
}

这样它就会隐藏在除“Trading Post”之外的所有类别中。

谢谢大家！

5 个赞