博客文章样式

:discourse: 摘要 博客文章样式 (Blog Post Styling) 允许您指定一个博客分类,这将改变该分类下主题的外观,使其更像传统的博客文章。
:eyeglasses: 预览 在 theme-creator.discourse.org 上预览
:hammer_and_wrench: 代码仓库 github.com/discourse/discourse-blog-post-styling
:open_book: 对 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 titlebelow title 时的图片外观:
  • 首字下沉启用 (Dropcap enabled): 启用后,博客文章的第一个字母将具有放大的样式,如下所示:
  • 移动端启用 (Mobile enabled): 启用后,在移动设备上阅读主题时将应用博客文章样式。

撰写博客文章

设置好博客分类(或应用了博客文章标签)后,关于博客文章主题的工作方式需要注意以下几点。

特色图片

将您想要的作为英雄图片的图片放在帖子的第一行,后面跟一个空行,然后是您的内容:

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

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

组件会根据 图片位置 (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 主题。

104 个赞

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

![image|690x458,101%](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

after the respective image had been uploaded beforehand as

![image|690x458](upload://4BWmapYzkwTQrWlm1JkeUwefYrC.jpeg)

This is cute and makes us happy.


3 个赞

Hello, and thank you very much for dedicating the time to create this and release it for free.

I was just wondering if it would be at all possible to change this somehow to use a specific tag instead of a particular category?

I just setup a new discourse website but I’ve been writing a lot of “blog posts” but I would still like these to show up in the appropriate other categories in order to make it seem a little more integrated.

Currently I have been posting them in their own blog-posts category, which I limited to just me being able to post in there, but I just setup a tag group and made that only accessible to staff.

Thanks again!

3 个赞

Thanks very much @tshenry. Your theme components have all been spot on.And to @sam and @codinghorror for sharing an incredible app!! Your generosity including the support in meta is heartfelt. Discourse is indeed made for the more caring internet of the future.

6 个赞

Is there a way to make this work with a video as the featured content rather than the image? I would delete my wordpress site if I could just post the YouTube/Vimeo etc. and have that be the top content. Any ideas?

6 个赞

Totally! Great suggestion @LoganRTW. It’s got my vote @tshenry. Can it be done?

4 个赞

Update :tada:

If you can believe it :sweat_smile:

I have started refactoring/cleaning up the component to use the plugin-style file structure and make use of the new topic thumbnails.

https://github.com/discourse/discourse/pull/9215

I’ve added a couple new features as well:

  • New settings
    • image_display_style - there are two options with this. The default should be the behavior the component has had all along. The alternative will ensure there is no cropping and the full image is displayed. It’s hard to say which one is “better” so you’ll want to do some experimentation and see what works best for your workflow and blog images.

    • mobile_enabled - this is a first pass on the mobile blog post style. I’m interested to hear any bug reports or ideas for improvements on this!

I still want to continue refactoring and cleaning up the code, but this should be a good start.

https://github.com/tshenry/discourse-blog-post-styling/commit/eba3c52fc1f9b273d34e9d673567410e4566372e


No plans at this point, I’m afraid!

16 个赞

Thank you for a really inspiring and nice component @tshenry :pray:

In my evaluation I have identified two issues;

  1. No blog image in sub categories - after quite extensive troubleshooting with different themes and enabling/disabling both plugins and other components, I think I can state with near certainty that blog images won’t render for sub categories. The first image/the intended blog image is however still hidden.

  2. First image not hidden inline with DiscoTOC - When Blog Post Styling is used together with DiscoTOC, the blog image get rendered above the title correctly - however, it is rendered twice as it is still rendered in its original position as well.

4 个赞

Thanks so much for the feedback @torstensson! Both points were indeed bugs and should now be fixed:

Please let me know if you continue to have any issues.


To everyone using this component:

:warning: If you are not currently including a featured image at the top of all blog posts, this is for you!

This component was created with the intention of having an image display above every blog post topic. With that said, it was possible to create a blog post without displaying a featured image by simply not including an image on the first line of the post. This behavior has changed.

The newer implementation greatly improves performance, but it uses a predefined value rather than looking at the post contents itself. The predefined value is generated from the first image found in the post. Unlike before, it is not necessarily limited to an image appearing as the first line of the post. This means if you create a post without an image on the first line, but you include a single image at the bottom of the post, that image at the bottom will now also be displayed above the topic.

I have included an all-or-nothing setting that can toggle on/off the “featured image,” allowing you to have all of the styling except for the featured image if that is your preference.

I am going to update the OP with all of the new considerations and recommendations, but the short of it is to make sure to include an image on the first line of the post (this positioning is still used to make sure the image is not repeated). You may find it is helpful to use a placeholder image in the category’s topic template that can be used as a default if no image is provided.

6 个赞

Awesome, thank you @tshenry :awthanks: I can gladly confirm that both issues have been resolved with the update :slightly_smiling_face: and again - thank you for a really great component, not only in function but inspiration as well :+1: :+1:

3 个赞

A recently announced feature may work as an alternative to this theme-component. Leaving it here for those interested.

2 个赞

@tshenry Thanks so much for this component! :heart: We are using it along side the Topic List Previews plugin to create an Articles section for students in the Dataquest Community.

I have a feature request for you to consider in future iterations of this component - Can you please add the ability to add Canonical URLs to the articles?

Search engines use canonical links to determine and prioritize the ultimate source of content, removing confusion when there are multiple copies of the same document in different locations.

Thanks!

3 个赞

So I think this is a great component. In fact I am now trying it out on a live Discourse and I am playing around with it. Without any kind of order, I want to provide my initial thoughts and feedback, hope it helps - forgive me if some of them might be more of a question:

  • The way the author is displayed is a bit out of place and could maybe be solved more space-efficient, to tie it in closer with the title, or category tag etc… there is also rather much white space between the line that ends the author info and the beginning of the text
  • It is hard for a vistor sent directly to a blog post to realize where you are, as there is no clear breadcrumb or anything. The main reason is, that the title bar seems to be turned inactive, whereas on normal topics they transform and include the title, category etc.
  • Would be great if the category view could have more of a blog look, with small preview images and such, would that be hard to do?
  • I don’t see a category description in the category view?
2 个赞

wow what theme component is used for that category view? Looks cool

2 个赞

Thanks for the feedback :slight_smile:

I do agree there is a lot of white space around the author/title area. I’ll keep this feedback in mind next time I work on the component and see if I can come up with something.

I’m not 100% sure what you mean here. The header will switch to include the title/breadcrumbs once you scroll down past the image and blog title. You are correct that at the top of the page, it’s not especially obvious, though. I’ll keep this in mind as well.

These would be out of scope for this component. For the category view, you might want to take a look at: Topic List Thumbnails

2 个赞

Thanks for the feedback :slight_smile: I think most of it is cleared up, and I also do see the category description now, not sure why it wasn’t visible earlier, I thought it had something to do with the component. I will keep trying this out and post more feedback later. Excellent work!

3 个赞

I think the excess space at the top comes from space remaining after the picture is “moved” to the header of the blogpost, resulting not in space below gained, but being empty.

But I noticed an actual problem: If I post links to such a blog post in other topics, there is no thumbnail, see here

1 个赞

Here is a screenshot of what I mean:

2 个赞

I’m fairly sure this is due to you excluding a line break between the image upload link and the first paragraph. Can you try editing it to match the following:

![spagh|690x390](upload://nVi42gGIwt03DAYSzVEc4RvwS6h.jpeg) 

<big>While</big> there is ample space around the web to post and blog and share and tweet and all that, my favorite place to exchange ideas with all of you on the spaghetti western is this forum. Some of you might remember an effort dating back several years ago, it was called "Planet Spaghetti Western", and the idea was to have a blog, that would automatically aggregate posts from all the spaghetti western blogs around the internet, and present them sort of as a digest. It was rather complicated from a technical perspective and in the end more work than it was worth so I had to shut that down.

If that works, I’ll add a note in the OP about that requirement.

3 个赞

Hi. That reduces the margin a bit, indeed, thank you. I had done the exact opposite in the editor: leave as little space between the image and the beginning of the text

1 个赞