Kết hợp Drupal, HTML5 và microdata

Làm cho nội dung của bạn dễ tìm và dễ tái sử dụng hơn

Với thông báo của Google, Yahoo và Bing về schema.org, microdata (vi dữ liệu) nhanh chóng đạt tới một cách để tạo các ứng dụng dựa trên dữ liệu từ nhiều trang web khác nhau. Trong bài này, hãy tìm hiểu cách sử dụng Drupal để thêm microdata vào các trang web của bạn. Dễ dàng làm cho nội dung của bạn có sẵn để sử dụng trong các ứng dụng như Rich Snippets (Các đoạn thông tin phong phú) của Google.

Lin Clark, Nhà phát triển Drupal, Digital Enterprise Research Institute, NUI Galway

Author photoLin Clark là một nhà phát triển Drupal chuyên về Dữ liệu liên kết. Cô là người bảo trì nhiều mô-đun Drupal, như Microdata và SPARQL Views và là một người tham gia tích cực trong Lực lượng đặc nhiệm dữ liệu HTML của W3C và sáng kiến HTML5 của Drupal. Cô đã học tại trường Đại học Carnegie Mellon và sắp làm xong bằng thạc sĩ nghiên cứu tại Viện Nghiên cứu doanh nghiệp số tại NUI Galway. Nhiều thông tin có sẵn tại địa chỉ lin-clark.com.



08 11 2011 (Xuất bản lần đầu tiên vào ngày 04 04 2012)

08.11.2011 - Khi xem lại các ý kiến của người đọc, tác giả đã bổ sung thêm một phần tử span vào birthDate và thay thế nội dung của Liệt kê 1.

Giới thiệu

Vào 05.2011, bộ ba Google, Yahoo, Bing đã công bố schema.org và mọi người đã bắt đầu nói về dữ liệu có cấu trúc. Schema.org là một cách mới để các máy tìm kiếm hiểu các trang web. Nếu các tác giả nội dung web thêm một chút siêu dữ liệu vào các trang của họ — chỉ một vài thuật ngữ của bảng từ vựng — thì các kết quả tìm kiếm của họ hiển thị tốt hơn trong cả ba máy tìm kiếm.

Đánh dấu thêm đã không thay đổi cách hiển thị các kết quả tìm kiếm cho nhiều trang đã thực hiện schema.org. Mặc dù, các tác giả nội dung web vẫn còn háo hức để nhận được các trang của họ được đánh dấu và sẵn sàng để sử dụng trong cả ba máy tìm kiếm lớn.

Schema.org đặt ra một thách thức cho các tác giả web chưa có kinh nghiệm với các cú pháp khác nhau để bổ sung thêm dữ liệu có cấu trúc vào HTML. Các cú pháp là:

  • Microformats (vi định dạng).
  • RDFa
  • Microdata (Vi dữ liệu).

Để tăng thêm thách thức này, Google (máy tìm kiếm có ảnh hưởng nhất đối với nhiều tác giả web) đã cho biết nó sẽ chỉ xử lý microdata. Microdata, là mới nhất trong ba cú pháp nói trên, vẫn chưa có nhiều công cụ hỗ trợ.

Trong bài này, hãy tìm hiểu cách sử dụng Drupal để thêm microdata vào các trang của bạn. Chuẩn bị nội dung của bạn sao cho có thể sử dụng nó trong các ứng dụng như Rich Snippets của Google.

Tải về mã nguồn cho bài này.


Microdata là gì?

Các từ viết tắt thông dụng

  • FOAF: Bạn của một người bạn
  • RDF: Khung công tác mô tả tài nguyên
  • RDFa: RDA với các thuộc tính

Microdata là một cách đơn giản để thêm dữ liệu có cấu trúc vào các trang web. Nó định nghĩa một vài thuộc tính, như itemtypeitemprop, có thể được đặt vào các thẻ HTML để cho biết trang đó là về cái gì. Microdata được Ian Hickson, một biên tập viên về đặc tả HTML 5, giới thiệu vào năm 2009. Mặc dù, các nguồn gốc của ý tưởng này có trước đó lâu rồi.

