# 新主题标题按钮

**URL:** https://meta.discourse.org/t/new-topic-header-button/84551
**Category:** Theme component
**Tags:** official, new-topic-header-button
**Created:** [2018年四月4日 09:43 UTC](https://meta.discourse.org/t/new-topic-header-button/84551 "2018-04-04T09:43:49Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2021年六月28日 21:17 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/52 "2021-06-28T21:17:41Z")

</div>

我猜，如果用户没有权限在当前分类下创建新主题，最佳做法是启动编辑器时自动选择一个空的分类？也许可以配合一个弹窗并附带相关提示。

---

<div class="post-metadata">

### Author: ![lollop](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lollop/32/274014_2.png) [@lollop](https://meta.discourse.org/u/lollop)
#### Post date: [2022年十月18日 01:17 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/57 "2022-10-18T01:17:55Z")

</div>

> [@tophee](#):
>
> > [@codinghorror](#):
> >
> > Inviting every random visitor to create a new topic… will end in tears
> 
> 他们无法创建该主题，除非他们注册。鼓励人们注册显然是一件好事（并且默认通过注册按钮和回复主题按钮完成）。所以我并不真正明白为什么新主题按钮会引起任何问题。

我也想要这个功能，所以我 fork 了这个仓库，并让它向匿名用户和登录用户都显示“新主题”按钮。如果匿名用户点击该按钮，他们将被重定向到登录/注册模态框。

仓库：[GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status](https://github.com/Peterlollo/discourse-new-topic-button-for-all-users-theme-component)

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [2024年三月5日 13:40 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/58 "2024-03-05T13:40:00Z")

</div>

有一些过时的类名，因此样式未按预期显示。已添加一个 PR 来更新它们：[FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub](https://github.com/discourse/discourse-new-topic-button-theme-component/pull/6)

---

<div class="post-metadata">

### Author: ![kuaza](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kuaza/32/264151_2.png) [@kuaza](https://meta.discourse.org/u/kuaza)
#### Post date: [2024年三月17日 12:01 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/59 "2024-03-17T12:01:29Z")

</div>

是否可以将此插件更新到新版本？

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2024年四月8日 17:19 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/60 "2024-04-08T17:19:18Z")

</div>

我已经合并了该组件的重构，以便与这些更新一起使用：[Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544)

该组件应能像以前一样运行，并带有一些小的增强功能（它将反映草稿状态并响应当前类别和标签权限）。如果您发现任何新问题，请告知我们。

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2024年四月8日 18:01 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/61 "2024-04-08T18:01:12Z")

</div>

> [@lollop](#):
>
> 我也想要这个功能，所以我 fork 了这个仓库，并让它向匿名用户和登录用户都显示“新主题”按钮。如果匿名用户点击该按钮，他们将被重定向到登录/注册模态框。

我刚刚添加了一个新的 `show_to_anon` 设置（默认禁用），它将实现这个功能。

---

<div class="post-metadata">

### Author: ![jrgong](https://avatars.discourse-cdn.com/v4/letter/j/c57346/32.png) [@jrgong](https://meta.discourse.org/u/jrgong)
#### Post date: [2024年四月11日 08:40 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/62 "2024-04-11T08:40:00Z")

</div>

添加一个下拉菜单，就像 [nolo’s dropdown wizard component](https://github.com/nolosb/discourse-wizards-dropdown-button.git) 中的一样，“可行性”有多大？

由于我们正在使用自定义向导在特定类别中创建新主题，因此我们基本上希望将它们链接到下拉菜单中。此外，我们还希望在按钮中添加一些仅限员工的链接（例如“新类别”和“新组”）。

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2024年八月19日 02:14 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/65 "2024-08-19T02:14:42Z")

</div>

您好，我在这个组件中无法使用“pencil”的 Font Awesome 免费图标，即使我已经将其添加到“SVG 图标子集”设置中。有什么想法吗？

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [2024年八月19日 03:12 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/66 "2024-08-19T03:12:06Z")

</div>

> [@patrickemin](#):
>
> “pencil” fontawesome free icon

我认为 5 版本中没有免费的 `pencil` 图标

> [@Custom user menu tab](https://meta.discourse.org/t/custom-user-menu-tab/130091/26?u=moin):
>
> We’re not on Font Awesome 6 yet, so you’ll need to search the version 5 set for available icons here: [Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome](https://fontawesome.com/v5/search?o=r&m=free) It looks like that icon was renamed shop in version 6, but it did exist in version 5 with a different name: store-alt. So if you update additional icons and custom tab icon to use store-alt it should work!

我认为 v5 中的 pencil 也是 `pencil-alt`

---

<div class="post-metadata">

### Author: ![patrickemin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/patrickemin/32/520162_2.png) [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [2024年八月19日 03:15 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/67 "2024-08-19T03:15:47Z")

</div>

> [@Moin](#):
>
> 我认为在 v5 中，铅笔也是一样的，它是 `pencil-alt`

谢谢！它奏效了！

---

<div class="post-metadata">

### Author: ![HAWK](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hawk/32/86627_2.png) [@HAWK](https://meta.discourse.org/u/HAWK)
#### Post date: [2024年十月29日 02:37 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/68 "2024-10-29T02:37:53Z")

</div>

帖子已拆分为新主题：[无新主题按钮](https://meta.discourse.org/t/no-new-topic-button/333299)

---

<div class="post-metadata">

### Author: ![David\_Ghost](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [2025年二月7日 15:21 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/69 "2025-02-07T15:21:18Z")

</div>

嘿，

是否可以将 TC 更新为新的 [草稿更新](https://meta.discourse.org/t/discourse-now-supports-multiple-drafts/349738)？

谢谢

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年三月16日 22:02 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/70 "2025-03-16T22:02:37Z")

</div>

请求：添加一个选项来定义按钮的颜色（背景、文本+图标），以适应浅色和深色主题。由于新主题是社区发展的一部分，彩色按钮会产生更大的影响。

谢谢

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年三月16日 22:05 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/71 "2025-03-16T22:05:48Z")

</div>

使用 CSS 可以很容易地做到这一点：

> [@New Topic Header Button](https://meta.discourse.org/t/new-topic-header-button/84551/18?u=canapin):
>
> Use this code, changing the color obviously. #new-create-topic { background-color: red; }

（您可以使用 CSS 针对深色和浅色主题进行设置）

* * *

编辑：添加一个合适的示例

```scss
#new-create-topic {
    background-color: light-dark(red,green);
}

```

将在浅色主题上将按钮的颜色设置为红色，在深色主题上设置为绿色。

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年三月16日 22:10 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/72 "2025-03-16T22:10:28Z")

</div>

我还不熟悉 Discourse 中的 CSS。我熟悉 CSS，只是还没有开始在 Discourse 中探索它。  
我应该在哪里/如何添加它？

我仍然认为这可以是一个避免增加复杂性的功能，对于那些完全不熟悉 CSS 的人来说，它只是让组件更容易定制。

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年三月16日 22:24 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/73 "2025-03-16T22:24:59Z")

</div>

> [@alltiagocom](#):
>
> 我应该在哪里/如何添加它？

可以在你的主题中，或者在一个新的主题组件中——然后必须将其包含在你的主题中：

 ![This image shows a settings page for customizing a forum's theme, highlighting options for default theme selection, color palettes, and the ability to upload theme-related assets. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/9/d/b/9db974f98242c8c36708b860610c2f892d382fbf.png)  
 ![The image shows a code editor with CSS code written for creating a new topic, setting a background color to a light-dark shade of red and green using SCSS syntax. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/a/3/7/a37feed0c9f57588c0be0668700440e8e9286c76.png)

我已经将 CSS 代码添加到了上面的帖子中。

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年三月16日 22:37 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/74 "2025-03-16T22:37:28Z")

</div>

我也在测试 `:hover`，它对按钮和文本有效，但对图标无效，除非我将鼠标悬停在图标本身上。您知道如何将图标定位在按钮悬停时，即使鼠标不在图标上方吗？

```css
#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}

```

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2025年三月16日 22:46 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/75 "2025-03-16T22:46:15Z")

</div>

您的第二条规则意味着您在悬停图标时定位的是图标，而不是按钮。

使用 SCSS 语法，其中

```css
#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

```

（如果浅色和深色使用相同的颜色，则无需 `light-dark(red,red);`）

> **我推荐 SCSS，因为它更容易整理我们的漂亮代码，但这需要学习新东西 😄**
>
> ```scss
> #new-create-topic:hover {
> background-color: light-dark(red,red);
> .d-icon, & {
> color: light-dark(red,white);
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![alltiagocom](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alltiagocom/32/492709_2.png) [@alltiagocom](https://meta.discourse.org/u/alltiagocom)
#### Post date: [2025年三月16日 23:02 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/76 "2025-03-16T23:02:25Z")

</div>

> [@Canapin](#):
>
> 你的第二条规则意味着你在悬停图标时瞄准的是图标本身，而不是按钮。

你说得对。我的错……谢谢！

> [@Canapin](#):
>
> 另外，如果你对浅色和深色使用相同的颜色，就不需要 `light-dark(red,red);`

这些只是测试。我实际上使用的是默认主题，而且我不知道该主题是否有这两个选项？

关于 SCSS，我几年前学过，但由于我不是开发人员，所以我从未真正使用过它。我经常使用 HTML 和 CSS，所以对这两者比较熟悉。

---

<div class="post-metadata">

### Author: ![David\_Ghost](https://avatars.discourse-cdn.com/v4/letter/d/c37758/32.png) [@David\_Ghost](https://meta.discourse.org/u/David_Ghost)
#### Post date: [2025年四月28日 09:37 UTC](https://meta.discourse.org/t/new-topic-header-button/84551/77 "2025-04-28T09:37:36Z")

</div>

我找到了这段代码来做这个修改，但不确定这是不是最好的方法：

`````plaintext
<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>````
`````

[上一頁](https://meta.discourse.org/t/new-topic-header-button/84551.md?page=1)

[下一頁](https://meta.discourse.org/t/new-topic-header-button/84551.md?page=3)