Truyện Hoang Dung

Thẻ data là gì và cách sử dụng nó trong Blogger

1. Thế thẻ data là gì?
Thẻ data là thẻ được Google cung cấp để lấy hầu như toàn bộ thông tin cần thiết tại blog của chúng ta mà chúng ta nhập vào hoặc thiết lập như, bài viết, tiêu đề, địa chỉ url của bài viết, hình ảnh, … và rất nhiều cái khác nữa. Thẻ data được sử dụng trong widget (tiện ích) nào sẽ lấy ra thông tin, tại widget đó

2. CẤU TRÚC KHAI BÁO CHUNG THẺ DATA BLOGGER

<data:[giá trị]/>

Trong phần giá trị các bạn tìm hiểu ý nghĩa bên dưới đây

3.BẢNG GIÁ TRỊ VÀ Ý NGHĨA TRONG BLOGGER

Globally Available Data (Dữ liệu có sẵn)

Không giống như những loại data của thẻ widget khác, những cái bạn thấy ở đây có thể sử dụng ở bất cứ đâu trong template của bạn. Lưu ý, bạn phải thêm “blog” là dữ liệu đầu để lấy ra thông tin, ví dụ như data:blog.title/, v.v..

blog.title: Tiêu đề của blog.
blog.pageType: Định dạng của trang hiện tại. Là ‘item’, ‘archive’, hoặc ‘index’.
blog.url: Địa chỉ url của trang hiện hành.
blog.homepageUrl: Địa chỉ trang chủ.
blog.pageTitle: Tiêu đề của trang hiện hành. Bình thường nó sẽ vẫn là tiêu đề của blog, nhưng có thể có thêm thông tin của bài viết hoặc trang lưu trữ.
blog.encoding: Bộ mã sử dụng cho blog, ví dụ UTF-8.
blog.languageDirection: Một trong 2 “ltr” hoặc “rtl” tương ướng với ngôn ngữ left-to-right (viết từ tráng sang phải) right-to-left (từ phải sang trái).
blog.feedLinks: Tự động nhận dạng feed links.

Page Header (Tiêu đề Trang)

Đây là một widget đơn giản chỉ gồm 2 dữ liệu. Bạn có thể đơn giản gọi nó như sau data:title/ và data:description/.

blog.title: Tiêu đề của blog.
blog.description: Mô ta của blog.

Blog Posts (Bài đăng trên Blog)

Đây là thành phần chính của mọi blog, và dữ liệu thì khá là phức tạp. Mình xin nhắc lại là nó khá là phức tạp, do dó ai muốn tự tay viết lại tiện ích này thì nên tham khảo kỹ ở các template khác trước xem họ viết như thế nào. Nói thế thôi, dưới đây là danh sách dữ liệu trong widget này.

