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}}
{{name}}
{{#if internal}}
{{/if}}
{{#if articles}}
{{#if promoted}}
{{/if}}
{{title}}
{{#each articles}}
{{/each}}
{{/if}}
{{#if sections}}
- {{name}}
{{#each sections}}
{{/each}}
{{t 'show_all_articles'}} and sections
{{/if}}
{{else}}
{{t 'empty'}}
{{/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
-
This is fantastic.
Thanks for sharing Amy :)
-
我困惑在哪里把代码片段。我paste the snippet after the first {{/if}} or the second? Wherever I seem to paste it I keep getting the error: "{{ `else` }} .. is not permitted in this context" on that last {{else}}.
{{#if more_articles}}
{{t 'show_all_articles' count=article_count}}
{{/if}}
{{else}}
< p>
{{t 'empty'}}
{{/if}}
{{else}} -
Hi Rebecca,
I have since changed my code around a bit.
I suggest you delete the offending {{else}} and see if it allows you to publish.
If not, please take a look at my updated code below, starting from the section-content (beneath the section description).
Please let me know how this works for you. I will also review the Tip above and modify the code if needed.
Hope this helps....
{{#if section.articles}}
{{#if promoted}}
{{/if}}
{{title}}
{{#if internal}}
{{/if}}
{{#each section.articles}}
{{/each}}
{{/if}}
{{pagination}}
{{#each section.sections}}
{{name}}
{{#if articles}}
{{#if promoted}}
{{/if}}
{{title}}
{{#if internal}}
{{/if}}
{{#each articles}}
{{/each}}
{{#if more_articles}}
{{t 'show_all_articles' count=article_count}}
{{/if}}
{{/if}}
{{/each}}
30 Comments