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

bới 13 nhận xét

Ở bài viết trước mình đã nói về includes trong Blogger, ở bài viết này mình tiếp tục giải thích và hướng dẫn các bạn thẻ data là gì và cách sử dụng nó. Mình hi vọng mọi bài viết mình sẽ giúp mọi người hiểu rõ thêm về cách thức hoạt động của Blogger để bạn có thể tùy biến nó theo ý thích của các bạn.

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


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 đó.

Cú pháp sử dụng thẻ data

Đối với từng loại widget, thì có từng kiểu dữ liệu được lấy ra. Có 2 định dạng thẻ data có thể sử dụng
<data:tên/>
hoặc
<data:tên1.tên2/>
tên,tên1: là tên dữ liệu cần lấy ra ví dụ
<data:title/> // Lấy ra tiêu đề widget hiện tại
tên2: là tên nằm trong danh sách dữ liệu có thể lấy ra của tên1 ví dụ
<data:photo.url/> // Lấy ra địa chỉ hình ảnh
Danh sách dữ liệu của từng widget
Dưới đây là toàn bộ danh sách dữ liệu có thể lấy ra từ blog của chúng ta.
  • Globally Available Data (Dữ liệu có sẵn)
  • Page Header (Tiêu đề Trang)
  • Blog Posts (Bài đăng trên Blog)
  • Blog Archives (Lưu trữ Blog)
  • Profile (Hồ sơ)
  • Text / HTML / JavaScript
  • Feed (Nguồn cấp)
  • Picture (Hình ảnh)
  • Labels (Nhãn)
  • List (Danh sách)
  • Link List (Danh sách Liên kết)
  • Logo
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..
  • title: Tiêu đề của blog.
  • pageType: Định dạng của trang hiện tại. Là 'item', 'archive', hoặc 'index'.
  • url: Địa chỉ url của trang hiện hành.
  • homepageUrl: Địa chỉ trang chủ.
  • 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ữ.
  • encoding: Bộ mã sử dụng cho blog, ví dụ UTF-8.
  • 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).
  • 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/>.
  • title: Tiêu đề của 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.
  • 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ó:
    • url: Địa chỉ URL của feed.
    • name: Tên của feed (v.d. 'Bài đăng' hoặc 'Nhận xét').
    • feedType: Kiểu dữ liệu của feed (Atom hoặc RSS).
    • mimeType: Định dạng của feed.
  • 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.
  • olderPageTitle: Tiêu đề của bài viết cũ hơn.
  • 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.
  • 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"
  • authorLabel: Cụm từ bạn thiết lập cho bài đăng, v.d. "Được đăng bởi"
  • timestampLabel: Cụm từ bạn thiết lập cho thời gian đăng bài, v.d. "vào lúc"
  • postLabelsLabel: Cụm từ giới thiệu về nhãn, v.d. "Nhãn:"
  • 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"
  • 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:
    • 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 đó.
    • id: Số thứ tự (ID) của bài viết.
    • title: Tiêu đề bài viết.
    • body: Nội dung của bài viết.
    • author: Tên của tác giả bài viết.
    • url: Địa chỉ cố định của bài viết.
    • 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.
    • 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:
      • name: Tên của nhãn.
      • 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.
      • 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).
    • allowComments: 'True' (Đúng) nếu cho chép nhận xét tại bài.
    • numComments: Số lượng nhận xét tại bài viết hiện tại.
    • showBacklinks: Hiện backlinks cho bài viết hiện tại.
    • numBacklinks: Số lượng backlinks bài viết hiện tại.
    • addCommentUrl: Địa chỉ URL của 'thêm nhận xét' của bài viết hiện tại.
    • emailPostUrl: Địa chỉ URL của 'Gửi bài đăng qua Email' của bài viết hiện tại.
    • editUrl: Địa chỉ URL sửa bài viết hiện tại.
    • 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ó:
      • url: Địa chỉ URL của feed.
      • name: Tên của feed (v.d. 'Bài đăng' or 'Nhận xét').
      • feedType: Loại feed (Atom hay RSS).
      • mimeType: Định dạng của feed.
    • 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:
      • id: Số thứ tự ID của nhận xét.
      • body: Nội dung của nhận xét.
      • timestamp: Thời gian đăng nhận xét.
      • author: Tác giả của nhận xét, hoặc 'Ẩn danh'.
      • 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.
      • deleteUrl: Địa chỉ URL dùng để xóa nhận xét.
      • 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.
  • title: Tiêu đề của widget.
  • style: Loại 'MENU', 'FLAT', or 'HIERARCHY'. (Thứ bậc, Danh sách phẳng, Trình đơn thả xuống)
  • data: Danh sách đối tượng của widget gòm có:
    • name: Tên khoảng thời gian lưu trữ, v.d. "tháng mười hai."
    • url: Địa chỉ URL với từng đối tượng thời gian lưu trữ.
    • 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/>.
  • title: Tiêu đề của widget.
  • userUrl: Địa chỉ URL đến hồ sơ của tác giả.
  • location: Nơi ở trong hồ sơ của tác giả.
  • aboutme: Nội dung "Giới thiệu" lấy từ hồ sơ của tác giả.
  • displayname: Tên hiển thị của tác giả.
  • photo: Ảnh đại định của tác giả, gồm có các thành phần sau:
    • url: Địa chỉ URL của ảnh.
    • width: Chiều rộng ảnh, tính theo pixels.
    • height: Chiều cao của ảnh, tính theo pixels.
    • 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ó.
  • title: Tiều đề của widget.
  • authors: Danh sách tất cả tác giả, gồm các thành phần sau:
    • displayname: Tên hiển thị của tác giả.
    • 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. <b:if cond='data:team=="true"'> (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.
  • title: Tiêu đè của widget.
  • 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.
  • title: Tiêu đè của widget
  • 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 đó.
  • title: Tiêu đề của widget.
  • sourceUrl: Địa chỉ URL của hình ảnh.
  • width: Chiều rộng ảnh, tính theo pixels.
  • height: Chiều cao ảnh, tính theo pixels.
  • 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.
  • title: Tiêu đề widget.
  • labels: Danh sách nhãn, mỗi nhãn gồm có:
    • name: Tên của nhãn.
    • count: Số lượng bài viết của nhãn.
    • 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.
  • title: Tiêu đề widget.
  • 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ỉ.
  • title: Tiêu đề của widget.
  • links: Danh sách liên kết, trong nó gồm có:
    • name: Tên của liên kết.
    • 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.
  • fullButton: Địa chỉ URL của nút mà bạn đã chọn.
Thế là đã tạm xong về thẻ data trong Blogger, những bạn nào chưa đọc bài viết trước của mình có thể tham khảo thêm
Bài viết tới mình sẽ nói về vòng lặp trong Blogger, nhưng hiện tại mình đang thi cử đến hết tuần sau do đó chắc sẽ trì hoẵn việc đăng bài mới, nhưng vẫn mong được sự ủng hộ của các bạn.

13 bình luận

  1. avatar says

    lúc 02:36 9 tháng 8, 2014

    Bài quá hay :D Mình tìm mãi bài như thế này :D Mình là dân kinh tế chưa biết nhiều về code html, CSS và js. Bạn có thể chia sẻ cho mình tài liệu về những thẻ như thế này không ? Tài liệu Tiếng Việt thì càng tốt. Vì mình tìm nhiều tài liệu mà không thấy những thẻ như includable hay data hay if ... Bạn gửi cho mình qua hòm thư: ttda.05@gmail.com nhé ! Cho mình hỏi qua đây: Mình có đọc bài thẻ if của bạn: Mình chỉ thấy xuất hiện tối thiểu 2 điều kiện đi kèm với thẻ đóng "else". Có khi nào thành lập 2 thẻ else hay 3 đến 4 thẻ if để cho ra nhiều nội dung trong một chủ đề không ? Và cách lồng ghép như thế nào ? Ví dụ của mình thế này :
    "Nếu A=x thì B=x1, A=y thì B=y1. còn lại thì B=z" Còn trường hợp phải thỏa mãn 2 hoặc 3 điều kiện thì mới được: VD: "A=x và B=y thì C mới được = z".

    Reply

  2. avatar says

    lúc 02:45 9 tháng 8, 2014

    Bạn diễn giải cho mình đoạn code này nhé! Về thẻ thì mình hiểu rồi nhưng cách lồng nhiều điều kiện thì mình phân vân là "hoặc" hay "và" (tức là "Nội dung sẽ xảy ra" khi 1 trong những "Điều kiện" phía trên xảy ra hay là phải đồng thời "Tất cả các điều kiện" xảy ra thì "Nội dung sẽ xảy ra"? (mình mới vào nghề nên bạn thông cảm mình hỏi hơi nhiều)

    Bạn diễn giải cho mình đoạn code này nhé! Về thẻ thì mình hiểu rồi nhưng cách lồng nhiều điều kiện thì mình phân vân là "hoặc" hay "và" (tức là "Nội dung sẽ xảy ra" khi 1 trong những "Điều kiện" phía trên xảy ra hay là phải đồng thời "Tất cả các điều kiện" xảy ra thì "Nội dung sẽ xảy ra"? (mình mới vào nghề nên bạn thông cảm mình hỏi hơi nhiều)

    <b:if cond='data:blog.pageType != "item"'>
    <b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:post.title'>
    <h3 class='post-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>
    <b:else/>
    <h1 class='post-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </h1>
    </b:if>
    <b:else/>
    <h1 class='post-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </h1>
    </b:if>

    Reply

  3. avatar says

    lúc 10:11 9 tháng 8, 2014

    Về vấn đề tài liệu thì chịu thôi bạn ơi, tất cả những thứ mà mình chia sẻ ở đây là toàn bộ những gì Google cung cấp, mà thẳng thừng mà nói là thiếu rất nhiều, bạn cứ tự mình thực hiện tạo ra một template từ gốc tới ngọn là bạn sẽ hiểu hết

    Còn vấn đề trên bạn có thể làm như sau
    .<b:if cond='điều kiện 1'>
        thực thi điều kiện 1
    <b:else/>
        <b:if cond='điều kiện 2'>
            thực thi điều kiện 2
        <b:else/>
            <b:if cond='điều kiện 3'>
                thực thi điều kiện 3
            <b:else/>
                thực thi nếu không đúng tất cả điều kiện trên
            </b:if>
        </b:if>
    </b:if>

    Reply

  4. avatar says

    lúc 10:25 9 tháng 8, 2014

    Điều kiện trên là điều kiện "VÀ" mà bạn đã hỏi trường hợp đấy.

    Từ đầu đến cuối nó như thế này, nó kiểm tra không phải trang bài viết => tiếp tục nó kiểm tra không phải trang tĩnh nữa => (có nghĩa là chỉ còn trang chủ thôi) thì nó sẽ đặt tiêu đề là thẻ h3 => tiếp tục y như comment mà bạn hỏi mình ở trên cái phần "thực thi nếu không đúng tất cả điều kiện trên" (có nghĩa nếu nó là trang bài viết hoặc trang tĩnh) thì nó sẽ sử dụng thẻ h1.

    Thêm nữa trong blogger có rất nhiều "data" để sử dụng phải có sự can thiệp của thẻ if vào, như 2 thằng data:post.link và data:post.url, về đoạn này thì 2 thẻ có chung một tác dụng, chả hiểu sao phải đặt mã như vậy cho phiền phức thôi.

    P/S: Điều kiện "HOẶC" không khả thi trong blogger, bạn chỉ có thể sử dụng thẻ if và lặp lại nhiều lần thôi.

    Reply

  5. avatar says

    lúc 18:40 9 tháng 8, 2014

    Cho mình hỏi tiếp : data:blog.pageName có phải là 1 dữ liệu có sẵn (Globally Available Data) . Nếu là có sẵn thì ý nghĩa nó là gì ? Có phải "dữ liệu có sẵn" thì không phải đi cùng lệnh "==" hay "!=" của thẻ điều kiện đúng ko ?
    Phần dữ liệu: Blog Posts (Bài đăng trên Blog) thì thẻ data phải viết bắt đầu với "tên 1" - tức là phải data:post đúng ko ? Hay là chỉ "data:" rồi đưa các tên bạn chia kia vào sau data: ? Có mấy cái mình chưa hiểu rõ lắm ở phần này như: postLabelsLabel ... Bạn có thể bổ sung ví dụ cho bài viết trên được không ? (cho nó dễ hiểu)

    Còn phần code mình viết phía trên comment này: về data:post.link và data:post.url giống nhau thế thì câu lệnh trên trùng 2 esle thành 1 else à ? Bạn giải thích từng thẻ một cho mình theo cách bạn làm ở comment 1 có được không vì mình thực sự bị rối ?

    Reply

  6. avatar says

    lúc 20:45 9 tháng 8, 2014

    Đúng như bạn nói data:blog.pageName là dữ liệu gobal, nó lấy ra cái tiêu của trang mà bạn đặt tên (vd đối với bài viết này thì nó sẽ lấy ra "Thẻ data là gì và cách sử dụng nó trong Blogger", nếu bạn sử dụng chúng để so sánh thì bất buộc phải có "==" hay "!=" vì đây không phải là tùy chọn.

    VD: Ở widget Blog Posts có tùy chọn Hiển thị tiểu sử tác giả bên dưới bài đăng, thì bên trong đoạn code người ta mới sử dụng thế này <b:if cond='data:post.authorAboutMe'>

    Còn về phần tại sao có những cái như kiểm tra trang có có tồn tại tiêu đề không, <b:if cond='data:post.url'> và <b:if cond='data:post.link'> là kiểm tra bài viết có đường link của bài viết hay không.

    Về mặt mình thì mình nghĩ <b:if cond='data:post.link'> là một sự thừa thải không đáng có, vì điều kiện này luôn luôn không đúng. Đựa vào cái câu ở đoạn trên + comment 1 thì mình nghĩ không cần phải giải thích thêm về nó nữa.

    Còn về các cách sử dụng data thì mình nghĩ mình đã nói rõ rồi mà tên2: là tên nằm trong danh sách dữ liệu có thể lấy ra của tên1, có nghĩa là bạn chỉ cần sử dụng data:+tên của cái mà bạn muốn lấy ra thôi.

    Reply

  7. avatar says

    lúc 02:04 15 tháng 8, 2014

    Lâm Kiều có thể viết 1 bài liên quan đến thuộc tính expr:.... thường xuất hiện trong các tag không ?

    Reply

  8. avatar says

    lúc 11:08 15 tháng 8, 2014

    Làm một bài tốc hành cho bác đây http://www.kslzone.net/2014/08/su-dung-data-blogger-trong-thuoc-tinh-html.html

    Reply

  9. avatar says

    lúc 23:00 16 tháng 12, 2014

    chào bạn, bạn cho mình hỏi bạn đặt quảng cáo của google vào bằng cách nào vậy vì mình thấy bài viết của bạn có đặt quảng cáo, bạn cho đặt quảng cáo như vậy thì bạn thu được bao nhiêu và họ trả cho bạn bằng cách nào (nếu câu hỏi có gì mạo phạm thì bạn thông cảm nhá )
    trả lời mình nhé, thank bạn.

    Reply

  10. avatar says

    lúc 20:43 17 tháng 12, 2014

    Chào bạn đầu tiên thì bạn phải có website nội dung tốt cái đã, sau đó đăng ký Adsense và trên blog mình có cũng vài hướng dẫn cách chèn vào Blogger. Thu nhập thì mình chỉ nó có thể nói là đủ để chi chả tên miền hằng năm thôi có thể dư được vài chục ngàn :D Cách thức thanh toàn thì hiện tại mình chưa được phép rút, Google giới hạn 100$ 1 lần rút, có nghĩa là mình chắc cũng phải 3 4 năm chắc mới rút được một lần nếu như lượng truy cập cứ duy trì như hiện tại =]]

    Reply

  11. avatar says

    lúc 13:52 7 tháng 4, 2015

    Xin anh hướng dẫn fix lại giùm em lỗi này http://www.ikomdigital.com/index.html
    Lỗi 1:Uncaught TypeError: Cannot read property 'parentNode' of null
    index.html:2487
    Lỗi 2:Uncaught SyntaxError: Unexpected token ILLEGAL

    Reply

  12. avatar says

    lúc 19:55 8 tháng 4, 2015

    Lỗi này ở đâu vậy bạn :D

    Reply

  13. avatar says

    lúc 08:34 13 tháng 2, 2016

    Cho em hỏi khi vào trang index trong phần Posts chỉ cho xuất hiện title với image thôi rồi chừng nào mình nhấp vào url thì chuyển sang bài viết thì hiển thị nội dung bài viết đó

    Reply

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.