Osama
2017 年12 月 8 日 18:05
1
GitHub repository:
Contribute to OsamaSayegh/discourse-tab-bar-theme development by creating an account on GitHub.
Screenshots
Installation
Follow the instructions in this howto topic:
This is a guide for installing and managing themes and theme components in Discourse.
Required user level: Administrator
Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel.
This guide covers:
Importing new themes and theme components
Adding theme components to a theme
Managing automatic updates
Additional resourc…
Customization
See the readme file in the theme’s GitHub repository.
Ideas to improve this theme are very welcome
Update 24/12/2018:
You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.
77 个赞
嘿,我喜欢这个插件。但我需要让未登录用户也能看到该栏。
有办法实现吗?也许可以这样:
body:not(.logged-in) .d-tab-bar-theme {
display: block
}
1 个赞
Osama
2020 年6 月 27 日 19:39
96
你好 Ben,
该组件的 JS 代码在多处假设用户已登录,因此仅靠 CSS 无法为匿名用户显示该栏。我的建议是 fork 该组件并修改它,使其对匿名用户可见。
4 个赞
Osama
2020 年6 月 30 日 18:00
98
嗨,Peter,
Discourse 核心提供了一个很实用的路由 /new-topic,用于通过 URL 打开编辑器。因此,你只需要将该路由作为应打开编辑器的标签页的 URL 即可。
13 个赞
nildarar
(Nildarar)
2020 年9 月 5 日 20:49
99
这个组件非常有用,我们的论坛用户都非常喜欢它。
用户最希望实现的功能之一,是在屏幕底部的按键上显示未读通知徽章和未读私信徽章。
Discourse 的 JavaScript API 是否支持我们实现这一功能?
7 个赞
Osama
2020 年9 月 7 日 23:13
100
你好,Nildarar,
很高兴得知你的社区喜欢这个组件并觉得它很有用,谢谢!我支持为这个组件添加此功能,但目前我无法立即实现(也许几个月后可以)。不过,如果在此期间有人愿意着手开发此功能,我非常乐意合并包含该功能的拉取请求。
是的,所需数据已暴露在 currentUser 对象中,可以轻松访问。实现此功能的主要工作包括:1) 确定在哪些标签页上显示徽章,以及 2) 使用 CSS 正确定位徽章。
8 个赞
nildarar
(Nildarar)
2020 年9 月 9 日 05:24
101
谢谢 @Osama
根据您的指导,我找到了这些对象。
<script type="text/discourse-plugin" version="0.8">
let currentUser = api.getCurrentUser();
console.log(currentUser);
</script>
// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2
我们是否可以通过事件注册一个函数,还是需要通过以下技巧来获取这些信息?
$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
console.log('changed');
});
5 个赞
Osama
2020 年9 月 9 日 14:34
102
是的,这些正是我们需要使用的属性。但由于 Discourse 是一个 Ember 应用,我们通常不会通过订阅 DOM 事件来更新界面。相反,我们应该使用 Ember 所谓的“计算属性”(computed properties):链接 。
该组件已经在此处定义了一个计算属性:链接 ,你可以将其作为参考。一旦你定义好了用于判断是否应显示通知徽章的计算属性(基于 currentUser.unread_high_priority_notifications 等属性),你就需要在同一链接底部的 Handlebars 模板中使用该计算属性。
注意:在单独的组件中实现此功能颇具挑战性,因此我这里的说明均假设你是在当前组件本身中实现,而非在单独的组件中实现。
8 个赞
thegurjyot
(Gurjyot Singh)
2021 年2 月 5 日 20:26
104
即使在深色主题下,标签栏也显示白色背景。我刚从 2.7.0 beta 1 更新到 2.7.0 beta 3,之后就开始出现白色背景。在此之前一切正常。我还尝试移除了所有其他主题组件和自定义设置,以确认是否有东西干扰了标签栏。但即使在最基础的 Discourse 中,深色主题下的标签栏仍然显示白色背景。能否请有人帮忙查看一下这个问题?
5 个赞
看起来在某些情况下,这个标签页会导致话题进度条覆盖回复按钮(例如,我可以用 Chrome 模拟 iPhone SE 来复现此问题)。
如您所见,回复按钮被进度条遮挡了。但如果我禁用该进度条,问题就解决了。我猜这是因为进度条的位置是相对定位的,但我不确定该如何修复。
4 个赞
我遇到了类似的问题。启用“移动标签栏”后,“目录”按钮不显示。如果我们不必在两个功能之间二选一就好了,因为我们两个都喜欢!
1 个赞
Osama
2021 年2 月 13 日 17:17
108
@haroldfy 我在 Meta 或主题创建器中无法复现此问题。也许你有其他主题或自定义设置产生了干扰?如果你的网站是公开的,我可以帮忙查看。
@littleviolette 我尽量避免添加针对其他组件元素的代码。在这种情况下,你可以创建一个独立的组件,使用以下 CSS 将目录按钮推至栏上方:
html:not(.anon) .d-toc-toggle {
margin-bottom: 55px;
}
8 个赞
感谢您对此进行调查。这是一个私有站点,我将尝试禁用其他自定义选项并从中进行调试。
4 个赞
MrDavis97
(Miles Davis)
2021 年2 月 24 日 22:45
110
我好像发现了一个 bug,目前只在 iOS 上的 PWA 版本中复现(在 Android 和 iOS Safari 上似乎正常)。
标签栏应该始终处于锁定状态,对吧?正常情况下的显示效果如下:
然后我解锁屏幕,切换到横屏模式,再切回竖屏模式,接着向上滚动一点,就会出现以下情况:
1 个赞
我和 @haroldfy @littleviolette 遇到了同样的问题。你可以用以下代码修复:
html:not(.anon) #topic-progress-wrapper.docked {
margin-bottom: 0 !important;
}
7 个赞
renato
(Renato Atilio)
2021 年4 月 27 日 00:45
113
标签栏还与帖子筛选核心功能存在冲突,该功能在筛选时会显示一个粘性页脚(posts-filtered-notice)。
无论如何,感谢这个出色的 TC
5 个赞
Kchalk
2021 年5 月 10 日 00:49
114
主题组件太棒了,谢谢!
我有一个请求,想了解一下大家是否对“滚动隐藏”功能感兴趣?
简单来说,当用户向下滚动时,底部栏会自动隐藏;当用户向上滚动时,它会重新出现。
我找到的示例链接如下:
这一功能将体贴地在移动端释放宝贵的屏幕空间,通过提供更多空间来提升内容浏览体验。
9 个赞