如何在分类框中使用时引入最新主题

开发
1

大家好，

我们的 HR 团队决定采用类别框，而不是如下所示的类别列表。

categories
categories1334×1043 54.9 KB

不过，他们也希望最新的话题能出现在类别底部，就像 Revolut 社区页面所展示的那样。

Revolut
Revolut1353×947 65.6 KB

我正努力弄清楚如何实现这一功能，无论是通过现有设置还是 CSS，

有什么建议吗？

2

Try to work with components

You can use: categories-and-latest-topics

In this mode, there is a connection and categories and recent topics.

<script type='text/x-handlebars' data-template-name='components/categories-and-latest-topics'>

<div class='column categories'>
  {{categories-only categories=categories}}
</div>

<div class='column'>
  {{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>

</script>

Next, you override: categories-only

<script type='text/x-handlebars' data-template-name='components/categories-only'>

   The contents of the file...

</script>

Perhaps from this file it is necessary to move the box with the categories, or to do simply to change the css.

Options think very many.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs

Useful material

3

Another option is to simply structure your category directly

https://meta.discourse.org/c/howto

4

Then just change the css, which is even easier. )

5

Ideally I would prefer to do it like you have suggested, however, there isnt a way to display categories in a grid layout and have the latest topics below. :frowning_face:

6

I suggest building a static header customization if your categories do not change much. Then you could have whatever layout you like above the topic list.

7

我已经在几个网站上构建了这个或类似的功能。如果你将其放入主题的 </head> 部分，它会将所有分类显示在首页顶部（以及 /latest，假设它与首页相同）。

接下来，你只需要添加 CSS 来按照你希望的方式布局。这是使用 API 和 Handlebars 模板的一个很好的入门示例。

<script type="text/discourse-plugin" version="0.8">
  const ajax = require('discourse/lib/ajax').ajax;

  api.registerConnectorClass('below-site-header', 'custom-homepage', {
    setupComponent(args, component) {
      component.set('hostname', window.location.hostname);
      
      api.onPageChange((url, title) => {
        if (url == "/" || url == "/latest"){ 
          $('html').addClass('show-custom-homepage'); // 显示首页
          component.set('displayCustomHomepage', true);
          
            ajax("/site.json").then (function(result){ // 获取分类列表
              let categoryName = [];
              result.categories.forEach(function(categories){
                categoryName.push(categories);
            });
            component.set('categoryName', categoryName);
          });  
        }
        else { // 隐藏首页
          $('html').removeClass('show-custom-homepage');
          component.set('displayCustomHomepage', false);
        }
      });
    }
  });
</script>


<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/custom-homepage'>
  
  {{#if displayCustomHomepage}}
  
  <div class="custom-homepage-wrapper"> 

    <div class="wrap wrap-category-boxes">
    
      <div class="homepage-category-boxes">
        {{#each categoryName as |c|}}
        <a href="/c/{{c.slug}}" class="box">
          <div class="homepage-category-box">
            {{#if c.uploaded_logo}}
            <div class="category-image-wrapper">  
              <img class="homepage-category-image" src="{{c.uploaded_logo.url}}" />               
            </div>              
            {{/if}}
            <h2>{{#if c.read_restricted}}<i class="fa fa-lock">&nbsp;</i>{{/if}}{{c.name}}</h2>
            <p>{{c.description}}</p>
          </div>
        </a>
        {{/each}}
      </div>
      
    </div>
    
  </div> 
  {{/if}}

</script>
9

It looks very nice. How I can to add Font Awesome 5 instead of images? Many thanks!

10

Hello,

Thank you for this code snippet! I am working on a project where I need to do some things on this principle (not necessarily categories) and I would like to put this directly in the plugin that I develop.

I know where to put the template handlebars, but I can not find the folder / file where to put the javascript. Could you tell me how to proceed?

Thank you,
Thymotep

11

I love this idea! Looking forward to test such a theme component or plugin

12

这个有更新吗？脚本报错，无法获取分类名称。页面上没有任何变化。

image
image1093×204 11.5 KB

13

是的，确实出错了！感谢您的反馈。我已修复了上文帖子中的代码。

我们为 JavaScript 启用了 严格模式，这意味着 categoryName = []; 需要先声明。将该行改为 let categoryName = []; 即可解决问题。

15

这个指向可能实现此功能的组件的 GitHub 链接是 404。\n\n\n[quote="Stranik, post:2, topic:105679"]\n也许有必要将类别框从该文件中移出，或者只需更改 CSS。\n\n选项很多。\n\nhttps://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/components/categories-boxes.hbs \n[/quote]

16

我认为该组件现在在这里：

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/categories-boxes.hbs

17

好的……我需要弄清楚如何让 hbs 成为我可以添加到 discourse 中的内容。我猜我必须在组件中使用它作为文件，并且我需要做一个关于它的教程？
我看到一个关于简单主题的教程。那是正确的方向吗？

18

我以前没做过，所以不知道答案。主题开发人员教程绝对是一个很好的起点。

如果你在该页面上搜索**“挂件挂载”**，你将看到一个在页面不同部分显示挂件的示例。

这个 howto 主题也可能有用，可以作为一个例子：

https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949

19

如果我成功了，我会通知你。在此期间，我使用了 Air 主题，我对此很满意，但我仍然希望在分类主题下方显示最新帖子。

我曾经是一名 msvc++ 程序员，25 年前，我确实成功构建了一个在 Play 商店发布的 Flutter 应用程序。不过，开源 API 对我来说并不容易。让我们看看事情如何发展。我会在方便的时候发布更新。

20

你成功了吗？想做同样的事情，不知道有没有简单的方法，还是我需要深入研究主题并花些时间。

21

通过使用桌面分类页面样式“带子分类的框”设置，我能够创建一个主题组件并在框下方添加代码。我现在正在研究如何在整个站点上列出最新主题。

<script type="text/x-handlebars" data-template-name="/connectors/category-boxes-after-boxes/mwp">
<div class='column'>
  {{categories-topic-list topics=topics filter="latest" class="latest-topic-list"}}
</div>

</script>

问题是这很简单地说“您已全部看完”。

22

我放弃了。我现在主要使用标准的东西。