สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 3

วันนี้มาต่อเรื่อง สอนทำ Theme Ghost เพื่อขายบน Themeforest ใน Part ที่ 3 ครับ สำหรับ Part 3 จะมาพูดถึงเรื่อง Default Template และ Partial กัน

หลังจากก่อนหน้านี้ เราสามารถ ทำ Index และ Post ได้แล้ว หากใครยังไม่เคยอ่าน Part ก่อนๆ แนะนำให้อ่านก่อนครับ จากลิงค์ข้างล่างเลย

Default Template

มาต่อกันเลย จะเห็นว่า ทั้ง Index และ Post จะมีส่วน Head และ Footer ที่เหมือนกัน ทำไมเราไม่ทำให้มันจัดการง่ายๆ โดยการใช้ Default Template ละ

อย่างที่ได้พูดไว้ใน Part 1 ว่า Default Template หรือตัว Base Template มันเป็นเหมือนคล้ายๆ Blue Print หรือเราวางโครงสร้างไว้ละ ว่า Template นี้มี Header แบบนี้นะ มี Footer แบบนี้นะ แต่สิ่งที่อยากให้มันต่างกันก็คือ ในส่วนของ content โดยการใช้แท็ก {{{body}}} เพื่อบอกให้รู้ว่า ไฟล์ไหน ที่คุณจะมาใช้ Default Template โค๊ดทั้งหมดในไฟล์นั้น จะถูกแทนที่ด้วย {{{body}}} และ ไฟล์ไหนที่จะใช้ Default Template ก็จะต้องกำหนด {{!< default}} ไว้ที่บรรทัดบนสุดของไฟล์ด้วย

ฉะนั้น เราย้ายมันไปไว้ที่ไฟล์ default.hbs เลยครับ จะได้ไฟล์ default.hbs เป็นดังนี้

1
<!DOCTYPE html>
2
<html lang="en">
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1" />
7
    <meta name="description" content="{{meta_description}}" />
8
    <meta name="author" content="" />
9

10
    <title>{{meta_title}}</title>
11

12
    <!-- Bootstrap Core CSS -->
13
    <link href="{{asset "css/bootstrap.min.css"}}" rel="stylesheet">
14

15
    <!-- Custom CSS -->
16
    <link href="{{asset "css/clean-blog.min.css"}}" rel="stylesheet">
17

18
    <!-- Github CSS -->
19
    <link href="{{asset "css/github.css"}}" ref="stylesheet">
20

21
    <!-- Custom Fonts -->
22
    <link
23
      href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
24
      rel="stylesheet"
25
      type="text/css"
26
    />
27
    <link
28
      href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
29
      rel="stylesheet"
30
      type="text/css"
31
    />
32
    <link
33
      href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
34
      rel="stylesheet"
35
      type="text/css"
36
    />
37
  </head>
38
</html>

