Changing the look-n-feel of the Archives page
I was not completely satisfied with the way the Archives looked within the design template I was using.
| Default layout | Desired layout |
|---|---|
 Default layout |
 Desired layout |
At first I had no idea if this would even be possible, but reading David’s post on Custom Metadata gave me the confidence it should be doable.
Custom metadata within each post document
To drive the information required on the archives page I have added to custom metadata variables to all of my posts, Month and Day. These variables can then be used within the template archive.html.
For this post the following variables are set.
Date: 2015-09-10 21:00
Month: September 2015
Day: 10
Permalink: changing-the-look-n-feel-of-the-archives-page
Tags: blot, styling, mustache, metadataFor all to be written posts I generate these headers using a TextExpander snippet, which makes it an easy task.
Modified archive view (archive.html)
<!DOCTYPE html>
<html>
{{> head}}
<body>
{{> header}}
<div class="container">
<div class="main">
<h1>Archives</h1>
<div>
{{#allEntries}}
<h2 class="archive">{{metadata.month}}</h2>
<span class="archive">{{metadata.day}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
{{/allEntries}}
</div>
{{> footer}}
</div>
</div>
</body>
</html>Additional CSS (styles.css)
/* Styling for the archive page */
h2.archive {
margin-bottom: 0px;
font-variant: small-caps;
}
span.archive {
font-size: medium;
font-weight: bold;
margin-left: 20px;
}
a.archive {
font-size: medium;
}Additional jQuery (scripts.js)
The following piece of jQuery loops through all h2-elements of class archive. When the content of the ‘h2’-element is equal to the previous one (i.e. the posts is within the same month) the element gets hidden.
// Handling of 'dividers' for archive page
var smd_divider = "";
$('h2.archive').each(
function(){
if ( smd_divider != $(this).text() ) {
smd_divider = $(this).text();
} else {
$(this).toggle();
}
}
);