最近の検索
最近の検索はありません
Tip: Displaying Subsection list on Category page
投稿日時：2019年2月21日
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
2
30件のコメント
Benjamin BAUDOUIN
saumya sunder the link https://support.zendesk.com/hc/en-us/community/posts/360004412767/comments/360008303313 has been removed , do you have the existing one ?
0
Binh Du
Thank you for your contributions everyone.
I was able to set the subsections in the Category view, but how would I set the subsection to be listed before articles instead of after?
0
Arno (EMEA Partner)
Let me check if I could get you an actual image. I might need to transfer theme to another environment, as I could not share even titles without asking, and I do not have easy tools blur the content. This is anyhow what I would like achieve with a section page:
0
Greg Katechis
Thanks for the clarification! Could you take a screenshot of what you are seeing when you have your help center set up like mine? Mine is taken from the first subsection titled "Subsection" and my hierarchy is as follows:
0
Arno (EMEA Partner)
Thanks, good to clarify this, Section page is what I am trying to modify.
0
Greg Katechis
Alright, I'm back! One more question that I have, to be sure that we're on the same page (pun not intended), is whether you're looking at the Sections page, as opposed to the Categories page. I ask because after setting up a new Copenhagen them on my account, I was able to get what I believe it is you are looking for in your last post:
Let me know if I misunderstood your request!
0
Greg Katechis
My apologies Arno, I definitely was responding to you and accidentally used Amy's name instead! I'm going to review the back and forth between everyone here and see where things stand right now.
0
Arno (EMEA Partner)
Hi Ruddy,
EDIT: clarified the example results below a bit.
Thanks. Working code, but this does not list the sub section titles under sections, only article titles. I would like to show the whole structure directly to the user. So user could navigate directly to a article in a section or sub section in a section. With the solution you provided, if I have a section with only sub sections in it, only empty section (just title) is shown, and user does not understand directly that there are sub sections and articles inside it.
What get is, even if there are also sections under this section:
What I would like to have is:
0
Ruddy DEROSIERS
I hope my copy is good enough, i'm on my smartphone 😉
0
Ruddy DEROSIERS
0
サインインしてコメントを残してください。