Tip: Displaying Subsection list on Category page

8 Comentários

  • Brett - Community Manager
    Ações de comentário Permalink

    This is fantastic.

    Thanks for sharing Amy :)

    0
  • Rebecca McMurry
    Ações de comentário Permalink

    I am confused where to put that code snippet. Do I paste the snippet after the first {{/if}} or the second? Wherever I seem to paste it I keep getting the error: "{{ `else` }} .. is not permitted in this context" on that last {{else}}.

    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}
    {{else}}
    <p>
    <i class="section-empty"><a href="{{url}}">{{t 'empty'}}</a></i>
    </p>
    {{/if}}
    </section>
    {{else}}

    0
  • Amy Gracer
    Ações de comentário Permalink

    Hi Rebecca,

    I have since changed my code around a bit. 

    I suggest you delete the offending {{else}} and see if it allows you to publish. 

    If not, please take a look at my updated code below, starting from the section-content (beneath the section description). 

    Please let me know how this works for you. I will also review the Tip above and modify the code if needed. 

    Hope this helps....


    {{#if section.articles}}

    <ul class="article-list">

    {{#each section.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>

    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>

    {{/each}}
    </ul>
    {{/if}}


    {{pagination}}

    <div class="section-tree">
    {{#each section.sections}}

    <section class="section">
    <h3 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
    </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>

    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>

    {{/each}}
    </ul>

    {{#if more_articles}}
    <a href="{{url}}" class="see-all-articles">
    {{t 'show_all_articles' count=article_count}}
    </a>
    {{/if}}


    {{/if}}

    </section>

    {{/each}}



    </div>

    </section>
    </div>
    </div>

     

    0
  • Heather Firth
    Ações de comentário Permalink

    I've tried all this and it isn't working at all.

    I keep getting "not possible to access 'section' in 'section.articles'

    0
  • Heather Firth
    Ações de comentário Permalink

    OK. So I figured this out.

    On your category_page.hbs template you need to find this bit of code:

    <div class="section-tree">
    {{#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>

    and directly underneath it paste this bit of code:

    {{#if sections}}
    <ul class="section-list">
    {{#each sections}}
    <li class="section-list-item">
    <a href="{{url}}" class="section-tree-title">{{name}}</a>
    {{#if internal}}
    <span class="icon-lock" title="{{t 'internal'}}"></span>
    {{/if}}
    </li>
    {{/each}}
    </ul>
    {{/if}}

     

    I then played around with the style.css and added this:

    .article-list {
    margin-left: 30px !important;
    }

    .section-list-item {
    border-bottom: 1px solid #ddd;
    font-size: 16px;
    padding: 15px 0;
    }

    .section-list-item a {
    color: $text_color;
    }

     

    .section-list-item:before {
    content: '\002B';
    margin:0 5px 0 -15px;
    color: #d40054;
    }

    .section-list {

    list-style-type: none;
    padding-left: 18px;

    text-align: left;

    }

    You can use this site to find the character that you want to appear in front of your sections and articles:https://www.compart.com/en/unicode/category/So

     

    0
  • Amy Gracer
    Ações de comentário Permalink

    @Heather. Thank you! I will look into what you have, compare to my implementation, and update article as necessary. I'm sorry you ran into some trouble with it the first time around, but glad you got it working well!

    1
  • Brett - Community Manager
    Ações de comentário Permalink

    Thanks for sharing your fix Heather :) 

    0
  • Amy Gracer
    Ações de comentário Permalink

    @Heather and @Brett, I updated the article to match my live site. I made quite a few changes between when I published this tip an when we went live last month.

    0

Por favor, entrar para comentar.

Desenvolvido por Zendesk