大标题 - 小标题

此主题组件将在页面顶部滚动时提供一个带有大标志的固定页眉。当您向下滚动页面时,正常的 Discourse 页眉栏将显示出来。这样可以在页面顶部清晰地展示大型站点标志。

在移动设备上,页眉栏仅在手机处于纵向模式时显示。在横向模式下,垂直空间通常相当有限,因此这样可以保持界面开阔。要再次查看页眉,您可以滚动到页面顶部或将手机旋转回纵向模式。

了解此主题组件功能的最佳方式是亲自试用,您可以通过访问以下链接进行尝试:

以下是我制作的一个展示其实际效果的小 GIF(强烈建议点击上面的链接以获取更清晰的演示 :slight_smile:)

设置:

目前有三个设置,应该非常直观:

安装:

重要提示:您必须运行 Discourse 2.0.0.beta4 或更高版本,此主题才能正常工作。

请查看以下主题以获取安装主题组件的说明:

导入链接:

https://github.com/tshenry/discourse-big-header-little-header.git

关于:

此主题的 最初提案 来自 Marketplace@ryanerwin。他请我将为他创建的内容进行通用化处理,并与社区分享。因此,此主题深受他的启发,并由他呈现给您 :slightly_smiling_face:

注意事项:

由于用户喜欢自定义页眉及页面顶部附近的区域,可能需要进行一些额外的调整以处理与其他自定义内容的冲突。我已在干净的 Discourse 主题上测试过此功能,但请根据您已进行的自定义数量做好调整准备。理想情况下,应尽可能将对此主题的修改作为独立的子主题组件进行,这样在主题更新时您不会丢失更改记录。

已知问题:

由于此主题向 div#main-outlet 添加了内边距,根据您标志的大小,主题时间线可能会受到影响。有一些硬编码的方法可以处理此问题,但这并不理想。我很可能会在 Dev 频道发帖,概述我所尝试的所有方法,并看看是否有人有如何补偿额外内边距的建议。

代码仓库:

GitHub - tshenry/discourse-big-header-little-header

一如既往,如有任何问题、故障或建议,请随时发帖!我的时间目前有点紧张,但我会尽快尽力解决所有问题 :slight_smile:

24 个赞

Awesome work on this @tshenry.

For anyone who wants to use a BIG LOGO at the top of their Discourse site, particularly if their logo is not rectangular, this is a great theme plugin!

1 个赞

Oh dang, that’s a pretty rad component you’ve got there, thanks for sharing back with us! :heart_eyes:

Any chance of an animated sample, just so those interested in something similar can git the gist of how it feels? (Or better yet, link to a live sample you can share on theme creator so they can play with it themselves!)

6 个赞

No problem! :slightly_smiling_face:

I will most definitely add a sample to theme creator. Thanks for the reminder! I need to update my other themes with the links to their demos on there as well. I’ll try to get a GIF in the post as well.

Edit: I’ve added both an animated image and a demo link to the topic post :grin:

9 个赞

I believe that recent logo changes may have broken this component - if you look at the theme creator version it is not working

3 个赞

Yep, very broken! I’ll get that fixed up ASAP.

5 个赞

Ok, it should be fixed now :slightly_smiling_face:

If anyone reading this notices issues after updating the component, please report them!

7 个赞

There’s just a slight dead zone under the little header where you can’t interact with certain things. Highlighting text, entering a topic, interacting with the timeline. I’m sorry, I don’t really know how to describe my problem, but you can reproduce it by just having text or the timeline below the little header. Try to highlight the text, or interact with the timeline.

Does anybody have any suggestions to fix this? It’s not a super huge problem in general, but it does make the Table of Contents theme component wonky to work with. I’m not sure if this is something to tell you or them.

I love this component, by the way @tshenry.

3 个赞

Thanks for reporting! This should be fixed once you update the component. Let me know if you ever find any other issues.

5 个赞

My goodness, that was quick! Works fantastic, thank you so much!

4 个赞

I have installed this theme, but my logo is not showing up. It was before I installed this theme.

Is there a solution for this? Thanks!

1 个赞

I’ve been meaning to take a look at this component and make sure everything is still working as expected. I’ll take a look either today or tomorrow and let you know.

Edit: I tested it out and all seems to be working correctly. Make sure you add the large logo image to the theme setting. I have a few improvements in mind for this component, but I’m not sure when I’ll get to them.

2 个赞

@tshenry 为什么激活“大标题 - 小标题”功能后,我标题的背景色从主题中设置的自定义颜色变成了白色?我需要手动覆盖它吗?感觉这个插件应该尊重我在主题中已设定的配色方案。

1 个赞

看起来我将其设置为使用您网站配色方案中定义的 $secondary 颜色变量。现在回想起来,我本应使用 $header_background,因为这样用户可以通过他们的配色方案轻松地进行替换。已修改,链接如下:

3 个赞

@tshenry 在“小”标志上对我有效(谢谢!),但在“大”标志上无效,它仍然是白色的。

1 个赞

啊,没错,“Big”标题原本就是设计成与网站背景融合的。如果你想改变这一点,可以试着写一些 CSS 来添加背景。我可以在重构这个组件时考虑添加一个切换选项,但预计那还得过一阵子。

是的,我能够使用以下代码覆盖它:

.d-header { background-color: #000 !important; }

我遇到的另一个问题是,我使用了自定义 CSS 来指定一个比 Discourse 默认值更大的头部高度,以容纳更大的标志。

我觉得如果在您的插件设置中能够分别设置大标志和小标志的高度,将会非常有用,这样我们就能实现所期望的视觉效果。

否则,我该如何设置“小”头部的高度呢?

下次我处理这个问题时,会尝试通过设置让操作更加灵活。但在此之前,您需要调整 CSS 等代码,以找到最适合您其他自定义设置的解决方案。

1 个赞

谢谢!我暂时禁用了您的插件,因为在 /admin 页面中,我无法点击顶部的导航链接(仪表板、设置、用户等)。我无法确定这是否与我的 CSS 存在交互,但我会进一步调查。

更新:确实是我的 CSS 问题,我在某处犯了个错误,与您的插件无关。

1 个赞