# 将「上一篇/下一篇主题」的键盘快捷键制作成主题组件
**URL:** https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314
**Category:** Development
**Created:** [2023年十二月2日 21:27 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314 "2023-12-02T21:27:43Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [2023年十二月2日 21:27 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/1 "2023-12-02T21:27:43Z")
> [@Suggesting a previous/next topic button](https://meta.discourse.org/t/suggesting-a-previous-next-topic-button/48233/23?u=jammydodger):
>
> Yes a theme component could make this a button
我想将这些上一个/下一个主题按钮键盘快捷键制作成一个主题组件，该组件将在标题中提供 « Prev Topic 和 Next Topic » 按钮。
有人能推荐一个现有的主题组件，其中包含一个代码片段，该代码片段提供一个简单地激活现有键盘快捷键的按钮吗？
我将从以下开始：
> [@New Topic Header Button](https://meta.discourse.org/t/new-topic-button-on-all-pages/84551):
>
> discourse2Summary New Topic Header Button adds a convenient ‘New Topic’ button to the header of all pageseyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/new-topic-header-button)hammer_and_wrenchRepository [https://github.com/discourse/discourse-new-topic-button-theme-component](https://github.com/discourse/discourse-new-topic-button-theme-component)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)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 A simple theme comp…
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年十二月2日 21:32 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/2 "2023-12-02T21:32:33Z")
这已经存在了（但专注于 Next）。
> **[GitHub - paviliondev/discourse-tc-topic-next-button: Adds a Next Topic button on the Topic Timeline and...](https://github.com/paviliondev/discourse-tc-topic-next-button)**
>
> Adds a Next Topic button on the Topic Timeline and floating Topic progress bar on mobile.
这使用了 Core API，应该可以继续工作……
如果您想添加一个带有设置的返回按钮选项，PR 已被接受。
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [2023年十二月3日 07:31 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/3 "2023-12-03T07:31:27Z")
谢谢你，@merefield！我在后退按钮的 JavaScript 代码片段上卡住了（至少我认为是这样 🤓 ）……
[discourse-tc-topic-next-button/javascripts/discourse/components/topic-previous-button.js at master · denvergeeks/discourse-tc-topic-next-button · GitHub](https://github.com/denvergeeks/discourse-tc-topic-next-button/blob/master/javascripts/discourse/components/topic-previous-button.js) 在这里，目前我有这个……
```plaintext
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
import {
nextTopicUrl,
previousTopicUrl,
} from "discourse/lib/topic-list-tracker";
import DiscourseURL from "discourse/lib/url";
import { inject as service } from "@ember/service";
export default class TopicPreviousButton extends Component {
@service site;
@tracked label = "";
@tracked showButton = false;
@tracked lastURL = "";
constructor(owner, args) {
super(owner, args);
previousTopicUrl().then((url) => {
if (url) {
this.showButton = true;
this.lastURL = url;
} else {
this.showButton = false;
this.lastURL = "";
}
})
};
get goFirst() {
return settings.topic_next_always_go_to_first_post
}
@action
goToPreviousTopic() {
let url;
if (this.lastURL) {
url = this.goFirst
? this.lastURL.substring(0, this.lastURL.nextIndexOf("/"))
: this.lastURL;
DiscourseURL.routeTo(url);
}
};
}
```
我认为问题出在底部附近
```plaintext
? this.lastURL.substring(0, this.lastURL.nextIndexOf("/"))
```
有什么想法吗？
我试过
```plaintext
? this.lastURL.substring(0, this.lastURL.indexOf("/"))
```
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年十二月3日 08:11 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/4 "2023-12-03T08:11:06Z")
您可能不想为后退按钮创建一个单独的组件，并在同一个组件中处理所有逻辑。只需根据需要扩展现有的模板和 js 文件即可。否则，您可能会得到三个模板而不是一个，这对于这样一个小的“组件”来说似乎太多了？
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [2023年十二月3日 09:31 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/5 "2023-12-03T09:31:58Z")
Hmm… not sure what you are seeing in my code, but I’m just adding code to your existing component 😀
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [2023年十二月3日 09:35 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/6 "2023-12-03T09:35:46Z")
是的，我们在 #Dev 中使用了不同的组件定义 🙂
> [@denvergeeks](#):
>
> `TopicPreviousButton extends Component`
这是一个不同的 Glimmer 组件。
所以一个主题组件包含一个 Glimmer 组件。你本来要创建另一个吗？
我建议你编辑同一个文件，这需要两个操作而不是一个。而且也许标签只会在新设置中未激活后退按钮时出现？
---
### Author:  [@denvergeeks](https://meta.discourse.org/u/denvergeeks)
#### Post date: [2023年十二月4日 13:59 UTC](https://meta.discourse.org/t/making-previous-next-topic-keyboard-shortcuts-into-a-theme-component/287314/7 "2023-12-04T13:59:41Z")
谢谢 Robert——我想我明白了。我会试试的。