Microdata dựa trên RDFa, là một cách đặt RDF trong HTML. Ý tưởng về RDFa đã được Mark Birbeck giới thiệu vào năm 2004 với một lưu ý được W3C công bố. Sau đó, ý tưởng này được tích hợp vào phiên bản tiếp theo là XHTML. RDFa đã giới thiệu một số thuộc tính HTML mới, như propertyabout và đã sử dụng lại một số thuộc tính, như rel.

RDFa mạnh mẽ, nhưng với các tác giả, có thể khó mà biết được liệu RDFa của họ có đúng không do các tương tác của các thuộc tính đôi khi phức tạp. RDFa cũng đã thừa hưởng một số tính năng của XML, như các tiền tố vùng tên, có thể gây khó hiểu.

Các microformat (vi định dạng), một phiên bản khác của dữ liệu có cấu trúc trong XHTML, đã được khởi chạy gần một năm sau bởi một nhóm các nhà phát triển. Trái ngược với RDFa, các microformat sử dụng lại các thuộc tính XHTML hiện có mà các tác giả nội dung web vẫn thường sử dụng, như thuộc tính rel trên các liên kết. Các microformat cũng thêm một ít ngữ nghĩa bên trong các thuộc tính đó. Người ta đã đặt tầm quan trọng vào cách chỉ đánh dấu nội dung nhìn thấy được; đối với nội dung không nhìn thấy được, rất dễ bị sử dụng sai hoặc mất đồng bộ với nội dung nhìn thấy được.

Một vấn đề với các microformat là không có một cách chung để phân tích cú pháp chúng. Thay vào đó, người ta đã tăng thêm sự hỗ trợ cho mỗi microformat. Ví dụ, nếu bạn muốn xử lý dữ liệu lịch và dữ liệu địa chỉ, bạn phải chắc chắn rằng trình phân tích cú pháp của bạn hỗ trợ cả hai loại dữ liệu đó hoặc sử dụng hai trình phân tích cú pháp khác nhau. Cũng có thể rất khó để nhận được một microformat mới được xuất bản thông qua phương thức cộng đồng.

Microdata kết hợp các ý tưởng tốt từ cả hai các microformat lẫn RDFa với nhau. Microdata:

  • Giảm sự phức tạp của RDFa bằng cách giảm số lượng các thuộc tính và các tùy chọn cho việc bố trí của chúng.
  • Loại bỏ các tiền tố vùng tên.
  • Duy trì phân tích cú pháp chung RDFa, giúp cho việc tạo các công cụ làm việc trên dữ liệu đã xuất bản dễ dàng hơn.
  • Duy trì khả năng cho các nhóm người khác nhau để tạo các bộ các giá trị thuộc tính riêng của họ, được gọi là các bảng từ vựng, để sử dụng với microdata.

Đặt bảng từ vựng schema.org với microdata

Schema.org là một bảng từ vựng làm việc tốt với microdata. Vì không có cơ quan phê duyệt nào chịu trách nhiệm về các bảng từ vựng, nên những người chủ sở hữu của các máy tìm kiếm có thể đã phát minh ra bảng từ vựng riêng của mình để đáp ứng các nhu cầu của họ. Hầu hết bảng từ vựng đề cập đến nhiều thứ mà Google đã tập trung vào cho Rich Snippets của mình: con người, các địa điểm, các sự kiện, giải trí và thương mại.

Một vài ví dụ hay (xem Tài nguyên) giải thích cách đặt các thuật ngữ schema.org trên một trang web. Ví dụ, Liệt kê 1 cho thấy cách đánh dấu đơn giản để mô tả một bộ phim được làm tăng độ rõ nét của hình ảnh bằng các thuật ngữ schema.org.

Liệt kê 1. Cách đánh dấu đơn giản cho một bộ phim được làm tăng độ rõ nét của hình ảnh bằng schema.org
<div itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name"&g;Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> 
            (born <span itemprop="birthDate">August 16, 1954)</span>
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