ที่นี้ไฟล์ด้านบน มันยังไม่เป็น Helper เท่าไหร่ ก็จัดการเพิ่มให้มัน ดังนี้ (โค๊ดข้างล่างผมย่อมาจากข้างบนนะครับ อยากเช่นในแท็ก footer ก็จะเหลือแค่

1
<footer>...</footer>

ต่อมา

1
<head>
2
    ...
3
    <meta name="description" content="{{meta_description}}">
4
    <title>{{meta_title}}</title>
5
    ...
6
    {{ghost_head}}
7
</head>
8

9
<body>
10

11
    <!-- Navigation -->
12
    <nav>
13
        ....
14
    </nav>
15

16
    {{{body}}}
17

18
    <!-- Footer -->
19
    <footer>
20
        ...
21
    </footer>
22

23
    {{ghost_foot}}
24

25
    <!-- jQuery -->
26
    <!-- Javascript -->
27
</body>
28
</html>

จากโค๊ดด้านบน

{{meta_title}} : แสดง Title ของ Post เป็น Title ของ Browser
{{meta_description}} : แสดง description ในแท็ก meta
{{ghost_head}} : ใส่ไว้ก่อน ปิดแท็ก </head> เป็นฟังค์ชันของ Ghost เพื่อเอาไว้แสดง script, style และ meta tags. ตัว Ghost จะ generate พวก rss, rel="canonical" เป็นต้น
{{ghost_foot}} : ใส่ไว้ก่อนปิดแท็ก </body> และก่อนใช้งาน javascript ของเรา ส่วนนี้ Ghost จะเอาไว้เรียกใช้ jquery หากเรามี jquery อยู่แล้ว ก็ไม่จำเป็นต้องเรียก Helper นี้ก็ได้
{{{body}}} : สำคัญสุดเลย Template ไหนที่มีการเรียกใช้หน้า Default มันก็จะเอาของหน้านั้น มาใส่ใน tag {{{body}}} นี้แหละ (สังเกตว่าต้องเป็น { 3 ตัวนะครับ ไม่ใช่ 2 ตัว)

ทีนี้เมื่อได้หน้า default.hbs แล้ว ต่อไป ก็แก้หน้า index.hbs ใ้ห้มันทำการใช้ default.hbs เป็น Default Template ซะ โดยเพิ่ม

1
{{!< default}}

ไว้ที่บรรทัดบนสุดของไฟล์เลย และทำการแก้ไขหน้า post.hbs ด้วยเช่นกัน

สุดท้าย ตอนนี้หน้า index.hbs และหน้า post.hbs ของเราก็จะเหลือโค๊ดสั้นๆแค่นี้ (จริงๆยังสั้นได้อีก ด้วยการใช้ Partial เอาไว้พูดในหัวข้อถัดไป)

index.hbs

1
{{!< default}}
2

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

19
<!-- Main Content -->
20
<div class='container'>
21
  <div class='row'>
22
    <div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
23

24
      {{#foreach posts}}
25
        <div class='post-preview'>
26
          <a href='{{url}}'>
27
            <h2 class='post-title'>{{title}}</h2>
28
            <h3 class='post-subtitle'>{{excerpt character='80'}}</h3>
29
          </a>
30
          <p classs='post-meta'>Posted by {{author}} on {{date format='MMMM DD, YYYY'}}</p>
31
        </div>
32
        <hr />
33
      {{/foreach}}
34

35
      <!-- Pager -->
36
      <ul class='pager'>
37
        <li class='next'>
38
          <a href='#'>Older Posts &rarr;</a>
39
        </li>
40
      </ul>
41
    </div>
42
  </div>
43
</div>
44

45
<hr />

ไฟล์ post.hbs

1
{{!< default}}
2

3
{{#post}}
4
  <header class='intro-header' style="background-image: url('{{asset "img/home-bg.jpg"}}')">
5
    <div class='container'>
6
      <div class='row'>
7
        <div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
8
          <div class='post-heading'>
9
            <h1>{{title}}</h1><h2 class='subheading'>{{excerpt words='20'}}</h2>
10

11
            <span class='meta'>Posted by {{author}} on {{date format='MMMM DD, YYYY'}}</span>
12
            <span class='meta'>{{tags separator=' | ' prefix='Tagged in:'}}</span>
13

14
          </div>
15
        </div>
16
      </div>
17
    </div>
18
  </header>
19

20
  <article>
21
    <div class='container'>
22
      <div class='row'>
23
        <div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
24
          {{content}}
25
        </div>
26
      </div>
27
    </div>
28
  </article>
29

30
  <hr />
31
{{/post}}

Partial

ต่อมาดูเรื่อง Partial กันครับ, Partial นั้นเป็น Handlebars Template โดยการทำการจะคล้ายๆกับกรณีของ default.hbs ต่างกันที่เราทำ Template ขึ้น 1 อัน จาก จากนั้นเวลาจะใช้ Template นี้ ก็แทรกลงไปที่ส่วนที่เราต้องการเลย

วิธีการก็คือ เริ่มต้น ทำการสร้างโฟลเดอร์ partials ขึ้นมาใน Theme ของเรา แบบนี้

Add Partials

ต่อมา เราสร้างไฟล์ header_index.hbs ในโฟลเดอร์ partials ดังนี้

1
<!-- Page Header -->
2
<!-- Set your background image for this header on the line below. -->
3
<header class='intro-header' style="background-image: url('assets/img/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>

แล้วไฟล์ index.hbs ตรงส่วน header ที่เราก็อปมาไว้ header_index.hbs ก็เหลือแค่นี้

1
{{> header_index}}

แท็ก {{> file_name}} คือเพื่อมองหาไฟล์ และเรียกใช้ไฟล์ในโฟลเดอร์ partials

การเพิ่ม folder partials จำเป็นต้อง restart server ใหม่นะครับถึงจะเห็นการเปลี่ยนแปลง

เช่นเดียวกัน ทำแบบนี้กับหน้า post.hbs โดยก็อปในส่วน header ไปเซฟไว้ในไฟล์ header_post.hbs

1
<header class='intro-header' style="background-image: url('{{asset "img/home-bg.jpg"}}')">
2
  <div class='container'>
3
    <div class='row'>
4
      <div class='col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1'>
5
        <div class='post-heading'>
6
          <h1>{{title}}</h1><h2 class='subheading'>{{excerpt words='20'}}</h2>
7

8
          <span class='meta'>Posted by {{author}} on {{date format='MMMM DD, YYYY'}}</span>
9
          <span class='meta'>{{tags separator=' | ' prefix='Tagged in:'}}</span>
10

11
        </div>
12
      </div>
13
    </div>
14
  </div>
15
</header>

และตรงส่วน header ในไฟล์ post.hbs ถูกแทนที่ด้วย

1
{{> header_post}}

จะเห็นว่า โค๊ดของเรา เริ่มมีการจัดระเบียบ เป็นหมวดหมู่ง่ายต่อการแก้ไข พัฒนามากขึ้น ต่อไปดูที่ไฟล์ default.hbs มีส่วน navigation และ footer ที่ดูแล้ว น่าจะแยก template ออกมาอีก ก็เลยจัดการเพิ่ม ไฟล์ navigation.hbs และ footer.hbs ในโฟลเดอร์ partials เข้าไป

ไฟล์ navigation.hbs

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
7
        type='button'
8
        class='navbar-toggle'
9
        data-toggle='collapse'
10
        data-target='#bs-example-navbar-collapse-1'
11
      >
12
        <span class='sr-only'>Toggle navigation</span>
13
        <span class='icon-bar'></span>
14
        <span class='icon-bar'></span>
15
        <span class='icon-bar'></span>
16
      </button>
17
      <a class='navbar-brand' href='index.html'>Start Bootstrap</a>
18
    </div>
19

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

ไฟล์ footer.hbs

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>

ตอนนี้สังเกตว่าไฟล์ default.hbs ของเราในส่วน body นั้น clean และสะอาดมากขึ้น เวลาเราจะแก้ส่วนไหน ก็ไปเปิดไฟล์ใน partials ได้ประโยชน์ทั้งความเป็นระเบียบ และรู้ว่า หากแก้ไขแล้วมี error ก็จะรู้ว่ามาจากไฟล์นี้

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

6
<head>
7
    {{ghost_head}}
8
</head>
9
<body>
10

11
{{> navigation}}
12

13
{{{body}}}
14

15
{{> footer}}
16

17
{{ghost_foot}}
18

19
<!-- Bootstrap Core JavaScript -->
20
<script src="{{asset "js/bootstrap.min.js"}}"></script>
21

22
<!-- Custom Theme JavaScript -->
23
<script src="{{asset "js/clean-blog.min.js"}}"></script>
24
</body>

โอเค สำหรับเรื่อง Default Template และ Partial ก็มีแค่นี้ครับ แต่ยังเห็นว่า Theme ของเรายังมีหลายๆส่วนที่ยังไม่ได้แก้ไข เช่น ตรงส่วน Navigation ยังเป็นชื่อ Start Bootstrap หรือ menu ยังลิงค์ไปไม่ถูกต้อง ใน Part 4 เราจะมาพูดถึงเรื่องเหล่านี้กันครับ ติดตามอ่านได้ในวันพรุ่งนี้ :D

สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 3

Table of Contents

Default Template

Partial

Chai Phonbopit

Related Posts

สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 5 (ตอนสุดท้าย)

สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 4

สอนสร้าง Theme Ghost เพื่อไปขาย Themeforest ตอนที่ 2