Mã nguồn của Blogger
Blogger của Google là một dịch vụ blog mã nguồn mở. Bạn có thể biên tập khoảng 95% mã nguồn của nó để thay đổi theme cho nó. Không chỉ đổi màu, đổi background... mà hơn thế nữa, bạn có thể thay đổi Layout (bố cục) để có một giao diện 100% mới. Ngoài ra vì là mã nguồn mở lên bạn dễ dàng tìm được những thứ gọi là Widget (phụ tùng) - một kiểu Add-on cho blog - và nhưng đoạn script tạo các chức năng, hiệu ứng đặc biệt... Với Blogger, bạn có thể tạo một cái blog trên nền tảng Web 2.0 dễ dàng. Bài viết này sẽ hướng dẫn bạn chỉnh sửa mã nguồn của Blogger.
I.Chuẩn bị:Để bắt đầu, bạn phải đăng nhập vào blog của mình.
Trong trang Dashboard → chọn Layout (tại blog muốn chỉnh)
Tại trang Blogger :: Edit Layout → nhấn vào link Edit HTML
Ở trang này, bạn có thể bắt đầu việc chỉnh sửa của mình.
II.Dạng cơ bản:Mã nguồn thường sẽ có dạng cơ bản như sau:
<?xml version="1.0" encoding="UTF-8" ?>Những phần nằm trên thẻ <head> bạn không cần để ý, cũng đừng bao giờ thay đổi gì ở đây. Có thể hiểu đây là phần thủ tục thôi. Phần màu xanh lá cây có thể bỏ đi. Phần in nghiêng là các lưu ý.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Giới thiệu về skin và tác giả-----------------------------------------------*/
/* Variable definitions
phần đặt biến cho skin
*/
Phần CSS có thể chỉnh sửa
]]></b:skin>
Phần chèn Javascript</head>
<body>
Nội dung trang...
Phần này thay đổi theo trang. Thường được chia ra thành cái Section (nằm giữa thẻ <b:section> và </b:section>).
Trong các section (vùng) còn có những Widget (nằm giữa thẻ <b:widget> và </b:widget>).
</body>
</html>
Từ đoạn này trở đi không có giá trị
Ngoài ra, những đoạn nằm trong /* và */ trong phần CSS và những đoạn nằm trong <!-- và --> trong những phần còn lại đều không có ý nghĩa. Đó chỉ là phần chú thích.
...
III.Section và Widget:Thẻ <b:section>
Nó có các thuộc tính (attribute) như sau:
- id: (Bắt buộc) Nó có ý nghĩa như tên của section đó (chỉ dùng chữ và số).
VD: <b:section id="MySection">. - class: phân nhóm cho section của bạn. Bạn nên dùng những cái tên sau cho class của mình như "navbar," "header," "main," "sidebar," and "footer". Để sau này, khi thay đổi phần CSS, Blogger có thể chuyển Section của bạn đến đúng nơi.
VD: <b:section class="sidebar" id="MySection">. - maxwidgets: Quy định số lượng widget tối đa mà section có thể chứa. Nếu không đề cập có nghĩa là không giới hạn.
VD: <b:section id="MySection" maxwidget="1">. - showaddelement: Chỉ có 2 giá trị là "yes" hay "no" (mặc định là "yes". Nó quy định tại trang Edit Layout có hiển thị liên kết "Add a Page Element" cho section này không.
VD: <b:section id="MySection" showaddelement="no">. - growth: Cũng chỉ có 2 giá trị là "horizontal" (ngang) hay "vertical" (dọc) (mặc định là "vertical"). Nó quy định cách mà các widget xuất hiện (hàng dọc hay ngang).
VD: <b:section id="MySection" growth="horizontal">
Widget là những phần add-on có thể quản lý được trong trang Edit Layout. Nó có các thuộc tính sau:
- id: (bắt buộc) có ý nghĩa như tên của widget đó. Không thể có 2 widget cùng tên. ID của widget sau khi tạo, không thể thay đổi được trừ khi bạn xóa vào tạo lại một widget khác.
- type: (bắt buộc) Nó xác định kiểu widget.
- locked: có 2 giá trị "yes" hoặc "no" (mặc định là "no"). Nếu bạn trong "yes" thì widget này không thể xóa hay di chuyển trong trang Edit Layout.
- title: Hiện tên của widget khi nó xuất hiện trên trang blog. Nếu bạn bỏ trống thì Blogger sẽ sử dụng một cái tên tự động kiểu HTML1, List2...
- pageType: Có thể là "all", "archive", "main", hay "item" (mặc định là "all"). Widget này sẽ chỉ hiển thị ở loại trang được xác định cho nó. Nhưng tất cả đều xuất hiện trong trang Edit Layout.
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
, tất cả các thẻ <b:section> và <b:widget> sẽ được chuyển thành <div> với ID tương ứng. ID này sẽ cùng với định dạng trong phần CSS của bạn để hiển thị đúng trên màn hình.Lần trước mình đã giới thiệu về mã nguồn của Blogger. Nhưng đó chỉ là dạng thu gọn, nội dung của các widget bị giấu đi. Ở bài này, mình sẽ nói chi tiết về nội dung của một Widget. Xét về bản chất thì nó khá giống những ngôn ngữ lập trình hướng cấu trúc (structured programming language), nó cũng cấu tạo bởi cái code block và có những hàm cơ bản như Loop và Condition.
I.Chuẩn bịTại trang Edit HTML (?) bạn nhấn vào checkbox Expand Widget Templates
Lúc này thì trang Edit HTML sẽ tự tải lại. Và dễ dàng nhận ra, phần mã nguồn đã thay đổi, các dòng
<b:widget [các thuộc tính] />trở thành
<b:widget [các thuộc tính]>Lưu ý là giữa 2 thẻ <b:widget> và </b:widget> có thể chứa nhiều nhóm <b:includable> và </b:includable>
<b:includable>
...
</b:includable>
</b:widget>
II.Sẵn sàng
Thẻ <b:includable>
Bạn có thể bất cứ thứ gì vào giữa 2 thẻ <b:includable> và </b:includable>. Thẻ này có 2 thuộc tính như sau.
- id: (bắt buộc) Những chữ hay số có giá trị như tên của 1 includable. Hai includable trong cùng widget không được trùng tên.
- var: Một tham số có liên quan tối phần nội dung trong thẻ, có thể là chữ hoặc số.
Các thuộc tính của thẻ <b:include> gồm:
- name: (bắt buộc) là tên của include này. Nó buộc phải trùng với ID của includable bạn muốn xuất hiện (với điều kiện, cả 2 nằm trong cùng một widget).
- data: có ý nghĩa như var trong includable.
<b:includable id='main'>Chỉ cần một dòng
<b:loop var='i' values='posts'>
<b:include name='post' data='i'/>
</b:loop>
</b:includable>
<b:includable id='post' var='p'>
Title: <data:p.title/>
</b:includable>
<b:include name='post' data='i'/>sẽ thay thế cho cả đoạn
<b:includable id='post' var='p'>Tham số i được dùng trong thẻ include có ý nghĩa như p trong includable. Sở dĩ dùng i ở đây là vì trong thẻ b:loop có var='i'. Thẻ <b:include> rất có ý nghĩa nếu bạn phải lập đi lập lại một vùng includable nhiều lần trong một widget.
Title: <data:p.title/>
</b:includable>
Lưu ý: <b:include name='main'/> không cần viết vào vì nó sẽ xuất hiện tự động.
Thẻ data:
Thẻ data: có ý nghĩa quan trong nhất trong toàn bộ phần mã nguồn. Vì nó là đại diện cho nội dung thực sự của blog. Một vài ví dụ của thẻ này:
<data:title/> đại diện cho tựa đề của widget
<data:photo.url/> đại diện cho đường dẫn của ảnh
...
Đây là những ví dụ đơn giản và thường gặp nhất. Vì hầu hết các widget đều có tựa đề. Thẻ data còn được dùng trong nhiều trường hợp phức tạp khác, thậm chí có tham số trong đó. Dấu "." ý chỉ là url ta cần là url của tấm hình đó, chứ không phải của bất cứ cái gì khác. Tới đây thì có vẻ nó đã giống như một ngôn ngữ lập trình rồi.
Lưu ý: Còn rất nhiều thẻ data khác nhau và danh sách các thẻ data sẽ được viết trong bài sau.
Thẻ <b:loop>
Thẻ b:loop được dùng khá phổ biến. Nó dùng để lặp đi lặp lại một nhóm thông tin. Cú pháp cơ bản của b:loop là:
<b:loop var='tham số chỉ định' values='nhóm dữ liệu'>Với tham số chỉ định là tùy chọn, thường dùng nhất là 'i'. Và nhóm dữ liệu chính là các data: (chi tiết sẽ để cập ở bài sau).
[Nội dung cần lặp lại]
</b:loop>
vd:
<b:loop var='i' values='data:posts'>Trong ví dụ này, ta sẽ lặp đi lặp lại tựa đề của bài viết. Tham số là i, lặp lại sau mỗi bài viết (data:posts là danh sách tất cả các bài viết trong một trang). Nội dung cần lặp lại là tựa đề của từng bài. Tức là khi i sẽ chạy từ post[1] tới post[n], thì xuất hiện trên màn hình sẽ là tựa đề của post[1] tới post[n].
<h2><data:i.title/></h2>
</b:loop>
Thẻ <b:if>
Bạn có thể dùng b:if và b:else để quy định thông tin chỉ hiển thị trên vùng này hay vùng khác. Cú pháp cơ bản là:
<b:if cond='điều kiện'>Bạn có thể bỏ qua <b:else/> mà không ảnh hưởng tới <b:if>. Như vậy, chỉ có 2 trường hợp, một là nội dung nếu điều kiện đúng; hai là không có gì.
[nếu điều kiện đúng]
<b:else/>
[nếu điều kiện sai]
</b:if>
Điều kiện phải là những biểu thức có thể đánh giá đúng sai. vd:
<b:if cond='data:post.showBacklinks'>
đúng nếu bài viết hiện tại cho phép hiển thị backlinks.
<b:if cond='data:blog.pageType == "item"'>
Đúng nếu trang hiện tại là dạng item (trang chứa bài viết).
<b:if cond='data:displayname != "Gman"'>
Đúng nếu tên hiển thị khác Gman.
<b:if cond='data:post.numComments > 1'>Đúng nếu bài viết hiện tại có nhiều hơn một bài trả lời.
Hướng dẫn tiếp theo: sẽ giúp bạn Tìm hiểu Margin và Padding
0 comments
Post a Comment