Những gì đánh dấu thêm có thể không rõ ràng ngay. Để nhận được một ý tưởng, hãy xuất bản một trang có đoạn mã này vào web. Rồi bạn có thể nhập URL cho trang đó trong Công cụ thử nghiệm Rich Snippets của Google (xem Tài nguyên), như trong Hình 1. Nếu bạn không có quyền truy cập dễ dàng vào một máy chủ web, bạn cũng có thể sao chép và dán đoạn mã đó vào công cụ thử nghiệm microdata trực tiếp do nhà phát triển Opera là Philip Jägenstedt (xem Tài nguyên).

Hình 1. Microdata schema.org được trích ra từ ví dụ trong Liệt kê 1
Ảnh chụp màn hình microdata schema.org được trích ra từ ví dụ trong Liệt kê 1

Công cụ này đã lấy ra thông tin về hai mục: bộ phim và đạo diễn của nó.

Hai khái niệm chính trong microdata là items (các mục) và properties (các đặc tính) của các mục đó. Một đặc tính có thể được thiết lập hoặc là một chuỗi hoặc một mục khác. Ví dụ, bộ phim là một mục. Nó có một tên, là một đặc tính với một giá trị chuỗi. Nó cũng có một đạo diễn, là một đặc tính với một giá trị mục — con người.

Để cho trình phân tích cú pháp biết bạn đang bắt đầu nói về một mục, hãy sử dụng thuộc tính itemscope (phạm vi mục). Bạn cũng có thể sử dụng thuộc tính itemtype (kiểu mục) để cho trình phân tích cú pháp biết bạn đang nói về kiểu mục nào.

Sử dụng itemtype để xác định các đặc tính nào có thể được sử dụng trong thuộc tính itemprop (đặc tính mục). Ví dụ, trên trang với itemtype là Movie (bộ phim), bạn sẽ thấy một danh sách các đặc tính có thể được sử dụng cho bộ phim đó (xem Tài nguyên). Cũng có thể sử dụng các đặc tính khác ngoài danh sách này nếu bạn sử dụng URL đầy đủ của đặc tính đó. Ví dụ, bảng từ vựng FOAF cũng chỉ rõ một đặc tính name (tên). Bạn có thể sử dụng itemprop="http://xmlns.com/foaf/0.1/name" để dùng đặc tính name của FOAF thay cho đặc tính name của schema.org.

Tất cả các đặc tính bên trong <div> của Movie được hiểu như là các đặc tính của bộ phim đó cho đến khi bạn đạt đến cuối của div hoặc cho đến khi bạn đạt đến một itemscope trên một div bên trong Movie, như trong Liệt kê 1. Thuộc tính itemscope cho biết rằng bạn đang nói về một mục khác (trong trường hợp này là một người), vì vậy đặc tính birthplace (nơi sinh) được hiểu là một thuộc tính của Person (Người) thay cho Movie (Bộ phim).

Vì bạn đã thêm một ít cấu trúc vào nội dung của bạn, nên thật dễ dàng trích ra các thông tin có liên quan với cả hai công cụ. Bằng cách thêm các thuộc tính vào HTML, bạn đã làm cho dữ liệu trong trang của bạn dễ dàng xử lý — như thể dự liệu đã ở trong một bảng tính Excel hoặc một cơ sở dữ liệu.

Mặc dù microdata khá đơn giản, nhưng vẫn còn có thể có khó khăn để đặt và duy trì các nội dung bằng tay. Một số công cụ hỗ trợ sản xuất microdata, bao gồm mô-đun Microdata của Drupal (xem Tài nguyên).


Sử dụng Drupal để thêm microdata vào các trang của bạn

Drupal là một hệ thống quản lý nội dung chiếm 2% trang web được đánh giá. Với giao diện người dùng của mình, các quản trị viên trang web có thể tạo ra các biểu mẫu để thu thập nội dung từ những người dùng. Sau đó Drupal tự động tạo ra các bảng và các trường thích hợp trong cơ sở dữ liệu cho dữ liệu biểu mẫu và xử lý hiển thị dữ liệu theo một cách có thể cấu hình được.

