# 需要帮助集成 Edittext 代码到 Discourse

**URL:** https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204
**Category:** Development
**Created:** [2023年十一月11日 20:05 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204 "2023-11-11T20:05:13Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月11日 20:05 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/1 "2023-11-11T20:05:13Z")

</div>

我使用以下代码创建了这个计时器，它在本地可以正常工作，但在集成到论坛时遇到了问题。有人能帮忙吗？

```plaintext
<!-- HTML (添加到 Header 部分) -->
<style>
  button {
    padding: 5px;
    margin: 2px;
    cursor: pointer;
    border: none;
    color: white;
    width: 100px; /* 设置所有按钮所需的宽度 */
    border-radius: 5px;
  }

  #readTaskButton {
    background: #008000; /* 深绿色，在深色背景上更清晰 */
  }

  #enterRoomButton {
    background: #DAA520; /* 深黄色 */
  }

  #pauseButton {
    background: #A0522D; /* 深橙色 */
  }

  #stopButton {
    background: #FF0000; /* 深红色 */
  }
</style>

<div style="display: flex; align-items: center; justify-content: center;">
  <div style="display: flex; flex-direction: column; align-items: center; margin-right: 20px;">
    <button id="readTaskButton" onclick="startTimer(90)">阅读任务</button>
    <button id="enterRoomButton" onclick="startTimer(480)">进入房间</button>
  </div>
  <div id="timer" style="font-size: 2em; text-align: center; margin: 0 20px;" onclick="togglePauseResume()">00:00</div>
  <div style="display: flex; flex-direction: column; align-items: center; margin-left: 20px;">
    <button id="pauseButton" onclick="togglePauseResume()">暂停</button>
    <button id="stopButton" onclick="stopTimer()">停止</button>
  </div>
</div>

<!-- JavaScript (添加到 Footer 部分) -->
<script>
  let timer;
  let totalSeconds;
  let isShortTimer = true;
  let isPaused = false;

  function startTimer(duration) {
    resetTimer();
    totalSeconds = duration;
    timer = setInterval(updateTimer, 1000);
  }

  function togglePauseResume() {
    if (isPaused) {
      resumeTimer();
    } else {
      pauseTimer();
    }
    updateButtonLabel();
  }

  function updateButtonLabel() {
    const button = document.getElementById('pauseButton');
    button.innerText = isPaused ? '恢复' : '暂停';
  }

  function pauseTimer() {
    clearInterval(timer);
    isPaused = true;
  }

  function resumeTimer() {
    isPaused = false;
    timer = setInterval(updateTimer, 1000);
  }

  function stopTimer() {
    resetTimer();
    updateButtonLabel();
  }

  function updateTimer() {
    if (totalSeconds <= 0) {
      if (isShortTimer) {
        isShortTimer = false;
        startTimer(480); // 初始计时器结束后自动开始较长计时器
      } else {
        isShortTimer = true;
        startTimer(90); // 较长计时器结束后自动开始初始计时器
      }
    }

    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    const formattedTime = `${formatTime(minutes)}:${formatTime(seconds)}`;
    document.getElementById('timer').innerText = formattedTime;

    totalSeconds--;
  }

  function formatTime(time) {
    return time < 10 ? '0' + time : time;
  }

  function resetTimer() {
    clearInterval(timer);
    document.getElementById('timer').innerText = '00:00';
  }
</script>

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月12日 00:22 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/2 "2023-11-12T00:22:19Z")

</div>

您好，

您需要将 JS 插入到 _Head_ 中才能使其正常工作！  
另外，请注意 `button` 的 CSS – 您应该创建一个特定的选择器来避免覆盖默认 CSS。

理想情况下，您应该创建一个[主题组件](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648/1)，并使用[出口点](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727/1)来处理 HTML/逻辑。我稍后可以向您展示！

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月12日 09:12 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/3 "2023-11-12T09:12:21Z")

</div>

非常感谢您的回复。

我试过了。我创建了一个新的主题组件，然后使用“编辑 CSS/HTML”选项，将其代码插入到“common\>header”部分。我可以在网站上看到计时器，但问题是计时器无法播放。它有播放和停止按钮，在本地运行效果很好，但在网站上它只显示计时器但无法正常工作。

 ![Screenshot 2023-11-12 at 9.08.51 AM](https://global.discourse-cdn.com/meta/original/4X/3/9/9/3990d1fce0e3efd2b8b8782e8fbbdf38e78bc266.png)  
 ![Screenshot 2023-11-12 at 9.09.24 AM](https://global.discourse-cdn.com/meta/original/4X/f/2/8/f28ce13f37db53be4a22530c2e1666c877394333.png)

我还检查了控制台，使用“检查”功能，这是它显示的错误。

 ![Screenshot 2023-11-12 at 9.10.39 AM](https://global.discourse-cdn.com/meta/original/4X/d/c/a/dca10ac8da65bd892be80f2c38c05e03a24788e0.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月12日 19:31 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/4 "2023-11-12T19:31:35Z")

</div>

是的，您的代码被 CSP 阻止了。（请参阅安全设置）  
您可以在设置中将 `unsafe-inline` 列入白名单，但这似乎不是一个好主意。  
在您的情况下，要使您的代码在启用 CSP 的情况下正常工作，我认为您需要[以不同的方式处理点击](https://meta.discourse.org/t/mitigate-xss-attacks-with-content-security-policy/104243?discovery%2Flist%3Aorder=posts%26discovery%2Flist%3Aascending=false#h-2-inline-on-event-handlers-6)。

* * *

顺便说一句，这里有一个使用您的代码的[主题组件](https://github.com/Arkshine/discourse-timer-component)：`https://github.com/Arkshine/discourse-timer-component`。  
您可以随意[分叉](https://github.com/Arkshine/discourse-timer-component/fork)它并在您的 Discourse 上[安装](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#import-new-themes-and-theme-components-8)它。

希望我的代码不会太糟糕，但这在这种情况下比添加纯 JavaScript 是更可取的方式。  
它应该与额外的响应式功能、设置和区域设置相同。

这可能令人不知所措，但这是深入研究[主题组件开发](https://meta.discourse.org/t/beginners-guide-to-developing-discourse-themes/93648/1)的绝佳机会！如果您不明白什么，请随时提问。 🙂

如果您想在本地使用它，我强烈建议使用[Discourse 主题 CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950)。它非常方便！

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月12日 20:27 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/5 "2023-11-12T20:27:19Z")

</div>

我真的非常感谢你帮我解决这个问题。这太棒了！！  
这激励了我去学习这个。❤

关于计时器，我有一些小的改动和疑问。可以和你分享吗？

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月12日 20:57 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/6 "2023-11-12T20:57:47Z")

</div>

查询：

1. 等待按钮的目的是什么？

紧急重大变更：

1. 这是一个连续计时器，首先从 1:30 秒开始，然后切换到 8:00 分钟，然后切换到 1:30 秒，依此类推，永不停止。

2. 当计时器运行时，用户需要能够通过单击“进入房间”按钮直接跳到 8:00 分钟，或通过单击“阅读任务计时器”切换到 1:30 秒计时器。因此，在计时器未运行时禁用暂停和停止按钮是有意义的，但在计时器运行时禁用“阅读任务”和“进入房间”按钮将使用户无法绕过计时器。

未来变更：

1. 在 1:30 秒计时器开始时、8:00 分钟计时器开始时、8:00 分钟计时器剩余 2:00 分钟时以及最后 8:00 分钟计时器结束时（即 1:30 秒计时器开始时）添加语音提示。因此，总共三个语音提示。
2. 为每个语音提示添加弹出警报，该警报出现并消失，不应占据整个屏幕，而是计时器所在区域。

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月12日 21:17 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/7 "2023-11-12T21:17:26Z")

