Fakebook 主题

你好 Jordan,

新用户注册时出现了错误。右侧边栏除了欢迎文字和副标题外没有显示任何信息,而且副标题中没有名字。我知道如果有点赞和徽章的话应该会显示出来。是否可以让这个边栏显示点赞和徽章信息?比如显示 0 :heart: 收到0 :heart: 送出,以及 暂无徽章你还没有任何徽章……看看如何获取一些…… 或者类似的文字或链接。如果没有徽章的话,至少显示文字或链接。

谢谢!:slight_smile:

徽章相关的错误代码如下:

我想将其修改如下。
然而,它在移动屏幕上无法正常工作。
有人能帮忙告诉我该怎么做吗?

我希望让链接在话题摘要和图片上都能生效。

{{~raw-plugin-outlet name="topic-list-after-title"}}
{{#unless topic.image_url}}
  {{#if topic.hasExcerpt}}
    <a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
      <div class="topic-excerpt-box">
        {{raw "list/topic-excerpt" topic=topic}}
      </div>
    </a>
  {{/if}}
{{/unless}}
{{#if topic.image_url}}
<a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
<div class="topic-image">
  <img src="{{topic.image_url}}" />
</div>
</a>
{{/if}}

这是我正在测试的网站。
https://today16.com/

在移动头部使用此内容 :point_down:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'> . . . </script>

iPhone 6S

我在 Xcode 模拟器上使用 iPhone 6S 进行测试,未遇到此问题。

我有几个问题:

这张截图是否显示你正在使用 meta.discourse.org
你使用的是哪个版本的 iOS?
你使用的是哪个网页浏览器?

谢谢

1 个赞

有人尝试在 iOS 手机上,使用 Facebook 主题直接上传并播放短视频到 Discourse 吗?

我是不是在配置上漏掉了什么?我在手机上无法播放任何上传的视频,但在电脑上运行正常。

所有来自 YouTube 的嵌入视频都能正常播放。

因此,我不知道发生了什么,没有错误,也没有警告。

请提供建议。

是的,它在任何设备上都能完美运行。我认为主题不太可能导致此问题。
你试过在安全模式下播放吗?
你能发布包含视频的帖子链接吗?这样我们可以检查一下。

你好 @Don
是的,你应该尝试以下链接:
Making sure you're not a bot!

我已测试,确认在 iOS 11 上无法运行。

1 个赞

iOS 11 已经相当过时,这导致了问题。我在 iOS 14 上可以毫无问题地播放视频,运行效果非常好。

4 个赞

@Don 收到,

谢谢

1 个赞

太棒了!

另外……是否可以在侧边栏的简介区域添加一个链接?

主题添加链接在哪里?

4 个赞

嘿,我正在学习 Discourse 主题/插件开发。我非常喜欢 Fakebook 主题,并正在使用它来加深理解,但我有几个问题。

javascripts/discourse/templates/mobile/list/topic-list-item.hbrcommon/header.html 中的代码有 100% 的重复。

我的问题:

  1. 有没有办法将 .hbr 文件包含到 .html 文件中?这样我们就可以直接在 common/header.html 中引入 topic-list-item.hbr,而无需在两个地方重复代码?
  2. 为什么我们首先需要 topic-list-item.hbrcommon 文件夹中的文件不应该同时适用于桌面端和移动端吗?
1 个赞

我不这么认为……通常我可以创建一个使用单一模板的组件,然后在两个覆盖中都包含该组件……但我们的主题列表项是一种专为性能设计的特殊模板类型(hbr = handlebars 原始模板),而原始模板无法使用组件。(此前在 Mounting widget in raw template? - #7 by angus 中有相关讨论)

Discourse 的 CSS 结构正是如此(某些特殊 HTML 文件如页眉/页脚等也遵循此结构),但在 javascripts/discourse/templates 目录中,这些模板是对 Discourse 默认模板的直接覆盖(如果没有覆盖,则使用默认模板)。

在 Discourse 中有两个模板:/templates/list/topic-list-item.hbr/templates/mobile/list/topic-list-item.hbr。因此,既然有两个模板,我们就需要两个覆盖。

也许在 JS 中有一种简单的方法可以将移动端指向非移动端模板……但如果有的话,我目前并不了解!

1 个赞

说得太早了!我仔细看了一下,其实在发出上面的回复后不久就解决了这个问题。有时候把问题写出来就能找到答案。

我已经做了一个更新,现在只使用一个模板……默认情况下,在 topic-list-item.js 中我们有如下代码:

  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

所以,如果我在主题中覆盖 const template

  renderTopicListItem() {
    const template = findRawTemplate("list/custom-topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

这样就会指向一个单独的模板,而且由于没有同名的移动端对应模板……它也会被用于移动端。感谢你的提问 @hyd504 启发了这次改进!

4 个赞

太棒了!:blush: 我刚在我的网站上换上了 Fakebook Modern 主题 :slightly_smiling_face: 非常感谢!:heart:

@awesomerobot @Don

你们能分享一些示例论坛的链接吗?我想看看这个主题的实际效果。

你好,

当然,你可以在主题创建器中查看 Fakebook 主题:

我的版本包含了较多的修改,但你可以在此查看:

1 个赞

谢谢 @Don

再确认一下,预览是否指向 GitHub - discourse/fakebook-modern · GitHub 主题?