モバイルデバイス向けに新しいトピックヘッダーボタンを移動して大きくする方法

NateDhaliwal · 2025 年 7 月 19 日午前 12:02

こんにちは。フォークして、このアウトレットを変更してみてください。

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	1110	2019 年 1 月 5 日
Mobile new topic button Support	0	49	2025 年 4 月 6 日
New Topic button hidden text Dev	1	61	2025 年 5 月 7 日
How to move the New Topic button? Support	0	559	2020 年 10 月 22 日
Floating "New topic" button Support	24	4348	2022 年 12 月 10 日

モバイルデバイス向けに新しいトピックヘッダーボタンを移動して大きくする方法

関連トピック