|||
|-|-|-|
| 
| 摘要 | Pyx 的 Modern Theme 是 darkpixlz 的 Modern Theme 的后继者。|
| 
|预览| Theme Creator |
| 
|代码库| GitHub - pyxfluff/moderntheme: Modern theme for Discourse. |
| 
|安装指南|如何安装主题或主题组件|
| 
|初次使用 Discourse 主题？| Discourse 主题使用入门指南|
Pyx’s Modern Theme 是我旧主题 darkpixlz’s Modern Theme 的后继者，该主题是 Air 主题的一个分支。它大约有 2500 行代码，并且存在许多问题，所以我重写了它！
截图
特性
- 支持完整的管理员界面和审核面板
- 支持几乎所有现代核心功能（新主题地图、新升级页面、聊天等）和一些插件
- 可自定义背景图片
- 添加了
--user-bg-url 属性，供插件读取用户在个人资料中的背景图片
- 与我旧的主题相比，总体代码行数少得多，且设备渲染更容易
已知问题
非常欢迎对代码库的所有贡献，并且（很可能）会在当天得到审查。有评论或想法？请在此回复。有问题？请在 GitHub 上提交 issue。
请注意，我只为 Firefox 测试我所有的样式；如果 Chromium 出现问题，请随时报告。
暂时就这些了——请享用这个主题！
11 个赞
Monikas
(JustMonika)
2
嗯，似乎存在未安装任何组件的问题，然后它似乎改变了图像的 CSS，导致许多图像变成矩形。
是的，这是一个疏忽。我忘了组件可以添加这样的图片。补丁已推送 
这是预期行为，我猜如果横幅关闭了，看起来有点奇怪。我会看看我能做什么。
Monikas
(JustMonika)
5
我想知道是否可以添加自适应缩放？我想在右侧添加一个侧边栏组件。
CSS
/* 获取用户头像宽度并设置广告容器的最大宽度 */
/* 广告容器样式 */
#list-area {
display: flex; /* 使用 flexbox 排列广告 */
flex-direction: column; /* 垂直显示广告 */
gap: 0; /* 删除广告图片之间的间距 */
padding: 0; /* 删除容器内边距 */
margin: 0; /* 确保广告容器周围没有额外的边距 */
max-width: 812px; /* 将广告容器的最大宽度限制为 812px（头像宽度：48px） */
}
/* 广告链接样式 */
.banner-ad {
display: block; /* 使广告容器成为块级元素 */
width: 100%; /* 确保广告容器占据 100% 的宽度 */
max-width: 100%; /* 防止超出最大宽度 */
margin: 0; /* 删除广告容器之间的任何间距 */
}
/* 响应式广告图片样式 */
.ad-image {
width: 100%; /* 确保图片占据其父容器的全部宽度 */
height: auto; /* 保持图片的原始纵横比 */
max-width: 100%; /* 防止图片超出其容器的最大宽度 */
display: block; /* 修复图片下方空白的问题 */
margin: 0; /* 删除图片周围的任何额外空间 */
}
/* 响应式设计：调整大屏幕和小屏幕上的广告显示 */
/* 在屏幕宽度小于 768px 的设备上调整广告显示 */
@media (max-width: 768px) {
#list-area {
padding: 0; /* 确保在移动设备上没有额外的内边距 */
}
.banner-ad {
width: 100%; /* 确保广告在小屏幕上占据全部宽度 */
}
.ad-image {
width: 100%; /* 确保图片适应容器宽度 */
height: auto; /* 保持图片的纵横比 */
}
}
/* 在非常小的设备（例如，竖屏模式下的手机）上进一步调整广告图片 */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* 确保图片适应手机屏幕宽度 */
max-width: 100%; /* 将最大宽度设置为 100%，以避免过大 */
height: auto; /* 保持图片的纵横比 */
}
}
1 个赞
我明天会检查那个边组件的问题。关于广告不保证能解决，因为我无法测试，但就一般的扩展性而言，我应该能够修复这个。
1 个赞
已推送更新，包含许多修复以及对类别编辑页面和其他管理员区域的支持！
@Monikas 您之前遇到的侧边按钮问题现在应该也已修复。
2 个赞
抱歉，我这周生病了，还有其他事情要做。我刚刚完善了帖子流，修复了许多 bug，并让编辑器浮动了！
1 个赞
另外，我注意到主题页面已恢复到旧版本，这引发了很多问题。我不会费心去修复那里的任何东西，因为我觉得它会被重新添加，并且看起来会像预期的那样。
有办法实现下图所示的布局吗：
并使用此主题的精美渲染效果？比如我也可以拥有排行榜侧边栏之类的东西（见下图）：
大家好，抱歉最近没有更新！我已经添加了对审核队列和 Docker 管理器的支持。
1 个赞
大家好，
抱歉更新缓慢，我上周申请更改了主题名称，但一直没有跟进。我尝试在本地同步主题，但遇到了端口冲突问题，花了 8 个小时才将我的整个家庭实验室迁移到 Proxmox。再加上我这个星期在个人项目上花费的时间（记录 4000 行前端+后端代码并不容易），所以没有多少空闲时间 
总而言之：主题现已脱离“预览”阶段！ 
我相信它对大多数人的网站都能正常工作并且样式也还可以。进入新阶段后，我将不再在此处接受 Bug 报告，请在未来提交 GitHub issue。
请继续提供反馈——任何反馈都欢迎。感谢您一如既往的支持，即使我可能更新缓慢 :3
1 个赞
大家好，
对于网站顶部出现几天的弃用警告，我们深感抱歉 
，现已修复。一切应恢复正常。
又一个好消息！我刚刚重写了主题，所以它不再是一个巨大的 common.scss 文件。除了我做的一些小修复之外，它看起来应该没有区别。尽情享用 :3
3 个赞
DevTeVe
(DevTek Ve)
19
非常喜欢这个主题，但有一些“瑕疵”不幸地阻止了我使用它 
- “个人资料”页面在标题后面有一个小的“跳至内容”按钮。
- 当我尝试选择不同的配色方案时（作为用户，在我的个人资料中），下拉选择框会显示在上面提到的“跳至内容”按钮附近（我就是这样发现它的）。
1 个赞
DevTeVe
(DevTek Ve)
20
@darkpixlz 我录制了一个视频，因为我意识到我的反馈可能很难理解 
