# 最新列表作为网格视图

**URL:** https://meta.discourse.org/t/latest-list-as-grid-view/268790
**Category:** Development
**Created:** [2023年六月18日 08:26 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790 "2023-06-18T08:26:09Z")
**Posts on this page:** 13
**Page:** 1

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月18日 08:26 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/1 "2023-06-18T08:26:10Z")

</div>

您好！

我目前正在开发自己的“博客”主题，并希望将最新的视图设置为网格样式（就像这里的主题类别一样）。  
我知道有几个组件可以实现这一点，但我的帖子中没有图片，所以看起来有点奇怪。而且（例如在 topic-thumbnails 组件中）没有选项可以将其设置为 2 列或 3 列（甚至是灵活的）。

我尝试了很多方法（之后网站几乎都坏了 😂），但找不到如何做到这一点。

有人能给我一些关于如何解决这个问题的提示吗？我只需要基本设置，之后我可以“样式化”它以满足我的需求。

此致

附注：如果这是错误的类别，请移动它。 🙂

---

<div class="post-metadata">

### Author: ![anderer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/anderer/32/310458_2.png) [@anderer](https://meta.discourse.org/u/anderer)
#### Post date: [2023年六月18日 19:45 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/2 "2023-06-18T19:45:49Z")

</div>

大多数此类内容都可以通过管理员设置 CSS \> 自定义 \> 主题 \> 自定义 CSS 进行设置。

我还想拥有两列和一个更窄的视图，因此我将 max-width 从 1100px (?) 减小到 950px，这也从三列更改为两列 - 在我的例子中是这样的

`:root { --d-max-width: 950px; }`

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年六月18日 20:09 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/3 "2023-06-18T20:09:00Z")

</div>

主题列表预览是响应式的，因此会自动设置列数。您只需用侧边栏（例如使用布局插件）稍微压缩它，列数就会减少。（请参阅此示例 [https://www.starzen.space](https://www.starzen.space) - 最初是 2 列，但单击一个标签，它会恢复为 3 列）

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月19日 07:05 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/4 "2023-06-19T07:05:46Z")

</div>

> [@anderer](#):
>
> most of things like that can be set up in the CSS through admin \> customize \> themes \> Custom CSS
> 
> i also wanted to have two columns and a more narrow view so I reduced the max-width from 1100px (?) to 950px and this also changed from three to two columns - in my case it was this
> 
> `:root { --d-max-width: 950px; }`

是的，我知道这可以通过 CSS 来完成，我的整个主题都是用 CSS 完成的。  
而且，我没有 1100px，我的设计可以根据屏幕分辨率灵活调整。不，我不想使用这种超小的固定宽度 1100px。 😉

@merefield  
我尝试了很多次这个主题组件，但它并不是我想要的。我的帖子中没有图片，而且它应该能够根据屏幕分辨率灵活调整列。

我正在寻找将列表转换为网格的 CSS 类。 🙂

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年六月19日 07:25 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/5 "2023-06-19T07:25:02Z")

</div>

> [@daemon](#):
>
> 我在帖子中没有图片，并且它应该能够灵活适应列（取决于屏幕分辨率）。

是的，这就是为什么在移动设备上只有一列。

在带有一个侧边栏的 11 英寸 iPad 上，TLP 在横屏模式下显示两列，在竖屏模式下显示一列。

这是 TLP 中的关键行：

> <https://github.com/merefield/discourse-tc-topic-list-previews/blob/a4c3fc6ed3caf8f4aa93b20f44ad14d200794823/common/common.scss#L43>

你应该阅读这个：

> **[CSS Grid Layout Guide | CSS-Tricks](https://css-tricks.com/snippets/css/complete-guide-grid/)**
>
> Our comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

还有这个（但不确定你说的“分辨率”是不是这个意思，因为这可能会与 DPI 混淆）：

> <https://stackoverflow.com/questions/11722442/is-there-a-way-to-use-dpi-in-css-media-queries-instead-of-px>

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月19日 08:48 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/6 "2023-06-19T08:48:53Z")

</div>

谢谢！

我的问题是找到 discourse 中列表的正确 CSS 类。  
是 topic-list-item 还是 topic-list-item-seperator，或者其他什么。

我稍后会尝试一下。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年六月19日 08:53 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/7 "2023-06-19T08:53:42Z")

</div>

网格 CSS 需要放在项目级别之上。请参考 TLP 或 TLT 的做法。

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月19日 17:08 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/8 "2023-06-19T17:08:09Z")

</div>

我现在正在使用 [https://meta.discourse.org/t/topic-list-thumbnails/150602/1，并通过](https://meta.discourse.org/t/topic-list-thumbnails/150602/1%EF%BC%8C%E5%B9%B6%E9%80%9A%E8%BF%87) CSS 覆盖了一些内容。我不想在文本中使用任何图片，但你可以使用默认图片。

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年六月19日 19:04 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/9 "2023-06-19T19:04:26Z")

</div>

> [@daemon](#):
>
> 但你可以使用默认图片。

你不是指图标吗？  
你不需要使用 TLP 的图片，并且可以使用默认的_图片_。

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月20日 05:45 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/10 "2023-06-20T05:45:52Z")

</div>

是的，当然，一个默认图标。 😉

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月20日 18:25 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/11 "2023-06-20T18:25:29Z")

</div>

抱歉重复发帖，但我还有一个关于注册/登录按钮的问题。

我想隐藏匿名用户的这两个按钮，但那样我也无法登录。是否有登录网站的网址或类似的网址？

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [2023年六月22日 14:38 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/12 "2023-06-22T14:38:28Z")

</div>

没有人？

真的没有登录网址吗？

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [2023年六月22日 15:00 UTC](https://meta.discourse.org/t/latest-list-as-grid-view/268790/13 "2023-06-22T15:00:27Z")

</div>

> [@daemon](#):
>
> 真的没有登录URL吗？

[Discourse Meta - The Official Support Forum for Discourse](https://meta.discourse.org/login) 或

> [@How to login to Discourse by overriding SSO?](https://meta.discourse.org/t/how-to-login-to-discourse-by-overriding-sso/268437/2?u=canapin):
>
> I think the [YourSite]u/admin-login/ link can bypass SSO. +1

取决于您的登录方式以及您想要什么。 🙂