# 如何移除私信中的消息气泡

**URL:** <https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426>\
**Category:** Support\
**Created:** [2021年八月14日 18:16 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426 "2021-08-14T18:16:40Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![CaptainZac](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/captainzac/32/195184_2.png) [@CaptainZac](https://meta.discourse.org/u/CaptainZac)\
**Post date:** [2021年八月14日 18:16 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426/1 "2021-08-14T18:16:40Z")

</div>

有个小问题，我正在升级到 2.8.beta4，想了解一下是否有办法保留旧的私信样式，而不是使用新的气泡样式。谢谢！

---

<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:** [2021年八月15日 11:39 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426/2 "2021-08-15T11:39:41Z")

</div>

嗨，Zac 🙂

如果你真的想这样做，通过覆盖当前的 CSS 是可行的。可以试试像这样的代码 🤔  
这看起来会像默认的 Discourse 浅色主题。可能最好的选项是通过 JavaScript 从 `body` 中移除 `archetype-private_message` 类。这样可以保留自定义主题的风格。

**通用**

```plaintext
.archetype-private_message {
  .topic-avatar,
  .topic-body {
    border-top: 1px solid var(--primary-low);
  }
  .topic-body {
    .cooked {
      box-sizing: unset;
      border: none;
      margin-top: 0;
      margin-left: 0;
      padding: 1em 11px 0.25em 11px;
      border-radius: 0;
    }
    &.highlighted {
      animation: background-fade-highlight 2.5s ease-out;
      .cooked {
        animation: none;
      }
    }
  }
  .post-menu-area {
    margin-top: 0;
  }
  .small-action-desc.timegap {
    flex-wrap: wrap;
    flex: 1 1 100%;
    align-items: center;
    padding: 1em 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--font-down-1);
    color: var(--primary-medium);
  }
  .current-user-post,
  .current-user-post:not(.moderator) {
    .topic-body {
      .cooked {
        background: none;
        border: none;
      }
      &.highlighted {
        animation: background-fade-highlight 2.5s ease-out;
        .cooked {
          animation: none;
        }
      }
    }
  }
  .topic-map {
    border: 1px solid var(--primary-low);
    border-top: none;
    border-radius: 0;
    padding: 0;
    section {
      border-top: 1px solid var(--primary-low)
    }
    .map:first-of-type .buttons .btn {
      border: 0;
      border-left: 1px solid var(--primary-low);
      border-top: 1px solid transparent;
      border-radius: 0;
    }
    .participants .user {
      border: 1px solid var(--primary-low);
      border-radius: 0.25em;
      padding: 0;
      background: none;
    }
  }
}

```

**桌面端**

```plaintext
.archetype-private_message {
  .topic-map {
    margin: 20px 0 20px 11px;
  }
}

```

**移动端**

```plaintext
.archetype-private_message {
  .topic-post {
    margin: 0;
    article {
       border-top: 1px solid var(--primary-low); 
    }
  }
  .topic-body,
  .topic-avatar {
    border-top: none;
  }
  .topic-body {
    flex: unset;
  }
  .boxed .contents {
    padding: 10px 0 0 0;
  }
  .topic-map {
    margin: 0;
  }
}

```

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2022年一月30日 17:34 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426/3 "2022-01-30T17:34:15Z")

</div>

> [@Don](#):
>
> 最好的选择可能是用 JS 从 `body` 中移除 `archetype-private_message` 类。这样可以保留自定义主题样式。

作为一个完全的 JS 新手，最好的方法是什么？while 循环或无限递归函数似乎不理想。

* * *

我目前的解决方案如下：

```plaintext
<script type="text/discourse-plugin" version="0.8">

    api.onPageChange(() =>{
        window.onload = noBubbles();
    });

    async function noBubbles()
    {
        var elements = document.getElementsByClassName('archetype-private_message');

        while(elements.length > 0){
            elements[0].classList.remove('archetype-private_message');
        }
    }
</script>

```

在我这个新手看来，这似乎相当简洁，但我敢肯定会有人有更有效的方法，哈哈。  
你仍然需要通过 CSS 手动撤销尽可能多的气泡效果，因为它在加载时会闪现一瞬间，但至少这以一种简单的方式阻止了它一直存在，并且应该能应对未来主题的更改。

---

<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:** [2022年一月30日 19:16 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426/4 "2022-01-30T19:16:19Z")

</div>

但我不知道此更改是否有任何副作用。CSS 始终是最安全、最容易更改的。这就是我发布它的原因。

我不记得更改前 `body` 类是什么，但我只是将其替换为 `archetype-regular`，而不是删除 `archetype-private_message` 类，因为有一些针对 `[class*=\"archetype-\"]` 类的全局 CSS，所以我们在私信中也保留它。

**标题**

```javascript
<script type="text/discourse-plugin" version="0.8">
  const body = document.querySelector("body");
  api.onPageChange(() => {
    if (body.classList.contains("archetype-private_message")) {
      body.classList.replace("archetype-private_message", "archetype-regular");
    }
  });
</script>

```

---

<div class="post-metadata">

**Author:** ![orangeandblack5](https://avatars.discourse-cdn.com/v4/letter/o/edb3f5/32.png) [@orangeandblack5](https://meta.discourse.org/u/orangeandblack5)\
**Post date:** [2022年一月30日 21:14 UTC](https://meta.discourse.org/t/how-to-get-rid-of-the-message-bubbles-in-pms/200426/5 "2022-01-30T21:14:42Z")

</div>

据我所知，它效果很好！