Drupal đặc biệt thích hợp để xuất ra dữ liệu có cấu trúc do cách nội dung được xử lý — như là các thứ riêng biệt (được gọi là các thực thể) có các đặc tính dưới dạng các giá trị trường. Với Drupal 7, khả năng để thêm dữ liệu có cấu trúc vào HTML khi sử dụng RDFa đã được tích hợp vào lõi Drupal.

Kể từ khi thông báo schema.org vào ngày 2 tháng 6 năm 2011, công việc vẫn tiến triển để tăng thêm sự hỗ trợ tương tự cho đầu ra microdata. Mô-đun microdata vẫn còn đang phát triển và chưa sẵn sàng để sử dụng trên các trang web hoạt động. Để thử nghiệm trên các trang thử nghiệm, bạn có thể sử dụng mô-đun microdata để tạo microdata cho các trường và thử nghiệm các hiển thị Rich Snippet dựa trên microdata đó.

Hãy bắt đầu bằng cách tạo lại ví dụ ở trên bằng cách sử dụng Drupal. Xem Tài nguyên để tải về và kích hoạt phiên bản mới nhất của các mô-đun sau:

  • Microdata
  • Entity API
  • CTools

Đánh dấu kiểu nội dung

Một kiểu nội dung (content type) cho phép người dùng xác định các giá trị trường nào được thu thập và được lưu trữ cho một thực thể. Ví dụ, bạn có thể tạo ra một kiểu nội dung sản phẩm có các trường biểu mẫu để thu thập giá cả, các màu có sẵn, các kích thước và số mô hình của nhà sản xuất, giúp cho việc bảo quản hàng hóa tồn kho dễ dàng.

Với bài tập này, bạn sẽ tạo ra một kiểu nội dung phim. Hãy chuyển đến Structure > Content Types, nhấn vào liên kết Add Content type (Thêm kiểu nội dung) và nhập các thông tin sau.

  • Tên: Movie.
  • Mô tả: A page describing a movie (Một trang mô tả một bộ phim),
  • Các thiết lập nhận xét: Chọn Closed. (Đã đóng). Bạn không cần chức năng nhận xét trên trang đó.
  • Các thiết lập microdata: Thêm itemtype là http://schema.org/Movie.

    Tiêu đề là một loại trường đặc biệt và không có màn hình chỉnh sửa riêng của mình, vì vậy bạn cũng nên thêm tiêu đề ở đây. Sử dụng đặc tính name để đánh dấu tiêu đề.

Bạn có thể kiểm tra xem ví dụ này đã làm việc chưa bằng cách tạo ra một mục Movie mới. Chuyển đến Add content (Thêm nội dung) để tạo Movie. Sau khi bạn tạo nó, hãy sử dụng công cụ thử nghiệm Rich Snippets để xác định xem bạn có thể trích xuất dữ liệu từ trang đó không. Bạn sẽ thấy một mục duy nhất với một Kiểu là http://schema.org/movie và tên là Cool Hand Luke như trong Hình 2.

Hình 2. Microdata được trích xuất sau khi ánh xạ kiểu nội dung và tiêu đề
Ảnh chụp màn hình microdata được trích ra sau khi ánh xạ tên và kiểu nội dung

Kiểu nội dung đã được ghi nhận như là một bộ phim có một tiêu đề. Tuy nhiên, có nhiều thông tin về bộ phim này.


Đánh dấu các trường văn bản

Các trường được đính vào các kiểu nội dung để thu thập thông tin thêm về nội dung đó. Trong ví dụ này, hãy thêm thể loại (genre) của một bộ phim như một trường riêng của nó.

Để thêm thể loại vào kiểu nội dung, chuyển đến Structure > Content types và nhấn Manage fields (Quản lý các trường) cho kiểu nội dung của bộ phim. Bạn sẽ sử dụng một trường văn bản để thu thập thể loại. Nhập các thông tin sau.

  • Nhãn: Genre (Thể loại)
  • Tên trường: genre (Thể loại)
  • Kiểu trường: Text (Văn bản)
  • Widget của trường: Text field (Trường văn bản)

