FKB Pro - 社交主题

<div data-theme-toc="true"> </div>

FKB Pro 是一个经过高度修改、细节丰富、专业的社交主题,但仍然用户友好。 :rocket:

:warning: 此主题非常敏感,可能与其他您使用的主题组件或插件兼容性不佳! 请在使用前进行测试。这些通常需要一些 CSS 修改。如果您有任何问题,请报告,我们会修复。


布局

在桌面端: 三栏布局。

侧边栏就绪


在移动端:


圆角

FKB Pro 默认在所有地方都有高度圆润的圆角,但我知道不是所有人都喜欢,所以我添加了一些主题设置,以便更容易自定义。

如果您不喜欢圆角……请将这些值设置为 0


主题卡片

主要部分

  1. 标题 (点击跳转到最后一帖)
  2. 摘要 (点击跳转到 OP)
  3. 图片 (点击跳转到最后一帖)

其他部分

  1. 左上角:作者数据(头像、姓名、用户名)和主题创建日期。
    (点击打开用户卡片)
  2. 右上角:分类徽章
  3. 底部中央:标签
  4. 左下角:主题点赞数和浏览数
    (点击跳转到 OP 并摘要主题(如果可用))
  5. 右下角:最后发帖人头像、日期和回复数。
    (点击头像打开用户卡片,日期跳转到最后一帖,回复数打开回复选择)

徽章样式

  1. 圆点
    Screenshot 2022-07-28 at 13.20.14

  2. 条形
    Screenshot 2022-07-28 at 13.17.04

  3. 方框
    Screenshot 2022-07-28 at 13.18.34


分类页面

由于中心区域尺寸有限,请使用单栏分类页面样式。我对这些进行了自定义,使其更适合此主题。

仅分类、分类和最新主题、分类和热门主题

分类框

或者

您可以使用 @jordan.vidrine 创建的 Modern Category + Group Boxes 主题组件。


FKB 面板

在桌面端: 右侧边栏。

对于匿名访客,它会显示一个欢迎消息。此消息与 js.signup_cta.value_prop 相同。您可以在主题翻译中更改“欢迎”文本。

或者

对于匿名访客,可以选择启用自定义侧边栏。您可以向侧边栏添加自定义内容,如图片和描述。


对于已登录用户,它包含用户信息,如头像、统计数据、徽章,并使用用户卡片图片作为背景。底部还有一些快速按钮。


颜色方案

该主题包含两种颜色方案:FKB Pro - LightFKB Pro - Dark

颜色方案

FKB Pro - Light

  • primary #242526
  • secondary #ffffff
  • tertiary #147efb
  • quaternary #147efb
  • header_background #ffffff
  • header_primary #242526
  • highlight #147efb
  • danger #f8745c
  • success #42b72a
  • love #fa6c8d

FKB Pro - Dark

  • primary #ffffff
  • secondary #242526
  • tertiary #147efb
  • quaternary #4267b2
  • header_background #242526
  • header_primary #ffffff
  • highlight #147efb
  • danger #f8745c
  • success #42b72a
  • love #fa6c8d

还有一些自定义颜色方案,您可以在设置中更改。

自定义颜色方案

fkb-bg

  • light #f0f2f5
  • dark #18191a

fkb-header-btn

  • light #e1e5eb
  • dark #3a3b3e

fkb-header-btn-hover

  • light #d2d8e1
  • dark rgba(var(--primary-rgb),.1)

fkb-btn

  • light #e1e5eb
  • dark #383838

fkb-btn-hover

  • light #d2d8e1
  • dark rgba(var(--primary-rgb),.1)

更多关于最新更新的信息 :arrow_down_small:

以及这里 :arrow_down_small:

还有很多我没有提到的其他自定义功能。 :slightly_smiling_face:


鸣谢 :heart: 非常感谢 @awesomerobot 创建了 Fakebook 主题,以及 @jordan.vidrine 创建了 Fakebook Modern 主题。

|||
|-|-|-|
| :eyeglasses:|预览| Theme Creator |
| :hammer_and_wrench:|仓库| FKB Pro 主题 |
| :question:|安装指南|如何安装主题或主题组件|
| :open_book:|刚接触 Discourse 主题?| Discourse 主题使用入门指南 |

56 个赞

