a couple days after the previous stroll, i repeated the stroll. this time, there's a lot of snow!
posts for january 6, 2017.
today, i've added two new plugins to nikola: sidebar and static tag cloud. these, together with filetreesubs, a doit-based file tree synchronization and text-based substitution tool, allow to use nikola to create a more dynamic-looking blog with a sidebar having current information, without the need to rebuild every single page every time something changes. (which can take a very long time for a large blog such as spielwiese).
the plugins create html fragments and, for the tag clouds, css files, which have to be included in all generated blog pages. one way to do this is to use javascript, but that wouldn't yield a proper static blog as i imagine it. the sidebar and the tag cloud should always be there, and not depend on javascript being enabled. (i for myself use noscript and javascript in my browser is off by default.)
for spielwiese, a small tag cloud is created (one per language) and included in the sidebar. a large tag cloud is created and included in the tag overview page (chde version). also, a small and large place cloud is created and included in the sidebar and place overview page, respectively.
the configuration for the static tag cloud plugin looks as follows:
RENDER_STATIC_TAG_CLOUDS = { # Small tag cloud 'small': { 'name': 'tcs-{0}', 'filename': 'tagcloud-{0}.inc', 'taxonomy_type': 'tag', 'style_filename': 'assets/css/tagcloud-{0}-small.css', 'max_number_of_levels': 15, 'max_tags': 40, 'minimal_number_of_appearances': 5, 'colors': ((0.4,0.4,0.4), (1.0,1.0,1.0)), 'background_colors': ((0.133, 0.133, 0.133), ), 'border_colors': ((0.2, 0.2, 0.2), ), 'font_sizes': (6, 20), 'round_factor': 0.6, }, # Large tag cloud 'large': { 'name': 'tcl-{0}', 'filename': 'tagcloud-{0}-large.inc', 'taxonomy_type': 'tag', 'style_filename': 'assets/css/tagcloud-{0}-large.css', 'max_number_of_levels': 100, 'minimal_number_of_appearances': 3, 'colors': ((0.25,0.25,0.25), (1.0,1.0,1.0)), 'background_colors': ((0.133, 0.133, 0.133), ), 'border_colors': ((0.2, 0.2, 0.2), ), 'font_sizes': (8, 35), 'round_factor': 0.3, }, # Small place cloud 'places-small': { 'name': 'pcs-{0}', 'filename': 'placecloud-{0}.inc', 'taxonomy_type': 'place', 'style_filename': 'assets/css/placecloud-{0}-small.css', 'max_number_of_levels': 15, 'max_tags': 40, 'minimal_number_of_appearances': 3, 'colors': ((0.4,0.4,0.4), (1.0,1.0,1.0)), 'background_colors': ((0.133, 0.133, 0.133), ), 'border_colors': ((0.2, 0.2, 0.2), ), 'font_sizes': (6, 20), 'round_factor': 0.6, }, # Large place cloud 'places-large': { 'name': 'pcl-{0}', 'filename': 'placecloud-{0}-large.inc', 'taxonomy_type': 'place', 'style_filename': 'assets/css/placecloud-{0}-large.css', 'max_number_of_levels': 100, 'minimal_number_of_appearances': 2, 'colors': ((0.25,0.25,0.25), (1.0,1.0,1.0)), 'background_colors': ((0.133, 0.133, 0.133), ), 'border_colors': ((0.2, 0.2, 0.2), ), 'font_sizes': (8, 35), 'round_factor': 0.3, }, }
the generated css file for the large tag cloud can be found here; the generated html fragments aren't uploaded as filetreesubs doesn't copy them to the output folder.
the configuration for filetreesubs looks as follows:
source: output-spielwiese destination: final-spielwiese # Substitutions substitutes: # For all HTML pages: include sidebar '.*\.html': '<!-- include:sidebar-en -->': file: sidebar-en.inc '<!-- include:sidebar-chde -->': file: sidebar-chde.inc # For specific pages, also include tag/place clouds 'tag/index.html': '<!-- include:tagcloud:en:large -->': file: tagcloud-en-large.inc 'place/index.html': '<!-- include:placecloud:en:large -->': file: placecloud-en-large.inc 'chde/schlagwort/index.html': '<!-- include:tagcloud:chde:large -->': file: tagcloud-chde-large.inc 'chde/ort/index.html': '<!-- include:placecloud:chde:large -->': file: placecloud-chde-large.inc # The substitution chains allow the sidebar to include # the small tag and place clouds. substitute_chains: - template: sidebar-en.inc substitutes: '<!-- include:tagcloud:en -->': file: tagcloud-en.inc '<!-- include:placecloud:en -->': file: placecloud-en.inc - template: sidebar-chde.inc substitutes: '<!-- include:tagcloud:chde -->': file: tagcloud-chde.inc '<!-- include:placecloud:chde -->': file: placecloud-chde.inc # Create index.html files in all folders which don't have one yet. create_index_filename: index.html create_index_content: | <!DOCTYPE html> <html lang="en"> <head> <title>there's nothing to see here.</title> <meta name="robots" content="noindex"> <meta http-equiv="refresh" content="0; url=.."> </head> <body style="background-color:black; color:white;"> <div style="position:absolute; top:0; left:0; right:0; bottom:0;"> <div style="width:100%; height:100%; display:table;"> <div style="display:table-cell; text-align:center; vertical-align:middle;"> there's nothing to see here. go <a href=".." style="color:#AAA;">here</a> instead. </div> </div> </div> </body> </html> # Everything is UTF-8. encoding: utf-8 # I want to be able to run different things in parallel. doit_config: dep_file: '.doit-spielwiese-subs.db'
this allows me to use html-style comments such as <!-- include:tagcloud:en --> to indicate where the html fragments should be included. i also create index files in foldes which otherwise would be empty, such as /photos/ (see here for how it looks). the result is, from my point of view, a much more polished version of the blog than the raw version produced by nikola without postprocessing.
this should give you an idea on how to produce a similar result with nikola, my plugins and filetreesubs.
on new year's day, we enjoyed a peaceful stroll through the nearby forest.