Nhấn Save field settings (Lưu các thiết lập trường) trên trang tiếp theo. Ở dưới cùng của biểu mẫu cấu hình cá thể trường, bạn sẽ thấy Genre Microdata Mapping (Ánh xạ Microdata thể loại), như trong Hình 3. Thiết lập thuộc tính trường này là genre và nhấn Save (Lưu).

Hình 3. Giao diện để ánh xạ trường văn bản
Ảnh chụp màn hình giao diện để ánh xạ trường văn bản

Chỉnh sửa đoạn nội dung của bạn và thêm thể loại của bộ phim. Làm mới Rich Snippet. Lúc này thể loại hiển thị với kiểu và tên.

Đánh dấu các trường hình ảnh

Mặc dù ví dụ này đã không biểu diễn các hình ảnh, bạn có thể thêm vào một hình ảnh, như các áp phích quảng cáo bộ phim, vào kiểu nội dung này. Sau đó, một ảnh thu nhỏ của hình ảnh này hiển thị với Rich Snippet.

Để thêm hình ảnh vào kiểu nội dung, chuyển đến Structure > Content types và nhấn vào Manage fields.

  • Nhãn: Poster (Áp phích quảng cáo)
  • Tên trường: poster (Áp phích quảng cáo)
  • Kiểu trường: Image (Hình ảnh)
  • Widget của trường: Image (Hình ảnh)

Sử dụng đặc tính image schema.org cho áp phích quảng cáo đó. Trong trường đặc tính trường này, hãy nhập vào image, như trong Hình 4.

Hình 4. Giao diện để ánh xạ trường hình ảnh
Ảnh chụp màn hình giao diện để ánh xạ trường hình ảnh

Lưu và chỉnh sửa bộ phim để thêm một hình ảnh. Thử nghiệm lại Rich Snippet đó. Bạn sẽ thấy đặc tính image có URL của mình, http://lin-clark.com/sites/default/files/cool-hand-luke.jpg, như trong Hình 5. Mục duy nhất cũng có một Kiểu là http://schema.org/movie, một tên là Cool Hand Luke và thể loại là prison drama.

Hình 5. Microdata được trích xuất từ trường văn bản và trường hình ảnh
Ảnh chụp màn hình microdata được trích xuất từ trường hình ảnh và văn bản

Bạn cũng có thể thấy một Rich Snippet được hiển thị với một hình ảnh thu nhỏ của áp phích quảng cáo, như trong Hình 6. Công cụ thử nghiệm của Google đang trong giai đoạn phát triển rất tích cực; hiển thị của Rich Snippet cho cách đánh dấu tương tự này thay đổi theo thời gian. Rich Snippet này đã được chụp vào ngày 14 tháng 9, nhưng hiển thị được thay đổi bằng ngày 19 tháng 9.

Hình 6. Rich Snippet được hiển thị với bộ phim
Ảnh chụp màn hình một Rich Snippet được hiển thị cho bộ phim. Được chụp vào 14.09, hiển thi đã thay đôei thành 19.09

Cung cấp microdata trong các trình định dạng trường

Các trường văn bản và hình ảnh gồm có rất nhiều dữ liệu mà mọi người thường đặt trên một trang web, nhưng có các kiểu dữ liệu khác. Để đưa vào tất cả các loại dữ liệu mà một quản trị viên trang web có thể cần đến, hệ thống trường của Drupal cung cấp cho người dùng một lựa chọn các kiểu trường cơ bản và cung cấp một API để cho các mô-đun có thể định nghĩa các kiểu trường mới. Trong các mô đun này, bạn có thể xác định các biểu mẫu thu thập dữ liệu khác nhau (các widget), lưu trữ dữ liệu và hiển thị (các trình định dạng) cho từng kiểu trường. Rồi các quản trị viên trang web có thể cài đặt các mô-đun trường này và cấu hình các widget và các trình định dạng mà không phải viết bất kỳ đoạn mã nào.

