我想知道是否有办法自定义“新建主题”工具栏上显示的按钮（以及它们的顺序）。
具体来说，我想用“添加事件”按钮替换“日期/时间”按钮。“日期/时间”按钮只会让新用户感到困惑，而在我们的场景中，我们希望突出显示“事件”。指示用户先忽略那个看起来像日历的按钮，然后点击齿轮图标，最后再点击另一个看起来像日历的图标，这并不是最好的方法，因为我们的社区有很多非技术导向的用户和老年人。
我确实看到有一些关于自定义新建主题“按钮”的主题，但没有关于自定义工具栏本身的主题。
3 个赞
没有配置工具栏的设置，但可以通过主题和插件进行配置。
最好有此功能，因此我将其重新归类为功能请求。
目前，可以通过 CSS 隐藏按钮……例如：
.d-editor-button-bar {
.local-dates { // 隐藏日期按钮
display: none;
}
}
或者隐藏 
菜单中的某个选项
.toolbar-popup-menu-options {
[data-name="Build Poll"] {
display: none;
}
}
使用 CSS 重新排序这些菜单中的项目也相当简单……您可以这样做：
.d-editor-button-bar {
.local-dates { // 将日期按钮移到开头
order: -1/
}
}
我们有一个关于如何更改 CSS 的指南：
话虽如此，更难的更改是将某项移入/移出下拉菜单并移入主工具栏（反之亦然）。您需要使用 CSS 隐藏原始按钮，然后使用 API 添加一个重复的按钮。
查看一个示例主题组件，例如 Discourse Gifs，可以大致了解如何实现……但这对于非开发人员来说会很棘手。
9 个赞
对于 
菜单
当我尝试这样写时，显示顺序没有改变。
PS：display: none; 也没有起作用。
.toolbar-popup-menu-options {
[data-name="Create event"] {
order: -1;
}
}
以下语法按预期工作，将“Create event”移到最前面。
.select-kit-collection {
display: flex;
flex-direction: column;
}
.select-kit-row[data-name="Create event"] {
order: -1;
}
我不熟悉 CSS，ChatGPT 帮助创建了上面的代码。
1 个赞
是的，这确实是必需的。不仅需要为所有用户提供一个“默认”选项，而且每个用户都可以自定义它，因为并非所有人都需要一个按钮来使文本“粗体”或“斜体”，甚至“询问 AI”。
但就目前而言，至少能够全局移动项目并将其添加到隐藏/齿轮菜单中，将会有所帮助。
在我的 13 英寸屏幕上，东西开始变得有点拥挤（我总是喜欢让一些原始内容可见，以便引用部分等）：
我想知道：您是如何添加“需要 20 个字符”的注释的，它是否会显示用户已经输入了多少字符？
标题呢？
老实说，我不太确定。那是之前我运行的一个社区安装的（但现在不运行了）。看起来是这样的，它可以在这里找到。
2 个赞
太好了！正是这样！
1 个赞
我的论坛上也有老年用户，我感觉向他们解释这些很愚蠢。
齿轮图标对于“还有更多”这个含义来说也太不明显了。也许省略号会更合适？有没有简单直接的方法可以更改图标？
我在这里发现的另一个障碍是，在移动设备上有一个小汉堡包图标可以隐藏/显示工具栏，而且它似乎默认是关闭的。这造成的困惑远远大于它可能带来的任何好处。我将其关闭了：
.composer-controls .toggle-toolbar {
display: none;
}
.d-editor-button-bar {
display: grid !important;
}
你好，我想知道这个方法是否仍然推荐，或者它是否受到这个的影响？
1 个赞
仍然支持使用 .js 初始化程序中的 api.onToolbarCreate 
您链接的主题仅指在 <script type="text/discourse-plugin"> 标签中包含 javascript。
3 个赞
您好，
我将“创建事件图标”放在了“+菜单”的右侧外部，但您可以按照以下说明将其放置在左侧：
- 在您的主题的管理员后台
外观>主题>编辑>编辑代码>head中添加此 JavaScript：
<!-- Custom Create Event Button (Icon-based, Language-proof) -->
<script>
(() => {
const e = ".d-editor-button-bar";
const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
const n = ".fk-d-menu__inner-content";
const o = ".d-modal.fk-d-menu-modal";
const c = (e) => {
const t = e.querySelector('svg use[href="#calendar-day"]');
return t ? t.closest("button") : null;
};
const r = (e, t, n = 4000) => new Promise((o, c) => {
const r = t(e);
if (r) return o(r);
const l = new MutationObserver(() => {
const n = t(e);
n && (l.disconnect(), o(n));
});
l.observe(e, { childList: !0, subtree: !0 });
setTimeout(() => {
l.disconnect();
c();
}, n);
});
const l = (e = 4000) => {
const t = new MutationObserver(() => {
document.querySelector(o) && t.disconnect();
});
t.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
t.disconnect();
}, e);
};
const s = (e) => {
if (e.querySelector(".custom-create-event-btn")) return;
const o = document.createElement("button");
o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
o.title = "Create event";
o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
e.appendChild(o);
o.addEventListener("click", async () => {
const e = document.querySelector(t);
if (!e) return;
e.click();
let o = document.querySelector(n);
if (!o) {
await new Promise((e, t) => {
const c = new MutationObserver(() => {
o = document.querySelector(n);
o && (c.disconnect(), e());
});
c.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
c.disconnect();
t();
}, 2000);
});
}
try {
(await r(o, c)).click();
l();
} catch {}
});
};
const u = new MutationObserver(() => {
const t = document.querySelector(e);
t && s(t);
});
u.observe(document.body, { childList: !0, subtree: !0 });
const d = document.querySelector(e);
d && s(d);
})();
</script>
- 如果您想将图标放在左侧而不是右侧：在同一个管理员页面，您会找到一个 CSS 选项卡，您可以在其中添加此内容：
.btn.no-text.btn-icon.toolbar__button.link.custom-create-event-btn { order: -1; }
- 奖励：如果您只想在某些类别中使此按钮可见，请使用那里的脚本并修改条件以使用您的类别名称：Discourse Calendar (and Event) - #547 by opcourdis
1 个赞
非常感谢 @david 和 @opcourdis 提供的有益回复。
2 个赞