</div>

我完全没弄懂你的代码；看起来是这样 😄

> [@Plabforum](#):
>
> 1. 暂停按钮的目的是什么？

如果计时器还没有开始，那么点击这些暂停/停止按钮是没有意义的。显示“暂停”或“继续”也是如此，所以就像在等待时有一个活动的计时器。实际上，我宁愿隐藏该按钮。但我想使用“暂停”标签作为默认值是可以的。

> [@Plabforum](#):
>
> 这是一个连续计时器，先从 1:30 秒开始，然后切换到 8:00 分钟，然后切换到 1:30，以此类推，永不结束。

它在这两者之间交替，好的。我以为它是一个带有其中一个计时器的循环。  
我不确定是否理解上下文，这对我来说看起来很奇怪，我可以改变它。 😄

> [@Plabforum](#):
>
> 当计时器运行时……

我明白了。

在做其他事情之前，让我先修复它。 🙂

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月12日 21:25 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/8 "2023-11-12T21:25:31Z")

</div>

你好，

看到这个计时器得以实现，我感到非常激动。你真是太棒了，令人鼓舞。

这是一个医生考试用的计时器，我自己也是一名医生，希望能帮助其他医生。  
考试包括16个房间，每个房间有16位不同的病人需要我们诊断和处理。在进入任何房间之前，门外会有一个任务，你可以用1分30秒阅读，然后进入房间，你有8分钟的时间完成任务和处理病人，这个过程会重复进行16个房间。总共需要3个小时才能完成。

我这次考试不幸失败了，原因是信息错误和误导，这激励我创建了这个论坛来帮助指导其他医生。

希望这能提供一些背景信息。😇

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月12日 21:58 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/9 "2023-11-12T21:58:19Z")

</div>

我已经推送了一个更新。它应该可以循环短/长计时器，并且您现在可以切换到任何计时器。我还删除了“waiting..”的使用。如果它运行得更好，请告诉我。

感谢您解释了背景，我现在明白了！ 👍

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月12日 22:35 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/10 "2023-11-12T22:35:53Z")