Microdata có các yêu cầu nghiêm ngặt về nơi đặt các thuộc tính microdata trong HTML, vì vậy mỗi kiểu trường trong Drupal cần xác định nơi đặt các thuộc tính trong các trình định dạng của nó. Trong khi microdata được hỗ trợ cho hầu hết các trường trường được định nghĩa bởi lõi, nhiều kiểu trường được sử dụng rộng rãi vẫn không hỗ trợ microdata.

Để sử dụng một trình định dạng trường được xác định trong một mô-đun đã đóng góp, bạn có thể kiểm tra bảng theo dõi hỗ trợ microdata. Thậm chí nếu trình định dạng trường vẫn chưa được hỗ trợ, điều đó không có nghĩa là bạn không thể sử dụng nó. Thật dễ dàng để thêm sự hỗ trợ microdata cho một trình định dạng trường. Bạn thậm chí có thể đóng góp sự hỗ trợ microdata ngược lại mô-đun bằng cách tạo ra một bản vá với các thay đổi của bạn. Đây là một cách thú vị để bắt đầu với cộng đồng nhà phát triển Drupal.

Trong ví dụ của schema.org, một liên kết đến đoạn phim quảng cáo của bộ phim đã được đánh dấu. Tại thời điểm viết bài này, trình định dạng trường liên kết được xác định bởi mô-đun Liên kết (Link) của Drupal không hỗ trợ microdata, nhưng bạn có thể thay đổi điều đó.

Bạn sẽ thêm sự hỗ trợ của microdata cho mô-đun Liên kết. Các ví dụ dưới đây sử dụng mã của mô-đun Liên kết từ 20.09.2011, được cung cấp trong tệp Tải về với bài này. (Phiên bản hiện tại của mô-đun Liên kết đã thay đổi và có thể đã có sự hỗ trợ của microdata).

Đăng ký các đặc tính

Trường liên kết có hai đoạn dữ liệu khác nhau mà bạn có lẽ cần trưng ra khi sử dụng microdata:

  • URL cho liên kết đó.
  • Văn bản được liên kết đến URL đó.

Tại thời điểm này, bạn cần thông báo cho hệ thống về hai đặc tính này thông qua một mô-đun API Entity: Entity Property API (API đặc tính của thực thể).

Bạn phải thêm các thông tin vào định nghĩa trường, được đăng ký bởi link_field_info. Thêm property_type (kiểu đặc tính) cho chính trường đó và property_callbacks (các cuộc gọi lại đặc tính), như trong Liệt kê 2.

Liệt kê 2. Thêm thông tin đặc tính cho trường này tới link_field_info
/**
 * Implements hook_field_info().
 */