iPad 的屏幕相当……宽。我是说,真的非常宽 :wink:

我猜这是因为没有侧边栏。有什么想法吗?

3 个赞

太棒了!

我唯一的建议是让汉堡菜单更宽一些,然后添加内边距

1 个赞

还有一个小问题:

  • 我的论坛不使用 solved-plugin
  • 我们不使用徽章

你知道如何隐藏这两个更好 :wink:

除此之外……这个主题在桌面和移动设备上看起来都很有前途(平板电脑有点问题)

顺便说一句——versatile banner 有一个小布局问题。它将它下面的内容推得太靠左了。

3 个赞

您好,

我已将一个修复程序推送到平板电脑视图。请更新主题。 :slightly_smiling_face:

6 个赞

速度真快。

好多了,谢谢。我得到了一个新的默认主题……

1 个赞

谢谢 :slightly_smiling_face: 是的,我认为这是默认设置。打开菜单时,第一个项目处于焦点状态。

3 个赞

是的,我只是建议它们之间可以留一点空隙,除此之外,这个主题看起来不错,尽管我讨厌 Facebook 和 Meta 哈哈。

谢谢 :slightly_smiling_face: 我为此推送了一个修复程序。

我添加了两个主题设置。

我会检查一下。

3 个赞

这让我成了痛处 :rofl:

有一个问题。不是对我,而是对我的前五名贡献者来说,这是生死攸关的问题——嗯,也许有点夸张了,但他们真的很想要这个。

类别设置:

通常会显示类似这样的内容(在 iPad 上,但您明白我的意思)

如果类别描述或名称比几个字符长,您的布局就会中断:

禁用 在上面显示子类别列表… 当然可以解决这个问题。

但我最终还是只使用顶级类别,并大量依赖标签(这样的话,您的主题在很多方面都相当合适)——所以,如果修复这个问题需要花费太多时间和/或您有更重要的事情要做,我完全可以接受您以后再处理这个问题。

3 个赞

您好,我为 Discourse Reactions 添加了一个修复程序:slightly_smiling_face:
您可以将其安装为主题组件。

1 个赞

感谢您的报告 @Jagster。我已推送此问题的修复程序。FIX: Topic list category layout by VaperinaDEV · Pull Request #3 · VaperinaDEV/fkb-pro-theme · GitHub

2 个赞

您好,我已经为此推送了一个修复程序。谢谢 :slightly_smiling_face: 请更新主题。

之前

之后

1 个赞

很棒的主题。请添加更多帖子进行测试。

1 个赞

:slightly_smiling_face: 谢谢。我已将 OP 更新为主题创建者预览链接,现在您也可以在 https://discourse.theme-creator.io/theme/dodesz/fkb-pro 上进行尝试。

2 个赞

很棒的主题!如果我能找到一种获得域名和邮件服务器的方法,我一定会使用这个主题。

2 个赞

您好,

我添加了一个新功能 :tada: 现在您可以为访客添加自定义侧边栏内容。

3 个赞

感谢更新此主题。

如果您能将此主题开发成类似博客(忘掉 Facebook 主题 :sweat_smile:)的形式,那就太棒了。

来自 https://www.newsbreak.com/ 的建议

3 个赞

我不同意 :wink:

Blogish 的需求与那些认为 Facebook/Instagram/等是最佳用户体验/用户界面的用户所寻求的社交媒体风格有所不同。

因此——可能存在一个看起来更像博客(无论现在这意味着什么……)的主题。但现在这样就很好。

(WordPress 作为博客平台比 Discourse 优越得多;它们是两种完全不同的工具,用于不同的目的……)

1 个赞

您好,很棒的主题!

我们论坛中的主题预览没有显示为三列,而只显示为一列布局。我怀疑是 CSS 问题,但仍在尝试找出原因。

有两个问题:

  • 在桌面模式下,是否可以在最小屏幕宽度(或使用媒体 CSS 规则等设置几个断点)时拥有固定宽度的列?在非常大的显示器(24 或 27 英寸)上,灵活的宽度让我有点头疼,“三个列之间的空白区域”有点尴尬。
  • 该主题是否与右侧区块的组件兼容 Right Sidebar Blocks - theme-component - Discourse Meta?如果兼容,这将使右侧列更加有用/功能丰富。
2 个赞