为帖子部分创建自定义CSS样式的最佳实践？

开发
1

前言

在我设置和定制社区的 Discourse 实例时，我一直在寻找利用该平台强大功能来提高自己和用户幸福感的方法。

我想做的一件事是为我发送的私人消息添加自定义签名，并“签署”它们。我不想使用图片；而是想使用 Google 字体显示我的名字。

让这个功能正常工作将帮助我了解如何为我的社区提供代码片段等内容，以便他们在撰写帖子时使用，因此即使问题很具体，知识也是通用的。

我问这个问题的原因是，在花时间创建这些块以供使用之前，我想确保这是最好的方法。因为如果我能想到一些巧妙的想法，我打算分享一些例子来引发讨论，以便我能从比我更聪明的人那里获得更多巧妙的想法。 :slight_smile:

问题：如何将帖子中的文本放入可以通过 CSS 定位的块中？

我迄今为止发现的内容

我偶然发现了以下主题：

在帖子中添加自定义 CSS / 添加自定义类

从那个主题中，我了解到这个答案：

这似乎确实有效，但我很想知道这目前是否被认为是最佳实践/方法。

既然我在这里，一个稍微离题但又相关的具体问题：

我正在“滥用”一项自定义功能来实现我的签名想法，但它不起作用，我想知道是否有人能立即给出一些见解。

我正在使用一个我知道可以工作的插件加载自定义的 Google 字体，因为我的整个论坛都在成功使用这些字体。我用它来强制加载“Playwrite USA Traditional”。

我的主题中有以下 CSS：

div[data-theme-ieh] {
    font-family: "Playwrite USA Traditional";
    text-align: right;
}

我样本帖子中的 div 确实是右对齐的，但它使用的是 Arial 或类似字体，而不是我的主题字体，也不是 Playwrite。

我的设置中是否有什么我忽略的愚蠢之处，或者您能想到我忽略的其他地方吗？这不是一个 Discourse 问题。

另外，是否有更好的方法来加载 Google 字体供我的网站使用？

2

我建议查看 Generic bbcode wrapper for theme components

根据您在此分享的信息，我无法想到任何问题。如果您能分享一个指向实时论坛的链接，我们将更容易帮助您找到问题所在。

1 个赞
3

检查来自 https://fonts.google.com/share?selection.family=Playwrite+US+Trad:wght@100..400, 的嵌入代码，它看起来应该是 \"Playwrite US Trad\"

// <uniquifier>: 使用唯一且描述性的类名
// <weight>: 使用 100 到 400 之间的值

.playwrite-us-trad-<uniquifier> {
  font-family: "Playwrite US Trad", cursive;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
1 个赞
4

哦，看起来很不错。谢谢你的指点！

我本来就没指望能有什么答案。但以防万一有什么显而易见的问题。哈哈。

我……真是傻得谷歌……哎呀。我一直纠结于组件的方向，确保我正确地输入了包括大写字母在内的名称，但我甚至没有想到去检查谷歌实际使用的名称。哎呀。

为了记录，加载正确的字体名称并引用正确的字体名称会产生最初预期的结果。

现在我可以“签名”我的帖子了：

712×532 40 KB

谢谢 :slight_smile:

1 个赞
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.