Tổng quan về Việt hóa Label trong Blogspot

Các bài viết cũ trước đây trong Blog, mình đã viết hướng dẫn khá đầy đủ về cách tối ưu cho Nhãn hiển thị tiếng Việt có dấu và tạo link không dấu nhưng lại độc lập từng bài do đó nếu bạn nào muốn Việt hóa Label (Nhãn) cho Blog của mình phải mất nhiều thời gian tìm kiếm từng bài.

Hôm nay mình tổng hợp thành một bài viết và các bạn chỉ cần làm theo bài này là được. Đầu tiên, bạn cần nắm chắc 2 vấn đề chính:

Vấn đề 1: Tên nhãn khi soạn bài viết phải sử dụng tên không dấu và được ngăn cách nhau bằng dấu (-), ví dụ bạn muốn tạo mới một nhãn có tên Thủ thuật Blogspot thì bạn phải đặt tên cho nhãn đó là: thu-thuat-blogspot

Vấn đề 2: Nếu bạn sử dụng nhiều Nhãn trong một bài viết, đồng nghĩa với việc bạn đang sử dụng nhãn phân cấp mà theo quy ước tên nhãn được hiển thị theo bảng chữ cái từ trái qua phải. Lấy ví dụ, bạn có một bài viết có 2 nhãn tên Blogspot và Thủ thuật Blogspot thì nhãn Blogspot là nhãn chính và Thủ thuật Blogspot là nhãn con của nhãn Blogspot và trong nhãn Blogspot lại có các nhãn con khác ví dụ: Thiết kế Blogspot, Tiện ích Blogspot.

Để đi vào chi tiết cho từng mục, mình sẽ lấy ví dụ trong Blog đang có những nhãn sau:

• blog: Blogspot
• thu-thuat-blogspot: Thủ thuật Blogspot
• may-tinh: Máy tính
• thu-thuat-windows: Thủ thuật Windows

Sau đây sẽ là chi tiết từng phần:

Việt hóa Label trong bài viết

