tek, thinks & la strada ☯ॐ☢ csmr@kapsi

First day on Nanoc 4

A quick look at a basic Nanoc 4 content doc, yml-header and using header values in a layout (template). A typical /content-file in Nanoc 4 has a yml -content at the beginning, between '---'.

For this post, its like:

title: "First day on Nanoc 4"
time: 15.12.2016
datetime: 2016-12-15T01:48:26+0200
html code here

Now, note the quotes around the title -string. For time, I just type whatever I want. For datetime, I use vim's strftime

:put =strftime('%FT%T%z')
- That outputs an ISO-timestring, from the function strftime (linux).

To use the values in the yml-field, inline ruby code is added, using erb -template tags <% commands here %>. For example, In layout/default.html for this page:

  <time datetime="<%= @item[:datetime] %>"><%= @item[:time] %></time>
  <h1><%= @item[:title] %></h1>
  <%= yield %>

You can see the result at the top of this very page: The time and title above are from the content-html's yml-header, the structure with article from the layout, and these text-paragraphs are placed where 'yield' is on the layout -template.

Showing source code in your site

The convetion with html5 is generally to use <pre>-tag for blocks of code, and <code<-tag for inline code, such as directories or commands. Css-styles are also needed for these:

article code, article pre {
  color: #dfb;
  white-space: pre-wrap;
article code {
  padding: 0.5em;
  margin: 0.25em;
  border: 1pt darkgreen solid;

Unless one uses a html-escaping or a syntax highlighting helper, there is yet another thing one needs to use to show html-code on a html page: escaping tags.i Replacing the literal html -tags with html-character entities, so that instead of functioning as html-structure in this document, they show up as just inline text-content. I do this simply by selecting the code in vim and:

- Naturally I have to do the same for all the '<' and the '&' in the command quoted above - replace them with '&lt;' and '&amp;' 8) for it to show correctly on the page. Which in turn in the source code of this paragraph are written as &lt;lt; and &amp;amp;, which in turn, recursively...

Copyright C. P. - Last Updated - All Rights Reserved - Ask permission to republish.