This script creates a list of specified blog categories (tags) with counts of the posts in the category
it is created using a combination of twig xtscript and javascript it is styled using Bootstrap (plus some custom javascript)
The Twig
Rename your
xtblog.twig to
blog.twig then create a new
xtblog.twig file and copy this code to it
some users may already have a 'template selector'
xtblog.twig so you can add this as a
{% elseif %} before the standard blog twig is included
{% if data.translations.t_no_entries_found == 'tcount' %}
<!--data-->{{data.entries|length}}<!--data-->
{%else%}
{%include ('blog.twig')%}
{%endif%}
Copy code The XtScript
There is no direct output from this script it can go anywhere in your pages code
The variable
$data holds a list of the tags you wish to use as categories separated by pipe symbols (
| )
The script creates the list of tag links and the javascript calls to insert the post counts
It also inserts the
active bootstrap class in the current item
<!--parser:xtscript-->
var $data = This|is|A|List|Of|Tags|Separated|By|Pipe|Symbols
get __xtblog_tag
var $path=<xt:url type="path" />
var $start=0
var $count=0
@loop
var $end=call strpos $haystack=$data|;$needle=|;$offset=$start
if not $end
goto @end
endif
var $item=call substr $val=$data;$start=$start;$length=($end-$start)
if $__xtblog_tag==$item
var $act=active
else
delete $act
endif
var $categories={{$categories
<a class="list-group-item $act" href="$path?__xtblog_tag=$item">$item <span class="pull-right"><button class="btn btn-default btn-xs" id="cat$count">0</button></span>}}
var $script={{$script
tagCount('$item','cat$count');}} ;
var $start=($end+1)
var $count=($count+1)
goto @loop
@end
<!--/parser:xtscript-->
Copy code The HTML
Put this where you wish the list to appear it uses bootstrap nav collapse to hide the panel on smaller screens and some custom javascript to switch the text on the open /close button
The actual list is inserted using a xtscript variable
{_$$categories|} <div class=" panel panel-default well well-sm">
<b>Categories</b>
<div class="pull-right">
<button id="but1" type="button" class=" btn btn-default btn-xs visible-xs" data-text-original="Open" data-text-swap="Close" data-target="#cats" data-toggle="collapse">Open</button>
</div>
</div>
<div class=" panel panel-default collapse navbar-collapse" style="padding:0" id="cats">
<div class="panel-body">
<div class="list-group clearfix " style="padding-right:0;margin-bottom:0" id="categories">{_$$categories|}</div>
</div>
</div>
Copy code The Javascript
This can go anywhere below the html
The first function switches the text on the open/close button (only shows on small screens)
The second function uses XHR javascript to retrieve the post counts for each tag
I used this method so that the blog calls will not cause conflicts as they are actually on a seperate page
<script async="async">
var button = document.getElementById('but1');
button.addEventListener('click', function() {
if (button.getAttribute('data-text-swap') == button.innerHTML) {
button.innerHTML = button.getAttribute('data-text-original');
} else {
button.setAttribute('data-text-original', button.innerHTML);
button.innerHTML = button.getAttribute('data-text-swap');
}
}, false);
function tagCount(tag,id){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
var content=this.responseText.split('<!--data-->');
document.getElementById(id).innerHTML = content[1];
}
}
xhttp.open('GET','/catdata?__xtblog_tag='+tag, true);
xhttp.send();
}
{_$$script|}
</script>
Copy code The XmlHttpRequest Data File
This is used to generate the post counts for each tag
add this to a blank text file named
catdata
(Only edit this file using the text editor) <html style="display:none">
<meta name="robots" content="noindex" />
<xt:blog entries_per_page="1000" t_no_entries_found="tcount" />
</html>
Copy code
Login
Graham