着陆页博客 ✈️

在使用最新的稳定版 Discourse (3.2.x) 和更新的 Landing Pages 组件(插件、博客页面和博客主题)后,我只能重现图像背景和帖子容器大小的问题。一旦有时间,我会在主题中进行一次小更新,但如果你想在你的分支中修复它们,也很容易做到。

在干净安装中使用默认设置,帖子/订阅按钮位于页面底部并且功能正常,移动版本中的路径与桌面版本行为相同,并且我无法验证帖子日期是否存在任何问题,除了在你设置博客类别后会改变的“最后更新”日期(该类别下的所有帖子都会收到一个“博客帖子”标签)。

只要你在 landing pages 配置的“菜单”设置中没有配置任何内容,移动版本中的汉堡菜单将为空。我可能会更新代码以在这种情况下完全隐藏它,以简化界面。

刚看了你的博客,快速调试了几个问题:

  • 关于按钮无法工作的问题,似乎你启用了严格的内容安全策略(Content-Security Policy)设置,导致所需的脚本未能加载。

  • 关于链接问题,我刚用火狐浏览器在安卓手机上访问了你的网站,没有任何问题。也许是你的浏览器或 Discourse 安装有其他特定的配置?

  • 关于 CSS 修复,有很多选项。例如,对于背景图片,你可以在 common.scss 文件中的 .title-container 类中设置 background: no-repeat center/cover fixed;,对于帖子中的“小容器”,你可以在同一个文件中的 .post-content 类中添加 min-width: 100%;

  • 关于菜单设置,目前唯一的方法是在全局 pages.json 文件中添加,正如文档中所述,但这方面的信息不多。不过,你可以在 pavilion-landing-pages 仓库中看到一个示例。

嘿!所以,在你录屏的那个视频里,直接 URL 都可以正常工作。但如果我进入主博客页面,然后点击博客标题,就会出现“未找到页面”的错误。直接 URL 可以正常工作,但没有人会随身携带这些 URL,这显然是不可行的。

我将快速尝试那些 CSS 修复,然后编辑此消息或再次回复我的发现,谢谢!

关于内容安全策略(Content-Security Policy)的发现非常有趣……我都不记得我做过任何与此相关的事情。嗯。我该如何修复它?

编辑:通过在设置中禁用“内容安全策略”来修复了订阅按钮。但是否有办法保持启用状态,同时让按钮仍然工作?也许让按钮以不同的方式工作,这样就不会触发那个?

抱歉,我对 CSP 设置一无所知。在视频中,大约 26-27 秒处我做了同样的操作(从主页博客点击博客标题),它仍然运行正常,所以我不太确定如何从我这边进一步测试。

已编辑我上面的帖子,改为:“通过在设置中禁用内容安全策略来修复订阅按钮。但是,有没有办法保持启用状态但按钮仍然有效?也许让按钮以不同的方式工作,使其不会触发该策略?”

哦,我的错!嗯,那真的很奇怪。我尝试了多个浏览器,甚至几个手机,但问题还是一样……

顺便说一下,有没有办法让订阅按钮/文本变大,以匹配手机屏幕上浮动的“帖子”图标的大小?登录账户时图标尺寸合适,但未登录时,作为访客,则不合适,您可以在视频中看到这一点。

除此之外,我唯一真正想做的就是让个人资料照片/作者姓名、日期和“论坛主题”区域在手机上呈水平布局,因为它垂直堆叠看起来不好(或者至少日期和主题区域并排,位于个人资料照片下方居中,或者其他什么)……

哦,您的 CSS 代码奏效了!非常感谢。

