Wikified 帖子组件

[nathank (Nathan Kershaw)]

Simple Description

This theme component enables you to make Wiki posts (and Shared Edits posts) more obvious.

Wikis and Shared Edits are a powerful feature of Discourse, but many users are unfamiliar with the concept and find the UI just a bit too subtle. This component makes it crystal clear, packaging the content from Change the style of a wiki post.

Screenshots

Detailed Description

Installing this component enables you to control the background colour of Wiki posts, and to add some text to the history/edit icon in the top right of the post.

It is a fork of discourse-wikified-post-background-color by @pacharanero, incorporates stuff from Change the style of a wiki post and re-used code from Personal Message Bubbles by @Rhidian.

Settings

Wiki post background color

The background colour of Wiki posts can be set to whatever you like. It defaults to ‘highlight’, but you can use any of these options:

1. It works best when a Scheme colour is chosen (i.e. primary, secondary, tertiary, etc), as these are responsive to automatic dark mode.
2. A named color recognised in CSS (e.g. blue, red, yellow, black, etc)
3. An HTML color code (e.g. #effbfb, etc)

Shared edits background color

You can choose one of the same color options for Shared Edits posts (see the Shared Edits Plugin)

Wiki added text

This adds the little bit of green text (defaulting to Wiki Post) in the top right corner of the post:

This is dynamic, and changes colour along with the history icon if there has been a recent edit (this is an unintended happy thing):

If you don’t want any text there, then delete the text in the setting and save it.

Shared edits added text

The text displayed when it is a Shared Edits post. This is in the Danger color from your palate.

Roadmap

1. Auto tag Topics with ‘wiki’

Please make suggestions as replies to this post.

	Repository	GitHub - nathan-nz/discourse-wikified-posts: This allows you to make Wiki posts more obvious.
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

[pacharanero (Marcus Baw)]

Lovely stuff @nathank
I’m going to archive the old wikified post background color repo, in favour of this your new version, which adds much more.

[Zup]

有人收到此错误吗？

错误：未定义的变量：“$Shared-edits-hide”。在 common.scss 的第 42 行 >> @if ($Shared_edits_hide == "Yes"){ -----^

[nathank (Nathan Kershaw)]

我无法重现该问题，也看不出代码中有任何明显的问题。您能提供更多信息吗？

[Zup]

这是因为我将“共享编辑隐藏”设置为“否”。错误出现在 TC 设置中。将其设置为“是”后，错误消失了。

[nathank (Nathan Kershaw)]

@Zup

这是因为我将“共享编辑隐藏”设置为“否”。

在最新的 Discourse Beta 中，无论设置为“否”还是“是”，我都无法复现。您使用的是旧版 Discourse 吗？抱歉，我没有对其进行任何版本控制。

[Zup]

抱歉，我的问题——有点过时了，是的。直到你提到它，我才在最近更新后再次进行测试。谢谢。

[nathank (Nathan Kershaw)]

已更新组件以更好地支持共享编辑帖子。

这包括根据此处共享编辑的更改进行调整：

@Johani

I pushed a few changes.
DEV: improve interaction between wiki and shared-edit posts by hnb-ku · Pull Request #31 · discourse/discourse-shared-edits · GitHub

[nathank (Nathan Kershaw)]

已对默认背景颜色进行微调，因为我很难看到 @提及。

另外，共享编辑的背景颜色现在默认为 tertiary-very-low。

Colour very low

[volanar]

一个出色的组件。但它只在主题页面上提高了可见性。是否可以修改它，以便在类别页面、主题列表“最近”、“未读”等页面上显示维基图标？

[nathank (Nathan Kershaw)]

好建议，我很确定这是可行的（欢迎提交 PR！）。

我通过在我的实例中简单地将帖子标记为 #wiki 来解决这个问题。当然，这是半自动的——你可以通过高级搜索来识别 wiki 帖子/主题。它还有一个额外的好处，就是可以通过侧边栏导航轻松发现它们。

我曾想过将 wiki 帖子的自动标记作为此组件的一部分（或按你建议的那样），但它并没有给我带来足够的困扰，让我有时间去尝试，我很抱歉。

[Canapin (Coin-coin le Canapin)]

@volanar

是否可以修改它，以便在分类页面、主题列表“最近”、“未读”等页面上显示 wiki 图标？

我在 2021 年在这里问过这个问题：Add an icon in front of wikis in the topic list?

答案是：

@Johani

wiki 是一个帖子级别的属性，而不是主题级别的属性。因此，它没有添加到主题列表项模型中。你可以使用标签或为 Discourse 创建一个功能请求来添加该类。

#功能请求：

Add a specific class for wikis (when first post) at the topic list level

Following the suggestion from @Johani here: To which Johani replied: Unfortunately, wiki is a post-level, not a topic-level property. So, It’s not added to the topic list item model. You can use a tag or create a feature request for Discourse to add that class. I suppose the vast majority of wikis are first posts, but I understand the post level issue. However, having the possibility of emphasizing wikis on the topic list would be a neat addition and may incite people to visit them and m…

[thoka (Thomas Kalka)]

我正在寻求有关如何将背景颜色调整为（自动）暗模式的建议。

目前，我为背景选择的明亮浅色在暗模式下会导致帖子难以阅读。

是否可以扩展调色板并进行一些颜色计算，以定义 wiki 和 pad 的背景颜色？

[thoka (Thomas Kalka)]

您可以使用标签来标记“wiki”主题。
据我回忆，标签可以通过 CSS 进行样式设置。
您还可以获得它们的列表/向下钻取选项的额外好处。

此外，可以通过插件自动将 wiki 标签添加到包含 wiki 的主题中。

[nathank (Nathan Kershaw)]

这就是我推荐使用 Scheme 颜色的原因：

@nathank

当选择 Scheme 颜色（即主色、次色、第三色等）时，效果最好，因为它们可以响应自动暗模式。

如果您想在颜色方面不走寻常路，您将需要找到一种巧妙的方法来处理暗模式。

一个不错的功能是能够指定暗模式颜色。我会在有空时研究一下。

[thoka (Thomas Kalka)]

@nathank

当选择一个方案颜色（例如，主色、次色、第三色等）时，效果最好，因为它们对自动暗模式具有响应性。

当然。但这些颜色对于背景来说太显眼了。
因此，我曾设想过将10%的方案颜色与90%的背景混合。我猜前端没有SASS（或类似的东西）。
但是，一些CSS魔法比如这个会起作用吗？

更新：rgba(0, 255, 0, 0.1)在暗模式和亮模式下效果都相当好。

[Canapin (Coin-coin le Canapin)]

@thoka

我猜 SASS（或类似的东西）在前端不可用。
但一些 CSS 魔术 像这样 会起作用吗？

SASS 函数在自定义主题部分可用，它会在您保存修改时进行编译。不过，您不能在主题或 CSS 变量上使用 SASS 函数。
如果您想在配色方案的颜色上使用 SASS 函数，则必须使用相应的 SASS 变量。

可以工作

body {
    background: darken($secondary, 10%);
}

不可以工作

body {
    background: darken($my_theme_variable, 10%);
}

不可以工作

body {
    background: darken(var(--secondary), 10%);
}

而且，我认为您链接中描述的内容应该可以工作。

[nathank (Nathan Kershaw)]

@Canapin

SASS 函数在自定义主题部分可用，在保存修改时进行编译。

也许这值得一试。这是我（供我自己参考）使用 SASS mix() 函数的指南：

Manipulate Color with Ease | Sass and Compass for Designers