Creating Separate Article and Question Topics in your Support Center

Last Updated -

Your Desk.com Help Center contains topics that can be used to display Articles, Questions, or Articles and Questions.

When customizing your Help Center, you may want to separate visually topics that contain Articles from topics that contain Questions.

This article demonstrates one layout for your Help Center Index page that accomplishes that design goal.


Steps to Build

  1. login to your Desk.com Admin site
  2. Visit the Channels > Help Center Section
  3. Make a new Template and title it "Separate Articles from QNA"
  4. Enter the Advanced Template Editor
  5. Replace or comment out the existing div having the class "content dashboard" and containing a loop of Topics
  6. Save and test this code to confirm that it does what you'd like

 


What you'll Need

  1. A Desk.com user having rights to edit Templates and/or Add Features (Administrator or Billing Adminstrator)
  2. Some knowledge of HTML and Liquid to customize your page
  3. A Desk.com site with the Help Center and Question Channel enabled
  4. At least two Knowledge Base topics (one with at least one article, and one with at least one question)

 


Liquid/HTML Code Snippet

This code does the following:

  • in a div, writes out a header and then prepares a table to hold the contents of a topic loop
  • using a for loop, checks to see if the article count of the topic is greater than 0, and if so, writes out HTML
  • uses the Cycle Liquid tag to create a two column layout within the table
  • in an additional table, does a similar loop and checks to see if the question count of the topic is greater than 0, and if so, writes out HTML
  • uses the Cycle Liquid tag to create another two column layout

 

 
 <div class='content dashboard'>
      <h3>Browse By Topic</h3>
   <!-- start center content topic listing -->  
    {% if topics_count > 0 %}
   <!-- write topics for article topics -->
      <table width='100%' cellspacing='0'>
       {% for topic in topics offset:1 %}
        {% if topic.article_count > 0 %}
{% cycle 'begin': '<tr><td>', '<td>' %} 
<div class='topic topic{{ topic.id }}'>
 <h4>{{ topic.name }}</h4>          
<h5 class='articles'>
 {{ topic.article_count }}
 {{ 'Article' | pluralize: topic.article_count }}
 <a href='{{ topic.public_articles_url }}'>View All</a>
</h5>
<ul>
{% for article in topic.articles limit:5 %}
<li>
<a href='{{ article.public_url }}'>{{ article.subject_plain | clip:40 }}</a>
</li>
{% endfor %}
</ul>
</div>
{% cycle 'endcolumn': '</td>', '</td></tr>' %} 
{% endif %}
{% endfor %}
      </table>
    <!--- end table for article topics -->
 
    <!--- start table for question topics -->
   {% if site.questions_enabled_config %}
    <table width='100%' cellspacing='0'>
       {% for topic in topics offset:1 %}
        {% if topic.question_count > 0 %}
        {% cycle 'begin': '<tr><td>', '<td>' %} 
        <div class='topic topic{{ topic.id }}'>
              <h4>{{ topic.name }}</h4>
                  <h5 class='questions'>
                    Recent Q&amp;A
                    <a href='{{ topic.public_questions_url }}'>View All</a>
                  </h5>
                  <ul>
                    {% for question in topic.questions limit:5 %}
                      {% if question.featured? %}
                        <li class='featured'>
                          <a href='{{ question.public_url }}'>{{ question.subject_plain | clip:40 }}</a>
                        </li>
                      {% else %}
                        <li>
                          <a href='{{ question.public_url }}'>{{ question.subject_plain | clip:40 }}</a>
                        </li>
                      {% endif %}
{% endfor %}
</ul>
            </div>
        {% cycle 'endcolumn': '</td>', '</td></tr>' %} 
          {% endif %}
        {% endfor %}
      </table>
 
{%endif%}
 
    <!--- end table for question topics -->
 
      {% else %}
        <h4>No topics are available.</h4>
      {% endif %}
  <!--end center content topic listing-->
 
    </div>