除了我上面的回复,@cabidop,我的伴侣花了好几个小时仔细检查了博客页面/主题的东西,因为我想要一个非技术性的普通人对默认设置的看法。我想如果你想把其中任何一个纳入博客内容的话,可以提一下:

  • 退出登录时,让博客着陆页上的“订阅”按钮在用户点击订阅并在网站上创建账户后,将他们带回博客着陆页。
  • 我个人甚至没有意识到它那样工作,但如果访客点击订阅,它会把他们带到论坛注册页面,然后当他们创建账户时,他们会想知道博客页面现在在哪里,因为它会让你停留在论坛上。然而,当他们现在登录并返回博客着陆页时,他们甚至没有订阅,并且必须在登录后再次点击按钮。
  • 收到一封确认电子邮件,证明你确实订阅了。
  • 目前,没有实际的电子邮件确认你确实通过电子邮件订阅了,只有一个在订阅弹出框上的小弹出窗口。
  • 订阅后,在登录时完全移除该按钮,或者在桌面端将其显示为“已订阅”,而不是仍然显示“订阅”。此外,让按钮在滚动时不会一直浮在屏幕上,即滚动时消失。

  • 博客文章页面的大标题照片在移动设备上无法显示。它几乎不显示或有时根本不显示(下方图片显示了桌面版与移动版的对比):

我觉得这些改动即使只是针对开箱即用的默认设置,也会非常棒。

感谢您的反馈,@45thj5ej,我可能会在将来将其中一些建议作为默认设置实施。不确定您是否已经解决了 CSP 问题,但看起来有一个 content security policy script src 选项可以在不完全禁用该功能的情况下解决您的情况(但对此并非完全确定)。

关于主题在其他页面不起作用的问题,这是预期行为,因为样式中使用了 .blog.blog-post 类。每个着陆页都会将其自己的 slug 作为 HTML 类添加到其 body 中,因此只要 CSS 样式仅应用于这些类,它们就只会分别影响“博客”和“博客文章”页面。

至于其余的评论/问题,我只想重申我在另一个主题中提到的关于特定于您的用例的观点,因为它们更多是通用的 CSS 问题,而不是组件中的实际问题。话虽如此,我最终可能会查看它们(但不要把它当作理所当然)。

1 个赞

嘿,情况有点糟糕……
我设置了 Nginx 将 mysite.com 重定向到 https://forums.mysite.com/home,并从我的域名提供商那里设置了 DNS A 记录(因为我希望这是我网站的主页)。

我注意到一些奇怪的事情。如果我从重定向访问一篇博客文章(即,任何访问我网站的人都会发生这种情况),它会在 URL 中添加第二个 /home。但是,如果我从直接 URL https://forums.mysite.com/home 访问博客主页,则不会出现这种情况。

有什么办法可以尽快解决这个问题,或者如果你告诉我怎么做,我可以自己解决。这与前几天在移动设备上发生类似问题的情况不同。当然,当鼠标悬停在博客主页上的链接时,链接会显示为双倍,如下所示:
https://forums.mysite.com/home/home/blog-test-one-million

但同样,如果直接访问 URL,而不是从重定向访问,则一切正常。

您能否确认“双路径”问题仅发生在博客页面、任何着陆页面还是任何 Discourse 页面(例如 /latest)上?

仅博客主页/登陆页,即点击博客文章标题的页面。

编辑:忽略以下内容。 修复方法是:
在博客主题的 common.scss 文件中,大约在 172 行左右注释掉下面这一行:

body.blog {
/*   padding-top: 8em; */

另外,如何编辑网站的页眉?似乎无论如何,页眉总是被放置在那里,我根本无法编辑它。顶部的导航栏/菜单/logo区域。

例如:我制作了一个自定义页眉以使默认页眉变短。即使使用

.landing-header {
display:none
}

仍然会在顶部留下一个很大的空白。如何移除这个空白?

@angus 这个还有用吗?这看起来是我的完美解决方案。

@cabidop@merefield 最近一直在维护 landing pages 插件,所以他们是更适合询问的人。

1 个赞

@merefield Discourse 的当前版本是否仍支持此功能?

我不知道。我不熟悉博客扩展。我不用它。

也许可以分享任何错误消息?

没有错误,我只是想知道这是否仍然兼容。

嘿,@NateDhaliwal,我知道答案来得有点晚了,但博客扩展应该没有问题(如有其他情况请告知)。

2 个赞