博客文章样式

:discourse: 摘要 博客文章样式允许您指定一个博客分类,从而改变该分类内主题的外观,使其更像传统博客文章。
:eyeglasses: 预览 在 theme-creator.discourse.org 上预览
:hammer_and_wrench: 仓库 github.com/discourse/discourse-blog-post-styling
:open_book: 初次使用 Discourse 主题? Discourse 主题使用入门指南

安装此主题组件

博客文章样式主题组件将 Discourse 主题转换为传统博客文章布局。当应用于某个分类时,每个主题中的第一张图片会被提升为标题上方的全宽英雄图,内容则采用适合博客的排版和元数据显示样式。

设置

以下是与此主题组件相关的各种设置:

  • 博客分类:属于所选分类的主题将应用博客文章样式。

  • 博客标签:选择一个或多个标签,当应用于主题时,将赋予其博客文章样式。

  • 图片尺寸:决定特色英雄图如何填充标题区域:

    • 无图片:隐藏特色图片。
    • 全宽(默认):图片横跨整个内容区域。
    • 居中:图片保持宽高比并居中显示在内容区域。
  • 图片位置:决定图片相对于标题的显示位置:

    • 标题上方(默认):在主题标题上方显示图片。
    • 标题下方:在主题标题下方显示图片。选择此项时,您还可以包含一个摘要,显示在标题和图片之间。下方展示了当图片位置设置为 标题上方标题下方 时图片的显示效果:

撰写博客文章

设置好博客分类(或应用博客文章标签)后,请注意博客文章主题运行的几个特殊事项。

特色图片

将您希望作为英雄图的图片放在帖子的第一行,然后在内容开始前留一个空行:

![图片描述|1100x440](upload://your-image-hash.jpg)

您的帖子内容从这里开始...

该组件会根据图片位置设置(见上文)自动定位此图片。如果在图片之前出现任何其他内容(包括空行),图片将不会被提升为英雄图位置。

首次发布帖子后,请刷新页面以查看图片出现在指定位置。(这仅影响作者在首次发布时的视图;访问帖子的成员应立即看到图片在正确位置。)

图片尺寸技巧

图片容器高度为 440px,宽度为 100%。当图片尺寸设置为 全宽 时,为获得最佳效果:

  • 在上传前使用或裁剪图片至 1100x400px 以避免裁剪,或
  • 选择主体居中或内容非特定的图片(如风景、图案),以免裁剪掉重要细节。

摘要

图片位置设置为 标题下方 时,您可以为博客文章添加可选摘要,该摘要将显示在标题和特色图片之间。

为此,请按以下方式包裹您希望出现在摘要中的内容:

[summary] 这里将是您的摘要内容。[/summary]

样式化引用块

在博客分类中创建主题时,引用块将获得特殊样式。您可以在编辑器中使用 > 符号或使用 编辑器工具栏按钮创建引用块。

推荐的分类设置

在您的博客分类设置中,建议启用阅读主题后跳转至首帖分类设置。这将使返回的读者直接跳转到博客文章内容,而不是他们上次阅读的位置。

博客文章样式 + 主题列表缩略图

此组件与 主题列表缩略图 兼容,后者会在主题列表中突出显示您博客文章的特色图片:

注意:主题列表缩略图组件与 Horizon 主题不兼容。上述截图使用的是 Foundation 主题。

105 个赞