# 是否有办法单独设置“最新”页面和“热门”页面的样式？

**URL:** <https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365>\
**Category:** Support\
**Created:** [2022年二月25日 08:55 UTC](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365 "2022-02-25T08:55:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Charles\_Hoffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/charles_hoffman/32/254725_2.png) [@Charles\_Hoffman](https://meta.discourse.org/u/Charles_Hoffman)\
**Post date:** [2022年二月25日 08:55 UTC](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365/1 "2022-02-25T08:55:08Z")

</div>

我在尝试为“最新”页面和“顶部”页面的元素设置样式时遇到了问题。它们共享完全相同的 body 类（class=“staff docked navigation-topics”），这意味着我无法单独设置它们的样式。“分类”页面的类名不同（class=“staff docked navigation-categories categories-list”），因此我可以轻松地对其进行样式设置。有人有解决方案吗？

---

<div class="post-metadata">

**Author:** ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)\
**Post date:** [2022年二月25日 10:21 UTC](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365/2 "2022-02-25T10:21:44Z")

</div>

您可以根据路由（`discovery.top`、`discovery.latest`）添加自定义类或执行其他操作。中心块将类似于

```plaintext
@discourseComputed("router.currentRouteName")
  canDisplay(currentRouteName) {
    if (currentRouteName === `discovery.top`) {
       ...
    }

```

但如果存在不需要自定义脚本的解决方案，我将不胜感激。

---

<div class="post-metadata">

**Author:** ![Charles\_Hoffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/charles_hoffman/32/254725_2.png) [@Charles\_Hoffman](https://meta.discourse.org/u/Charles_Hoffman)\
**Post date:** [2022年二月25日 18:51 UTC](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365/3 "2022-02-25T18:51:38Z")

</div>

感谢您的回复。我继续搜索，找到了另一个对我有效的解决方案，并且可能对其他人也有帮助：

// Javascript - 根据 URL 中的文本隐藏目标元素。在这种情况下，URL 中的文本是“top”，我想隐藏的 ID 是“main-title”。

```plaintext

<script>
    window.onload = function() {
      if (window.location.href.indexOf('/top')) {
        document.querySelectorAll('#main-title')[0].style.display = 'none';
      }
    };
</script>

```

编辑：这不能按预期工作。问题是您需要刷新页面才能触发 javascript 函数。

---

<div class="post-metadata">

**Author:** ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)\
**Post date:** [2022年三月2日 15:00 UTC](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365/4 "2022-03-02T15:00:32Z")

</div>

> [@Charles\_Hoffman](#):
>
> 编辑：这并没有按预期工作。问题在于您需要刷新页面才能触发 javascript 函数。

是的，@manuel 的解决方案是实现目标的一种简单方法。使用 `window.location.href`，由于 Ember 的 runloop，您可能会遇到获取正确 URL 的问题。

要将您正在做的事情调整为更“Ember”的方法，可以这样做：

```js
<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.querySelectorAll('#main-title')[0].style.display = 'none';
    }
  });
</script>

```

但是，最好是添加一个 body 类并设置该类的样式，这样也可以进行更复杂的样式更改。

```js
<script type="text/discourse-plugin" version="1.1.0">
  api.onPageChange(() => {
    const router = api.container.lookup('service:router');

    if (router.currentRoute.name === 'discovery.top') {
      document.body.classList.add('route-discovery-top');
    } else {
      document.body.classList.remove('route-discovery-top');
    }
  });
</script>

```

```css
.route-discovery-top #main-title {
    display: none;
}

```