มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 3 (Partials Template)

มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 1 : Overview
มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 2 : Custom Layout
มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 3 : Partials Template
มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 4 (จบ) : Deployment

หลักจากจบ Part 2 ไปแล้ว เราจะได้หน้า index แบบ Clean Blog แต่ว่ายังไม่มีหน้า Post รวมถึง ไฟล์ต่างๆ ก็ยังดูและจัดการค่อนข้างยาก สำหรับ Part 3 จะพูดถึง Partials Template ซึ่งจะช่วยให้เราแบ่งแยกไฟล์ต่างๆ ออกเป็นส่วนๆ เพื่อให้ง่ายต่อการเขียน เช่น แยกส่วน header, navbar, footer เป็นต้น

Partials Template

การใช้งาน Partials Template ใน Middleman ก็มี syntax ง่ายๆ ดังนี้

1
<%= partial "path/to/file" %>

ตัวอย่าง จะทำการสร้างโฟลเดอร์ใหม่ ขึ้นมาให้ชื่อว่า partials อยู่ภายในโฟลเดอร์ source และไฟล์ต่างๆ ที่เราต้องการจะแบ่งส่วน ก็จะเซฟไว้ในโฟลเดอร์นี้ เช่น partials/_header.erb , partials/_footer.erb เป็นต้น (ขึ้นต้นด้วย _)

คราวนี้ลองเปิดไฟล์ layout.erb ซึ่งไฟล์ยาวมากๆ แต่เราสามารถแบ่งส่วนมันได้ จนทำให้ตอนนี้ไฟล์ layout.erb เหลือแค่นี้

1
<%= partial "partials/header" %>
2

3
<body>
4

5
    <%= partial "partials/navbar" %>
6

7
    <%= yield %>
8

9
    <%= partial "partials/footer" %>
10
    <!-- jQuery -->
11
    <%= javascript_include_tag "jquery" %>
12
    <!-- Bootstrap Core JavaScript -->
13
    <%= javascript_include_tag "bootstrap.min" %>
14
    <!-- Custom Theme JavaScript -->
15
    <%= javascript_include_tag "clean-blog.min" %>
16

17
</body>
18

19
</html>

ส่วนอื่นๆ ก็จะถูกแยก ออกไปเซฟไว้แต่ละส่วน เพื่อให้ง่ายต่อการจัดการ เช่น

ไฟล์ partials/_header.erb

1
<!DOCTYPE html>
2
<html lang="en">
3

4
<head>
5

6
  <meta charset="utf-8">
7
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
8
  <meta name="viewport" content="width=device-width, initial-scale=1">
9
  <meta name="description" content="">
10
  <meta name="author" content="">
11

12
  <title>Clean Blog</title>
13

14
  <!-- Bootstrap Core CSS -->
15
  <%= stylesheet_link_tag 'bootstrap.min' %>
16

17
  <!-- Custom CSS -->
18
  <%= stylesheet_link_tag 'clean-blog.min' %>
19

20
  <!-- Custom Fonts -->
21
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
22
  <link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
23
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
24

25
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
26
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
27
  <!--[if lt IE 9]>
28
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
29
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
30
  <![endif]-->
31

32
</head>

ไฟล์ partials/_navbar.erb

1
<!-- Navigation -->
2
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
3
  <div class="container-fluid">
4
    <!-- Brand and toggle get grouped for better mobile display -->
5
    <div class="navbar-header page-scroll">
6
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
7
        <span class="sr-only">Toggle navigation</span>
8
        <span class="icon-bar"></span>
9
        <span class="icon-bar"></span>
10
        <span class="icon-bar"></span>
11
      </button>
12
      <a class="navbar-brand" href="index.html">Start Bootstrap</a>
13
    </div>
14

15
    <!-- Collect the nav links, forms, and other content for toggling -->
16
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
17
      <ul class="nav navbar-nav navbar-right">
18
        <li>
19
          <a href="/">Home</a>
20
        </li>
21
        <li>
22
          <a href="about.html">About</a>
23
        </li>
24
        <li>
25
          <a href="post.html">Sample Post</a>
26
        </li>
27
        <li>
28
          <a href="contact.html">Contact</a>
29
        </li>
30
      </ul>
31
    </div>
32
    <!-- /.navbar-collapse -->
33
  </div>
34
  <!-- /.container -->
35
</nav>

ไฟล์ partials/_footer.erb

1
<!-- Footer -->
2
<footer>
3
  <div class="container">
4
    <div class="row">
5
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
6
        <ul class="list-inline text-center">
7
          <li>
8
            <a href="#">
9
              <span class="fa-stack fa-lg">
10
                <i class="fa fa-circle fa-stack-2x"></i>
11
                <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
12
              </span>
13
            </a>
14
          </li>
15
          <li>
16
            <a href="#">
17
              <span class="fa-stack fa-lg">
18
                <i class="fa fa-circle fa-stack-2x"></i>
