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

สวัสดีครับ นี้เป็น Part 5 Part สุดท้ายของซีรีย์ สร้าง Ghost Theme กันแล้วนะครับ สำหรับ Part นี้จะเป็นในส่วนของ Additional เสริมต่างๆ เช่น

การใส่ Disqus Comment, Facebook Comment, Google+ หรือ แม้แต่ Muut Comment
การใส่ Syntax Highlighter ให้กับโค๊ดของเรา เป็นต้น

สำหรับ Part อื่นๆ สำหรับผู้ที่ยังไม่ได้อ่าน เชิญอ่านตามลิงค์ข้างล่างครับ

Part 1 : Overview and Setup Ghost
Part 2 : Create Theme, Index, Post
Part 3 : Default Template & Partial
Part 4 : Navigation & Pagination
Part 5 : Additional (Comment System)
Source Code on Github

Disqus

สำหรับการใส่ Disqus Comment เริ่มแรก ต้องเข้าเว็บไซต์ https://disqus.com/admin/create/ เพื่อสร้าง Disqus ของเราขึ้นมาก่อน assume ว่ามีแล้วละกันนะครับ ไม่มีก็ไปสร้างเอานะ

Disqus

หากมีอยู่แล้ว เข้าไปก็อปโค๊ดในส่วน Universal Code จากหน้า https://your-blog-name.disqus.com/admin/settings/universalcode/ หรือใช้โค๊ดข้างล่างก็ได้ แต่อย่าลืมเปลี่ยนชื่อ disqus_shortname ด้วยละ

สร้างไฟล์ comment_disqus.hbs ขึ้นมาเซฟไว้ที่โฟลเดอร์ partials

1
<div class='row'>
2
  <div class='container'>
3
    <div class='col-md-12 text-center'>
4
      <div id='disqus_thread'></div>
5
      <script type='text/javascript'>
6
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var
7
        disqus_shortname = 'devahoy'; // required: replace example with your forum shortname var
8
        disqus_identifier = '{{post.id}}'; /* * * DON'T EDIT BELOW THIS LINE * * */ (function() {
9
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
10
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
11
        (document.getElementsByTagName('head')[0] ||
12
        document.getElementsByTagName('body')[0]).appendChild(dsq); })();
13
      </script>
14
      <noscript>Please enable JavaScript to view the
15
        <a href='http://disqus.com/?ref_noscript'>comments powered by Disqus.</a></noscript>
16
    </div>
17
  </div>
18
</div>

จากนั้นที่ไฟล์ post.hbs ก็แทรก comment ที่เราต้องการให้แสดงได้เลย ใส่ไว้หลังลูป {{/post}}

1
{{> comment_disqus}}

เมื่อเวลาเข้าหน้าโพส ก็จะเห็น Comment อยู่ที่ใต้บทความดังนี้

Disqus

Facebook

สำหรับการใส่ Facebook Comment ใช้วิธีคล้ายๆกัน คือ สร้างไฟล์ในโฟลเดอร์ partials ชื่อว่า comment_facebook.hbs จากนั้นเข้าไปหน้า Facebook Developer แล้วทำการ Get Code ออกมา

Fb Gen Code

เช่น

1
<div id='fb-root'></div>
2
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id))
3
  return; js = d.createElement(s); js.id = id; js.src =
4
  "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=1475043666088428&version=v2.0";
5
  fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
6

7
<div
8
  class='fb-comments'
9
  data-href='http://example.com/comments'
10
  data-numposts='5'
11
  data-colorscheme='light'
12
></div>

ทำการเปลี่ยน data-href เป็น Post URL จริงๆ และจัด div row และ container ให้ใหม่ รวมถึงเปลี่ยน appId เป็นไอดีของแอพตัวเองด้วยนะครับ ดังนี้

1
<div id='fb-root'></div>
2
<script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id))
3
  return; js = d.createElement(s); js.id = id; js.src =
4
  "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=1475043666088428&version=v2.0";
5
  fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
6

7
<div class='row'>
8
  <div class='container'>
9
    <div class='col-md-12 text-center'>
10
      <div
11
        class='fb-comments'
12
        data-href='{{@blog.url}}{{url}}'
13
        data-numposts='5'
14
        data-colorscheme='light'
15
      ></div>
16
    </div>
17
  </div>
18
</div>

{{@blog.url}}{{url}} : ส่วนนี้คือ Global Helper ที่ระบุ URL ของ Blog + Url ของ Post

ในหน้า post.hbs ก็แทรกโค๊ด {{> comment_facebook}} แทน {{> comment_disqus}} ได้เลย

เมื่อเวลาเข้าหน้าโพส ก็จะเห็น Comment อยู่ที่ใต้บทความดังนี้

Google Plus

สำหรับ Google Plus ก็สร้างไฟล์ comment_google_plus.hbs และใส่โค๊ดด้านล่างนี้ลงไปได้เลย