blog.feedLinks: Danh sách feed của trang. Nếu ở trang chủ, feed này chỉ chứa bài viết; Còn nếu ở trang bài viết, nó sẽ chứa thêm cả phần feed của nhận xét. Trong mục này gồm có:
blog.url: Địa chỉ URL của feed.
blog.name: Tên của feed (v.d. ‘Bài đăng’ hoặc ‘Nhận xét’).
blog.feedType: Kiểu dữ liệu của feed (Atom hoặc RSS).
mimeType: Định dạng của feed.
blog.olderPageUrl: Nếu có bài viết cũ hơn bài viết hiện tại đang xem, đây sẽ là địa chỉ URL đến bài viết đó. Cái này chỉ xuất hiện tại trang bài viết.
blog.olderPageTitle: Tiêu đề của bài viết cũ hơn.
blog.newerPageUrl: Tương tự với olderPageUrl, nhưng ngược lại, đây là địa chỉ bài viết mới hơn.
blog.newerPageTitle: Tiêu đề bài viết mới hơn.
commentLabel: Cụm từ bạn thiết lập cho nhận xét (Bố cục >> Chỉnh sửa Bài đăng trên Blog bạn sẽ thấy) v.d. “Nhận xét”
blog.authorLabel: Cụm từ bạn thiết lập cho bài đăng, v.d. “Được đăng bởi”
blog.timestampLabel: Cụm từ bạn thiết lập cho thời gian đăng bài, v.d. “vào lúc”
blog.postLabelsLabel: Cụm từ giới thiệu về nhãn, v.d. “Nhãn:”
blog.backlinksLabel: Cụm từ mô tả về backlinks của bài, v.d. “Các liên kết với bài này”
blog.posts: Danh sách tất cả các bài viết. Mỗi bài viết gồm có những dữ liệu sau:
blog.dateHeader: Ngày đăng của bài viết, chỉ xuất hiện khi bài viết đầu tiên đăng vào ngày đó.
blog.id: Số thứ tự (ID) của bài viết.
blog.title: Tiêu đề bài viết.
blog.body: Nội dung của bài viết.
blog.author: Tên của tác giả bài viết.
blog.url: Địa chỉ cố định của bài viết.
blog.timestamp: Thời gian đăng bài. Không giống như dateHeader, cái này xuất hiện ở mọi bài viết.
blog.labels: Danh sách nhãn của bài viết. Nhãn lại gồm có các dữ liệu sau:
blog.name: Tên của nhãn.
blog.url: Địa chỉ URL của nhãn, địa chỉ này sẽ lấy ra toàn bộ bài viết co nhãn.
blog.isLast: True hoặc false. Xem xét coi có phải nhãn cuối cùng trong danh sách (Hữu ích cho việc bỏ dấu phẩy nếu nó là nhãn cuối).
blog.allowComments: ‘True’ (Đúng) nếu cho chép nhận xét tại bài.
blog.numComments: Số lượng nhận xét tại bài viết hiện tại.
blog.showBacklinks: Hiện backlinks cho bài viết hiện tại.
blog.numBacklinks: Số lượng backlinks bài viết hiện tại.
blog.addCommentUrl: Địa chỉ URL của ‘thêm nhận xét’ của bài viết hiện tại.
blog.emailPostUrl: Địa chỉ URL của ‘Gửi bài đăng qua Email’ của bài viết hiện tại.
blog.editUrl: Địa chỉ URL sửa bài viết hiện tại.
blog.feedLinks: Danh sách feed của bài viết. (Khác với blog feedLinks ở đầu bài, nó có thể chứa feeds của nhận xét.) Mỗi feedLinks gồm có:
blog.url: Địa chỉ URL của feed.
blog.name: Tên của feed (v.d. ‘Bài đăng’ or ‘Nhận xét’).
feedType: Loại feed (Atom hay RSS).
blog.mimeType: Định dạng của feed.
blog.comments: Danh sách toàn bộ nhận xét của bài viết hiện tại (chỉ hiện ở trang bài viết). Dữ liệu gồm:
blog.id: Số thứ tự ID của nhận xét.
blog.body: Nội dung của nhận xét.
blog.timestamp: Thời gian đăng nhận xét.
blog.author: Tác giả của nhận xét, hoặc ‘Ẩn danh’.
blog.authorUrl: Địa chỉ URL vào hồ sơ của tác giả nhận xét, đương nhiên nếu không phải là ẩn danh.
blog.deleteUrl: Địa chỉ URL dùng để xóa nhận xét.
blog.isDeleted: Xem xét coi nhận xét đã bị xóa hay chưa. (Dùng để hiện chữ thay thế khi nhận xét đó đã bị xóa.)

Blog Archives (Lưu trữ Blog)

Các kiểu của Lưu trữ có thể thiết lập tại widget. Nếu bạn muốn thử thiết kế lại nó, đơn giản nhất nên sử dụng ‘FLAT’ (Danh sách phẳng), sau đó sử tùy chỉnh lại các thành phần còn lại.

blog.title: Tiêu đề của widget.
blog.style: Loại ‘MENU’, ‘FLAT’, or ‘HIERARCHY’. (Thứ bậc, Danh sách phẳng, Trình đơn thả xuống)
blog.data: Danh sách đối tượng của widget gòm có:
blog.name: Tên khoảng thời gian lưu trữ, v.d. “tháng mười hai.”
blog.url: Địa chỉ URL với từng đối tượng thời gian lưu trữ.
blog.post-count: Số lượng bài viết của một đối tượng.

Profile Widget (Hồ sơ)

Đối với blog chỉ có một tác giả, widget hồ sơ chứa các thông tin sau. Lưu ý rằng để truy cập vào các phần khác của dữ liệu hình ảnh, bạn sẽ sử dụng định dạng như sau data:photo.url/.

