创建“精选分类”主页横幅

开发
8

我查看了 Kris 之前发布的帖子，并直接将其改编为你可以用作基础的版本。这里涵盖的大部分内容都是他在原始主题中阐述的。
https://meta.discourse.org/t/how-to-add-a-featured-topic-list-to-your-discourse-homepage/132949

所有代码都将添加到您主题的 <head> (head_tag.html) 部分。

第一部分将检查您所在的页面是否为“主页”。

然后，我们将使用类别类上的 Category.list() 方法获取站点的类别。

接着，我们将这些类别与您希望 featured 的类别进行比较。这些类别将位于下方代码中定义的 definedFeaturedCategories 数组中。您允许的类别将被设置为组件，并传递给模板进行渲染。

<script type="text/discourse-plugin" version="0.8">
  const Category = require("discourse/models/category").default;
  // 我们将使用 Category 模型来检索站点类别

  api.registerConnectorClass('above-main-container', 'featured-categories', {
    // above-main-container 是插件出口，
    // featured-topics 是您自定义的组件名称

    setupComponent(args, component) {

      api.onPageChange((url, title) => {
        console.log(url,title)
        if ((url === "/") || (url === "/latest") ) {
        // 页面切换时，检查 URL 是否匹配
        // 如果您的主页不是 /latest，请将其更改为 /categories
        
          $('html').addClass('custom-featured-categories');
          // 为 HTML 标签添加一个类，以便轻松进行 CSS 定位

          let definedFeaturedCategories = ["uncategorized","blog","two"]
          // 您希望 featured 的类别数组
          // 请务必将类别标题转换为小写

          let featuredCategories = [];

          categories = Category.list();

          for (let cat of categories) {
            if (definedFeaturedCategories.includes(cat.name.toLowerCase())) {
              // 仅将您希望 featured 的类别推送到待渲染的数组中
              featuredCategories.push(cat)
            }
          }

          component.set('featuredCategories', featuredCategories)

        } else {

        // 如果页面不匹配上述 URL，则执行以下操作：
          $('html').removeClass('custom-featured-categories');
          // 移除我们的自定义类
          component.set('categories',[])
          // 将类别设置为空数组以禁用渲染
        }
      });
    }
  });
</script>

下一部分将上述创建的组件模板注入到插件出口 above-main-container 中。它将调用第三步中创建的自定义 categories-wrapper，并将 categories 定义为上面创建的 featuredCategories。

<script type="text/x-handlebars" data-template-name="/connectors/above-main-container/featured-categories">
      <div class="custom-featured-categories-wrapper">
        {{categories-wrapper categories=featuredCategories}}
          <!-- 使用下方创建的 categories-wrapper 模板 -->
          <!-- 将 categories 定义为上方脚本中创建的 featuredCategories -->
      </div>
</script>

第三部分创建了自定义的 categories-wrapper Handlebars 模板，用于渲染 featured 类别。它是直接改编自 Discourse 的 categories-only.hbs 用于 Discourse 的类别页面。

<script type="text/x-handlebars" data-template-name="components/categories-wrapper">
  <!-- 这将创建一个名为 'categories wrapper' 的组件模板 -->
  <!-- 所有模板代码均改编自 Discourse 自身的类别页面模板
   https://github.com/discourse/discourse/blob/acd1693dac1bff6ff50250d942134bc48a27ff14/app/assets/javascripts/discourse/templates/components/categories-only.hbs -->

  <div class="top-categories-wrapper">
    {{#each categories as |c|}}
        <div class="top-category-column-one">
          {{category-title-link category=c}}
          {{#if c.escription}}
            <div class="category-description">
              {{dir-span c.description}}
            </div>
          {{/if}}
          {{#if c.isGrandParent}}
            <table class="category-list subcategories-with-subcategories">
              <tbody>
                {{#each c.subcategories as |subcategory|}}
                  <tr
                    data-category-id={{subcategory.id}}
                    data-notification-level={{subcategory.notificationLevelString
                    }}
                    class="{{if
                        subcategory.description_excerpt
                        "has-description"
                        "no-description"
                      }}
  
                      {{if subcategory.uploaded_logo.url "has-logo" "no-logo"}}"
                  >
                    <td
                      class="category"
                      style={{border-color subcategory.color}}
                    >
                      {{category-title-link tagName="h4" category=subcategory}}
                      {{#if subcategory.description_excerpt}}
                        <div
                          class="category-description subcategory-description"
                        >
                          {{{dir-span subcategory.description_excerpt}}}
                        </div>
                      {{/if}}
                      {{#if subcategory.subcategories}}
                        <div class="subcategories">
                          {{#each subcategory.subcategories as |subsubcategory|
                          }}
                            {{#unless subsubcategory.isMuted}}
                              <span class="subcategory">
                                {{category-title-before category=subsubcategory
                                }}
                                {{category-link subsubcategory hideParent="true"
                                }}
                              </span>
                            {{/unless}}
                          {{/each}}
                        </div>
                      {{else if subcategory.description_excerpt}}
                        <div
                          class="category-description subcategory-description"
                        >
                          {{{dir-span subcategory.description_excerpt}}}
                        </div>
                      {{/if}}
                    </td>
                  </tr>
                {{/each}}
              </tbody>
            </table>
          {{else if c.subcategories}}
            <div class="subcategories">
              {{#each c.subcategories as |subcategory|}}
                {{#unless subcategory.isMuted}}
                  <span class="subcategory">
                    {{category-title-before category=subcategory}}
                    {{category-link subcategory hideParent="true"}}
                    {{category-unread category=subcategory}}
                  </span>
                {{/unless}}
              {{/each}}
            </div>
          {{/if}}
        </div>
        <div class="top-category-column-two">
          <span class="topics-header">
            主题
          </span>
          <span class="topics-count">
            {{c.topic_count}}
          </span>
          {{category-unread category=c tagName="div" class="unread-new"}}
        </div>
    {{/each}}
  </div>
</script>

这应该能帮助您开始实现您在原始帖子（OP）中请求的功能。

若要为每个类别框根据自定义定义的颜色进行样式设置，在第三部分中，您可以使用 # + c.color 硬编码样式以访问类别的颜色代码。

除此之外，样式设置可以在 common.scss 文件中完成。

7 个赞