</div>

我发现了一个bug，如果我点击“读取任务”按钮，计时器会从1:30分钟变为8:00分钟，然后一直循环显示1:30分钟。如果我点击“进入房间”按钮，计时器会从8:00变为1:30，然后一直循环显示8:00分钟的计时器。

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月13日 01:02 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/11 "2023-11-13T01:02:57Z")

</div>

我的错。已修复。我当时很匆忙，只检查了第一个循环，没有注意到之后开关没有切换。😄

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月13日 04:20 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/12 "2023-11-13T04:20:41Z")

</div>

没关系！

我也会开始学习您之前分享的资料。如果我有任何疑问，会再联系您。

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月13日 04:44 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/13 "2023-11-13T04:44:02Z")

</div>

现在的问题是，当你点击“Read Task”按钮时，计时器从 1:30 开始，然后在 8:00 循环。

1:30 \> 8:00 \> 8:00 \> 8:00 …

如果你点击“Enter Room”按钮，计时器将从 8:00 开始，然后在 1:30 循环。

8:00 \> 1:30 \> 1:30 \> 1:30 …

理想情况下，应该有一个平滑、连续的循环，在 1:30 和 8:00 之间交替，起始点由你首先点击的按钮决定。

例如，如果你点击“Read Task”按钮，计时器应从 1:30 开始，然后以 8:00 和 1:30 之间的交替循环进行：

1:30 \> 8:00 \> 1:30 \> 8:00…

如果你点击“Enter Room”按钮，计时器应从 8:00 开始，并遵循 1:30 和 8:00 之间的交替循环：

8:00 \> 1:30 \> 8:00 \> 1:30…

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月13日 12:56 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/14 "2023-11-13T12:56:53Z")

</div>

您确定您已更新并_刷新_了页面吗？您描述的 bug 是在修复之前出现的，我现在无法重现。我再次测试了，它按预期循环。

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月13日 14:22 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/15 "2023-11-13T14:22:14Z")

</div>

我刚检查过，一切正常。😇❤

---

<div class="post-metadata">

### Author: ![Plabforum](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/plabforum/32/449551_2.png) [@Plabforum](https://meta.discourse.org/u/Plabforum)
#### Post date: [2023年十一月13日 14:54 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/16 "2023-11-13T14:54:49Z")

</div>

我想现在我想学习如何自己修改计时器。这样我就不会再打扰你了。😂

我想给自己布置一个小任务，用这个现有的计时器项目来帮助我学习。

