# 博客文章样式

**URL:** https://meta.discourse.org/t/blog-post-styling/110841
**Category:** Theme component
**Tags:** official
**Created:** [2019 年3 月 6 日 11:10 UTC](https://meta.discourse.org/t/blog-post-styling/110841 "2019-03-06T11:10:58Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### 作者： ![denvergeeks](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/denvergeeks/32/327671_2.png) [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### 发布日期： [2022 年8 月 29 日 11:38 UTC](https://meta.discourse.org/t/blog-post-styling/110841/154 "2022-08-29T11:38:12Z")

</div>

@oshyan 这是一个很棒的网站！我特别喜欢你的“分类”下拉菜单！

---

<div class="post-metadata">

### 作者： ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### 发布日期： [2022 年8 月 29 日 21:57 UTC](https://meta.discourse.org/t/blog-post-styling/110841/155 "2022-08-29T21:57:24Z")

</div>

> [@oshyan](#):
>
> 博客文章样式和 DiscoTOC 根本不兼容

我正在积极处理此事以使其正常工作。我刚刚完成了另一个组件的一些修复和更新，所以我会尽快处理这个。我现在手头有很多事情，所以可能需要一点时间。如果一个月后您还没有收到任何消息，请提醒我 🙂

---

<div class="post-metadata">

### 作者： ![oshyan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/oshyan/32/212644_2.png) [@oshyan](https://meta.discourse.org/u/oshyan)
#### 发布日期： [2022 年9 月 29 日 15:58 UTC](https://meta.discourse.org/t/blog-post-styling/110841/156 "2022-09-29T15:58:19Z")

</div>

👉 戳一下 戳一下 😁 我的写作经常是长篇大论，而且我可能比一般人更常使用标题。但我也很喜欢博客文章的风格！希望它们能和平共存。 🙂

---

<div class="post-metadata">

### 作者： ![Rootzilla](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rootzilla/32/292421_2.png) [@Rootzilla](https://meta.discourse.org/u/Rootzilla)
#### 发布日期： [2023 年2 月 7 日 10:58 UTC](https://meta.discourse.org/t/blog-post-styling/110841/157 "2023-02-07T10:58:21Z")

</div>

如何减小文字大小？我不想将其设置为 1.25em。我尝试使用 CSS 技巧将其减小到 1em，但没有成功。

---

<div class="post-metadata">

### 作者： ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### 发布日期： [2023 年7 月 12 日 15:02 UTC](https://meta.discourse.org/t/blog-post-styling/110841/158 "2023-07-12T15:02:06Z")

</div>

@tshenry 我注意到博客文章样式中有几个错误（主题预览中也存在）：

1. 评论背景一团糟，有一个奇怪的灰白色背景：  

2. 放大页面时，博客文章开始侵占侧边栏：  

3. 用户头像和徽章似乎离标题、发布日期等太近了（参见上图）。

---

<div class="post-metadata">

### 作者： ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### 发布日期： [2023 年7 月 12 日 15:11 UTC](https://meta.discourse.org/t/blog-post-styling/110841/159 "2023-07-12T15:11:58Z")

</div>

您好 Rootzilla，

抱歉回复晚了。您可以使用以下 CSS 更改字体大小：

```css
.category-blog .topic-post:first-child {
    font-size: 1em;
}

```

---

<div class="post-metadata">

### 作者： ![Drew-ART](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@Drew-ART](https://meta.discourse.org/u/Drew-ART)
#### 发布日期： [2023 年10 月 24 日 19:38 UTC](https://meta.discourse.org/t/blog-post-styling/110841/160 "2023-10-24T19:38:42Z")

</div>

我遇到了一个奇怪的 bug，只影响了一个主题。其他主题都运行正常。顶部图片不显示，我放上去的任何图片都会消失。我完全看不到发生了什么。

就是这个：[Take A Smile - Approved Activities List - Public Happiness](https://publichappinessmovement.com/t/topic/3084)

我已经关闭了博客样式，现在图片可以显示了。如果我再次开启它，那张图片就会消失。

我唯一的线索是，子分类中的缩略图图片也只针对这个帖子不显示。

---

<div class="post-metadata">

### 作者： ![tpetrov](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tpetrov/32/164643_2.png) [@tpetrov](https://meta.discourse.org/u/tpetrov)
#### 发布日期： [2023 年11 月 20 日 12:30 UTC](https://meta.discourse.org/t/blog-post-styling/110841/161 "2023-11-20T12:30:48Z")

</div>

是我还是在最近的核心更新之后，使用博客样式的帖子的标题变小了：

 ![image](https://global.discourse-cdn.com/meta/original/4X/d/1/e/d1e738c0726a9f76b4babc96ebc8cdc61430894e.png)

---

<div class="post-metadata">

### 作者： ![Quentin\_B](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/quentin_b/32/278305_2.png) [@Quentin\_B](https://meta.discourse.org/u/Quentin_B)
#### 发布日期： [2023 年11 月 20 日 14:26 UTC](https://meta.discourse.org/t/blog-post-styling/110841/162 "2023-11-20T14:26:55Z")

</div>

我也是——自从 Discourse 3 （以及之前的实验性功能）以来出现了许多 bug，这个组件还在更新吗？

---

<div class="post-metadata">

### 作者： ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### 发布日期： [2025 年3 月 21 日 21:06 UTC](https://meta.discourse.org/t/blog-post-styling/110841/163 "2025-03-21T21:06:15Z")

</div>

![CleanShot 2025-03-21 at 17.04.33@2x](https://global.discourse-cdn.com/meta/original/4X/e/9/f/e9f671a6c5d622ac2dc5c17e7f30909f67d23d6a.jpeg)

正在一个新社区尝试这个，注意到在一个（我认为在这方面）基本是原版的社区上存在一些样式问题。

这个组件是否仍然受支持？

---

<div class="post-metadata">

### 作者： ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### 发布日期： [2025 年3 月 22 日 00:26 UTC](https://meta.discourse.org/t/blog-post-styling/110841/164 "2025-03-22T00:26:04Z")

</div>

不确定它是否仍然受官方支持，但我使用了这个主题组件，它在最新的自托管安装中按宣传的那样工作。 [示例](https://community.myracedata.com/t/they-use-the-dirt/83)

---

<div class="post-metadata">

### 作者： ![fbpbdmin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fbpbdmin/32/300893_2.png) [@fbpbdmin](https://meta.discourse.org/u/fbpbdmin)
#### 发布日期： [2025 年3 月 24 日 18:31 UTC](https://meta.discourse.org/t/blog-post-styling/110841/165 "2025-03-24T18:31:55Z")

</div>

@tshenry  
感谢您提供的这个很棒的组件。有 2 个建议：

打开一个主题以将其显示为博客（在类别中或带有标签时）

- 是否可以使侧边栏菜单自动隐藏？这将使其看起来更像一个博客页面。  
查找 Don 的组件：[Can I default to a hidden sidebar? - #4 by Don](https://meta.discourse.org/t/can-i-default-to-a-hidden-sidebar/252984/4?u=fbpbdmin)  
可以做到这一点，并将其添加为默认用户体验（隐藏或显示）的设置……
- 是否可以使其停留在主题的第一个帖子（博客）中，而不是跳转到最后阅读的回复（内置体验）。  
不确定哪种方式更适合博客页面。

谢谢

---

<div class="post-metadata">

### 作者： ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### 发布日期： [2025 年3 月 24 日 21:11 UTC](https://meta.discourse.org/t/blog-post-styling/110841/166 "2025-03-24T21:11:47Z")

</div>

> [@jordan-violet](#):
>
> 这个组件是否仍然受支持？

很久以前我就开始着手修复和改进更新，但一直没能抽出足够的时间来完成。我知道在核心更改之后，开始出现一些粗糙的边缘，而且我认为在与 DiscoTOC 的兼容性方面一直存在一些长期存在的挑战。

让我看看能否从团队那里得到一些关于这个组件未来应该是什么样子的想法。目前它仍然是一个非官方的、个人管理的组件。

---

<div class="post-metadata">

### 作者： ![Andrew\_Rowe](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/andrew_rowe/32/445877_2.png) [@Andrew\_Rowe](https://meta.discourse.org/u/Andrew_Rowe)
#### 发布日期： [2025 年3 月 25 日 01:53 UTC](https://meta.discourse.org/t/blog-post-styling/110841/167 "2025-03-25T01:53:13Z")

</div>

> [@tshenry](#):
>
> 目前它仍然是一个非官方的、个人管理的组件。

我认为某种官方的“博客”风格，不费吹灰之力就能满足很多人的需求/愿望，但你的组件 @tshenry 是一个很棒的贡献，它对我来说很有效，谢谢你。

---

<div class="post-metadata">

### 作者： ![tknospdr](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tknospdr/32/529762_2.png) [@tknospdr](https://meta.discourse.org/u/tknospdr)
#### 发布日期： [2025 年6 月 14 日 13:54 UTC](https://meta.discourse.org/t/blog-post-styling/110841/168 "2025-06-14T13:54:20Z")

</div>

希望您有时间更新此组件。我真的很喜欢它，但现在它显示了此警告：

**[管理员通知]** 您的某个主题或插件需要更新，以兼容即将到来的 Discourse 核心更改。（ID：[_component-template-resolving_](https://deprecations.emberjs.com/id/component-template-resolving)）

并且我的控制台中出现了这些通知：

```plaintext
[警告] 弃用：具有单独解析模板的组件已被弃用。迁移到共置的 js/ts + hbs 文件或 gjs/gts。尝试查找“template:components/blog-image”。[弃用 ID：component-template-resolving] 这将在 ember-source 6.0.0 中删除。有关更多详细信息，请参阅 https://deprecations.emberjs.com/id/component-template-resolving。（chunk.3d3a2777cc56b0f68f02.d41d8cd9.js，第 377 行）
[警告] 弃用：[主题 13“博客文章样式”] 在 `discourse/theme-13/discourse/templates/components/blog-image` 模板中使用了 `isBlogTopic` 属性路径，但未使用 `this`。此回退行为已被弃用，在模板中使用时，所有属性都必须在 `this` 上查找：{{this.isBlogTopic}}[弃用 ID：ember-this-fallback.this-property-fallback] 这将在 ember-this-fallback n/a 中删除。有关更多详细信息，请参阅 https://meta.discourse.org/t/337276。（chunk.3d3a2777cc56b0f68f02.d41d8cd9.js，第 377 行）
[警告] 弃用：[主题 13“博客文章样式”] 在 `discourse/theme-13/discourse/templates/components/blog-image` 模板中使用了 `imageURL` 属性路径，但未使用 `this`。此回退行为已被弃用，在模板中使用时，所有属性都必须在 `this` 上查找：{{this.imageURL}}[弃用 ID：ember-this-fallback.this-property-fallback] 这将在 ember-this-fallback n/a 中删除。有关更多详细信息，请参阅 https://meta.discourse.org/t/337276。（chunk.3d3a2777cc56b0f68f02.d41d8cd9.js，第 377 行）
[警告] 弃用：[主题 13“博客文章样式”] 在 `discourse/theme-13/discourse/templates/connectors/topic-above-post-stream/blog-post-styling` 模板中使用了 `model` 属性路径，但未使用 `this`。此回退行为已被弃用，在模板中使用时，所有属性都必须在 `this` 上查找：{{this.model}}[弃用 ID：ember-this-fallback.this-property-fallback] 这将在 ember-this-fallback n/a 中删除。有关更多详细信息，请参阅 https://meta.discourse.org/t/337276。（chunk.3d3a2777cc56b0f68f02.d41d8cd9.js，第 377 行）

```

---

<div class="post-metadata">

### 作者： ![sonny.mendoza](https://avatars.discourse-cdn.com/v4/letter/s/838e76/32.png) [@sonny.mendoza](https://meta.discourse.org/u/sonny.mendoza)
#### 发布日期： [2025 年6 月 23 日 05:01 UTC](https://meta.discourse.org/t/blog-post-styling/110841/169 "2025-06-23T05:01:18Z")

</div>

我也有同样的问题。希望这个组件的更新能解决这个问题 @tshenry。

---

<div class="post-metadata">

### 作者： ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### 发布日期： [2025 年6 月 24 日 01:55 UTC](https://meta.discourse.org/t/blog-post-styling/110841/170 "2025-06-24T01:55:26Z")

</div>

感谢您的报告。我将尝试在本周修复这些警告。这个组件确实需要一次全面更新，但遗憾的是，最近时间有限！

---

<div class="post-metadata">

### 作者： ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### 发布日期： [2025 年7 月 3 日 04:21 UTC](https://meta.discourse.org/t/blog-post-styling/110841/171 "2025-07-03T04:21:31Z")

</div>

好的，我已经处理了所有弃用警告，并加入了我认为相当关键的更新。还有更多可以改进与其他自定义项兼容性的地方，但我目前已尽力而为。

> <https://github.com/tshenry/discourse-blog-post-styling/commit/e32a742c232b0f16eceaeeedb9c04d87dc23145f>
>
> This update modernizes the code to align with core Discourse changes.
> 
> Other cha…nges include:
> 
> \- Responsive design fixes
> \- Improved comments section
> \- Improved compatibility with DiscoTOC
> \- Miscellaneous minor styling improvements
> \- Removed experimental full width mode for now

感谢大家的耐心。如果更新有任何问题，请告诉我。

---

<div class="post-metadata">

### 作者： ![Thierry\_Trégaro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/thierry_tr%C3%A9garo/32/161951_2.png) [@Thierry\_Trégaro](https://meta.discourse.org/u/Thierry_Tr%C3%A9garo)
#### 发布日期： [2025 年7 月 3 日 13:07 UTC](https://meta.discourse.org/t/blog-post-styling/110841/172 "2025-07-03T13:07:13Z")

</div>

我猜这与上次更新有关，但我该如何移除这个“评论”

 ![This is a dark-themed screenshot of a social media post with user statistics, a profile picture, and French text regarding display issues in dark mode. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/3/c/1/3c1fd05cc703215c91c00a95df0037529d2140d1.png)

使用以下代码没有效果：

```plaintext
.comments_heading {
    display: none !important;
}

```

或者如果我将配置字段留空

 ![This is a screenshot of a dark-themed webpage displaying editing options and buttons, including 'retablir' (restore) and options for previewing, exporting, and editing parameters. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/e/c/6/ec6f32d5060299eb78c81ab4de1601ee2f88d4ac.png)

（我不得不作弊加了个“空格”，但是……）

---

<div class="post-metadata">

### 作者： ![tshenry](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tshenry/32/119495_2.png) [@tshenry](https://meta.discourse.org/u/tshenry)
#### 发布日期： [2025 年7 月 3 日 23:39 UTC](https://meta.discourse.org/t/blog-post-styling/110841/173 "2025-07-03T23:39:34Z")

</div>

感谢 @Thierry_Trégaro！那个“评论”标题是新添加的，目的是让回复感觉更像博客文章的评论部分。在您截图的普通主题中不应该显示它。我已经修复了这个问题（同时还修复了其他几个小的样式问题）。请继续更新组件。如果更新后您也想隐藏实际博客文章的“评论”标题，请继续将以下内容添加到单独的组件中：

```scss
.comments-heading {
  display: none !important;
}

```

[上一页](https://meta.discourse.org/t/blog-post-styling/110841.md?page=3)

[下一页](https://meta.discourse.org/t/blog-post-styling/110841.md?page=5)
