* [New] add blog example to default theme

* [New] blog, sidebar post, and full-width post layouts
* [New] blog/ directory in content-sample with 2 posts demo'ing layout
This commit is contained in:
theshka 2015-11-29 13:40:53 -06:00
parent a484681e38
commit c6b86381f0
8 changed files with 179 additions and 0 deletions

7
content-sample/blog.md Normal file
View file

@ -0,0 +1,7 @@
---
Title: Blog Example
Description: Pico is a stupidly simple, blazing fast, flat file CMS.
Template: blog
---
<!-- All posts in the 'content-sample/blog' folder will be shown here...-->

View file

@ -0,0 +1,13 @@
---
Title: Post with Sidebar
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor.
Author: PicoCMS
Date: Dec 31 2015 11:59:59
Template: blog-post
---
This is `post1.md` in the `blog` folder.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.

View file

@ -0,0 +1,14 @@
---
Title: Post Full-Width
Description: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor.
Author: PicoCMS
Date: Jan 1 2016 12:00:00
Image: "http://placehold.it/1200x300&text=Blog+Image"
Template: blog-post-full
---
This is `post2.md` in the `blog` folder.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies tristique nulla et mattis. Phasellus id massa eget nisl congue blandit sit amet id ligula. Praesent et nulla eu augue tempus sagittis. Mauris faucibus nibh et nibh cursus in vestibulum sapien egestas. Curabitur ut lectus tortor. Sed ipsum eros, egestas ut eleifend non, elementum vitae eros. Mauris felis diam, pellentesque vel lacinia ac, dictum a nunc. Mauris mattis nunc sed mi sagittis et facilisis tortor volutpat. Etiam tincidunt urna mattis erat placerat placerat ac eu tellus. Ut nec velit id nisl tincidunt vehicula id a metus. Pellentesque erat neque, faucibus id ultricies vel, mattis in ante. Donec lobortis, mauris id congue scelerisque, diam nisl accumsan orci, condimentum porta est magna vel arcu. Curabitur varius ante dui. Vivamus sit amet ante ac diam ullamcorper sodales sed a odio.

View file

@ -0,0 +1,31 @@
{% include 'includes/htmlHead.twig' %}
{% include 'includes/head.twig' %}
<body>
{% include 'includes/nav.twig' %}
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-xs-12">
{% include 'includes/breadcrumb.twig' %}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="blog-post">
<h2 class="blog-post-title">{{ meta.title }}</h2>
<p class="blog-post-meta">
<i class="fa fa-calendar"></i> {{ meta.date }}
by <a href="{{ meta.author|link}}">{{ meta.author }}</a>
</p>
<hr>
{% if meta.image %}
<img src="{{ meta.image }}" class="img-responsive" alt="{{ meta.image }}" /><br>
{% endif %}
{{content}}
</div>
</div>
</div>
</div>
{% include 'includes/foot.twig' %}
</body>
{% include 'includes/htmlFoot.twig' %}

View file

@ -0,0 +1,34 @@
{% include 'includes/htmlHead.twig' %}
{% include 'includes/head.twig' %}
<body>
{% include 'includes/nav.twig' %}
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-xs-12">
{% include 'includes/breadcrumb.twig' %}
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="blog-post">
<h2 class="blog-post-title">{{ meta.title }}</h2>
<p class="blog-post-meta">
<i class="fa fa-calendar"></i> {{ meta.date }}
by <a href="{{ meta.author|link}}">{{ meta.author }}</a>
</p>
<hr>
{% if meta.image %}
<img src="{{ meta.image }}" class="img-responsive" alt="{{ meta.image }}" /><br>
{% endif %}
{{content}}
</div>
</div>
<div class="col-sm-3 col-sm-offset-1">
{% include 'includes/sidebar.twig' %}
</div>
</div>
</div>
{% include 'includes/foot.twig' %}
</body>
{% include 'includes/htmlFoot.twig' %}

30
themes/default/blog.twig Normal file
View file

@ -0,0 +1,30 @@
{% include 'includes/htmlHead.twig' %}
{% include 'includes/head.twig' %}
<body>
{% include 'includes/nav.twig' %}
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-sm-8">
{% for page in pages %}
{% if page.id starts with "blog/" %}
<div class="blog-post">
<h2 class="blog-post-title"><a href="{{ page.url }}">{{ page.title }}</a></h2>
<p class="blog-post-meta">
<i class="fa fa-calendar"></i> {{ page.date }}
by <a href="{{ page.author|link }}">{{ page.author }}</a>
</p>
{{ page.description|slice(0, 500) }}
</div>
<hr>
{% endif %}
{% endfor %}
</div>
<div class="col-sm-3 col-sm-offset-1">
{% include 'includes/sidebar.twig' %}
</div>
</div>
</div>
{% include 'includes/foot.twig' %}
</body>
{% include 'includes/htmlFoot.twig' %}

View file

@ -0,0 +1,5 @@
<!-- Breadcrumbs -->
<ol class="breadcrumb">
<li><a href="{{ "blog" | link }}">Blog</a></li>
<li class="active">{{ meta.title }}</li>
</ol>

View file

@ -0,0 +1,45 @@
<!-- Sidebar -->
<div class="sidebar-module">
<h4>Connect with {{ site_title }}</h4>
<ol class="list-unstyled">
{% if config.theme_config.social_media.github %}
<li>
<a href="https://github.com/{{config.theme_config.social_media.github}}">
<i class="fa fa-github fa-fw fa-2x"></i><span class="lead"> GitHub</span>
</a>
</li>
{% else %}
<li>
<a href="https://github.com/picocms/Pico.git">
<i class="fa fa-github fa-fw fa-2x"></i><span class="lead"> GitHub</span>
</a>
</li>
{% endif %}
{% if config.theme_config.social_media.facebook %}
<li>
<a href="https://facebook.com/{{config.theme_config.social_media.facebook}}">
<i class="fa fa-facebook fa-fw fa-2x"></i><span class="lead"> Facebook</span>
</a>
</li>
{% endif %}
{% if config.theme_config.social_media.twitter %}
<li>
<a href="https://twitter.com/{{config.theme_config.social_media.twitter}}">
<i class="fa fa-twitter fa-fw fa-2x"></i><span class="lead"> Twitter</span>
</a>
</li>
{% endif %}
</ol>
</div>
<div class="sidebar-module sidebar-module-inset">
<h4>About {{ site_title }}</h4>
{% if config.theme_config.about_us %}
<p>{{ config.theme_config.about_us }}</p>
{% else %}
<p>Pico is a stupidly simple, blazing fast, flat file CMS,
this means there is no administration backend or database
to deal with. You simply create `.md` files in the `content-sample`
folder and that becomes a page.</p>
{% endif %}
</div>