How to put all sections and articles on home page



image avatar

Vlad

The Wise One - 2022Community Moderator

投稿日時:2017年2月23日

Please follow this short tutorial about how to put all sections and articles on the home page of your Help Center (according to this post). There are few ways to achieve that, but I will explain one of them, probably the most easiest.

Example: https://support.twilio.com/hc/en-us

So:

  • Put all the content (all sections) in just one category (how to do that)

  • Go to editor for design changes (General / Customize design / Home page)
  • Find code row provided under, and remove it and whole code in this section (if you can't find it, just skip this step):
    <section class="knowledge-base">
  • Put here this code
    <section class="knowledge-base">
    {{#if categories}}
    <div class="category-tree">
    {{#each categories}}
    <section class="category">
    {{#if ../has_multiple_categories}}
    <h2><a href="{{url}}">{{name}}</a></h2>
    {{/if}}
    {{#each sections}}
    <section class="section">
    <h3>
    {{#if internal}}
    <span class="visibility-internal" data-title="{{t 'internal'}}">
    <span class="visibility-internal-icon"></span>
    </span>
    {{/if}}
    <a href="{{url}}">{{name}}</a>
    </h3>
    {{#if articles}}
    <ul class="article-list">
    {{#each articles}}
    <li {{#if promoted}} class="article-promoted" {{/if}}>
    {{#if promoted}}
    <span data-title="{{t 'promoted'}}">★</span>
    {{/if}}
    <a href="{{url}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <i class="section-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/if}}
    </section>
    {{else}}
    <i class="category-empty">
    <a href="{{url}}">{{t 'empty'}}</a>
    </i>
    {{/each}}

    {{#if more_sections}}
    <div>
    <a href="{{url}}">{{t 'see_all_sections'}}</a>
    </div>
    {{/if}}
    </section>
    {{/each}}

    {{pagination}}
    </div>
    {{/if}}
    </section>
  • Save and Publish changes. You should get your sections and articles on the home page of your Help Center.

    Hope this helps, if not, feel free to put a comment under!

 

 

 

 

 


1

26

26件のコメント

Hello Anne-Flore, 

In its default configuration, the homepage is designed to exhibit a maximum of 6 articles, and at present, there is no native functionality to augment that limit. Furthermore, expanding this limit is not scheduled in our development roadmap at the moment. Please do share your feedback on the link that Ifra provided. 

Hoping for your understanding on this matter. Thank you~!

0


@Anne-Flore Caire, I understand your requirement and concern.

But you can give your feedback here:

https://support.zendesk.com/hc/en-us/community/topics/1260801308530-Feedback-Help-Center-Guide-

Thanks :)

1


Thanks for the quick feedback! 1263169183150

I was hoping there might be another solution since 2018. There are two issues with the solution: the development effort to implement it, and the fact that maintainability is outside the scope of Zendesk Help Centre administrators alone. So we won't be launching this workaround.

0


Hi Anne-Flore Caire,

It is doable by using API as Vlad said above. You can reduce the number of articles using CSS but cannot increase.

Thanks

0


Hello. I am trying to display all the articles in the sections of a category on the home page, but there is a configuration system which limits the number of articles to 6. What parameter in the code includes and influences this limit?
Because in addition I can reduce this number via ".article-list-item:nth-child(n+3)", 3 for example, but I cannot increase the number by this parameter (by putting .article-list- item:nth-child(n+8) for example, I still only have 6 displayed). Thanks in advance

0


Hi Shweta, with the native functionality it is not possible to filter by article labels and present only those articles.

 

0


Is there anyway I could filter out articles tagged with a specific label instead of showing promoted articles. Thanks in advance,

1


Hi there. This no longer works "out of the box" for Copenhagen theme 2.8. Has anyone updated theirs to work with the new theme? Thanks!

0


Hey Kathrina,

You can try this.

Paste this code on home page:

<section class="knowledge-base container">
{{#if categories}}
<div class="category-tree">
{{#each categories}}
<section class="category">
{{#if ../has_multiple_categories}}
<h2><a href="{{url}}">{{name}}</a></h2>
{{/if}}

{{#each sections}}
<section class="section-wrapper">
<section class="section">
<h3>
<a href="{{url}}">{{name}}</a>
</h3>
{{#if articles}}
<ul class="article-list">
{{#each articles}}
<li {{#if promoted}} class="article-promoted" {{/if}}>
{{#if promoted}}
<span data-title="{{t 'promoted'}}">★</span>
{{/if}}
<a href="{{url}}">{{title}}</a>
</li>
{{/each}}
</ul>
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
{{else}}
<i class="section-empty">
<a href="{{url}}">{{t 'empty'}}</a>
</i>
{{/if}}
</section>

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

{{/each}}

{{#if more_sections}}
<div>
<a href="{{url}}">{{t 'see_all_sections'}}</a>
</div>
{{/if}}
</section>
</section>
{{/each}}


{{pagination}}
</div>
{{/if}}
</section>

 

Paste this CSS code on your stylesheet at the bottom side:

.container{
max-width:1160px; // Container width depends on your theme container, may your container width if 1100px , 1400px etc.
}

.section-wrapper{
display:flex;
flex-direction:row; // It could be flex-direction:column - depends on you
}

.section-wrapper .section{
flex: 1 0 100%; // On mobile devices

}

@media (max-width:1024px){
.section-wrapper .section{
flex: 1 0 340px // On Desktop
margin-right:30px;
}
}

And

Here is section class so if you need to add margin in section columns, you can add like this:

.section{
margin-left:30px; //As per your requirement
}

OR


.section{
margin-right:30px; //As per your requirement
}

Thanks

Team

0


Hey Kathrina Rivera

Can you please share the URL of your HC where you implemented this so that I can go through it and provide you the exact solution to your problem.

Thanks 

Pulkit

Team Diziana

0


サインインしてコメントを残してください。

お探しのものが見つかりませんか?

新規投稿