# 如何在Discourse中为移动用户添加一个浮动返回按钮

**URL:** https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623
**Category:** Development
**Tags:** mobile
**Created:** [2024年十一月27日 00:24 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623 "2024-11-27T00:24:00Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![BrianC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brianc/32/487568_2.png) [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [2024年十一月27日 00:24 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/1 "2024-11-27T00:24:00Z")

</div>

我看到有关于为移动浏览器提供移动后退按钮导航的主题，但我没有找到解决方案，也许我错过了什么 🤔

我不是程序员，对 Discourse 也不够精通，不敢冒险 😉 但我通过 ChatGPT 摸索出了这个图片中带有我的狗狗的、可以工作的 **蓝色** 后退按钮。

 ![The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/0/2/3/0238bc699727ac3b452c1f9e98b758a0080afc13.jpeg)

我想在特定页面隐藏它，但还没有弄清楚如何隐藏元素。如果有人知道，我会进行调整并添加到说明中。

## 如何在 Discourse 中添加浮动后退按钮（针对移动用户）

本指南可帮助您为 Discourse 论坛的移动设备添加浮动的“后退”按钮。它确保按钮仅对移动用户显示，并改善了缺乏内置后退按钮的应用程序或浏览器的导航。

* * *

### **步骤 1：创建新的主题组件**

1. **以管理员身份登录** ：
  - 前往您的 Discourse 论坛并使用管理员帐户登录。

2. **访问主题自定义** ：
  - 导航到 `Admin > Customize > Themes`。

3. **创建主题组件** ：
  - 点击 **Components** 。
  - 点击 **Install \> Create New** 。
  - 将组件命名为“Mobile Back Button”并点击 **Create** 。

* * *

### **步骤 2：添加后退按钮代码**

1. **编辑主题组件** ：
  - 点击新创建的主题组件。
  - 前往 **CSS/HTML** 部分。

2. **添加后退按钮的 JavaScript** ：
  - 切换到 **Mobile** 选项卡。
  - 点击 `</head>` 部分。
  - 粘贴以下代码：

html

复制代码

```plaintext
<script type="text/discourse-plugin" version="0.8">
  function addMobileBackButton() {
    const isMobileView = api.container.lookup('site:main').mobileView;
    if (isMobileView) {
      const existingButton = document.querySelector('.floating-back-button');
      if (!existingButton) {
        const backButton = document.createElement('button');
        backButton.className = 'floating-back-button';
        backButton.innerHTML = '←'; // Unicode for left arrow
        backButton.onclick = (event) => {
          event.preventDefault();
          window.history.back();
        };
        document.body.appendChild(backButton);
      }
    }
  }

  // Add the button on initial page load
  document.addEventListener('DOMContentLoaded', addMobileBackButton);

  // Re-check on subsequent page transitions
  api.onPageChange(addMobileBackButton);
</script>

```

* * *

### **步骤 3：添加 CSS 进行样式设置**

1. **添加后退按钮样式** ：
  - 在 **Mobile** 选项卡中，点击 **CSS** 部分。
  - 粘贴以下 CSS：

css

复制代码

```plaintext
.floating-back-button {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0088cc; /* Customize the color */
  color: #fff;
  border: none;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  cursor: pointer;
}

```

* * *

### **步骤 4：应用主题组件**

1. **返回主题** ：
  - 导航回 `Admin > Customize > Themes`。

2. **编辑您的活动主题** ：
  - 点击您的活动主题。
  - 在 **Theme Components** 下，从下拉列表中添加“Mobile Back Button”组件。
  - 点击 **Add** ，然后点击 **Save** 。

* * *

### **步骤 5：测试您的更改**

1. **在移动设备上打开您的论坛** ：
  - 使用移动浏览器或使用开发者工具模拟移动视图。

2. **验证后退按钮** ：
  - 按钮应出现在屏幕的左下角。
  - 点击按钮应将您导航回浏览器历史记录。

* * *

### 注意事项：

- **仅限移动设备** ：由于代码和 CSS 位于 **Mobile** 选项卡中，因此按钮仅在移动设备上显示。
- **自定义** ：
  - 您可以在 CSS 中调整按钮的位置、大小或颜色，以匹配您论坛的设计。

- **功能** ：
  - 后退按钮使用 `window.history.back()`。如果没有上一页，它将不会导航到任何地方。

---

<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: [2024年十一月27日 00:25 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/2 "2024-11-27T00:25:58Z")

</div>

我不知道，但不需要后退按钮，因为滑动效果很好。

---

<div class="post-metadata">

### Author: ![BrianC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brianc/32/487568_2.png) [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [2024年十一月27日 00:34 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/3 "2024-11-27T00:34:11Z")

</div>

也许是我的安装有问题，但我无法持续地滑动。仍在学习如何使用 Discourse。

---

<div class="post-metadata">

### Author: ![NateDhaliwal](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/natedhaliwal/32/313494_2.png) [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [2024年十一月27日 01:00 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/4 "2024-11-27T01:00:34Z")

</div>

对于 Chrome，您可以从左边缘滑动以返回。  
在浏览器上，我手机的后退按钮也可以使用。对您有用吗？  
我记得您可以使用 `api.onPageChange()` 然后获取页面 URL。  
参见：

> <https://github.com/NateDhaliwal/discourse-confetti-clicks/blob/e602c0107e76eee2c5aba66ed60635c1d3751fdf/javascripts/discourse/initializers/confetti_topic-category.gjs#L7>

---

<div class="post-metadata">

### Author: ![BrianC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brianc/32/487568_2.png) [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [2024年十一月27日 04:30 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/5 "2024-11-27T04:30:08Z")

</div>

@Jagster 我发现有几件事影响了我对滑动操作存在的理解。

在我的 iPhone 上，滑动效果很好。我有两部装有 Chrome 的 Android 手机。一部滑动效果很好，另一部几乎无法滑动。在 Android 上，如果我安装 PWA，似乎会完全停止滑动。这些手机都是比较新的，使用时间在 1 到 3 年之间。

不确定其他人是否遇到过这种情况？

---

<div class="post-metadata">

### Author: ![BrianC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brianc/32/487568_2.png) [@BrianC](https://meta.discourse.org/u/BrianC)
#### Post date: [2024年十一月27日 04:34 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/6 "2024-11-27T04:34:36Z")

</div>

@NateDhaliwal 谢谢！我刚发了关于我在 iPhone/Android 上的体验，但设备不一致，并且在 PWA 上无法正常工作。

---

<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: [2024年十一月27日 08:40 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/7 "2024-11-27T08:40:32Z")

</div>

> [@Jagster](#):
>
> 滑动效果很好。

确实如此。而且在 Android 上，你甚至可以在 Hub 应用中向左滑动返回论坛列表，这非常酷。

---

<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: [2024年十一月27日 08:54 UTC](https://meta.discourse.org/t/how-to-add-a-floating-back-button-in-discourse-for-mobile-users/338623/8 "2024-11-27T08:54:04Z")

</div>

所有 i-devices 也是如此，但谁在乎呢 😂

但至于为什么手势对某些人不起作用，我没有任何解释。但我的所有用户一直在使用滑动而没有抱怨 🤷‍♂️