任务是在实际计时器正上方添加一个名称“PLAB 2 Timer”，如下图所示：

 ![IMG_3646](https://global.discourse-cdn.com/meta/original/4X/b/4/0/b4027cf12ba532392f93bd154039d7d75ffc228b.jpeg)

你能指导我从哪里开始吗？

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [2023年十一月13日 17:13 UTC](https://meta.discourse.org/t/need-help-integrating-code-wrote-on-edittext-to-the-discourse/285204/17 "2023-11-13T17:13:38Z")

</div>

第一步是安装 Discourse 以便进行开发。这样测试会更容易。

> [@Install Discourse on macOS for development](https://meta.discourse.org/t/install-discourse-on-macos-for-development/15772/1):
>
> warning This guide covers installation instructions for a macOS development environment, for production guides see: [Install Discourse in production with the official supported instructions](https://meta.discourse.org/t/how-to-install-discourse-in-production/142537) So you want to set up Discourse on macOS to hack on and develop with? We’ll assume that you don’t have Ruby/Rails/Postgres/Redis installed on your Mac. Let’s begin rocket ! Install Discourse Dependencies You will need the following packages on your system: [Git](http://git-scm.com/)[rbenv](https://github.com/sstephenson/rbenv) or [asdf](https://asdf-vm.com/guide/getting-started.html)[ruby-build](https://github.com/sstephenson/ruby-build)[Ruby](https://www.ruby-lang.org/) (latest s…

> [@Install Discourse on Ubuntu or Debian for Development](https://meta.discourse.org/t/install-discourse-on-ubuntu-or-debian-for-development/14727/1):
>
> warning This guide covers installation instructions in a development environment. For a production guide see: [Install Discourse in production with the official supported instructions](https://meta.discourse.org/t/how-to-install-discourse-in-production/142537) So you want to set up Discourse on Ubuntu or Debian to hack on and develop with? We’ll assume that you work locally and don’t have Ruby/Rails/Postgres/Redis installed on your Ubuntu or Debian system. Let’s begin! Requirements We suggest having at least 4 GB RAM and 2 CPU cores. Current compatibility: O…

> [@Install Discourse on Windows for development](https://meta.discourse.org/t/install-discourse-on-windows-10-for-development/75149/1):
>
> information_source This tutorial has been tested on Windows 10 and 11. To set up a development environment for Discourse on Windows, you can do it using [Windows Subsystem for Linux](https://msdn.microsoft.com/en-us/commandline/wsl/install-win10) feature. This setup requires the WSL 2 installation. It is only available in Windows 10 builds 18917 or higher. We’ll assume that you already installed [Windows Subsystem for Linux 2 (Ubuntu)](https://docs.microsoft.com/en-us/windows/wsl/install) on your Windows 10 system. WARNING: Install Ubuntu 18.04, and not 20.04 since some installations will fail on 20.04. For m…

然后，您可以 fork 我的组件，将其克隆到某个地方，并使用 [Discourse Theme CLI](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950)。

> [@Plabforum](#):
>
> 任务是在实际计时器上方添加一个名称“PLAB 2 Timer”，如下所示：

查看 `\u003ctemplate\u003e... \u003c/template\u003e` 代码。您可以在此处添加文本。  
CSS 位于 `common/common.scss` 文件中。

您可以通过在 `locales/en.yml` 中添加条目来本地化您的文本——然后您可以使用 `{{I18n.t(themePrefix("my_translation_key"))}}`

> [@Theme Developer Quick Reference Guide](https://meta.discourse.org/t/theme-developer-quick-reference-guide/110448):
>
> As themes grow more powerful, there’s more to remember about how they work. We have loads of detailed documentation under [#howto / #themes](https://meta.discourse.org/tags/c/howto/themes), but if you just need something to jog your memory, this guide may help. General Resources [scroll Beginner’s guide](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966)[scroll Designer’s guide](https://meta.discourse.org/t/designers-guide-to-discourse-themes/152002/1)[scroll Developer’s guide](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)[paintbrush Theme Creator](http://theme-creator.discourse.org)[desktop_computer Theme CLI](https://meta.discourse.org/t/discourse-theme-cli-console-app-to-help-you-build-themes/82950)[notebook_with_decorative_cover Theme Directory](https://meta.discourse.org/c/theme)[jigsaw Component Directory](https://meta.discourse.org/c/theme-component)[wrench Theme Modifiers](https://meta.discourse.org/t/theme-modifiers-a-brief-introduction/150605)[wrench Themeable site…](https://meta.discourse.org/t/-/374376)