# 首页功能

**URL:** https://meta.discourse.org/t/homepage-feature/144264
**Category:** Theme component
**Tags:** official, homepage-feature
**Created:** [2020年三月13日 21:16 UTC](https://meta.discourse.org/t/homepage-feature/144264 "2020-03-13T21:16:58Z")
**Posts on this page:** 20
**Page:** 4

<div class="post-metadata">

### Author: ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [2021年五月24日 14:04 UTC](https://meta.discourse.org/t/homepage-feature/144264/75 "2021-05-24T14:04:41Z")

</div>

我们今天开始测试该组件，发现“精选话题”的排序与“最新”视图中的顺序一致——也就是说，一旦有人对其中某个话题进行回复，排序就会发生变化。我们希望能够自主控制这些话题的排序，并按标记日期进行排序（最新标记的排在前面）。请问这是否可行？

---

<div class="post-metadata">

### Author: ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [2021年五月26日 10:25 UTC](https://meta.discourse.org/t/homepage-feature/144264/76 "2021-05-26T10:25:22Z")

</div>

我已在 [#marketplace 发布了一个请求](https://meta.discourse.org/t/add-an-option-to-list-topics-by-tagging-date/191683)，以解决按标签日期排序的问题。希望能如愿！

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年五月28日 05:13 UTC](https://meta.discourse.org/t/homepage-feature/144264/78 "2021-05-28T05:13:24Z")

</div>

我已进行了一些更新！

- 现在您可以选择显示最多 5 个主题（6 个无法完全容纳）。
- 如果没有带图片的主题可用，该组件将不会显示。
- 默认情况下，主题现在按创建顺序显示，因此会显示最新创建的主题（这允许管理员更好地控制位置）。如果您希望按最新活动排序，可以通过主题设置禁用 `sort_by_created`。
- 我已切换该功能使用的插件出口，因此主题现在显示在站点横幅下方。

---

<div class="post-metadata">

### Author: ![Terrapop](https://avatars.discourse-cdn.com/v4/letter/t/ecd19e/32.png) [@Terrapop](https://meta.discourse.org/u/Terrapop)
#### Post date: [2021年五月28日 10:02 UTC](https://meta.discourse.org/t/homepage-feature/144264/79 "2021-05-28T10:02:46Z")

</div>

太棒了 @awesomerobot，现在完美了。没有推荐话题时，加载条也不会再显示了 😀

---

<div class="post-metadata">

### Author: ![Paracelsus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paracelsus/32/164912_2.png) [@Paracelsus](https://meta.discourse.org/u/Paracelsus)
#### Post date: [2021年五月28日 10:48 UTC](https://meta.discourse.org/t/homepage-feature/144264/80 "2021-05-28T10:48:51Z")

</div>

> [@awesomerobot](#):
>
> 我做了一些更新！
> 
> - 现在您可以选择显示最多 5 个主题（6 个有点放不下）。
> - 如果没有带图片的主题可用，该组件将不会显示。
> - 默认情况下，主题现在按创建顺序显示，因此会显示最新的主题（这允许管理员更好地控制位置）。如果您希望按最新活动排序，可以通过主题设置禁用此功能（`sort_by_created`）。
> - 我切换了该功能使用的插件出口，因此主题现在显示在站点横幅下方。

非常棒且实用的新功能，谢谢！👍

---

<div class="post-metadata">

### Author: ![bartv](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bartv/32/130052_2.png) [@bartv](https://meta.discourse.org/u/bartv)
#### Post date: [2021年五月28日 11:37 UTC](https://meta.discourse.org/t/homepage-feature/144264/81 "2021-05-28T11:37:23Z")

</div>

嘿，我注意到你移除了“在所有内容上显示”选项？这是故意的吗？我们更希望能保留它 🙂

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年五月29日 02:21 UTC](https://meta.discourse.org/t/homepage-feature/144264/82 "2021-05-29T02:21:59Z")

</div>

这是有意为之：移动插件出口使得保留 `all` 选项变得更加困难……而且我也不确定是否有人在用它。

不过，它现在又回来了！

一个缺点是，无法方便地同时让主题位于横幅下方并使用 `all` 选项。另外请注意，在使用 `all` 时，您还需要启用另一个设置：`above main container`（主容器上方）。

---

<div class="post-metadata">

### Author: ![Stephane\_Roy](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stephane_roy/32/222598_2.png) [@Stephane\_Roy](https://meta.discourse.org/u/Stephane_Roy)
#### Post date: [2021年六月1日 11:34 UTC](https://meta.discourse.org/t/homepage-feature/144264/83 "2021-06-01T11:34:30Z")

</div>

你好！

非常感谢！有了这些新功能，这个插件变得不可或缺了 :-).

能否添加一个设置，让用户选择在哪种设备上显示哪个主题？或者更好的是，提供仅在手机端显示某个主题、而其他主题仅在桌面端显示的功能（如果必要，也可以两者都显示）？

谢谢！

---

<div class="post-metadata">

### Author: ![sebastianzepper](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@sebastianzepper](https://meta.discourse.org/u/sebastianzepper)
#### Post date: [2021年八月10日 15:25 UTC](https://meta.discourse.org/t/homepage-feature/144264/85 "2021-08-10T15:25:27Z")

</div>

你好，请问如何选择在论坛中显示的 3 个精选主题？

---

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [2021年八月10日 16:19 UTC](https://meta.discourse.org/t/homepage-feature/144264/86 "2021-08-10T16:19:06Z")

</div>

该主题将展示最近三个标记为 `featured` 的主题。您可以在设置中更改其查看的标签。

---

<div class="post-metadata">

### Author: ![sebastianzepper](https://avatars.discourse-cdn.com/v4/letter/s/e36b37/32.png) [@sebastianzepper](https://meta.discourse.org/u/sebastianzepper)
#### Post date: [2021年八月11日 12:38 UTC](https://meta.discourse.org/t/homepage-feature/144264/87 "2021-08-11T12:38:51Z")

</div>

谢谢。我是否可以将这三个预告转换为指向网站的静态链接，或者是否有类似的组件？

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2021年八月29日 22:07 UTC](https://meta.discourse.org/t/homepage-feature/144264/88 "2021-08-29T22:07:48Z")

</div>

@sebastianzepper 如果你正在寻找某种静态方案，也许 [Versatile Banner](https://meta.discourse.org/t/versatile-banner/109133) 更适合你？

---

<div class="post-metadata">

### Author: ![Jagster](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jagster/32/192154_2.png) [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [2021年八月30日 06:32 UTC](https://meta.discourse.org/t/homepage-feature/144264/89 "2021-08-30T06:32:29Z")

</div>

> [@Bank\_Live](#):
>
> 添加幻灯片

轮播图实际上只是不必要的臃肿，因为用户根本不会使用它们。轮播图只会让网站变得更沉重，与其说是必需品，不如说只是过时的炒作。

不过，如果网站管理员出于某种原因想使用这类功能，当然应该或可以将其作为一个选项。

从更大的背景来看，任何增加用户获取真实内容难度的做法——比如需要滚动一英里才能看到内容——都是不明智的。这与电商力求缩短从商品到结账的路径是同样的道理。

是的，我知道这有点离题了。抱歉。

---

<div class="post-metadata">

### Author: ![Reaxgrim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reaxgrim/32/233033_2.png) [@Reaxgrim](https://meta.discourse.org/u/Reaxgrim)
#### Post date: [2021年九月4日 03:14 UTC](https://meta.discourse.org/t/homepage-feature/144264/90 "2021-09-04T03:14:00Z")

</div>

我该如何在文档页面中显示这个？它在其他顶级菜单页面中显示，但在文档中不显示。

谢谢  
Reax

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2021年九月11日 19:47 UTC](https://meta.discourse.org/t/homepage-feature/144264/91 "2021-09-11T19:47:16Z")

</div>

是否可以为主题标题添加样式，使其显示在图片上方、底部对齐，并带有一定的背景透明度？

这样可以在图片展示效果不错但允许文字重叠的情况下节省垂直空间。

---

<div class="post-metadata">

### Author: ![sofi.pocketful](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sofi.pocketful/32/242196_2.png) [@sofi.pocketful](https://meta.discourse.org/u/sofi.pocketful)
#### Post date: [2021年十月6日 01:19 UTC](https://meta.discourse.org/t/homepage-feature/144264/92 "2021-10-06T01:19:33Z")

</div>

你好，Kris，

是否可以选择让它在分类网站中显示，而不是在主首页上显示？

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [2021年十月6日 13:59 UTC](https://meta.discourse.org/t/homepage-feature/144264/93 "2021-10-06T13:59:24Z")

</div>

> [@icaria36](#):
>
> 是否可以对主题标题进行样式设置，使其显示在图片顶部，底部对齐，并带有少量的背景透明度？

是的，您可以使用一点 CSS 来实现类似的效果：

 ![Screen Shot 2021-10-06 at 9.54.30 AM](https://global.discourse-cdn.com/meta/original/3X/1/1/118a5f3bc60a1184601282abf93d8259e77430b1.png)

```css
.featured-topic-wrapper .featured-topics .featured-topic {
  position: relative;
}

.featured-topic-wrapper .featured-topics .featured-topic h3 {
  position: absolute;
  bottom: 0;
  background: #ffffffaa;
  padding: 0.2em;
  width: 100%;
}

```

> [@sofi.pocketful](#):
>
> 是否可以选择让它出现在分类站点而不是主页面的选项？

使用此主题组件无法实现，但专门针对分类的版本听起来是一个合理的需求，我可以在未来某个时候研究一下。

---

<div class="post-metadata">

### Author: ![icaria36](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/icaria36/32/426431_2.png) [@icaria36](https://meta.discourse.org/u/icaria36)
#### Post date: [2021年十月8日 12:53 UTC](https://meta.discourse.org/t/homepage-feature/144264/94 "2021-10-08T12:53:44Z")

</div>

> [@awesomerobot](#):
>
> 一点 CSS 代码

非常感谢！看起来很棒。

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [2022年一月1日 17:03 UTC](https://meta.discourse.org/t/homepage-feature/144264/95 "2022-01-01T17:03:52Z")

</div>

这里有一个可用于“分类”的。它也可以与这个一起使用。

> [@Featured Tiles](https://meta.discourse.org/t/featured-tiles-theme-component/156677?u=heliosurge):
>
> discourse2Summary Featured Tiles adds a row of featured tiles above topic lists.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/featured-tiles)hammer_and_wrenchRepository Link [https://github.com/discourse/discourse-featured-tiles](https://github.com/discourse/discourse-featured-tiles)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features Featured Tiles adds a row of featured tiles above topic lists. On hover, the topic titl…

---

<div class="post-metadata">

### Author: ![pinder99](https://avatars.discourse-cdn.com/v4/letter/p/dfb087/32.png) [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [2022年一月18日 05:23 UTC](https://meta.discourse.org/t/homepage-feature/144264/96 "2022-01-18T05:23:59Z")

</div>

这实际上很棒，我增加了帖子的数量到 10 个，但只想在主页上显示 5 个，并为另外 10 个添加滚动条，你能帮我吗？我添加了

```plaintext
<!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

```

但不知道如何将其与您的代码合并

@awesomerobot

[上一頁](https://meta.discourse.org/t/homepage-feature/144264.md?page=3)

[下一頁](https://meta.discourse.org/t/homepage-feature/144264.md?page=5)
