Tìm hiểu template của Blogspot

( Nguồn : blog.duypham.info

Blogspot không có nhiều tiện ích đi kèm và muốn có thêm những tính năng mới thì chúng ta cần chỉnh sửa trong template. Vấn đề ở đây là đặt vào vị trí nào cho hợp lý? Template của Blogspot rất nhiều, cùng với một thủ thuật nhưng có thể người này áp dụng dễ dàng còn người khác lại gặp khó khăn với template của mình? Bởi việc áp dụng một cách thụ động các thủ thuật đã dẫn đến tình trạng như vậy. Cho dù có nhiều template khác nhau nhưng chạy trên blogspot thì những đoạn mã cơ bản nhất chúng vẫn giống nhau. Một thủ thuật hoạt động được trên template này thì cũng sẽ hoạt động được trên template khác. Trước tiên muốn có thêm tính năng cho template của mình thì bạn cần phải hiểu rõ template đó đã.

Template của Blogspot là file XML, vậy XML là gì? XML viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể mở rộng) là một bộ qui luật về cách chia một tài liệu ra làm nhiều phần, rồi đánh dấu và ráp các phần khác nhau lại để dễ nhận diện chúng.

Qui luật về cách chia một tài liệu ra làm nhiều phần: nó được định nghĩa ở trong template, đây cũng là điểm khiến XML linh hoạt hơn HTML.
Đánh dấu và ráp các phần khác nhau lại: cái này được xử lý ở máy chủ của Blogger.
Nhận diện chúng: chính là hiển thị của blog trên trình duyệt.

Dưới đây là mô phỏng vắn tắt một template Blogspot:

<?xml version="1.0" encoding="UTF-8" ?>     <!-- định nghĩa XML -->
<!DOCTYPE html>     <!-- định nghĩa doctypes -->
<html ...>
<head>
...
<b:skin>
...
</b:skin>
</head>
<body>

<div ...>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>

...

</div>

</body>
</html>

Như một website thì blog cũng có phần đầu <head>...</head> và phần thân <body>...</body>

1. Phần đầu - head:
Trong XML có những Tag pair (cặp thẻ) được định nghĩa và đây là một thẻ <b:include data='blog' name='all-head-content'/> . Thẻ này không chứa gì ở giữa nên cần chấm dứt bằng"/>". Đây là một thẻ quan trọng, nó chứa những thông tin về nội dung của phần đầu blog và cả dữ liệu về avatar của tài khoản Blogger.
Trong cặp thẻ <b:skin> là style sheet dành cho blog. Muốn chỉnh sửa giao diện hiển thị của blog thì đây là nơi bạn cần quan tâm. Ngoài ra thì khi view source blog bạn còn thấy một style sheet bên ngoài dành cho widget có tên dạng xxxxxxxxxx-widget_css_bundle.css, là css bên ngoài nên mức độ ưu tiên thấp hơn css trong template.

2. Phần thân - body:
Mỗi template có những layout (bố cục, sắp xếp) khác nhau, chúng được quy định bởi những thẻ <div>, <span>, <ul>, <li>... tuy nhiên chúng có điểm chung là những thanh Add a Gadget, trên thanh đó có những Widget như Blog Posts, Popular Post, HTML/Javascript... Một thanh Add a Gadget được quy định bằng cặp thẻ <b:section> , những Widget được quy định bằng cặp thẻ <b:widget> và những đoạn mã để chạy Widget này được đặt trong cặp thẻ <b:includable>. Blog của bạn có bao nhiêu thanh Add a Gadget thì cũng có từng ấy cặp thẻ <b:section> . Trong cặp thẻ <b:section> có thể chứa 1 hoặc nhiều cặp thẻ <b:widget> hay không có gì nếu chưa add Widget. Trong cặp thẻ <b:widget> có ít nhất một cặp thẻ <b:includable> với id='main'. Mỗi cặp thẻ <b:includable> có thể có các cặp thẻ <b:includable> khác lồng nhau.

Chúng ta sẽ tìm hiểu đoạn mã của Widget Blog Posts, đây là Widget được chỉnh sửa nhiều nhất. Hãy mở template của bạn bằng notepad++ và tìm thẻ <b:widget> với id='Blog1'. Ví dụ: <b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'>. Chúng ta quan tâm tới các cặp thẻ <b:includable> nằm trong cặp thẻ <b:widget> này. Lần lượt click vào từng thẻ <b:includable> rồi nhấn dấu [-] để thu gọn thẻ này lại, xem hình dưới:

Thẻ <b:includable> với id='main' có nhiệm vụ gắn nối các thẻ <b:includable> còn lại với nhau.
Thẻ <b:includable> với id='post' và thẻ <b:includable> với id='comments' lần lượt là nơi chứa mã của bài đăng và khung nhận xét, có nhiều thủ thuật liên quan tới chúng.

Những thẻ được định nghĩa bởi Blogger bắt đầu bởi b: và thường gặp nhiều nhất là <b:if>, <b:loop> , đây là lệnh điều kiện và lệnh lặp. Thẻ <b:includable> là những hàm, mỗi mộtWidget có một hàm chính với ID là main.
Khoanh vùng và tìm hiểu dần, bạn sẽ hiểu rõ template của blog mình hơn và dễ dàng thêm bớt, tinh chỉnh để blog tối ưu nhất.

CÙNG NHAU CHIA SẺ

Friday, March 1, 2013

TÌM HIỂU TEMPLATE CỦA BLOGSPOT

Tìm hiểu template của Blogspot

No comments: