如何移动新的主题标题按钮并使其在移动设备上更大

NateDhaliwal · 2025 年7 月 19 日 00:02

您好，您可以尝试 fork 它并更改此 outlet：

github.com/discourse/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.gjs

ab8b7edee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer("1.15.0", (api) => {
            api.renderInOutlet("before-header-panel", CustomHeaderTopicButton);
          });

更改为类似以下内容：

api.renderInOutlet("bread-crumbs-left", CustomHeaderTopicButton);

例如，我将按钮放在侧边栏上方：

github.com/NateDhaliwal/discourse-new-topic-button-theme-component

javascripts/discourse/initializers/initialize-header-new-topic-button.js

f605192ee


      
          import { apiInitializer } from "discourse/lib/api";
          import CustomHeaderTopicButton from "../components/custom-header-topic-button";
          
          export default apiInitializer((api) => {
            api.renderInOutlet("before-sidebar-sections", CustomHeaderTopicButton);
            /*
            document.addEventListener("DOMContentLoaded", function() {
              const newTopicBtn = document.getElementById("new-topic-button");
              const sidebar = document.getElementById("d-sidebar");
              if (newTopicBtn && sidebar) {
                sidebar.insertBefore(newTopicBtn, sidebar.firstChild);
              }
            });
            */
          });

您也可以尝试使用一些 CSS 来更改按钮（创建一个新主题，并将 CSS 放在“mobile”选项卡中，或者如果您使用仓库，则放在 mobile.scss 中）。

话题		回复	浏览量
Move create topic to the top Feature	4	1111	2019 年1 月 5 日
Mobile new topic button Support	0	49	2025 年4 月 6 日
New Topic button hidden text Dev	1	63	2025 年5 月 7 日
How to move the New Topic button? Support	0	560	2020 年10 月 22 日
Floating "New topic" button Support	24	4350	2022 年12 月 10 日

如何移动新的主题标题按钮并使其在移动设备上更大

相关话题