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

支持
1

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

2

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

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

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

2 个赞
3

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

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


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

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

1 个赞
4

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

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

<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 类并设置该类的样式，这样也可以进行更复杂的样式更改。

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

.route-discovery-top #main-title {
    display: none;
}
3 个赞