 |
摘要 | Graceful - 专为 Discourse 打造的优雅主题 |
 |
预览 | 在 Discourse 主题创建器中预览 |
 |
仓库链接 | https://github.com/discourse/graceful |
 |
初次接触 Discourse 主题？ | Discourse 主题使用入门指南 |
安装此主题
我非常喜欢 @jsthon 早在 2016 年分享的 主题 
。自最初发布以来，原作者已不再活跃，因此我对其进行了更新、扩展，并将其添加到了 GitHub。
| 名称 | 描述 |
|---|---|
| 背景图片 | 输入图片 URL |
| 平铺背景 | |
| 无背景图片 | 禁用上述背景图片和平铺设置。 |
此主题包含三个设置：
如果您禁用平铺选项，图片将被设置为 background-size: cover，浏览器会按比例缩放图片以完全覆盖整个背景。例如：
默认背景图案的版权归 Toptal Subtle Patterns 所有。
由我们托管？ 主题可在我们的标准版、商业版和企业版计划中使用。
只有我在使用这个主题时遇到这个问题吗？我在 Google PageSpeed 上测试时得分是 99%，但页面无法加载，因此结果具有误导性。
这是怎么回事？是因为 Google 无法看到它——页面无法加载吗？
嗯，是的，我也遇到了同样的问题……看起来是主题中的某些内容干扰了我们向 Google 提供的 Discourse 版本。我会进一步调查。看起来这可能与上面报告的打印视图问题相同。
主题非常棒。
我尝试在桌面端让 Graceful 主题更宽。试过以下代码：
#main-outlet {
width: auto;
max-width: 1210px; /* 这使容器与标志/标题控件一样宽 */
}
这段 CSS 确实让整个容器变宽了；底部的推荐话题也很好地横跨了页面，但话题中帖子的整体宽度对于我的宽版来说太窄了。
我尝试使用检查器并调整了多个元素，但由于不是专家，无法让话题/帖子的宽度与 #main-outlet 的宽度匹配。
能否请您帮忙解决一下？
谢谢
另外，我还试过这段代码：
#main-outlet {
width: auto;
max-width: 80%;
}
但无法让帖子的宽度与容器宽度匹配：
.topic-body 拥有独立的宽度设置。
默认值：
.topic-body {
width: calc(690px + (11px * 2));
}
仅修改 690px 的值，其余部分请保持不变（它与帖子的内边距相关联）
谢谢！我稍后会尝试一下，然后回来反馈结果。
昨天我尝试修改了 .topic-body，但我会根据你的建议 @Steven 再试一次。
你好 @Steven，
已在桌面端 CSS 中添加以下内容：
#main-outlet {
width: auto;
max-width: 80%;
}
.topic-body {
width: calc(1020px + (11px * 2));
}
它部分生效了，但还存在一些问题。也许你知道修复它的 CSS 技巧？
请见截图：
我目前不在电脑前，但我知道需要修正 .timeline-container 类的 margin-left 属性。
好的，关于时间线，.timeline-container 上有几个 margin-left 需要被覆盖（三个断点）：
Kris，
我们想要实现“宽屏布局”的方法是稍微牺牲一点“优雅”，并隐藏 .timeline-container。
#main-outlet {
width: auto;
max-width: 70%;
}
.topic-body {
width: 100%;
}
.timeline-container .topic-timeline {
display: none;
}
这算不上很“优雅”，但至少对于大段代码来说效果“还可以”，在大开发者的屏幕上更容易阅读。
如果能显示 .timeline-container 就好了，但我无法通过覆盖类来实现，正如建议的那样，这大概是因为我的 CSS 技能还不够熟练：
感谢您的帮助以及这个优秀的主题。
到目前为止，我非常喜欢这个主题。非常感谢你与我们分享！
我注意到在移动端视图中，分类颜色条消失了。这是故意的吗？有没有办法恢复它？
另外，如果某个分类设置了背景，有没有办法关闭背景显示？目前看起来运行正常，但在长帖滚动时屏幕会出现卡顿，偶尔还能看到主题设置的背景。
谢谢！
Ray
我查看了移动端的 CSS，发现这部分被排除了；将“left-border”部分注释掉后，彩色边框就恢复了：
.category-list-item {
// border-left: none;
border-top: 2px solid;
.category-name {
font-weight: normal;
}
}
不过，我知道一旦主题更新，这些修改就会被覆盖。在这种情况下，保留修改的最佳方法是什么？
我有一个自定义主题组件，用于存放自定义 CSS 更改，我将其放在移动端的 CSS 部分：
.category-list-item {
border-left: 4px !important;
}
……但它没有显示具体的分类颜色，只显示了一条白色条。如何让正确的分类颜色显示出来？我知道这与分类颜色变量有关，但我似乎找不到相关参考。
我在 CSS 方面还是个新手，可能有些地方做错了。
谢谢，
Ray
这是默认行为，因为颜色是 #ffffff 的“低中”变量，而非纯色。
如需覆盖该颜色，请参阅此处：How to Change Header Icon Color? - #2 by awesomerobot
只是想提一下，这个主题真的很棒。我绝对喜欢它简洁的外观。
同意！这是目前外观最出色的 Discourse 主题之一。
Ray
我可能有点迟钝，但无法通过为调整 CSS 而创建的主题组件来更改 Logo 的大小。我可以调整整体页眉高度，但 Logo 却固执地保持不变。这段 CSS 似乎会抵消我尝试做的任何修改：
.d-header #site-logo {
max-height: 35px !important;
}
根据 Chrome 检查器显示，该样式来自：desktop-scss-graceful.scss
使用默认主题时更改 Logo 大小一切正常，而且如我所说，在 Graceful 主题中更改页眉高度也有效，唯独 Logo 不行……
是的，!important 会覆盖任何不带 !important 的其他 CSS 规则……我不记得它为什么在那里，但我应该检查一下并将其移除。如果你在自定义 CSS 中也加上 !important，这样能生效吗？
.d-header #site-logo {
max-height: 50px !important; // <-- 在此处设置你的自定义高度
}
感谢快速回复！我其实已经注意到了 !important，并尝试将其添加到我的代码中，但毫无效果。奇怪的是，现在尝试时，当我保存该更改并刷新页面后，它会在一瞬间显示为正确的大小，然后又会缩小回去。而且在检查器中，它看起来确实在按预期工作：
至少从 35px 被禁用的角度来看是这样。但顺序看起来至少有点奇怪。无论如何，它仍然不起作用。真奇怪。
为了提供参考，我是将其放在 Common CSS 中的……
更新：找到了！问题出在 header.scss 中的：
.d-header #site-logo { height: 2.667em; }
如果我再添加自己的 height 属性并加上 !important，就能正常工作了！
好的，下一个问题，我认为这特定于该主题。我将其作为基础来构建一个个人“博客”（实际上是一个数字花园，但这算是一个比较冷门的术语）。由于基本上每篇帖子都由我本人撰写，我希望移除或降低某些作者视觉元素的显著性，主要是头像，尤其是在首页和分类下的主题列表中。红色框出的是我希望能（如果可能的话）隐藏的部分：
你应该能看出原因。
我尝试过的方法：
）我还在研究并尝试各种组件，以显示主题中的第一张图片作为缩略图。如果能把这些头像替换为主题中第一张图片的小缩略图，那就太棒了。不过，先隐藏它们也是个不错的开始。
提前感谢！