1
<script src='https://apis.google.com/js/plusone.js'>
2
</script>
3
<div class='row'>
4
  <div class='container'>
5
    <div class='col-md-12 text-center'>
6
      <div
7
        class='g-comments'
8
        data-href='{{@blog.url}}{{url}}'
9
        data-width='600'
10
        data-first_party_property='BLOGGER'
11
        data-view_type='FILTERED_POSTMOD'
12
      >
13
      </div>
14
    </div>
15
  </div>
16
</div>

เมื่อเวลาเข้าหน้าโพส ก็จะเห็น Comment อยู่ที่ใต้บทความดังนี้

Google

Syntax Highlight

และสำหรับ Blog ที่ออกแนว Geek หรือสำหรับพวก Developer/Prgrammer ก็มักชอบที่แทรกโค๊ดลงไปในบทความ ฉะนั้น ใน่สวนนี้ก็จะใช้ Syntax Highligh มาช่วย โดยจะใช้ highlight.js ทำการดาวน์โหลดไฟล์ จากนั้นแตกไฟล์ highlight.pack.js มาเซฟไว้ที่ assets/js และ style เลือกมาซักอย่าง เซฟไว้ที่ assets/css สำหรับผมเลือก github.css

เพิ่ม script ที่ไฟล์ default.hbs ดังนี้

1
<head>
2
  <!-- Github CSS -->
3
  <link href='{{asset "css/github.css"}}' ref='stylesheet' />
4
</head>
5
<body>
6

7
  <!-- highlight.js -->
8
  <script src='{{asset "js/highlight.pack.js"}}'></script>
9

10
  <!-- Custom Theme JavaScript -->
11
  <script src='{{asset "js/clean-blog.js"}}'></script>
12
</body>

จากนั้นเปิดไฟล์ assets/js/clean-blog.js ขึ้นมา ลบโค๊ดข้างในทั้งหมดทิ้งเลย (ในส่วน Contact Form ไมไ่ด้ใช้ ก็เลยไม่เอา) จากนั้นแทนที่ด้วยโค๊ดนี้

1
$('pre code').each(function (i, e) {
2
  hljs.highlightBlock(e)
3
})

จะได้เป็น

1
;(function ($) {
2
  'use strict'
3

4
  var MQL = 1170
5

6
  //primary navigation slide-in effect
7
  if ($(window).width() > MQL) {
8
    var headerHeight = $('.navbar-custom').height()
9
    $(window).on(
10
      'scroll',
11
      {
12
        previousTop: 0
13
      },
14
      function () {
15
        var currentTop = $(window).scrollTop()
16
        //check if user is scrolling up
17
        if (currentTop < this.previousTop) {
18
          //if scrolling up...
19
          if (currentTop > 0 && $('.navbar-custom').hasClass('is-fixed')) {
20
            $('.navbar-custom').addClass('is-visible')
21
          } else {
22
            $('.navbar-custom').removeClass('is-visible is-fixed')
23
          }
24
        } else {
25
          //if scrolling down...
26
          $('.navbar-custom').removeClass('is-visible')
27
          if (currentTop > headerHeight && !$('.navbar-custom').hasClass('is-fixed'))
28
            $('.navbar-custom').addClass('is-fixed')
29
        }
30
        this.previousTop = currentTop
31
      }
32
    )
33
  }
34

35
  //hightlight.js
36
  $('pre code').each(function (i, e) {
37
    hljs.highlightBlock(e)
38
  })
39
})(jQuery)

มีในส่วนของ Navigation Slide Effect ของ Clean-Blog อยู่ด้วย ส่วนนี้ไ่ม่ได้ลบครับ แค่แทรกส่วนของ highlight.js ในส่วนท้ายของโค๊ด

เป็นการกำหนดว่า เมื่อโหลด DOM เสร็จเรียบร้อยแล้ว ตัว highlight.js จะดูว่า มีแท็กอยู่ในรูปแบบ

1
<pre><code></code></pre>

หรือไม่ ถ้ามีมันก็จะ highlight ให้

หมดแล้ว สำหรับบทสอน Ghost Theme Development ทั้ง 5 ตอน หลังจากผ่านมา 5 ตอน ตอนนี้ Theme ของเรามีหน้าตาแบบนี้

Result

ต้องขอบคุณ Theme สวยๆ จากที่นี่ด้วย Start Bootstrap : Clean Blog

สุดท้าย หวังว่าจะได้เห็น Ghost Theme สวยๆ จากคนไทย ไปขายอยู่ใน Themeforest เยอะๆนะครับ :D Source Code ทั้งหมดอยู่ใน Github ไปดูได้ จะ Folk จะ Modified ได้ตามสะดวกเลยครับ

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

Table of Contents

Disqus

Facebook

Google Plus

Syntax Highlight

Chai Phonbopit

Related Posts

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

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

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