# 在着陆页上隐藏/插入内容

**URL:** https://meta.discourse.org/t/hide-insert-content-on-landing-page/369369
**Category:** Development
**Created:** [2025年六月9日 08:49 UTC](https://meta.discourse.org/t/hide-insert-content-on-landing-page/369369 "2025-06-09T08:49:13Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![OsaIsacson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/osaisacson/32/263464_2.png) [@OsaIsacson](https://meta.discourse.org/u/OsaIsacson)
#### Post date: [2025年六月9日 08:49 UTC](https://meta.discourse.org/t/hide-insert-content-on-landing-page/369369/1 "2025-06-09T08:49:14Z")

</div>

我通过以下方式创建了一个自定义主页：  
a) 将类名 `.custom-homepage` 添加到登录页面。我用它来简单地定位我想在特定页面上隐藏/调整的内容，通过我的自定义 CSS。  
b) 将任何新组件直接添加到我的默认主题自定义 HTML 的 head 文件中。

它看起来是这样的：

```plaintext
<script type="text/discourse-plugin" version="0.8">
    
  api.registerConnectorClass("above-main-container", "custom-homepage", {

    setupComponent(args, component) {

     var topMenuRoutes = 
        component.siteSettings.top_menu.split('|')
        .map(function(route) {return '/' + route});
      
     // 'top_menu' 设置中列出的第一个页面是您的主页
 var homeRoute = topMenuRoutes[0];
  
     // 每当页面更改时，它都会调用我们的代码

     api.onPageChange((url) => {

        // 检查我们是否在主页上 
        if (url === "/" || url === homeRoute ){ 
          // 如果是主页，则将 'custom-homepage' 类添加到 HTML 标签
          // 并将 'displayCustomHomepage' 设置为 true
          
          document.querySelector("html").classList.add("custom-homepage"); 
          component.set("displayCustomHomepage", true); 
        } else {  
          // 如果我们不在主页上，则删除该类
          // 并将 `displayCustomHomepage` 设置为 false
          document.querySelector("html").classList.remove("custom-homepage"); 
          component.set("displayCustomHomepage", false); 
        }
      });
    }
    
  });

</script>

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/custom-homepage">

  {{#if displayCustomHomepage}}

    <div class="custom-homepage-wrapper mask-polygon">

       <div class="custom-welcome-banner">
        <h1 class="welcome-header-text">欢迎来到瑞典的合作建房运动</h1>
        <p>在这里，您可以查看已完成和计划中的项目，查找知识，获得建议 - 并与全国各地正在一起建造和居住的其他人建立联系。</p>
       </div>
       
    </div>
    
    {{whos-online}}
    
    {{search-menu}}

<div class="two-column-layout">

  <div>
   （我自己的地图图像代码在这里，我将省略它）
  </div>
       	

  <WANTED DIV>
  （这是我想放置我的信息流的地方，也许是像 {{categories-topic- list topics=latest filter=“latest” limit=“10” … }} 这样的东西）
  </WANTED DIV>

</div>
    
  {{/if}}
</script>

```

到目前为止一切顺利。页面看起来像这样：

 ![Screenshot 2025-06-09 at 11.38.11](https://global.discourse-cdn.com/meta/original/4X/8/f/f/8ff5743fce05678f65bcc98e4709d24b6a6423c2.jpeg)

问题是\*\*我无法控制当前的信息流。\*\*它只是默认的信息流，我通过自定义 CSS 中的 `.custom-homepage + class` 大致调整了它的宽度和位置，以便为左侧的地图腾出空间。例如，它目前是无限滚动的。我需要它只显示最新的 10 篇文章。

我的问题是：

- 我应该隐藏哪个类来隐藏当前的信息流？
- 在我自己的代码中添加我的最新帖子，正确的语法是什么？请参阅上面代码中的“WANTED DIV”部分。

实时网站：[https://bygg.boihop.co/](https://bygg.boihop.co/)

非常感谢您的帮助。

---

_[View the full topic](https://meta.discourse.org/t/hide-insert-content-on-landing-page/369369)._