BLOG PAGE
This sections in {Theme} show method of displaying the posts as a BLOG LIST.
HTML MARKUP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<div class="bg-1 section"> <div class="inner" data-topspace="75" style="padding-top: 75px; background-image: none;"> <div class="container"> <h3 class="hdr1">Blog Page</h3> <div class="blog-list"> <div class="row"> <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 blog-main"> <div class="inner"> {{#foreach posts}} <article class="blog-post blog-default-page {{post_class}}"> <h3 class="blog_title"><a href="{{url}}">{{{title}}}</a></h3> <div class="blog-thumbnail mbslider responsiveVideo"> <span class="ribbon_details"> <span class="ribbon_details_date">{{date published_at format="MMM"}} <br>{{date published_at format="DD"}}</span> <a href="{{url}}#disqus_thread" class="ribbon_details_comments"></a> </span> {{#if image}} <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a> {{else}} <a href="{{url}}" title="{{title}}">{{content words="0"}}</a> {{/if}} </div> <div class="meta_box"> <span class="meta_date">{{date published_at format="MMMM DD, YYYY"}}</span> <span class="meta_author">by <a href="{{author.website}}">{{author}}</a></span> {{#if tags}} <span class="meta_categories"> <i class="fa fa-tags"></i> {{tags separator=", "}} </span> {{/if}} </div> <div class="mbslider-source" style="display:none"> {{content}} </div> <p class="ct-excerpt"> {{excerpt words="60"}} {{!okresla liczbe slow wyswietlanych postow bez czytania dalej}} </p> <a href="{{url}}" class="btn btn-primary btn-sm btn-blog">read more</a> </article> <hr class="dashed-separator"> {{/foreach}} {{#if pagination}} {{{pagination}}} {{/if}} </div> <!-- / inner --> </div> </div> </div> </div> </div> </div> |
SCREENSHOT:
PAGINATION
To move between blog pages we are using pagination buttons:
HTML MARKUP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!--Pagination--> <!--this is essential for moving beetween the post--> <div class="text-center"> <ul class="pagination"> {{#if prev}} <li><a href="{{page_url prev}}#blog"><i class="fa fa-arrow-left"></i>Previous Page</a></li> {{else}} <li class="disabled"><a href="#blog"><i class="fa fa-arrow-left"></i>Previous Page</a></li> {{/if}} <li><a href="#">{{page}}</a></li> <li><a href="#">of </a></li> <li><a href="#">{{pages}}</a></li> {{#if next}} <li><a href="{{page_url next}}#blog">Next Page<i class="fa fa-arrow-right"></i></a></li> {{else}} <li class="disabled"><a href="#blog">Next Page<i class="fa fa-arrow-right"></i></a></li> {{/if}} </ul> </div> |
SCREENSHOT:
AUTOR PAGE
In {Theme} you can check all the information about the autor of the post like some short info about him and ammount of post he created.
HTML MARKUP:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
{{!< default}} <div class="bg-1 section"> <div class="inner" data-image="{{asset "images/bg-1.jpg"}}" data-scroll="scroll" data-topspace="75"> <div class="container"> <h3 class="hdr1">Autor Page</h3> <div class="blog-list"> <div class="row"> <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 blog-main"> <div class="inner"> {{#author}} <section class="author-profile inner"> {{#if image}} <figure class="author-image"> <div class="img author-box" style="background-image: url({{image}})"><span class="hidden">{{name}}'s Picture</span></div> </figure> {{/if}} <h1 class="author-title">{{name}}</h1> {{#if bio}} <h2 class="author-bio">{{bio}}</h2> {{/if}} <div class="author-meta"> {{#if location}}<span class="author-location icon-location">{{location}}</span>{{/if}} {{#if website}}<span class="author-link icon-link"><a href="{{website}}">{{website}}</a></span>{{/if}} <span class="author-stats"><i class="icon-stats"></i> {{plural ../pagination.total empty='No posts' singular='% post' plural='% posts'}}</span> </div> </section> <hr class="dashed-separator"> {{/author}} {{#foreach posts}} <article class="blog-post blog-default-page {{post_class}}"> <h3 class="blog_title"><a href="{{url}}">{{{title}}}</a></h3> <div class="blog-thumbnail mbslider responsiveVideo"> <span class="ribbon_details"> <span class="ribbon_details_date">{{date published_at format="MMM"}} <br>{{date published_at format="DD"}}</span> <a href="{{url}}#disqus_thread" class="ribbon_details_comments"></a> </span> {{#if image}} <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a> {{else}} <a href="{{url}}" title="{{title}}">{{content words="0"}}</a> {{/if}} </div> <div class="meta_box"> <span class="meta_date">{{date published_at format="MMMM DD, YYYY"}}</span> <span class="meta_author">by <a href="{{author.website}}">{{author}}</a></span> {{#if tags}} <span class="meta_categories"> <i class="fa fa-tags"></i> {{tags separator=", "}} </span> {{/if}} </div> <div class="mbslider-source" style="display:none"> {{content}} </div> <p class="ct-excerpt"> {{excerpt words="60"}} {{!okresla liczbe slow wyswietlanych postow bez czytania dalej}} </p> <a href="{{url}}" class="btn btn-primary btn-sm btn-blog">read more</a> </article> <hr class="dashed-separator"> {{/foreach}} {{! Previous/next page links - displayed on every page }} {{pagination}} </div> </div> </div> </div> </div> </div> </div> |
SCREENSHOT: