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

开发
1

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

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

The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)
The image shows a small white dog with a blue collar on a wooden floor in a home setting. (Captioned by AI)1080×2340 168 KB

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

如何在 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

复制代码

<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

复制代码

.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()。如果没有上一页，它将不会导航到任何地方。
2

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

2 个赞
3

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

4

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

5

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

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

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

6

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

7

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

8

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

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