Áp dụng cho tiện ích Bài đăng trên Blog (widget Blog1 version='1' & version=2'), tiện ích PopularPosts (PopularPosts widget version='2'), tiện ích FeaturedPost (FeaturedPost widget version='2')

Vòng lặp của nhãn có dạng:

Copy

<b:loop values='data:posts' var='post'>



  <b:loop values='data:post.labels' var='label'>

    <data:label.name/> // Tên nhãn

    <data:label.url/> // URL của nhãn

  </b:loop>



</b:loop>

Để Việt hóa nhãn thêm điều kiện b:if bằng nhãn đó sau đó tùy biến hiển thị như sau:

Copy

<b:loop values='data:post.labels' var='label'>

  <b:if cond='data:label.name == &quot;blog&quot;'>

    <a expr:href='data:label.url' title='Blogspot'>Blogspot</a>

  <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>

    <a expr:href='data:label.url' title='Thủ thuật Blogspot'>Thủ thuật Blogspot</a>

  <b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>

    <a expr:href='data:label.url' title='Máy tính'>Máy tính</a>

  <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>

    <a expr:href='data:label.url' title='Thủ thuật Windows'>Thủ thuật Windows</a>

  <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định

    <a expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>

  </b:if>

</b:loop>

Việt hóa Label trong đường dẫn Breadcrumb

Liên quan đến nhãn thì có 2 loại trang: Bài viết và trang tìm kiếm Label và yêu cầu trong mẫu template phải có sẵn breadcrumb

Trang bài viết

Trong widget Blog1, trong thẻ dữ liệu bố cục <b:includable id='breadcrumb' var='posts'>⋯</b:includable>, đường dẫn label sẽ được đặt trong thẻ điều kiện <b:if cond='data:blog.pageType == &quot;item&quot;'> hay <b:if cond='data:view.isPost'>

Copy

<b:if cond='data:view.isPost'>

  <b:loop values='data:posts' var='post'>

  <div class='breadcrumbs'>

    <ul typeof='BreadcrumbList' vocab='http://schema.org/'>

      <li property='itemListElement' typeof='ListItem'>

        <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home' property='item' typeof='WebPage'><span property='name'><data:messages.home/></span></a>

        <meta content='1' property='position'/>

      </li>

      <b:loop index='item' values='data:post.labels' var='label'>

      <b:if cond='data:label.name == &quot;blog&quot;'>

      <li property='itemListElement' typeof='ListItem'>

        <a expr:href='data:label.url' property='item' title='Blogspot' typeof='WebPage'><span property='name'>Blogspot</span></a>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

      </li>

      <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>

      <li property='itemListElement' typeof='ListItem'>

        <a expr:href='data:label.url' property='item' title='Thủ thuật Blogspot' typeof='WebPage'><span property='name'>Thủ thuật Blogspot</span></a>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

      </li>

      <b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>;

      <li property='itemListElement' typeof='ListItem'>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

      </li>

      <b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>

      <li property='itemListElement' typeof='ListItem'>

        <a expr:href='data:label.url' property='item' title='Thủ thuật Windows' typeof='WebPage'><span property='name'>Thủ thuật Windows</span></a>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

      </li>

      <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định

      <li property='itemListElement' typeof='ListItem'>

        <a expr:href='data:label.url' expr:title='data:label.name' property='item' typeof='WebPage'><span property='name'><data:label.name/></span></a>

        <b:if cond='data:label.isLast != &quot;true&quot;'><meta expr:content='data:item + 2' property='position'/></b:if>

      </li>

      </b:if>

      </b:loop>

    </ul>

  </div>

  </b:loop>

</b:if>

Trang Label

Trong breadcrumb trang label được hiển thị với thẻ dữ liệu có tên <data:blog.pageName/>, do đó sẽ đặt điều kiện cho trang label bằng với tên nhãn xong tùy biến hiển thị

Copy

<b:if cond='data:blog.searchLabel == &quot;blog&quot;'>

  <div class='breadcrumbs'>

    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>

    <span>Blogspot</span>

  </div>

<b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-blogspot&quot;'/>

  <div class='breadcrumbs'>

    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>

    <span>Thủ thuật Blogspot</span>

  </div>

<b:elseif cond='data:blog.searchLabel == &quot;may-tinh&quot;'/>

  <div class='breadcrumbs'>

    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>

    <span>Máy tính</span>

  </div>

<b:elseif cond='data:blog.searchLabel == &quot;thu-thuat-windows&quot;'/>

  <div class='breadcrumbs'>

    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>

    <span>Thủ thuật Windows</span>

  </div>

<b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định

  <div class='breadcrumbs'>

    <a expr:href='data:blog.canonicalHomepageUrl' expr:title='data:messages.home'><data:messages.home/></a>

    <span><data:blog.pageName/></span>

  </div>

</b:if>

Việt hóa Label trong widget Label

Tên nhãn của widget Label được đặt trong vòng lặp b:loop như sau:

Copy

<b:loop values='data:labels' var='label'>

  <a class='label-name' expr:href='data:label.url' expr:title='data:label.name'>

    <data:label.name/>

    <b:if cond='data:this.showFreqNumbers'>

      <span class='label-count'><data:label.count/></span>

    </b:if>

  </a>

</b:loop>

Để Việt hóa nhãn thêm điều kiện b:if bằng nhãn đó sau đó tùy biến hiển thị như sau:

Copy

<b:loop values='data:labels' var='label'>

  <b:if cond='data:label.name == &quot;blog&quot;'>

  <a expr:href='data:label.url' title='Blogspot'>

    Blogspot

  <b:if cond='data:this.showFreqNumbers'>

    <span class='label-count'><data:label.count/></span>

  </b:if>

  </a>

  <b:elseif cond='data:label.name == &quot;thu-thuat-blogspot&quot;'/>

  <a expr:href='data:label.url' title='Thủ thuật Blogspot'>

    Thủ thuật Blogspot

  <b:if cond='data:this.showFreqNumbers'>

    <span class='label-count'><data:label.count/></span>

  </b:if>

  </a>

  <b:elseif cond='data:label.name == &quot;may-tinh&quot;'/>

  <a expr:href='data:label.url' title='Máy tính'>

    Máy tính

  <b:if cond='data:this.showFreqNumbers'>

    <span class='label-count'><data:label.count/></span>

  </b:if>

  </a>

  <b:elseif cond='data:label.name == &quot;thu-thuat-windows&quot;'/>

  <a expr:href='data:label.url' title='Thủ thuật Windows'>

    Thủ thuật Windows

  <b:if cond='data:this.showFreqNumbers'>

    <span class='label-count'><data:label.count/></span>

  </b:if>

  </a>

  <b:else/> // Nếu các nhãn khác không đặt điều kiện thì hiển thị mặc định

  <a class='label-name' expr:href='data:label.url' expr:title='data:label.name'>

    <data:label.name/>

  <b:if cond='data:this.showFreqNumbers'>

    <span class='label-count'><data:label.count/></span>

  </b:if>

  </a>

  </b:if>

</b:loop>

Việt hóa Label trong script

Khi sử dụng nguồn cấp feeds lấy dữ liệu bài viết bằng cách tạo script, có thể đặt điều kiện if trong script cho tên nhãn, ví dụ mẫu về đoạn script hiển thị tên nhãn

Copy

<script>//<![CDATA[

function getPosts(e) {

  if (e.feed.entry) {

    for (var t = 0; t < e.feed.entry.length; t++) {

      for (var r = 0; r < e.feed.entry[t].category.length; r++) {

        var l = e.feed.entry[t].category[r].term,

        n = "/search/label/" + l;

        if (l == "blog") {

          l = l.replace("blog", "Blogspot");

        }

        if (l == "thu-thuat-blogspot") {

          l = l.replace("thu-thuat-blogspot", "Thủ thuật Blogspot");

        }

        if (l == "may-tinh") {

          l = l.replace("may-tinh", "Máy tính");

        }

        if (l == "thu-thuat-windows") {

          l = l.replace("thu-thuat-windows", "Thủ thuật Windows");

        }

      }

    }

  }

}

//]]></script>

<script src='/feeds/posts/summary?alt=json-in-script&amp;max-results=10&amp;callback=getPosts'></script>

Việt hóa Label trên thẻ meta

Trong phần cuối này mình đã viết bài Các bước thêm thẻ meta đầy đủ, chính xác và không bị trùng lặp trong đó có đề cập đến thẻ meta của nhãn, các bạn tham khảo và làm theo hướng dẫn của bài viết là được.

Nội dung chính