新话题标题按钮

主题组件
,
52

I guess best behaviour would be to start the composer with empty category if the user does not have the permission to create new topic in the current one? Potentially with a modal and a notice about such.

57

我也想要这个功能，所以我 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

2 个赞
58

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

4 个赞
59

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

1 个赞
60

我已经合并了该组件的重构，以便与这些更新一起使用：Upcoming Header Changes - Preparing Themes and Plugins

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

5 个赞
61

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

3 个赞
62

添加一个下拉菜单，就像 nolo’s dropdown wizard component 中的一样，“可行性”有多大？

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

65

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

1 个赞
66

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

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

4 个赞
67

谢谢！它奏效了！

2 个赞
68

帖子已拆分为新主题：无新主题按钮

69

嘿，

是否可以将 TC 更新为新的 草稿更新？

谢谢

2 个赞
70

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

谢谢

71

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

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

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

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

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

2 个赞
72

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

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

1 个赞
73

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

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)
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)1247×936 48.3 KB

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)
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)461×292 7.02 KB

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

1 个赞
74

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

#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);
}
1 个赞
75

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

使用 SCSS 语法，其中

#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，因为它更容易整理我们的漂亮代码，但这需要学习新东西 😄 
#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}
1 个赞
76

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

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

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

1 个赞
77

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

<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>````