[Phần 4] Cập nhật Blog1 lên version 2: Triển khai Breadcrumbs và dữ liệu cấu trúc BlogPosting

Mặc định trong Blog1 v1 và cả v2 đều không tích hợp sẵn Breadcrumbs, trong phần 4 này chúng ta sẽ học cách Triển khai Breadcrumbs và dữ liệu cấu trúc BlogPosting

I. Triển khai Breadcrumbs

Tạo thêm 1 thẻ định nghĩa cho Breadcrumbs trong tiện ích Blog1 (bài viết sử dụng font awesome 4)

<b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
        <b:if cond='data:view.isPage'>
            <div class='breadcrumbs'><span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right' /> <span><data:blog.pageName/></span></div>
            <b:else/>
            <b:if cond='data:view.isPost'>
                <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
                    <span typeof='v:Breadcrumb'><a class='bhome' expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><i class='fa fa-home'/>Home</a></span><i class='fa fa-chevron-right' />
                    <b:loop values='data:posts' var='post'>
                        <b:if cond='data:post.labels'>
                            <b:loop values='data:post.labels' var='label'>
                                <span typeof='v:Breadcrumb'>
                                  <a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>
                                </span>
                                <i class='fa fa-chevron-right' />
                            </b:loop>
                            <b:else/> Không có nhãn
                        </b:if>
                        <span><data:post.title/></span>
                    </b:loop>
                </div>
                <b:else/>
                <b:if cond='data:view.isArchive'>
                    <div class='breadcrumbs'>
                        <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right' /> <span> Lưu trữ cho <b><data:blog.pageName/></b></span>
                    </div>
                    <b:else/>
                    <b:if cond='data:view.isMultipleItems'>
                        <div class='breadcrumbs'>
                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right' /> <span>Tất cả bài đăng</span>
                                <b:else/>
                                <span><a class='bhome' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Trang chủ</a></span> <i class='fa fa-chevron-right' /> <span>Bài đăng hiển thị theo <b><data:blog.pageName/></b></span>
                            </b:if>
                        </div>
                    </b:if>
                </b:if>
            </b:if>
        </b:if>
    </b:if>
</b:includable>

Viết CSS

.breadcrumbs i:before{margin:0 2px;position:relative;top:-1px}
.breadcrumbs{margin:13px 0 0;border-top:1px dashed #ccc;border-bottom:1px dashed #ccc;font-size:15px;padding:6px 0}
.breadcrumbs i{color:#111;font-size:11px!important}
.breadcrumbs span a.bhome{color:#000}
.breadcrumbs,.breadcrumbs a{color:#000}
.breadcrumbs span a:hover{color:#0088ff}

Để hiển thị, viết tiếp vào code <b:includable id='main' var='this'>

<b:include data='posts' name='breadcrumb'/>

II. Triển khai dữ liệu cấu trúc BlogPosting

Trong tiện ích Blog1 v2, blogger tạo cho ta 1 đoạn json dùng để khai báo dữ liệu cấu trúc cho BlogPosting. Thẻ này tên là <b:includable id='postMetadataJSON' var='post'>, thẻ này được định nghĩa ở trên server vì vậy cho dù bạn không định nghĩa mà gọi trực tiếp nó để sử dụng (<b:include data='post' name='postMetadataJSON'/>) thì vẫn được

Ví dụ khi gọi mặc định

Cái xoắn ở đây đó là logo, name luôn mặc định là của blogger, vì thế bạn cần định nghĩa lại thẻ này để đổi logo hoặc name thành của mình

Định nghĩa lại thẻ này như sau

<b:includable id='postMetadataJSON' var='post'>
<script type='application/ld+json'>
{
  "@context": "http://schema.org",
  "@type": "BlogPosting",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "<data:post.url.canonical.jsonEscaped/>"
  },
  "headline": "<data:post.title.jsonEscaped/>",
  "description": "<b:eval expr='(data:post.body snippet { length: 150, links: false, linebreaks: false, ellipsis: true }).jsonEscaped'/>",
  "datePublished": "<data:post.date.iso8601.jsonEscaped/>",
  "dateModified": "<data:post.lastUpdated.iso8601.jsonEscaped/>",
  "image": {
    "@type": "ImageObject",
    "url": "<b:eval expr='(data:post.featuredImage ? resizeImage(data:post.featuredImage, 1200, "1200:630") : "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=w1200").jsonEscaped'/>",
    "height": <b:eval expr='data:post.featuredImage ? 630 : 348'/>,
    "width": 1200
  },
  "publisher": {
    "@type": "Organization",
    "name": "<data:post.author.name.jsonEscaped/>",
    "logo": {
      "@type": "ImageObject",
      "url": "https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60",
      "width": 206,
      "height": 60
    }
  },"author": {
    "@type": "Person",
    "name": "<data:post.author.name.jsonEscaped/>"
  }
}
</script>
</b:includable>

Thay https://lh3.googleusercontent.com/ULB6iBuCeTVvSjjjU1A-O8e9ZpVba6uvyhtiWRti_rBAs9yMYOFBujxriJRZ-A=h60 thành link logo của bạn

Viết tiếp vào <b:includable id='post' var='post'>

<b:include data='post' name='postMetadataJSON'/>

Bạn có thể view-sources trang bài viết bất kì để kiểm tra.

Hết phần 4, hẹn gặp lại trong phần 5