Edicy blog article pages fetcher
It is a jquery plugin that communicates with article api using AJAX and fetches list with pagination.
Example articles listing
Loading ...Code
Get jquery.articlePages.js from Github edicy-jsplugins.
Article box template for rendering one article box:
<script type="text/html" id="article-box-template"> <div class="article-box"> <div class="article-head"> <a href="[[url]]"> <span class="title">[[title]]</span> </a> <span class="date">[[date]]</span> </div> <div class="article-content"> <p>[[excerpt]]</p> <p>[[body]]</p> </div> </div> </script>
HTML used in example:
<style type="text/css"> .article-box, #page-numbers a { background: #def; padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; } #page-numbers a { padding: 5px; display: inline-block; margin-right: 5px; } #page-numbers a.active { background: #789; color: white; } </style> <div id="article-page-example"><!-- articles will be rendered here --></div> <span id="page-numbers"></span><!-- navigation controls --> <span id="loading-status">Loading ...</span> <!-- simple loding indicator -->
Javascript initiation:
NB! Current api does not return maximum number of articles or pages, so number of articles must be passed from template. on blog listing page it can be retrieved with liquid tag {{ articles.size }} as in example.
NB! Current api does not return maximum number of articles or pages, so number of articles must be passed from template. on blog listing page it can be retrieved with liquid tag {{ articles.size }} as in example.
<!-- plugin needs jQuery to work --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.articlePages.js"></script> <script type="text/javascript">
// initiates articles with 5 articles per page and $('#article-page-example').articlePages({ perPage: 5, nr_articles: {{ articles.size }} }); // geting pagelinks jQuery object and adding it into suitable dom element
$('#page-numbers').append($('#article-page-example').articlePages('getPageLinks')); // binding very simple loading indicator $('#article-page-example').on({ 'articles.loading': function() { $('#loading-status').html('Loading ...'); }, 'articles.loaded': function() { $('#loading-status').html(''); } }); </script>
Configuration
Available tempate replacement strings:
[[url]]: url of article
[[title]]: title of article
[[excerpt]]: article excerpt
[[date]]: date of article. defult format is (2013-11-01), but can be redefined in option dateFormat
[[author]]: author of article
[[body]]: the main article body
Available options on initiation:
$('#article-page-example').articlePages({ template: "#article-box-template", // element of template perPage: 10, // how many articles per page dateFormat: function(date) { // for formating date object into string return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate(); }, nr_articles: {{ articles.size }}, // maximum number of articles must be passed from template to get pagination numbers. if omitted numbers will not be displayed between navigation arrows pageId: 123, // if multiple blogs are present on site adding blog listing page here limits results to that blog tags: ["news", "releases"], // limits results to blog posts with given tags older: "older >", // older button text newer: "< newer" // newer button text });
Additional actions
jQueryElement.articlePages('prev'): navigates to previous older page
jQueryElement.articlePages('next'): navigates to next newer page
jQueryElement.articlePages('showPage', nr): navigates to page number "nr"
jQueryElement.articlePages('getPageLinks'): returns pagelinks jQuery object
jQueryElement.articlePages('getObject'): returns whole control object if ever needed