function link_field_info() {
return array(
    'link_field' => array(
      'label' => t('Link'),
     'description' => t('Store a title, href, and attributes in the database to
 assemble a link.'),
      // ...
      'property_type' => 'field_item_link',
      'property_callbacks' => array('link_field_property_info_callback'),
    ),
  );
}

Kiểu đặc tính để cho hệ thống biết kiểu dữ liệu của trường này. Vì field_item_link không phải là một kiểu dữ liệu hay thực thể được ghi nhận, kiểu dữ liệu mặc định là struct (cấu trúc) khi nó được xử lý. Kiểu dữ liệu struct này hoạt động như một thùng chứa cho các đặc tính mà bạn đánh dấu (URL liên kết và văn bản được liên kết). Vì nó chỉ đơn giản là một thùng chứa, nên bạn không cung cấp microdata cho chính trường đó — chỉ vì các đặc tính của nó.

Cuộc gọi lại đặc tính là một chức năng đăng ký thông tin kiểu đặc tính tương tự cho các đặc tính thành phần. Để đánh dấu các đặc tính với microdata, hãy thiết lập microdata là TRUE (Đúng) cho mỗi đặc tính, như trong Liệt kê 3. Điều này cung cấp giao diện người dùng đồ họa để thêm microdata cho các đặc tính này.

Liệt kê 3. Đăng ký các đặc tính của trường này với cuộc gọi lại đặc tính
/**
 * Additional callback to adapt the property info of link fields.

 * @see entity_metadata_field_entity_property_info().
 */

function link_field_property_info_callback(&$info, $entity_type, $field, $instance,
$field_type) {
  $property = &$info[$entity_type]['bundles'][$instance['bundle']]['properties']
[$field['field_name']];


  $property['property info'] = array(
    'title' => array(
     'type' => 'text',
     'label' => t('The title of the link.'),
     'microdata' => TRUE,
   ),
   'url' => array(
     'type' => 'uri',
     'label' => t('The URL of the link.'),
      'microdata' => TRUE,
    ),
  );
 if ($instance['settings']['title'] == 'none') {
   unset($property['property info']['title']);
 }
}

Giao diện người dùng kéo các nhãn từ thông tin đặc tính và sử dụng kiểu để xác định loại các trường biểu mẫu nào cần hiển thị. Nếu đặc tính là một mục thay vì một chuỗi, một trường itemtype cũng hiển thị. Hình 7 cho thấy một ví dụ với hai thuộc tính của một đoạn phim ngắn quảng cáo phim mới: tiêu đề liên kết và URL liên kết.

Hình 7. Biểu mẫu ánh xạ microdata liên kết
Ảnh chụp màn hình dạng ánh xạ microdata liên kết

Bây giờ bạn có thể chỉ rõ các thuật ngữ của bảng từ vựng nào dùng cho các thuộc tính của trường trên biểu mẫu cấu hình trường. Tuy nhiên, các thuộc tính vẫn chưa được chèn vào HTML cho đến khi bạn thêm một chút mã nữa.

Thêm microdata tới đầu ra có thiết kế chủ đề

Để đặt microdata, bạn cần hay đổi đầu ra HTML cho trường này. Ví dụ, để thêm một liên kết đến một ứng dụng phần mềm, bạn có thể cần văn bản liên kết (tên của phần mềm) để sử dụng đặc tính name và chính liên kết đó để sử dụng đặc tính url. Liệt kê 4 cho thấy cách làm điều này bằng cách thêm itemprop của URL vào thẻ <a> và chèn một span với itemprop của văn bản gần nội dung văn bản.

Liệt kê 4. Một liên kết trước và sau khi thêm microdata
<a href="http://drupal.org">Drupal</a>

<a itemprop="url" href="http://drupal.org"><span itemprop="name">Drupal</span></a>

Mọi thứ dễ dàng hơn nếu bạn có thể lấy được mô-đun Liên kết để chèn các thuộc tính này. Để chuyển đổi nội dung từ cơ sở dữ liệu cho trường này vào HTML, mỗi mô-đun trình định dạng trường có chức năng khung nhìn riêng của mình. Trong chức năng khung nhìn, một số trình định dạng sử dụng các chức năng chủ đề (theme) để tạo HTML. Một ví dụ là theme_link_formatter_link_default(). Thông thường, các thuộc tính microdata cần được chuyển field_formatter_view thành chức năng chủ đề.

Trong mô-đun Liên kết, trình định dạng đã vượt qua một mảng các thuộc tính để được đặt vào thẻ <a> bằng cách sử dụng biến item. Bạn có thể thêm itemprop của URL vào mảng đó để có kết quả đầu ra tự động ở nơi bạn cần nó, như trong Liệt kê 5.

Liệt kê 5. Thêm microdata trong hook_field_formatter_view
/**
 * Implements hook_field_formatter_view().
 */
function link_field_formatter_view($entity_type, $entity, $field, $instance, 
         $langcode, $items, $display) {
  $elements = array();
  $microdata = array();

  // If the microdata module is enabled, the microdata mapping will have been
  // passed in via the entity.
  if (module_exists('microdata')) {
    $microdata = $entity->microdata[$field['field_name']];
  }

  foreach ($items as $delta => $item) {
    // Add the url attributes to $item['attributes'] because the theme function
    // will pass it through to l(), properly placing the itemprop for the url.
    if (isset($microdata['url'])) {
      $item['attributes'] += $microdata['url']['#attributes'];
    }
    // Pass the microdata array to the theme function so it can be used to place
    // the link title's attribute.
    $elements[$delta] = array(
      '#markup' => theme('link_formatter_'. $display['type'], array('element' => $item, 
      'field' => $instance, 'microdata' => $microdata)),
    );
  }
  return $elements;
}

Tuy nhiên, không có cách tự động nào để đặt các thuộc tính cho nội dung văn bản. Bạn phải chuyển chúng vào chức năng chủ đề và thay đổi chức năng chủ đề để sử dụng chúng.

Sau khi bạn chuyển các biến microdata thành chức năng theme (chủ đề), bạn có thể thêm thẻ <span> có chứa itemprop xung quanh tiêu đề. Đoạn mã này kiểm tra để xem liệu có một itemprop cho văn bản đó không và nếu có, bạn thêm microdata, như trong Liệt kê 6.

Liệt kê 6. Thêm microdata vào chức năng chủ đề
/**
 * Theme function for 'default' text field formatter.
 */
function theme_link_formatter_link_default($vars) {
  $url = $vars['element']['url'];
  $microdata = $vars['microdata'];
  // If there is an itemprop set for the title, wrap the title in a span and
  // add the itemprop to that span.
  if (!empty($microdata['title'])) {
    $title = '<span ' . drupal_attributes($microdata['title']['#attributes']) 
                . '>' . $vars['element']['title'] . '</span>';
  }
  else {
    $title = $vars['element']['title'];
  }

  // Create the array of options to pass to l().
  $link_options = $vars['element'];
  unset($link_options['element']['title']);
  unset($link_options['element']['url']);
  
  // Display a normal link if both title and URL are available.
  if (!empty($title) && !empty($url)) {
    return l($title, $url, $link_options);
  }
  // If only a title, display the title.
  elseif (!empty($title)) {
    return check_plain($title);
  }
  // If only a url, display the full url as a link.
  elseif (!empty($url)) {
    return l($url, $url, $link_options);
  }
}

Bây giờ bạn có thể kiểm tra đầu ra microdata cho trình định dạng.


Đóng góp các thay đổi của bạn trở lại cộng đồng

Một trong những điều làm cho Drupal trở thành một giải pháp kỹ thuật mạnh mẽ là số lượng lớn các cộng tác viên tạo nên cộng đồng của nó. Các cộng tác viên không chỉ là những người sống và thở với Drupal; nhiều cộng tác viên thực hiện sửa chữa mã ngẫu nhiên cho các trang web riêng của họ, rồi họ đăng lên như là một bản vá lỗi cho những người khác sử dụng.

Nếu bạn thêm microdata cho một trình định dạng trường cho dự án của riêng của bạn, bạn có thể đóng góp công việc đó trở lại cho cộng đồng Drupal. Chỉ cần đăng lên một vấn đề trong hàng đợi vấn đề cho mô-đun và đề xuất microdata hỗ trợ cho mô-đun đó. Kiểu vấn đề này được gọi là một yêu cầu tính năng. Sau đó bạn có thể đăng lên một bản vá với các thay đổi của bạn về vấn đề này. (Có một số hướng dẫn thú vị giải thích cách tạo các bản vá lỗi cho các dự án Drupal). Một khi bạn đã đăng các bản vá, hãy đánh dấu vấn đề đó là "cần xem xét".


Kết luận

Trong bài này, bạn đã học cách sử dụng Drupal để thêm microdata vào các trang web của bạn sao cho nội dung của bạn có thể được dùng trong các ứng dụng như là Rich Snippets của Google. Với mô-đun microdata mới, bạn có thể cấu hình đầu ra microdata cho các kiểu trường cơ bản và thêm đầu ra microdata cho các kiểu trường tùy chỉnh. Bây giờ dữ liệu của bạn có sẵn cho những người khác để tạo ra các ứng dụng ở trên nó.


Tải về

Mô tảTênKích thước
Article source codemicrodata-source2.zip820KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=808433
ArticleTitle=Kết hợp Drupal, HTML5 và microdata
publish-date=11082011