How do I increase the number of articles listed in the side nav on article pages above 10?

3 Commentaires

  • Ifra Saqlain
    Community Moderator

    Hey Noah,

    You can show all article in sidebar , just need to replace code on article page in sidebar:

    Remove;

      {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item" title="{{t 'see_more'}}">{{t 'see_more'}}</a>
    {{/if}}

     

    Add:

     {{#if section.more_articles}}
    <a href="{{article.url}}" class="sidenav-item" title="{{article.title}}">{{article.title}}</a>
    {{/if}}

     

    And when article list more than 20 than you can stop that by CSS code like :

    .sidebar:nth-child(2n + 4) { .... }

     

    Thank You

    Team

    1
  • Ifra Saqlain
    Community Moderator

    Okay, don't do that. Now you have to do it by calling API.

    Add this on your script file:( Add Jquery library first on your document_head.hbs file)

    $(document).ready(function() {

    $.getJSON("/api/v2/help_center/sections/{{section.id}}/articles.json", function(data) {

    var output = "";

    for (var i in data.articles) {

    output += "<li><a href = '" + data.articles[i].html_url + "' class='sidenav-item ";
    if (data.articles[i].id == {{article.id}}) {
    output += 'current-article'; }
    output += "'>" + data.articles[i].title + "</a></li>";

    }

    $("#section_articles").append(output);

    });
    });

     

     

    You have this code so remove this code

      {{#if settings.show_articles_in_section}}
    {{!-- sidebar/article_in_section_sidebar.hbs --}}
    <section class="section-articles collapsible-sidebar">
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'articles_in_section'}}</h3>
    <ul>
    {{#each section.articles}}
    <li>
    <a href="{{url}}" class="sidenav-item {{#is id ../article.id}}current-article{{/is}}" title="{{title}}">{{title}}</a>
    </li>
    {{/each}}
    </ul>
    {{#if section.more_articles}}
    <a href="{{section.url}}" class="article-sidebar-item">{{t 'see_more'}}</a>
    {{/if}}
    </section>
    {{/if}}

     

    Add this <ul> tag insidebar sidebar div

    <ul id="section_articles"></ul>

     

    Now all articles would be show so add css code as I post above for showing 20 articles.

    And you need add {{t 'see_more'}} helper and add function in script file so when you have more than 20 articles see more button will be shown and you click on that then all articles will be shown.

    If any issue let me know :)

     

    Thank You

    Team

     

    1
  • Noah

    Hi, many thanks for you assistance.

    I followed your advice, but the code you suggest deleting, only removes the 'See More' link at the bottom of the list and does not display more than 10 articles, plus the code you suggest adding creates a duplicate of the first list item being the article shown on the page.

    0

Vous devez vous connecter pour laisser un commentaire.

Réalisé par Zendesk