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

**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:** 1\
**Showing post:** 4

<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;
}

```

---

_[View the full topic](https://meta.discourse.org/t/is-there-a-way-to-style-the-latest-page-and-top-page-separately/219365)._