19
                <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
20
              </span>
21
            </a>
22
          </li>
23
          <li>
24
            <a href="#">
25
              <span class="fa-stack fa-lg">
26
                <i class="fa fa-circle fa-stack-2x"></i>
27
                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
28
              </span>
29
            </a>
30
          </li>
31
        </ul>
32
        <p class="copyright text-muted">Copyright &copy; Your Website 2014</p>
33
      </div>
34
    </div>
35
  </div>
36
</footer>

Index Page

ตอนนี้หน้า index.html.erb ก็จะมีการลิงค์ไปยัง Partials ชื่อว่า site_header.erb ดังนี้

1
---
2
pageable: true
3
per_page: 10
4
---
5

6
<%= partial "partials/site_header" %>
7

8
<div class="container">
9
  <div class="row">
10
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
11

12
      <% page_articles.each_with_index do |article, i| %>
13

14
        <div class="post-preview">
15
            <h2 class="post-title"><%= link_to article.title, article %></h2>
16
            <h3 class="post-subtitle"><%= article.summary %></h3>
17
          <p classs="post-meta">Posted by Author on <%= article.date.strftime('%B %d, %Y') %></p>
18
        </div>
19
        <hr>
20

21
      <% end %>
22

23
    </div>
24
  </div>
25
</div>
26

27
<hr>

ไฟล์ partials/_site_header.erb

1
<!-- Page Header -->
2
<!-- Set your background image for this header on the line below. -->
3
<header class="intro-header" style="background-image: url('images/home-bg.jpg')">
4
  <div class="container">
5
    <div class="row">
6
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
7
        <div class="site-heading">
8
          <h1>Clean Blog</h1>
9
          <hr class="small">
10
          <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
11
        </div>
12
      </div>
13
    </div>
14
  </div>
15
</header>

Create Post Template

ต่อมาทำหน้า Template สำหรับ Single Post โดยสร้างไว้ที่ partials/post.erb ดังนี้

1
<%= partial "partials/post_header" %>
2

3
<article>
4
  <div class="container">
5
    <div class="row">
6
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
7
        <%= current_article.body %>
8
      </div>
9
    </div>
10
  </div>
11
</article>

โดยเราสามารถเข้าถึง content ของ Post ได้ด้วย current_article.body

และไฟล์ partials/_post_header.erb เป็นดังนี้

1
<!-- Page Header -->
2
<!-- Set your background image for this header on the line below. -->
3
<header class="intro-header" style="background-image: url('/images/post-bg.jpg')">
4
  <div class="container">
5
    <div class="row">
6
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
7
        <div class="post-heading">
8
          <h1>Man must explore, and this is exploration at its greatest</h1>
9
          <h2 class="subheading">Problems look mighty small from 150 miles up</h2>
10
          <span class="meta">Posted by <a href="#">Start Bootstrap</a> on August 24, 2014</span>
11
        </div>
12
      </div>
13
    </div>
14
  </div>
15
</header>

Config.rb

ต่อมาทำการแก้ไขไฟล์ config.rb นิดหน่อย โดยตั้งค่าให้เป็น Pretty URLs

1
activate :directory_indexes

แก้ไขหน้า layout.erb

ทำการแก้ไขหน้า layout.erb อีกครั้ง เพื่อเช็คว่า หากเป็นหน้า Single Post ให้แสดง Post Template หากเป็นหน้า index ก็ให้แสดงไฟล์ index.html.erb

1
<% unless is_blog_article? %>
2
  <%= yield %>
3
<% else %>
4
  <%= partial "partials/post" %>
5
<% end %>

สุดท้าย เพื่อเรามีบทความหลายๆบทความ การจะเซฟไว้ที่โฟลเดอร์ source มันจะทำให้ดูรก ก็เลยสร้างโฟลเดอร์ใหม่ ขึ้นมาโดยเฉพาะ เพื่อเอาไว้จัดเก็บบทความทั้งหมด ผมตั้งชื่อให้มันว่า source/posts

นำไฟล์บทความทั้งหมด ย้ายไปไว้ในโฟลเดอร์นี้ และแก้ไข config.rb โดยแก้จาก

1
blog.sources = "{year}-{month}-{day}-{title}.html"

เป็น

1
blog.sources = "/posts/{year}-{month}-{day}-{title}"

สำหรับไฟล์ Part 3 สามารถดูได้ที่นี

มาหัดเขียนบล็อกด้วย Middleman ตอนที่ 3 (Partials Template)

Table of Contents

Partials Template

Index Page

Create Post Template

Config.rb

แก้ไขหน้า layout.erb

Chai Phonbopit

Related Posts

ตัวอย่างการใช้ Cookie Consent เพื่อรองรับ PDPA แบบง่ายๆ

อัพเดทเว็บอีกแล้ว v6.0 จาก Gatsby มา Next.js

แชร์วิธีการเพิ่ม Giscus Comment System ให้กับ Static Website