blog.title: Tiêu đề của widget.
blog.userUrl: Địa chỉ URL đến hồ sơ của tác giả.
blog.location: Nơi ở trong hồ sơ của tác giả.
blog.aboutme: Nội dung “Giới thiệu” lấy từ hồ sơ của tác giả.
blog.displayname: Tên hiển thị của tác giả.
blog.photo: Ảnh đại định của tác giả, gồm có các thành phần sau:
blog.url: Địa chỉ URL của ảnh.
blog.width: Chiều rộng ảnh, tính theo pixels.
blog.height: Chiều cao của ảnh, tính theo pixels.
blog.alt: Văn bản thay thế ảnh.

Đối giới blog có nhiều tác giả, widget hồ sơ chứa ít thông tin hơn về các tác giả của blog, gồm có.

blog.title: Tiều đề của widget.
blog.authors: Danh sách tất cả tác giả, gồm các thành phần sau:
blog.displayname: Tên hiển thị của tác giả.
blog.userURL: Địa chỉ URL đến hồ sơ của tác giả.

Nếu bạn muốn thiết kế một template (giao diện) có thể sử dụng chung cho một hoặc nhiều tác giả, bạn có thể sử dụng giá trị data:team để phân biệt trường hợp. v.d. (hiện nhiều tác giả) /b:if

Text / HTML / JavaScript Widget

Tiêu đề của HTML/JavaScript widget chỉ gồm 2 dữ liệu.

blog.title: Tiêu đè của widget.
blog.content: Nội dung của widget.

Feed Widget (Nguồn cấp)

Nội dung feed được nạp một cách tự động bởi Google AJAX API sau khi được trả lại bởi trình duyệt. Chỉ có thể làm đẹp lại bằng CSS.

blog.title: Tiêu đè của widget
blog.feedUrl: Địa chỉ URL của feed.

Picture Widget (Hình ảnh)

Widget hình ảnh chỉ chứa một hình ảnh, và chứa các dữ liệu của ảnh đó.

blog.title: Tiêu đề của widget.
blog.sourceUrl: Địa chỉ URL của hình ảnh.
blog.width: Chiều rộng ảnh, tính theo pixels.
blog.height: Chiều cao ảnh, tính theo pixels.
blog.caption: Caption của ảnh.

Labels Widget (Nhãn)

Widget nhãn sẽ chứa toàn bộ nhãn đang được sử dụng trên blog.

blog.title: Tiêu đề widget.
blog.labels: Danh sách nhãn, mỗi nhãn gồm có:
blog.name: Tên của nhãn.
blog.count: Số lượng bài viết của nhãn.
blog.url: Địa chỉ URL của nhãn.

List Widget (Danh sách)

Hình thức đơn giản nhất của một danh sách. Mỗi mục chỉ chứa một thành phần duy nhấ là văn bản, mà không cần bất kỳ loại dữ liệu khác.

blog.title: Tiêu đề widget.
blog.items: Danh sách tất cả các mục.

Link List Widget (Danh sách liên kết)

Danh sách liên kết thì sử dụng cũng khá đơn giản, nó chỉ bao gồm 2 thành phần chỉnh: tên và địa chỉ.

blog.title: Tiêu đề của widget.
blog.links: Danh sách liên kết, trong nó gồm có:
blog.name: Tên của liên kết.
blog.target: Địa chỉ URL của liên kết.

Logo Widget

Cái đơn giản nhất trong tất cả các loại ở đây đây, chỉ có đúng một thành phần.

blog.fullButton: Địa chỉ URL của nút mà bạn đã chọn.

4. Cách lấy Data attribute bằng Javascript

Lấy dữ liệu ra trong từ Data attribute trong Javascript dễ như ăn bánh. Bạn hoàn toàn có thể dùng cách truyền thống là getAttribute() để lấy ra. Tuy nhiên, Bạn hoàn toàn có thể lấy ra bằng cách đơn giản như sau:

var element = document.getElementById('el');

console.log(element.dataset.columns) // 12

console.log(element.dataset.name) // foo

Bạn hoàn toàn có thể set được giá trị Data attribute bằng cách sau:

// Thay đổi giá trị thuộc tính data-columns = 20

element.dataset.columns = 20

5. Truy cập Data attribute bằng CSS

Data attribute cũng hoạt động như mội attribute thông thường. Bạn có thể thay đổi css bằng attribute selector theo data attribute như sau:

element[data-columns='10']{

background:red;

}

element[data-columns='12']{

background:green;

}

Trong ví dụ sau, mình sẽ lấy giá trị trong data attribute và set vào trong nội dung của thẻ element như sau.

element:before {

content: attr(data-name);

}