This plugin builds a navigation widget that conveniently groups content together based on the taxonomy configuration.
GroupWidget is a plugin for Grav.
This readme describes version 0.1.0.
The plugin gathers the links of all the content that matches with a taxonomy filter in the current page's header.
It creates a configurable HTML widget that lets one nagivate to the first, previous, next, last content.
Or a drop down menu that jumps directly into a specific content.
The widget layout is done with a partial twig template.
The included CSS styling fits well with the antimatter theme.
Your reasons for grouping content might be:
- A 7-day adventurous holiday diary where a blog per day gives access to the other descriptions.
- A sports blogger might group his point of view on a per club basis.
- A foodie who groups all the dessert experiments together.
- ...
This screen shot gives you an idea how this might look like:
Please open a new issue for defects or new functionality.
There's a manual install and update method by downloading
this plugin
and extracting all plugin files to </your/site>/grav/user/plugins/groupwidget.
Alternatively, Grav has a command line tool, bin/gpm to manage this plugin's life-cycle.
The plugin comes with a sensible and self explanatory default
plugin configuration (groupwidget.yaml),
a layout (templates/partials/groupwidget.html.twig)
and a styling (assets/css/groupwidget.css) for antimatter.
The partial twig needs integration into the theme.
A quick and dirty solution is to include this inside antimatter's item.html.twig template
(the template used for rendering a single blog content; see the added line 21):
<div class="blog-content-item grid pure-g-r">
<div id="item" class="block pure-u-2-3">
+ {% include 'partials/groupwidget.html.twig' %}
{% include 'partials/blog_item.html.twig' with {'truncate':false,'big_header':true} %}
</div>
<div id="sidebar" class="block size-1-3 pure-u-1-3">A cleaner way might be to tweak the blog_item.html.twig partial template.
Depending on whether it's part of a list view or not,
replace the rendering of the title with the whole navigation widget.
<a href="{{ page.header.link }}">{{ page.title }}</a>
</h2>
{% else %}
- <h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
+ {% if truncate %}
+ <h2><a href="{{ page.url }}">{{ page.title }}</a></h2>
+ {% else %}
+ {% include 'partials/groupwidget.html.twig' %}
+ {% endif %}
{% endif %}
{% if page.taxonomy.tag %}To group different content pages, add a GroupWidget header configuration to each content. Grav's build-in taxonomy with filtering and ordering is leveraged to group and sort the content.
Here's an extended configuration example:
taxonomy:
group: shiraz
category: blog
tag: [wine]
groupwidget:
built_in_css: true # use the build in style
controls: [ first, last, prev, next, label, menu] # enable all the widget's controls
number: 0010 # controls sorting order
filters:
group: shiraz # groups content on the wine grape type Shiraz
order:
by: header.groupwidget.number # sort on the groupwidget.number header configuration value
dir: desc # descending ordering (as opposed to asc)For using this filter, one needs to add group to the user/config/site.yaml's taxonomy.
All the content grouped under the shiraz banner, now needs a group: shiraz in their taxonomy header configuration.
The screenshot above was generated using these bogus content samples:
---
title: Grav with Windows 10
date: 19680916
taxonomy:
group: grav_dev
groupwidget:
filters:
group: grav_dev
order:
by: date
---
#
## Eternal rebooting with Microsoft <i class="fa fa-windows"></i>
All suits fling to Microsoft because ... blabla ...and
---
title: Grav with Apple
date: 20150115
taxonomy:
group: grav_dev
groupwidget:
filters:
group: grav_dev
order:
by: date
---
#
## Apple <i class="fa fa-apple"></i> plunders our wallets
Fashionistas show off with Apple because ... blabla ...Copyright 2015 Francis Meyvis.
Licensed for use under the terms of the MIT license.