Tip: Displaying Subsection list on Category page

With Flexible Hierarchies, it is possible to create Sections that contain no articles, only Subsections. These Sections will appear empty on the Category page, which could be confusing for your end users, as there is no indication that more content is available.

I modified this article on July 12, 2019 to include articles first and then sections within a category, limit the number of each listed to 4, as well as provide a link to more articles and sections.Thanks to those who have used this article and pointed out other improvements. For everyone else, please look at the comments for more helpful tips. 

To correct this problem, you can create a new section-list class and then add code to your Categories page to display a list of subsections.

Modify your CSS

To create the new section-list class, add the following to your style.css file. I simply copied from the .article-list class. To ensure that your styling stays consistent, I recommend you do the same.

.section-list {

  list-style-type: none;

  padding-left: 18px;

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

  text-align: left;

}

 

.section-list-item {

  -webkit-box-flex: 1;

  -ms-flex: 1 0 420px;

  flex: 1 0 420px;

  padding: 5px 0;

  max-width: 100%;

  -ms-flex-wrap: wrap;

  flex-wrap: wrap;

}

 

To differentiate the article-list class and the section-list class, I added fontawesome bullets: + for the sections to indicate more content, and – for the articles.

.article-list-item:before {   

    font-family: 'FontAwesome';

    content: '\f068';

    margin:0 5px 0 -15px;

    color: #e8710a;

}

.section-list-item:before {   

    font-family: 'FontAwesome';

    content: '\f067';

    margin:0 5px 0 -15px;

    color: #e8710a;

}

Modify the Categories template

In the category_page.hbs file, replace the {{#each sections}} block with the following:        

{{#each sections}}
    <section class="section">
      <h3 class="section-tree-title">
          <a href="{{url}}">{{name}}</a>
           {{#if internal}}
           <span class="icon-lock" title="{{t 'internal'}}"></span>
           {{/if}}
       </h3>

        {{#if articles}}
            <ul class="article-list">
                 {{#each articles}}
                     <li class="article-list-item{{#if promoted}} article-promoted{{/if}}">
                          {{#if promoted}}
                              <span data-title="{{t 'promoted'}}" class="icon-star"></span>
                           {{/if}}
                            <a href="{{url}}" class="article-list-link">{{title}}</a>
                       </li>
                   {{/each}}
              </ul>
           {{/if}}

           {{#if sections}}
             <ul class="section-list">
                 {{#each sections}}
                    <li class="section-list-item"><a href="{{url}}">{{name}}</a></li>
                 {{/each}}
             </ul>

             <a href="{{url}}" class="see-all-articles">
              {{t 'show_all_articles'}} and sections
              </a>

               {{/if}}

<style>
      .section-list li:nth-child(n+4) {
              display: none;
          }
</style>

<style>
        .article-list li:nth-child(n+4) {
                display: none;
         }
</style>

</section>
{{else}}
<i class="category-empty">
<a href="{{category.url}}">{{t 'empty'}}</a>
</i>
{{/each}}

Check it out, here: https://support.ddisystem.com/hc/en-us/categories/360001355173-Inform-Productivity-Boosters

Note: I am modifying a free theme by Diziana, so I want to give them full credit for the original.  https://www.zendesktheme.com/?s=thoran&post_type=download