博客文章样式 主题组件将 Discourse 主题转换为传统博客文章布局。当应用于某个分类时，每个主题中的第一张图片会被提升为标题上方的全宽英雄图，内容则采用适合博客的排版和元数据显示样式。
以下是与此主题组件相关的各种设置：
启用首字下沉 ：启用后，博客文章的首字母将采用放大样式，如下所示：启用移动端 ：启用后，在移动设备上阅读主题时将应用博客文章样式。
设置好博客分类（或应用博客文章标签）后，请注意博客文章主题运行的几个特殊事项。
将您希望作为英雄图的图片放在帖子的第一行 ，然后在内容开始前留一个空行：
您的帖子内容从这里开始...
该组件会根据图片位置 设置（见上文）自动定位此图片。如果在图片之前出现任何其他内容（包括空行），图片将不会被提升为英雄图位置。
首次发布帖子后，请刷新页面 以查看图片出现在指定位置。（这仅影响作者在首次发布时的视图；访问帖子的成员应立即看到图片在正确位置。）
图片容器高度为 440px ，宽度为 100% 。当图片尺寸 设置为 全宽 时，为获得最佳效果：
在上传前使用或裁剪图片至 1100x400px 以避免裁剪，或
选择主体居中或内容非特定的图片（如风景、图案），以免裁剪掉重要细节。
当图片位置 设置为 标题下方 时，您可以为博客文章添加可选摘要，该摘要将显示在标题和特色图片之间。
为此，请按以下方式包裹您希望出现在摘要中的内容：
[summary] 这里将是您的摘要内容。[/summary]
在博客分类中创建主题时，引用块将获得特殊样式。您可以在编辑器中使用 > 符号或使用 “ 编辑器工具栏按钮创建引用块。
在您的博客分类设置中，建议启用阅读主题后跳转至首帖 分类设置。这将使返回的读者直接跳转到博客文章内容，而不是他们上次阅读的位置。
此组件与 主题列表缩略图 兼容，后者会在主题列表中突出显示您博客文章的特色图片：
注意 ：主题列表缩略图组件与 Horizon 主题不兼容。上述截图使用的是 Foundation 主题。
105 个赞
amotl
2019 年7 月 2 日 02:30
54
amotl:
After bumping the defined sizes manually just slightly in the markup , the headline-image-expansion feature works flawlessly – [at least with] images [that] are actually large enough (> 690px wide).
We just have been able to verify that by bumping the original markup materialized after upload by just injecting a zoom level of 101% at the appropriate place like
after the respective image had been uploaded beforehand as
This is cute and makes us happy.
Hardwareentwicklung / hardware development
Hardware bazaar
Description The JeeLink is a fully assembled and ready-to-use USB-type “stick” which plugs directly into a PC, Mac or USB hub. It contains Atmel’s ATmega328p AVR microprocessor, HopeRF’s RFM69CW wireless radio module and a branded FT232R USB...
3 个赞
您好，非常感谢您抽出时间制作并发布此内容，且完全免费。
我想知道，是否有可能将其调整为使用特定标签，而不是特定分类？
我刚刚搭建了一个新的 Discourse 网站，虽然写了很多“博客文章”，但仍希望它们能出现在其他合适的分类中，以显得更加整合。
目前，我将这些文章发布在专属的“博客文章”分类中，并限制只有我能在此发帖。但我刚刚设置了一个标签组，并将其权限限制为仅工作人员可访问。
再次感谢！
3 个赞
Howaids
2020 年3 月 17 日 07:00
70
非常感谢 @tshenry 。您的主题组件都非常精准。同时感谢 @sam 和 @codinghorror 分享这款令人惊叹的应用！您包括在 meta 中提供的支持，这份慷慨与用心令人感动。Discourse 确实是为未来更充满关怀的互联网而打造的。
6 个赞
有没有办法让视频而不是图片作为特色内容？如果我只需要发布 YouTube、Vimeo 等视频，并让它们成为顶部内容，我甚至会删除我的 WordPress 网站。有什么建议吗？
6 个赞
Howaids
2020 年3 月 29 日 12:56
82
完全同意！很好的建议 @LoganRTW 。我支持 @tshenry 。这能做到吗？
4 个赞
tshenry
2020 年6 月 2 日 21:21
86
如果你能相信的话
我开始重构/清理该组件，使其采用插件风格的文件结构，并利用新的主题缩略图。
master ← davidtaylorhq:post_image_refactor
merged 08:07AM - 05 May 20 UTC
This PR introduces new APIs for obtaining optimized thumbnails for topics. There… are a few building blocks required for this:
- Introduces new `image_upload_id` columns on the `posts` and `topics` table. This replaces the old `image_url` column, which means that thumbnails are now restricted to uploads. Hotlinked thumbnails are no longer possible. In normal use (with pull_hotlinked_images enabled), this has no noticeable impact
- A migration attempts to match existing urls to upload records. If a match cannot be found then the posts will be queued for rebake
- Optimized thumbnails are generated during post_process_cooked. If thumbnails are missing when serializing a topic list, then a sidekiq job is queued
- Topic lists and topics now include a `thumbnails` key, which includes all the available images:
```
"thumbnails": [
{
"max_width": null,
"max_height": null,
"url": "//example.com/original-image.png",
"width": 1380,
"height": 1840
},
{
"max_width": 1024,
"max_height": 1024,
"url": "//example.com/optimized-image.png",
"width": 768,
"height": 1024
}
]
```
- Themes can request additional thumbnail sizes by using a modifier in their `about.json` file:
```
"modifiers": {
"topic_thumbnail_sizes": [
[200, 200],
[800, 800]
],
...
```
Remember that these are generated asynchronously, so your theme should include logic to fallback to other available thumbnails if your requested size has not yet been generated
- Two new raw plugin outlets are introduced, to improve the customisability of the topic list. `topic-list-before-columns` and `topic-list-before-link`
我还添加了一些新功能：
我仍希望继续重构和清理代码，但这应该是一个不错的开始。
committed 09:21PM - 02 Jun 20 UTC
目前恐怕还没有相关计划！
16 个赞
非常感谢你提供了如此鼓舞人心且出色的组件 @tshenry
在我的评估中，我发现了两个问题：
子分类中缺少博客图片 - 在尝试了不同主题并启用/禁用了多个插件和其他组件后，经过相当广泛的故障排查，我几乎可以确定博客图片在子分类中无法显示。不过，第一张图片（即预期的博客图片）仍然被隐藏。
首张图片未与 DiscoTOC 对齐隐藏 - 当“博客帖子样式”与 DiscoTOC 一起使用时，博客图片会正确地渲染在标题上方——但它被渲染了两次，因为它仍然保留在原始位置也被渲染出来。
4 个赞
tshenry
2020 年6 月 22 日 23:24
93
非常感谢你的反馈 @torstensson ！这两个问题确实都是 bug，现在应该已经修复了：
committed 11:20PM - 22 Jun 20 UTC
如果你仍遇到任何问题，请随时告知。
致所有使用该组件的用户：
所有 博客帖子的顶部包含特色图片，那么这条信息就是为你准备的！该组件的设计初衷是在每个博客帖子主题上方显示一张图片。因此，用户之前可以通过不在帖子第一行包含图片的方式，创建不显示特色图片的博客帖子。这种行为现已改变。
新的实现方式大幅提升了性能，但它使用的是预定义值，而不是直接检查帖子内容。该预定义值是从帖子中找到 的第一张图片生成的。与之前不同，它不再局限于作为帖子第一行出现的图片。这意味着，如果你创建的帖子第一行没有图片，但在帖子底部包含了一张图片，那么这张底部的图片现在也会被显示在主题上方。
我添加了一个“全有或全无”的设置，可以开启或关闭“特色图片”功能。如果你希望保留所有样式但排除特色图片，可以选择关闭该功能。
我将在原始帖子（OP）中更新所有新的注意事项和建议。简而言之，请确保在帖子的第一行包含一张图片（该位置仍用于防止图片重复）。你可能发现，在分类的主题模板中使用占位图片作为默认选项会很有帮助，这样即使未提供图片也能正常显示。
6 个赞
core
2020 年6 月 23 日 13:17
95
最近宣布的一项功能可能可作为此主题组件的替代方案。在此保留供感兴趣的用户参考。
2 个赞
nityeshaga
2020 年9 月 1 日 09:55
102
@tshenry 非常感谢你提供这个组件！Topic List Previews 插件配合使用，为 Dataquest 社区的学员创建 文章板块 。
我有一个功能请求，希望你在该组件的未来版本中考虑：能否为文章添加 规范链接（Canonical URLs） ？
搜索引擎利用规范链接来确定并优先处理内容的最终来源，从而在相同文档存在于不同位置时避免混淆。
谢谢！
3 个赞
所以我认为这是一个很棒的组件。事实上，我现在正在一个实线的 Discourse 站点上试用它，并对其进行各种测试。以下是一些零散的初步想法和反馈，希望能有所帮助——如果其中有些更像是在提问，还请见谅：
作者信息的展示方式略显突兀，或许可以更节省空间地处理，使其与标题或分类标签等元素更紧密地结合……此外，作者信息行结束与正文开始之间的空白也显得有些过多。
对于直接访问某篇博客帖子的访客来说，很难意识到自己所在的位置，因为缺乏清晰的导航路径（面包屑）或其他提示。主要原因在于，标题栏似乎处于非激活状态，而在普通话题中，标题栏会变换并显示标题、分类等信息。
如果分类视图能呈现出更像博客的样式，例如包含小型预览图片等，那就太好了。这做起来会很困难吗？
我在分类视图中没有看到分类描述？
2 个赞
tshenry
2020 年10 月 27 日 21:52
105
感谢你的反馈
sebastianh:
作者信息的显示方式略显突兀，或许可以更节省空间地处理，使其与标题或分类标签等更紧密地结合……此外，作者信息结束行与正文开始之间也有过多的空白。
我确实同意作者/标题区域周围存在大量空白。下次我处理该组件时会记住这条反馈，看看能否想出改进方案。
我不太确定你具体指什么。一旦你向下滚动越过图片和博客标题，标题栏就会切换为显示标题/面包屑导航。不过你说得对，在页面顶部时，这一点确实不太明显。我也会把这一点记下来。
sebastianh:
如果分类视图能更像博客风格，带有小型预览图片等，那就太好了。这做起来很难吗？
在分类视图中我看不到分类描述？
这些功能超出了本组件的范围。关于分类视图，你可以参考：Topic List Thumbnails
2 个赞
感谢反馈
3 个赞
我认为顶部多余的空白是因为图片被“移动”到博客帖子的标题后，原本应占据的空间并未转化为下方的空间，而是留空了。
但我发现了一个实际问题：如果我在其他主题中发布指向此类博客帖子的链接，则不会显示缩略图，见此处
1 个赞
tshenry
2020 年11 月 21 日 00:18
109
我相当确定这是因为你在图片上传链接和第一段之间省略了换行符。能否试着将其编辑为如下格式：
<b>虽然</b>网络上有很多空间可以发帖、写博客、分享和发推文等等，但我最喜欢的与各位在“意大利面西部”上交流思想的地方是这个论坛。你们中有些人可能记得几年前的一次尝试，它被称为“意大利面西部星球”，其想法是建立一个博客，自动聚合互联网上所有关于意大利面西部的博客文章，并以摘要的形式呈现。从技术角度来看，这相当复杂，最终得不偿失，所以我不得不关闭了它。
如果这样可行，我会在主题帖（OP）中添加一条关于该要求的说明。
3 个赞
你好。确实，这稍微减少了边距，谢谢。我在编辑器里做的恰恰相反：让图片和文字开头之间留出尽可能少的空间。
1 个赞
如果你目前并未在所有博客帖子的顶部包含特色图片，那么这条信息就是为你准备的！
我可以很高兴地确认，这两个问题都已通过更新解决 
再次感谢，这不仅是一个功能出色的组件，更带来了极大的灵感 
我们正将其与 
