This project builds on the SinglePaged Jekyll template created by Tim O'Brien. It is created for the Center for Stem Cell Bioinformatics and may be re-used and adapted for own purposes.
Instead of all content being located in the _posts
directory and sorted & rendered out in one single page as in the original SinglePaged template, you must define your collections, including relevant metadata fields, in _config.yml and create a matching folder of content files (sorted by filename) for each. The name of the collection defined becomes the page's path (URL endpoint). Each content file must have a few parameters defined in the header which informs the style (background color), as well as which collection it is part of (slightly redundant). Each collection becomes a top-level menu item and page. Finally, must also then create a file, preferably but not mandatorily in the /pages/
directory, which has a permalink
parameter in its header which matches the collection name and includes this snippet: {% include full-page-template.html %}
To create an About 'SinglePaged' page and include in top menu:
-
In _config.yml, list
about
under thecollections
configuration option. Include any relevant metadata parameters such ascolor
(for color in top menu),order
(of which menu item appears in top menu), andtitle
(if collection name has spaces, which cannot be used in the label). -
Create & populate an
_about
folder with content files which havecollection : about
in the header, plus any metadata applicable to the SinglePaged template (title, colors, icon, etc.). -
Create about.html in the
pages/
directory (or elsewhere) with the following contents:--- permalink: about --- {% include full-page-template.html %}
-
If want to use a different layout or template instead of SinglePaged, simply replace the full-page-template include in about.html with own markup.
If need to create a plain page (not SinglePaged) with own HTML (or Markdown) layout, create it similarly to about.html
in example above but replace contents (perhaps with exception of wrapper-foot.html and wrapper-head.html) with own markup.
The default posts
collection is not used for the primary pages/sections and may be used for showing news or blog posts within other page/section templates, e.g. in some section or page content file:
{% for post in site.posts %}
<div class="news-post">
<h6>Posted on {{ post.date }}</h6>
{{ post.content }}
</div>
{% endfor %}