# 自定义主题排序按钮

**URL:** <https://meta.discourse.org/t/custom-topic-sort-order-button/380530>\
**Category:** Theme component\
**Created:** [2025年八月27日 13:52 UTC](https://meta.discourse.org/t/custom-topic-sort-order-button/380530 "2025-08-27T13:52:44Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)\
**Post date:** [2025年八月27日 13:52 UTC](https://meta.discourse.org/t/custom-topic-sort-order-button/380530/1 "2025-08-27T13:52:44Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **摘要** | 主题排序按钮 |
| 👓 | **预览** | [Theme Creator](https://discourse.theme-creator.io/theme/Don/topic-sort-order-button) |
| 🛠 | **代码库** | [GitHub - VaperinaDEV/custom-topic-sort-order-button: Add a custom topic sorting button to the topic list.](https://github.com/VaperinaDEV/custom-topic-sort-order-button) |
| ❓ | **安装指南** | [如何安装主题或主题组件](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **首次使用 Discourse 主题？** | [Discourse 主题使用入门指南](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

安装此主题组件

你好 👋

此主题组件在“创建主题”按钮旁边添加了一个新按钮，允许您更改主题列表的排序方式。主要目标之一是使主题排序在移动设备以及隐藏了主题列表标题部分的主题上也能轻松访问。

 ![Screenshot 2025-08-27 at 13.44.08](https://global.discourse-cdn.com/meta/original/4X/e/d/5/ed5d5be6794c1b891365dcb001bf9d19de9c72c0.png)

单击一个项目将在项目右侧显示排序顺序（升序或降序）。

| 降序（图标） | 升序（图标） |
| --- | --- |
| ![Descending](https://global.discourse-cdn.com/meta/original/4X/8/c/0/8c0414d49113640cf938f8bbee3fb8d8856d5136.png) | ![Ascending](https://global.discourse-cdn.com/meta/original/4X/d/5/b/d5b2df8c4aff325a42c18a86ccfe094db3b5cb0e.png) |

### 设置

此组件包含多个用于自定义的设置。

 ![Screenshot 2025-08-27 at 13.45.14](https://global.discourse-cdn.com/meta/original/4X/3/3/2/332dabf7584dcb3a63c755b6264c83d04328886c.png)

#### 对象设置

使用对象设置，您可以更改每个项目的 **图标** 、 **标签** 、 **操作** 和 **顺序** 。

 ![setting page](https://global.discourse-cdn.com/meta/original/4X/0/4/5/0452929b7976dbb4abc896a3a8a440190a08f97d.png)

- **icon** - \> Discourse 图标集中的图标名称
- **label** - \> 翻译键（请参阅 `/admin/customize/site_texts`）
- **action** - \> 排序操作标识符
- **order** - \> 项目在下拉列表中的位置

`label` 的示例：

![likes-label](https://global.discourse-cdn.com/meta/original/4X/5/0/7/5070a78a266a94bc7a4ea14f8dc4bbe9dff80730.png)

在这种情况下，label 字段应为：`js.likes`

---

_[View the full topic](https://meta.discourse.org/t/custom-topic-sort-order-button/380530)._