index & scss/blog: support article listing

This commit is contained in:
Kazhnuz 2018-10-24 15:28:39 +02:00
parent 1796246433
commit 2ceb6873be
4 changed files with 88 additions and 1 deletions

25
components/posts-list.php Normal file
View File

@ -0,0 +1,25 @@
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<article class="list-article" id="post-<?php the_ID(); ?>">
<aside class="list-article-thumbnail">
<?php the_post_thumbnail( ); ?>
</aside>
<div class="list-article-main">
<h2 class="list-article-title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>""><?php the_title(); ?></a></h2>
<div class="list-article-metadata">
<p class="categories">
<?php $category = get_the_category();
echo"<a href= '" . esc_url( get_category_link( $category[0]->term_id ) ) . "' class='badge badge-blue badge-category'>" . $category[0]->cat_name . "</a>"; ?>
</p>
<p class="author-time"><?php the_time('j F Y') ?> par <?php the_author() ?></p>
</div>
<div class="list-article-content"><?php the_excerpt(); ?></div>
</div>
</article>
<?php endwhile; ?>
<div class="navigation">
<?php the_posts_pagination(); ?>
</div>
<?php endif; ?>

View File

@ -1,6 +1,7 @@
<?php get_header(); ?>
<main class="col-md-9">
<h1 class="page-title"><i class="fa fa-fw fa-clock-o"></i> Articles récents</h1>
<?php include(TEMPLATEPATH . '/components/posts-list.php'); ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

View File

@ -153,3 +153,39 @@
margin-bottom:0.4em;
display:block;
}
/* 2.1.1 - Article list */
.list-article {
display: flex;
flex-direction: row;
&-thumbnail {
display: block;
padding-top: 0.35em;
max-width: 200px;
img {
max-width: 100%;
height: auto;
}
}
&-main {
padding-left:1em;
}
&-title {
font-family: Teko;
font-weight: 600;
margin-bottom: 0em;
a {
color: #444;
}
}
&-metadata {
display:flex;
justify-content: space-between;
}
&-content {
font-style: italic;
}
}

View File

@ -1307,3 +1307,28 @@ a.list-group-item:hover {
.card-preview time {
margin-bottom: 0.4em;
display: block; }
/* 2.1.1 - Article list */
.list-article {
display: flex;
flex-direction: row; }
.list-article-thumbnail {
display: block;
padding-top: 0.35em;
max-width: 200px; }
.list-article-thumbnail img {
max-width: 100%;
height: auto; }
.list-article-main {
padding-left: 1em; }
.list-article-title {
font-family: Teko;
font-weight: 600;
margin-bottom: 0em; }
.list-article-title a {
color: #444; }
.list-article-metadata {
display: flex;
justify-content: space-between; }
.list-article-content {
font-style: italic; }