Cách tạo đường dẫn Breadcrumb nhanh, gọn và chính xác

Đường dẫn Breadcrumb hay thanh điều hướng là một trong những thành phần quan trọng nhất khi xây dựng website. Cũng như thanh Menu đầu trang, đường dẫn Breadcrumb lúc nào cũng phải có thậm chí có thể không có menu nhưng thanh điều hướng nhất định phải có.

Tác dụng của Breadcrumb giúp điều hướng nhanh các trang liên kết giúp người đọc biết được hiện tại họ đang ở trang nào. Trong một website URL trang chủ là liên kết chính và tất cả các trang khác được gọi là trang liên kết. Ví dụ khi khách truy cập trang B có đường dẫn như sau:

Trang chủ › Trang A › Trang B

Họ sẽ biết Trang B là trang hiện tại được liên kết đến Trang A và Trang A cũng được liên kết đến Trang chính hay Trang chủ.

Khi thêm thanh điều hướng vào Blog cần xác định những loại trang nào cần có và những trang nào không cần thiết. Cụ thể với những trang dưới đây phải có đường dẫn:

Trang chủ (có thể có hoặc không)
Trang bài đăng cũ hơn
Trang lưu trữ
Trang tìm kiếm label
Trang tìm kiếm kết quả
Trang tĩnh
Trang bài viết

Trong đó Trang bài viết phức tạp nhất liên quan đến 2 yếu tố:

Tên Label
Dữ liệu có cấu trúc

Còn các trang còn lại đa số đều sử dụng thẻ dữ liệu văn bản <data:blog.pageName/>, khi xây dựng tên Label cũng rất quan trọng vì nó liên quan đến đường dẫn. Label là một danh mục không phải từ khóa và label được sắp xếp từ trái qua theo thứ tự bảng chữ cái.

Ví dụ khi viết bài nếu thêm 2 label có tên Du lịch và Châu Á như vậy đường dẫn có dạng sau:

Trang chủ › Châu Á › Du lịch

Như vậy đường dẫn sẽ bị sai và người đọc cũng không hiểu dễ gây nhầm lẫn và đường dẫn đúng phải là

Trang chủ › Du lịch › Du lịch Châu Á

Và khi viết bài thêm 2 label: Du lịch và Du lịch Châu Á, vì đơn giản Du lịch là label chính và Du lịch Châu Á là label con, trong label Du lịch lại có các label con khác như Du lịch Châu Âu, Du lịch Châu Mỹ, Du lịch Châu Phi

Khi áp dụng Breadcrumb vào Blog đa số Blog nào cũng được thêm sẵn rồi chỉ là có chính xác hay không và thường dài kết hợp với thẻ <b:else/> nên rất khó định hình là loại trang nào, thay vào đó cứ sử dụng điều kiện <b:if>...</b:if> cho mỗi trang độc lập sẽ dễ hiểu hơn. Áp dụng vào các trang ta có đường dẫn như sau:

Copy


<b:includable id='breadcrumb' var='posts'>

    <!--Trang chủ-->

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

      <div class='breadcrumbs'><span><data:messages.home/></span></div>

    </b:if>

    <!--Trang tĩnh, lưu trữ, label, tìm kiếm kết quả-->

    <b:if cond='data:view.isPage or data:view.isArchive or data:view.search.label or data:view.search.query'>

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span><data:blog.pageName/></span>

      </div>

    </b:if>

    <!--Trang bài đăng cũ hơn-->

    <b:if cond='data:view.isSearch and !data:view.search.label and !data:view.search.query'>

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span><data:messages.olderPosts/></span>

      </div>

    </b:if>

    <!--Trang bài viết->

    <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.homepageUrl' 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'>

              <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>

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

          </ul>

        </div>

      </b:loop>

    </b:if>

</b:includable>

Phần mở rộng:

Trong trường hợp khi bạn đặt tên label tùy chỉnh không dấu ví dụ Du lịch đặt thành du-lich, Du lịch Châu Á đặt thành du-lich-chau-a nhưng bạn lại muốn hiển thị label bằng tiếng Việt có dấu do đó có 2 loại trang: Trang tìm kiếm label và Trang bài viết phải sửa lại như sau:

Copy


<b:includable id='breadcrumb' var='posts'>

    <!--Trang chủ-->

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

      <div class='breadcrumbs'><span><data:messages.home/></span></div>

    </b:if>

    <!--Trang tĩnh, lưu trữ, tìm kiếm kết quả-->

    <b:if cond='data:view.isPage or data:view.isArchive or data:view.search.query'>

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span><data:blog.pageName/></span>

      </div>

    </b:if>

    <!--Trang tìm kiếm label Du lịch-->

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

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span>Du lịch</span>

      </div>

    </b:if>

    <!--Trang tìm kiếm label Du lịch Châu Á-->

    <b:if cond='data:blog.searchLabel == &quot;du-lich-chau-a&quot;'>

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span>Du lịch Châu Á</span>

      </div>

    </b:if>

    <!--Trang bài đăng cũ hơn-->

    <b:if cond='data:view.isSearch and !data:view.search.label and !data:view.search.query'>

      <div class='breadcrumbs'>

        <a expr:href='data:blog.homepageUrl' expr:title='data:messages.home'><data:messages.home/></a><span><data:messages.olderPosts/></span>

      </div>

    </b:if>

    <!--Trang bài viết có label tên Du lịch, Du lịch Châu Á->

    <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.homepageUrl' 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;du-lich&quot;'>

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

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

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

              </li>

              <b:else/>

              <b:if cond='data:label.name == &quot;du-lich-chau-a&quot;'>

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

                <a expr:href='data:label.url' property='item' title='Du lịch Châu Á' typeof='WebPage'><span property='name'>Du lịch Châu Á</span></a>

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

              </li>

              <b:else/>

              <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:if></b:if>

            </b:loop>

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

          </ul>

        </div>

      </b:loop>

    </b:if>

</b:includable>