'See all # articles' shows for one subsection on a Section page, but not all
回答済みHello!
We've just added subsections to our custom theme, and are running into a problem. The 'See all # articles' link appears only for one subsection:
I can't seem to figure out how to make the 'See all # articles' link appear for the other sections. Anyone know how to do this?
Here's the code from the Section page if it helps:
<section class="section hero">
<div class="hero-bg"></div>
<div class="hero-inner">
<div class='search-title'>{{dc 'search_title'}}</div>
{{search submit=false instant=true class='search search-full' placeholder='Start your search here...'}}
</div>
</section>
<div class="container">
<nav>
{{breadcrumbs}}
</nav>
</div>
<div class="container" id="articles">
<div class="section-container">
<section class="section-content">
<header class="page-header header-categories">
<h1>{{section.name}}</h1>
</header>
{{#if section.description}}
<p class="category__description">{{section.description}}</p>
{{/if}}
{{#if section.articles}}
<ul class="article-list">
{{#each section.articles}}
<li class="article-list__item">
<a class="article-list__link" href="{{url}}">
<div class="article-list__item-icon"><img src={{asset 'zendesk_article.svg'}} alt="{{t 'icon'}}"></div>
<div class="article-list__item-content">
<div class="article-list__item-title">{{title}}</div>
</div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<i class="section-empty">
</i>
{{/if}}
{{#if section.sections}}
<div class="section-tree">
{{#each section.sections}}
<section class="section-content">
<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 class="article-list__link" href="{{url}}">
<div class="article-list__item-icon"><img src={{asset 'zendesk_article.svg'}} alt="{{t 'icon'}}"></div>
<div class="article-list__item-content">
<div class="article-list__item-title">{{title}}</div>
</div>
</a>
</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}}
{{/if}}
{{pagination}}
</div>
-
Faile Lundberg your code is okay. Did your all sections have large number of articles like - your one section have more than 3 - 4 articles so there is showing ' See all ' but other sections have only 2 or may be only 3 articles.
When your other sections have more than 3 or 4 ( as per the screenshot) then 'See all ' link would be show automatically.
So, first thing is increase article number in other sections and test if not resolve then let me know :)
And screenshot is Category page not Sections page. There is showing all sections with articles. Test it on Section Page.
Team
-
Yes, at least one of the subsections has 5 articles in it and should be showing the 'See All Articles' link but doesn't.
Also, I supplied a screenshot of the Khan Academy Districts section page, where I'm having the trouble. Just in case I gave you the wrong code, here it is again for that page:
<section class="section hero">
<div class="hero-bg"></div>
<div class="hero-inner">
<div class='search-title'>{{dc 'search_title'}}</div>
{{search submit=false instant=true class='search search-full' placeholder='Start your search here...'}}
</div>
</section>
<div class="container">
<nav>
{{breadcrumbs}}
</nav>
</div>
<div class="container" id="articles">
<div class="section-container">
<section class="section-content">
<header class="page-header header-categories">
<h1>{{section.name}}</h1>
</header>
{{#if section.description}}
<p class="category__description">{{section.description}}</p>
{{/if}}
{{#if section.articles}}
<ul class="article-list">
{{#each section.articles}}
<li class="article-list__item">
<a class="article-list__link" href="{{url}}">
<div class="article-list__item-icon"><img src={{asset 'zendesk_article.svg'}} alt="{{t 'icon'}}"></div>
<div class="article-list__item-content">
<div class="article-list__item-title">{{title}}</div>
</div>
</a>
</li>
{{/each}}
</ul>
{{else}}
<i class="section-empty">
</i>
{{/if}}
{{#if section.sections}}
<div class="section-tree">
{{#each section.sections}}
<section class="section-content">
<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 class="article-list__link" href="{{url}}">
<div class="article-list__item-icon"><img src={{asset 'zendesk_article.svg'}} alt="{{t 'icon'}}"></div>
<div class="article-list__item-content">
<div class="article-list__item-title">{{title}}</div>
</div>
</a>
</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}}
{{/if}}
{{pagination}}
</div> -
Okay, can you share the URL of your HC then I can figure out the issue?
-
Hi Ifra Saqlain, I'm sorry for the very late response! We're still seeing it happen here: https://support.khanacademy.org/hc/en-us/sections/360005900772-Khan-Academy-Districts and pretty much in any section that has more than 3 articles.
It's a restricted section, but if you can view it, here's another example: https://support.khanacademy.org/hc/en-us/sections/200500984-Khan-Academy-Guardians
Thanks for your help!
-
Hey Faile Lundberg,
I figure it out that it's due to your custom code. You can do one thing if you like:
You can do this, of course your UI would be change but it would be nice than this current bug.
Remove code:
{{#if more_articles}}
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>
{{/if}}
and add
only
<a href="{{url}}" class="see-all-articles">
{{t 'show_all_articles' count=article_count}}
</a>There are Zendesk default functionality that after 5 articles , see_All link would be show.
Yes, you can add a external link <a href="#" class="see_all">{{t 'show_all_articles' count=article_count}}</a>
and add some JS code and CSS code for hiding the articles after showing 3 articles and when click on see all button all articles would be show. That's little tricky :)
Thanks
-
That worked perfectly, thank you Ifra Saqlain!
-
Yippppi :D
サインインしてコメントを残してください。
7 コメント