ZeroNoise 主题

:discourse2: 摘要 Zeronoise 专注于拥有清晰的色彩强调微妙的内容区域区分,旨在营造愉悦的阅读体验。
:eyeglasses: 预览 在 Discourse 主题创建器中预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/zeronoise
:open_book: 初次接触 Discourse 主题? Discourse 主题使用入门指南

安装此主题

功能特性

大家好,Meta!我开发了一个 Discourse 主题,专注于拥有清晰的色彩强调微妙的内容区域区分,旨在营造愉悦的阅读体验。

在桌面版本中,我还将话题创建者的头像移到了标题左侧,以便在设计中赋予其更高的层级。

尝试使用衬线字体也很有趣,最终 “Playfair Display” 确实为这个主题增添了独特的个性(嘿嘿)。

另一件有趣的事情是,由于主题头部是黑色的,您可以通过主题设置(颜色反转、色相旋转和亮度)来调整徽标的某些方面。

希望你们喜欢、使用并 Fork 它 :100:!

设置

名称 描述
徽标反色
徽标色相旋转 指定一个度数来更改您的徽标颜色。如果您不了解这是什么,可以将其保留为 0,或者在谷歌搜索 “css filter hue rotation”
徽标亮度 设置您想为徽标添加的亮度值(如果您想使其变暗,请设置负数)

致谢

@ruidovisual 创建


:discourse2: 由我们托管? 我们的标准版、商业版和企业版计划均可使用这些主题。

51 个赞

哇!主题真棒!说实话,很多元素本应直接集成到 Material Theme 中,但这两个主题都很出色。做得好!:+1:

2 个赞

这个主题看起来真的很不错。我肯定会在我的网站上试试。

4 个赞

新主题是一个组件吗?

2 个赞

说实话,这是我找到的最美观的主题之一!非常感谢 :slight_smile:

如果不太麻烦的话,@ruidovisual,我还需要一点帮助:slight_smile:

  • 我在这方面完全是个新手,请原谅我的天真。我已经成功 fork 了您的文件并更改了配色方案。我需要更改字体,我看到可以通过在 SCSS 变量中导入自己的字体族来实现?
  • 我还没弄清楚的是如何设置两种不同的字体:一种用于标题、页眉等,另一种用于正文。

如果您能在这里帮帮我,那就太好了。我知道这可能完全超出了范围,但这确实会很有帮助 :slight_smile:

5 个赞

嘿 Karthikk!很高兴你喜欢这个主题 : )

最简单的方法是为 body 定义一个 font-family(我认为在 common.scss 中操作是最佳选择):

body {
  font-family: '你的字体族名称', [FALLBACKS];
} 

我不确定你是要添加自己的字体还是使用 Google Fonts,但我建议从 Google 目录中选择一个字体族。

记得将 [FALLBACKS] 替换为你所选字体类型的备用字体。有关 font-family 备用字体的更多信息,可以查看 这里

关于更改标题和标题的字体,我想这部分你已经解决了,但作为提醒,除了导入字体外,你还需要在 variables.scss 的第 116 行 中声明它。

希望这能帮到你!祝你周末愉快 : )

7 个赞

你是指主题中的自定义组件吗?在这种情况下,答案是否定的。它已经通过 position: fixed 设置了。请查看 mobile.scss 的第 36 行

祝你周末愉快,感谢你的耐心 :slight_smile:

4 个赞

主题非常棒!我迫不及待想基于 zeronoise 为我们的 Discourse 构建一个新主题。感谢分享!

5 个赞

主题很棒,在我的个人喜爱清单中名列前茅。:slight_smile:

如果字体能可选地与向导中选择的字体保持一致,那就更有趣了。

4 个赞

@ruidovisual

我非常喜欢你的主题。

是否可以将紫色改为红色?你能发布一个红色的主题版本吗?

我自己尝试过,但之后主题效果就消失了,而且也没有变成红色。:grin:

2 个赞

@ruidovisual 感谢你的解释,多亏了你,我已经知道如何更改字体了!

我现在正在尝试制作自己的浅色和深色主题版本。我使用颜色调色板来实现这一点,因为我想尽可能避免使用 CSS。

我已经成功调整了几乎所有内容,但以下两个元素除外:

  1. 帖子下方的状态栏在你的主题中有一个特殊效果,我无法通过颜色调色板来控制它。我该如何使用 CSS 进行调整?应该针对哪一部分?

  2. 在独立分类视图中,位于所有主题上方的横条无论我在调色板中设置什么颜色,都保持白色。

如果你能帮我解决这些问题就太好了 :slight_smile:

附注:这是我的颜色调色板,供你参考:

1 个赞

主题很棒。

有个问题,有人成功将其与“框式”分类搭配使用吗?它们只显示出随机形状,且文字保持白色。

1 个赞

这非常简洁现代。社区制作的主题堪称一流!

1 个赞

你好,这个主题看起来很棒。
不过,中文论坛的样式似乎存在一些一些问题。

zeronoise 主题

默认主题

3 个赞

可能是中文字符的格式问题。

2 个赞

首先,非常感谢您提供这个精美的at @ruidovisual 主题。我已经在我的社区论坛上使用了近2个月了。

我有一个问题。是否可以移除移动设备上的导航下拉菜单?

提前感谢。

1 个赞

感谢这个主题,目前非常喜欢!这是我见过的最令人愉悦的 discourse 风格之一 :slight_smile:

只有一个问题:在类别中执行批量操作时,复选框不显示,因此我无法选择多个主题。这真的让我很困扰,由于这个问题,我无法正常使用这个主题。能修复这个问题吗? \u003c3

1 个赞

这与中文字符无关,而是“分类样式”的“box”设置问题。

.badge {
  &-category-bg,  /* <------ 不好!! */
  &-wrapper.bullet &-category-parent-bg,
  &-wrapper.bullet &-category-parent-bg + &-category-bg {
    border-radius: 50%;
    width: 9px;
  }

要解决此问题,请将其作为主题组件应用

.badge {
  &-wrapper.bar &-category-bg,
  &-wrapper.bar &-category-parent-bg,
  &-wrapper.bar &-category-parent-bg + &-category-bg {
     border-radius: 0%;
  }
  &-wrapper.box &-category-bg,
  &-wrapper.box &-category-parent-bg,
  &-wrapper.box &-category-parent-bg + &-category-bg {
    border-radius: 0%;
    width: 100%;
  }
}
3 个赞

喜欢这个主题,但是…… ;)\n\n你能帮我修复这个打印视图吗,因为它无法使用:\n- 标题应该小一点\n- 带阴影的边框不应该可见\n\n

\n\n另外,主题选择不起作用\n\nCleanShot 2022-11-20 at 00.12.18\n\n另外,如何全局更改此主题的字体?

非常棒,非常感谢。

现在就部署,希望很快能有更多贡献 :slight_smile: