Lesson 8: Replace Top Articles with Featured Articles

In this lesson you'll learn how to make use of HelpDocs' Featured Articles functionality in the home page of your knowledge base. This is slightly different to including featured articles in your category pages, as you need to filter through all categories to find any featured articles.

Resources

Code Snippets

<!-- Home Page Featured Articles Section -->
{{#page "categories"}}
	<div class="row">
		<div class="col-xs-12 col-sm-10 col-md-10">
			<h4 class="featured-articles-label large-heading-text">
				{{i18n "featured" "Featured"}}
			</h4>	
		</div>
		{{#each meta.sidebar_categories}}
			{{#each this.articles}}
				{{#if this.is_featured}}
					<div class="col-xs-12 col-sm-6 col-md-4">
						<a class="card-link" href="{{this.relative_url}}">
							<div id="featured-article" class="card hvr-card">
								<div class="card-block">
									<h3 class="title">
										{{this.title}}
									</h3>
									<p class="card-description">{{this.description}}</p>
								</div>
							</div>
						</a>
					</div>
				{{/if}}
			{{/each}}
		{{/each}}
	</div>
{{/page}}

/* Featured Articles Header Style */
.featured-articles h4{
	text-transform:uppercase;
	color:#ffffff;
}

/* Featured Articles Section Style */
.featured-articles{
	background-color:#FFCD00;
}
.featured-wrapper{
	max-width:1000px;
	margin:0 auto;
	padding 5px 0 30px 0;
}