Hướng dẫn tạo đường dẫn breadcrumb cho trang tìm kiếm Label

Nếu bài viết bạn sử dụng Label (Nhãn) phân cấp có ít nhất từ hai nhãn trở lên thì trong trang tìm kiếm Label bạn cũng nên tạo đường dẫn breadcrumb cho Label như vậy sẽ chuyên nghiệp hơn. Chắc bạn thường xuyên đọc các trang báo khi bạn nhấp chọn mục nào đó trong menu sẽ đi đến trang của mục đó và trong trang sẽ có đường dẫn bao gồm mục lớn và mục nhỏ trong mục lớn đó.

Mình lấy ví dụ khi sử dụng label phân cấp khi bạn nhấp vào label Windows 10 sẽ ra đường dẫn như sau:

Windows 10 | Fix lỗi Quản lý Tin tức Thủ thuật

Như vậy có thể hiểu Windows 10 là label mẹ trong đó bao gồm các label con Fix lỗi, Quản lý, Tin tức Thủ thuật.

Còn khi bạn nhấp chuột vào label ví dụ Thủ thuật sẽ ra đường dẫn

Windows 10 > Thủ thuật

Hình minh họa

Trong blogspot tại các trang index không có điều kiện gọi label tự động như trang bài viết được cho nên nếu bạn muốn tạo được đường dẫn cho label bạn phải làm thủ công giống như cách bạn tạo menu cố định vậy. Trong bài này mình sẽ hướng dẫn cách tạo được đường dẫn như vậy còn bố trí như thế nào bạn tự thiết kế css cho phù hợp.

Mình hướng dẫn dựa vào bài viết Hướng dẫn thêm dữ liệu cấu trúc Breadcrumb cho bài viết bạn vào chỉnh sửa template tìm và mở rộng đoạn <b:includable id='breadcrumb' var='posts'> trong đó có điều kiện <b:if cond='data:view.isMultipleItems'> nếu là blog khác là đoạn điều kiện <b:if cond='data:blog.pageType == "index"'>

Lấy đoạn html của trang index trong nội dung của breadcrumb như sau:

Copy

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

  <div class='breadcrumbs'>

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

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

    </b:if>

  </div>

</b:if>

Bây giờ bạn thêm thủ công như sau:

Copy

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

  <div class='breadcrumbs'>

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

    <b:if cond='data:blog.searchLabel == &quot;chuyen-muc-windows-10&quot;'>

      <a expr:href='data:blog.canonicalUrl' title='Chuyên mục Windows 10'>Windows 10</a>&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;

      <a href='/search/label/fix-loi' title='Fix lỗi Windows 10'>Fix lỗi</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/quan-ly' title='Quản lý Windows 10'>Quản lý</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/tin-tuc' title='Tin tức Windows 10'>Tin tức</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/thu-thuat' title='Thủ thuật Windows 10'>Thủ thuật</a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

    </b:if></b:if>

  </div>

</b:if>

Chỗ mình mới thêm bằng đoạn html đậm và để tạo được đường dẫn đó là sử dụng điều kiện trong trang tìm kiếm label

Copy

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

// Đường dẫn label đặt ở đây

</b:if>

Đường dẫn mình vừa thêm vào ở trên khi truy cập trang label có tên Windows 10 sẽ ra đường dẫn bên dưới

Windows 10 | Fix lỗi Quản lý Tin tức Thủ thuật

Bây giờ tiếp tục tạo đường dẫn cho các trang khác ví dụ như trang label Thủ thuật

Copy

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

  <div class='breadcrumbs'>

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

    <b:if cond='data:blog.searchLabel == &quot;chuyen-muc-windows-10&quot;'>

      <a expr:href='data:blog.canonicalUrl' title='Chuyên mục Windows 10'>Windows 10</a>&amp;nbsp;&amp;nbsp;|&amp;nbsp;&amp;nbsp;

      <a href='/search/label/fix-loi' title='Fix lỗi Windows 10'>Fix lỗi</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/quan-ly' title='Quản lý Windows 10'>Quản lý</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/tin-tuc' title='Tin tức Windows 10'>Tin tức</a>&amp;nbsp;&amp;nbsp;

      <a href='/search/label/thu-thuat' title='Thủ thuật Windows 10'>Thủ thuật</a>

    <b:else/>

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

       <a href='/search/label/chuyen-muc-windows-10' title='Chuyên mục Windows 10'>Windows 10</a> &#8250; 

       <a expr:href='data:blog.canonicalUrl' title='Thủ thuật Windows 10'>Thủ thuật</a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

    </b:if></b:if></b:if>

  </div>

</b:if>

Như vậy khi nhấp vào trang Thủ thuật sẽ ra đường dẫn

Windows 10 > Thủ thuật

Cứ như vậy bạn thêm cho các trang label khác với mẫu sau

Copy

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

  <div class='breadcrumbs'>

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

    <b:if cond='data:blog.searchLabel == &quot;tên-label&quot;'>

       // Đường dẫn label đặt ở đây

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/></a>

    <b:else/>

      <a expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><data:homeMsg/></a> &#8250;

      <a expr:href='data:blog.canonicalUrl' expr:title='data:blog.pageName'><data:blog.pageName/></a>

    </b:if></b:if>

  </div>

</b:if>

Cứ thêm một điều kiện cho trang tìm kiếm label cố định lại thêm một thẻ <b:else/> bên dưới và kết thúc một thẻ </b:if>

Chấm hết bài!!!

Nội dung chính