| 摘要 | 博客文章样式 (Blog Post Styling) 允许您指定一个博客分类,这将改变该分类下主题的外观,使其更像传统的博客文章。 | |
| 预览 | 在 theme-creator.discourse.org 上预览 | |
| 代码仓库 | github.com/discourse/discourse-blog-post-styling | |
| 对 Discourse 主题不熟悉? | Discourse 主题使用入门指南 |
安装此主题组件
博客文章样式 (Blog Post Styling) 主题组件将 Discourse 主题转换为传统的博客文章布局。当应用于某个分类时,每个主题中的第一张图片将被提升为标题上方的全宽英雄图片,并且内容将以适合博客的排版和元数据展示方式进行样式化。
设置
以下是与此主题组件相关的各种设置:
-
博客分类 (Blog category): 应使用博客文章样式的分类的 slug。要添加到多个分类,请使用不带空格的逗号分隔列表(例如
blog,announcements)。查找 slug 的方法:- 对于分类,获取
/c/之后的部分 URL 路径——因此对于/c/blog/,slug 是blog。 - 对于子分类,获取
/c/之后的部分 URL 路径,并将任何/替换为-。例如,位于/c/blog/tutorials的分类将变为blog-tutorials。
- 对于分类,获取
-
博客标签 (Blog tag): 选择一个或多个标签,当应用于主题时,将为其提供博客文章样式。
-
图片大小 (Image size): 决定特色英雄图片如何填充标题区域:
无图片 (No image): 隐藏特色图片。全宽 (Full width)(默认): 图片跨越整个内容区域。居中 (Centered): 图片保持其宽高比并在内容区域中居中。
-
图片位置 (Image position): 决定在标题的相对位置显示图片:
标题上方 (Above title)(默认): 在主题标题上方显示图片。标题下方 (Below title): 在主题标题下方显示图片。选择此项后,您还可以在标题和图片之间包含一个摘要。下面,您可以看到当 图片位置 (image position) 设置配置为above title和below title时的图片外观:
- 首字下沉启用 (Dropcap enabled): 启用后,博客文章的第一个字母将具有放大的样式,如下所示:
- 移动端启用 (Mobile enabled): 启用后,在移动设备上阅读主题时将应用博客文章样式。
撰写博客文章
设置好博客分类(或应用了博客文章标签)后,关于博客文章主题的工作方式需要注意以下几点。
特色图片
将您想要的作为英雄图片的图片放在帖子的第一行,后面跟一个空行,然后是您的内容:

您的帖子内容从这里开始...
组件会根据 图片位置 (image position) 设置自动定位此图片(见上文)。如果任何其他内容——包括空行——出现在图片之前,它将不会被提升到英雄位置。
首次发布帖子后,刷新页面以查看图片出现在指定位置。(这仅在初始发布时影响帖子作者;访问该帖子的成员应该会立即看到图片在正确的位置。)
图片尺寸提示
图片容器高 440 像素,宽 100%。当 图片大小 (image size) 设置为 full width 时,为获得最佳效果:
- 上传前使用或裁剪图片至 1100x400 像素以避免裁剪,或者
- 选择主体居中或内容不特定的图片(风景、图案),以免裁剪移除重要细节。
摘要
当 图片位置 (image position) 设置为 below title 时,您可以为博客文章添加可选的摘要,它将显示在标题和特色图片之间。
要执行此操作,请按如下方式包装您希望显示在摘要中的内容:
[summary] 这是将成为您摘要的内容。 [/summary]
样式化的引用块
在博客分类中创建主题时,引用块会获得特殊的样式。您可以使用 > 符号或 \u003ckbd\u003e“\u003c/kbd\u003e 撰写器工具栏按钮在撰写器中创建引用块。
推荐的分类设置
在博客分类的设置中,请考虑启用 主题阅读后导航到第一篇帖子 (Navigate to first post after topics are read) 的分类设置。这会将返回的读者直接带到博客文章内容,而不是他们上次阅读的位置。
博客文章样式 + 主题列表缩略图
此组件与 主题列表缩略图 (Topic List Thumbnails) 兼容,后者会在主题列表中突出显示您的博客文章的特色图片:
注意: 主题列表缩略图组件与 Horizon 主题不兼容。上面的截图使用的是 Foundation 主题。





