Sections and articles all in one page

8 Comments

  • Vladan Jovic
    Comment actions Permalink

    Hi Jaqueline, you should have only one category to achieve this look.
    After that you can even choose one of the default Zendesk theme with sections and articles on the home page.

    0
  • Jacob J Christensen
    Comment actions Permalink

    Wow that Twilio HC is nice!

    Would also like more details on how to go about setting up a Home page like that.

    1
  • Vladan Jovic
    Comment actions Permalink

    1. make all the content in just one category

    2. Paste this code on Home page (change design/home page)

    <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>

    Does it help? 

    5
  • Jaqueline Venturim
    Comment actions Permalink

    Yeeeeah!
    Now I just need change the colors and a little things of the UI.

    THANKS A MILLION

    0
  • Jennifer Rowe
    Comment actions Permalink

    Thanks for jumping in and helping out, Vladan!

    If you'd like to write this up and post it as a tip here, we'll send you swag. :)

    2
  • Jacob J Christensen
    Comment actions Permalink

    That's Awesome Vladan thanks!

    0
  • Frank
    Comment actions Permalink

    This is what I've been looking for! Thanks.

    How do I get the content to display in neat and responsive columns like on the Twilio site?

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

    At the moment it's just one long list when I use the code above.

    0
  • Vladan Jovic
    Comment actions Permalink

    Hey Frank, sorry for slow reply!

    Look of the columns is about CSS. You can try to add this at the end of your CSS file:

    .category-tree {
    display: flex;
    flex-wrap: wrap;
    text-align: left;
    }
    .category-tree>* {
    flex: 1 0 49%;
    text-align: left;
    }

    If you can provide me with a link to your Help Center I will be able to help more.

    0

Please sign in to leave a comment.

Powered by Zendesk