移动端 Discourse 标签栏

GitHub repository:

Screenshots


Installation

Follow the instructions in this howto topic:

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


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 个赞

你好 Ben,

该组件的 JS 代码在多处假设用户已登录,因此仅靠 CSS 无法为匿名用户显示该栏。我的建议是 fork 该组件并修改它,使其对匿名用户可见。

4 个赞

如何在工具栏中添加一个“+”新建帖子按钮?

嗨,Peter,

Discourse 核心提供了一个很实用的路由 /new-topic,用于通过 URL 打开编辑器。因此,你只需要将该路由作为应打开编辑器的标签页的 URL 即可。

13 个赞

这个组件非常有用,我们的论坛用户都非常喜欢它。

用户最希望实现的功能之一,是在屏幕底部的按键上显示未读通知徽章和未读私信徽章。

Discourse 的 JavaScript API 是否支持我们实现这一功能?

7 个赞

你好,Nildarar,

很高兴得知你的社区喜欢这个组件并觉得它很有用,谢谢!我支持为这个组件添加此功能,但目前我无法立即实现(也许几个月后可以)。不过,如果在此期间有人愿意着手开发此功能,我非常乐意合并包含该功能的拉取请求。

是的,所需数据已暴露在 currentUser 对象中,可以轻松访问。实现此功能的主要工作包括:1) 确定在哪些标签页上显示徽章,以及 2) 使用 CSS 正确定位徽章。

8 个赞

谢谢 @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 个赞

是的,这些正是我们需要使用的属性。但由于 Discourse 是一个 Ember 应用,我们通常不会通过订阅 DOM 事件来更新界面。相反,我们应该使用 Ember 所谓的“计算属性”(computed properties):链接

该组件已经在此处定义了一个计算属性:链接,你可以将其作为参考。一旦你定义好了用于判断是否应显示通知徽章的计算属性(基于 currentUser.unread_high_priority_notifications 等属性),你就需要在同一链接底部的 Handlebars 模板中使用该计算属性。

注意:在单独的组件中实现此功能颇具挑战性,因此我这里的说明均假设你是在当前组件本身中实现,而非在单独的组件中实现。

8 个赞

谢谢,让我试试 :wink::+1:

6 个赞

即使在深色主题下,标签栏也显示白色背景。我刚从 2.7.0 beta 1 更新到 2.7.0 beta 3,之后就开始出现白色背景。在此之前一切正常。我还尝试移除了所有其他主题组件和自定义设置,以确认是否有东西干扰了标签栏。但即使在最基础的 Discourse 中,深色主题下的标签栏仍然显示白色背景。能否请有人帮忙查看一下这个问题?

5 个赞

我已针对此问题提交了修复。感谢您的告知!

9 个赞

看起来在某些情况下,这个标签页会导致话题进度条覆盖回复按钮(例如,我可以用 Chrome 模拟 iPhone SE 来复现此问题)。

如您所见,回复按钮被进度条遮挡了。但如果我禁用该进度条,问题就解决了。我猜这是因为进度条的位置是相对定位的,但我不确定该如何修复。

4 个赞

我遇到了类似的问题。启用“移动标签栏”后,“目录”按钮不显示。如果我们不必在两个功能之间二选一就好了,因为我们两个都喜欢!

1 个赞

@haroldfy 我在 Meta 或主题创建器中无法复现此问题。也许你有其他主题或自定义设置产生了干扰?如果你的网站是公开的,我可以帮忙查看。

@littleviolette 我尽量避免添加针对其他组件元素的代码。在这种情况下,你可以创建一个独立的组件,使用以下 CSS 将目录按钮推至栏上方:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 个赞

感谢您对此进行调查。这是一个私有站点,我将尝试禁用其他自定义选项并从中进行调试。

4 个赞

我好像发现了一个 bug,目前只在 iOS 上的 PWA 版本中复现(在 Android 和 iOS Safari 上似乎正常)。

标签栏应该始终处于锁定状态,对吧?正常情况下的显示效果如下:

然后我解锁屏幕,切换到横屏模式,再切回竖屏模式,接着向上滚动一点,就会出现以下情况:

1 个赞

我和 @haroldfy @littleviolette 遇到了同样的问题。你可以用以下代码修复:

html:not(.anon) #topic-progress-wrapper.docked {
margin-bottom: 0 !important;
}
7 个赞

标签栏还与帖子筛选核心功能存在冲突,该功能在筛选时会显示一个粘性页脚(posts-filtered-notice)。

无论如何,感谢这个出色的 TC :slight_smile:

5 个赞

主题组件太棒了,谢谢!

我有一个请求,想了解一下大家是否对“滚动隐藏”功能感兴趣?

简单来说,当用户向下滚动时,底部栏会自动隐藏;当用户向上滚动时,它会重新出现。

我找到的示例链接如下:

这一功能将体贴地在移动端释放宝贵的屏幕空间,通过提供更多空间来提升内容浏览体验。

9 个赞