Design blog layouts

config.rb

@@ -17,7 +17,9 @@
 # page "/path/to/file.html", layout: false
 #
 # With alternative layout
-# page "/path/to/file.html", layout: :otherlayout
+page '/posts/*', layout: :post
+page 'blog.html', layout: :posts
+
 #
 # A path which all have the same layout
 # with_layout :admin do
@@ -35,6 +37,9 @@
 # Automatic image dimensions on image_tag helper
 activate :automatic_image_sizes
 
+# Pretty URLs
+activate :directory_indexes
+
 # Reload the browser automatically whenever files change
 activate :livereload
 
@@ -80,14 +85,11 @@
 
 # Blog
 activate :blog do |blog|
-  blog.sources = 'posts/{year}-{month}-{day}-{title}.html'
+  blog.sources = 'posts/{year}-{month}-{day}-{title}'
   blog.default_extension = '.md'
-  blog.permalink = '{title}.html'
-  blog.layout = 'blog'
+  blog.permalink = '{title}'
 end
 
-page 'posts/*', layout: :article
-
 activate :syntax
 set :markdown_engine, :redcarpet
 set :markdown, fenced_code_blocks: true, smartypants: true

source/assets/stylesheets/application.css.sass

@@ -9,7 +9,7 @@ hr.divider
   border-color: #BDC3C7
   width: 80%
   margin: 35px auto
-p, address
+p, address, article
   color: $base-font-color
   font-size: 1.225em
   line-height: 1.875em

source/blog.html.haml

@@ -1,6 +1,5 @@
-%h1 lab2023
-
+%section#posts
 - page_articles.each_with_index do |article, i|
-  %h2
+  %article
     %span= article.date.strftime('%d/%m/%y')
-    = link_to article.title, article, target: '_blank'
+    = link_to article.title, article

source/layouts/post.haml

@@ -0,0 +1,34 @@
+!!!5
+%html{lang: 'en', class: 'no-js'}
+  %head
+    %meta{charset: 'utf-8'}/
+    / Always force latest IE rendering engine or request Chrome Frame
+    %meta{content: 'IE=edge,chrome=1', 'http-equiv' => 'X-UA-Compatible'}/
+    %title= yield_content :title || 'lab2023'
+
+    = stylesheet_link_tag 'application', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'
+    = favicon_tag 'favicon.png'
+    = yield_content :head
+
+  %body#blog{class: @page || 'page', 'data-spy' => 'scroll', 'data-target' => '#navigation'}
+
+    BLOG LAYOUT
+
+    .container
+      .row
+        .col-lg-2
+          %h5= current_page.data.date
+        .col-lg-10
+          %article
+            %h1= current_page.data.title
+            = yield
+
+    %footer.footer
+      %h4 © 2014 LAB2023, INC.
+      %p The all designs, materials and contents trademarks of lab2023, inc.
+
+  / Javascripts
+  = yield_content :foot
+  = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
+                           '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js',
+                           'application'

source/layouts/posts.haml

@@ -0,0 +1,28 @@
+!!!5
+%html{lang: 'en', class: 'no-js'}
+  %head
+    %meta{charset: 'utf-8'}/
+    / Always force latest IE rendering engine or request Chrome Frame
+    %meta{content: 'IE=edge,chrome=1', 'http-equiv' => 'X-UA-Compatible'}/
+    %title= yield_content :title || 'lab2023'
+
+    = stylesheet_link_tag 'application', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css'
+    = favicon_tag 'favicon.png'
+    = yield_content :head
+
+  %body#blog{class: @page || 'page', 'data-spy' => 'scroll', 'data-target' => '#navigation'}
+
+    BLOG LAYOUT
+
+    .container
+      = yield
+
+    %footer.footer
+      %h4 © 2014 LAB2023, INC.
+      %p The all designs, materials and contents trademarks of lab2023, inc.
+
+  / Javascripts
+  = yield_content :foot
+  = javascript_include_tag '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
+                           '//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js',
+                           'application'

source/posts/2014-03-21-hello-world.md → source/posts/2008-03-21-hello-world.md

@@ -1,6 +1,6 @@
 ---
 title: "Hello World!"
-date: 2014-03-21
+date: 2008-03-21
 ---
 
 This is a sample post for design, test our new blog.