薄荷主题

自定义 主题
,
1
:discourse2: 摘要 Mint - 一款带有薄荷色调的现代主题。:slight_smile:
:eyeglasses: 预览 在 Discourse 主题创建器上预览
:hammer_and_wrench: 仓库链接 https://github.com/discourse/discourse-mint-theme
:open_book: 初次使用 Discourse 主题？ Discourse 主题使用新手指南

安装此主题

功能

一款带有薄荷色调的现代主题。:slight_smile:

:herb: :ice_cube:

主页（分类）

Screenshot 2021-09-06 at 19.48.04
Screenshot 2021-09-06 at 19.48.041920×859 49.1 KB

Screenshot 2021-09-06 at 19.48.43
Screenshot 2021-09-06 at 19.48.431920×913 79.2 KB

最新

Screenshot 2021-09-07 at 17.08.01
Screenshot 2021-09-07 at 17.08.011920×951 55 KB

主题

Screenshot 2021-09-07 at 17.22.56
Screenshot 2021-09-07 at 17.22.561920×1400 120 KB

高级搜索

Screenshot 2021-09-07 at 17.22.11
Screenshot 2021-09-07 at 17.22.111920×1421 127 KB

此主题包含以下组件：

提示

Discourse 设置

为了使此主题正确渲染，需要进行以下设置更改：

  • 顶部菜单 需要设置为 分类, 最新, 新, 未读, 热门
  • 桌面端分类页面样式 需要设置为 带子分类的框

欢迎横幅

前往 管理员 > 欢迎横幅 (/admin/config/welcome-banner) 页面。

  • 在 在以下主题上启用… 下拉菜单中选择 Mint Theme
  • 在 页面可见性 下拉菜单中选择 仅主页
  • 在 位置 下拉菜单中选择 站点标题下方
  • 背景图片 可根据您的需求设置

Discourse 展示分类

在 展示分类 主题组件的选项中，为了使此主题正确渲染，需要进行以下更改：

  • 根据您的要求选择 feed one category 和 feed two category
  • 根据您的要求填写 feed one title 和 feed two title
  • max list length 的推荐值为 3。

:discourse2: 由我们托管？ 我们的标准版、商业版和企业版计划均提供主题使用。

67 个赞
Mint theme - How was this UI achieved?
How should I set up the same Mint theme section?
Our main screen looks very different with no top menu dropdowns, etc
Current Projects - September 2024
Mint theme - How was this UI achieved?
Deprecating the Search Banner theme component
2

主题真的很棒 :slight_smile:

我甚至可能会在我的测试站点上用宝蓝色（我最喜欢的颜色）试试。

谢谢 :smiley:

5 个赞
3

@meghna 持续推出令人惊叹的主题，看起来很棒。我将部署并试玩。

5 个赞
4

主题真漂亮！感谢你们制作这个 :slight_smile:

我在想，有没有办法移除背景中的方形和圆形？任何能给我指引方向的建议都非常感激 :pray:

3 个赞
5

从 desktop.scss 中移除以下代码，即可解决问题 :slight_smile:

#main-outlet:after  {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 500px;
  height: 500px;
  border-radius: 2000px;
  background: $color-blue;
  right: 1px;
  top: -57px;
}

#main-outlet:before {
  content: "";
  display: block;
  position: fixed;
  z-index: -1;
  width: 300px;
  height: 300px;
  border-radius: 30px;
  background: -webkit-linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  // background: linear-gradient(146deg, rgba(74,247,255,.08) 55%, rgba(143,236,202,.52) 100%);
  background: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
  left: 70px;
  top: 350px;
  transform: rotate(74deg);
  transform-origin: 0 100%;
}
6 个赞
6

非常感谢你，Tomasz，真的很感激：smiley:

2 个赞
7

这个主题太棒了。感谢你的制作！我是 Discourse 社区的新手。我知道如何上传这个主题，但不确定如何更改某些内容。我想更改的是背景中色块的颜色（圆形和方形）。此外，我还想更改背景颜色。我是应该下载主题文件并在其中编辑，然后创建自己的主题吗？还是有更简单的方法？

2 个赞
8

谢谢！:slight_smile:

是的。要更改颜色，您需要分叉该主题并根据您的要求更新颜色代码。方法如下：

在 variables.scss 中根据您的喜好更改颜色代码：

$color-blue: #e5f8ff;
$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);

要更改背景颜色，请在 about.json 中更新 secondary 颜色（请注意，这也会更改某些按钮的文字颜色）：

"secondary": "F6FBFC"
9

我喜欢这个主题——它完美契合我们项目的品牌风格！不过，如果我开启深色模式，主题就会乱掉。这是预期内的吗？有没有办法阻止用户开启深色模式？

1 个赞
10

还可以从前端编辑 CSS，就像默认主题一样。

image
image215×148 1.77 KB

12

作曲组件存在两个小问题。:slightly_smiling_face:齿轮按钮的背景常亮，第一个按钮的悬停形状与框架的弧度不匹配：

image
image990×124 22.3 KB

1 个赞
14

已通过以下方式修复了这两个问题：

2 个赞
15

我真的很喜欢你的主题并已安装。\n我的搜索横幅背景没有圆角且不是全宽。\n我该如何将其更改为你的布局？

16

可能存在另一个主题或组件干扰了 mint 主题的样式。您可以尝试禁用您可能已安装的其他主题/组件吗？

17

这是一个全新安装，带有非活动状态的默认主题和以下组件：

  • discourse-search-banner
  • Showcased Categories
18

这很奇怪。你能私信我你的 Discourse 实例的 URL，我可以看看吗？

1 个赞
19

横幅问题现已通过以下方式修复：

Patrick 还提醒了我 showcase categories 插件中存在一个问题。我也已修复。

3 个赞
20

您好，我在具有精美 Mint 主题的设备上使用了深色模式。我做了一些更改以支持深色模式。仅用于测试。

изображение
изображение1389×1541 255 KB

discourse-mint.zip (5.1 KB) 当然，它可能包含错误 :slight_smile: 因此，我不会从 github 创建 PR。

我对代码块、gitlab 风格格式、宽页面等进行了修改……未测试移动设备。

1 个赞
21

感谢您的努力，伊万！我审阅了您的工作，其中一些自定义更改不需要包含在核心中。我将查看特定于暗模式的更改，并在进行更多测试后将其纳入核心。

1 个赞
22

不客气，Meghna！我认为，将 revert 值应用于一些白色元素就足够了。

1 个赞