Tùy biến thông báo tại trang báo lỗi và trang kết quả tìm kiếm

Bài viết hôm nay mình hướng dẫn cách tùy biến thông báo hiển thị bằng văn bản tại trang báo lỗi và trang kết quả tìm kiếm. Đôi khi trong thiết kế hay sử dụng template chúng ta vẫn thường bỏ quên hai loại trang này, mình giải thích với hai loại trang này như sau:

+ Trang báo lỗi - data:view.isError: Đây là loại trang độc lập nó không phải là loại trang tìm kiếm data:view.isMultipleItems hay trang bài viết data:view.isSingleItem, trang này chỉ hiển thị khi liên kết đằng sau url trang chủ không đúng trên địa chỉ trình duyệt

+ Trang kết quả tìm kiếm - data:view.search.query: Đây là một trang trong tập hợp các trang data:view.isMultipleItems, trang này sẽ hiển thị kết quả tìm kiếm các bài viết liên quan đến từ khóa trong Blog.

Như vậy chúng ta cần thiết lập nội dung thông báo cho hai loại trang này để khách truy cập khi nhập sai địa chỉ dẫn đến trang báo lỗi và nội dung sẽ hiển thị ra, còn với trang kết quả tìm kiếm khi tìm kiếm từ khóa nào đó nếu không có bài viết liên quan nào đến từ khóa sẽ trả về nội dung thông báo ví dụ không tìm thấy kết quả. Phương pháp thực hiện như sau:

Đăng ký 1 thẻ tag b:includable trong widget Blog1 với nội dung như bên dưới:

Copy


 <b:includable id='noContentPlaceholder'>

  <b:if cond='data:posts.empty'>

    <style>

     // Viết css cho trang

    </style>

    <div class='post'>

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

        // Viết thông báo cho trang báo lỗi

      <b:else/>

        // Viết thông báo cho trang kết quả tìm kiếm khi không tìm thấy kết quả

      </b:if>

    </div>

  </b:if>

</b:includable>

với noContentPlaceholder bạn có thể thay bằng tên khác nhưng không được trùng với các id của các thẻ tag b:includable đã có.

Lấy ví dụ với mẫu sau:

Copy


 <b:includable id='noContentPlaceholder'>

  <b:if cond='data:posts.empty'>

    <style>

     // Viết css cho trang

    </style>

    <div class='post'>

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

        <h3>404</h3>

     <p><data:navMessage/></p>

      <b:else/>

        <p><data:messages.noResultsFound/></p>

      </b:if>

    </div>

  </b:if>

</b:includable>

Hình minh họa:

Phân tích:

Copy


<h3>404</h3>

<p><data:navMessage/></p>

cho ra thông báo hiển thị tại trang báo lỗi như hình:

Với <data:navMessage/> mặc định sẽ cho ra văn bản hiển thị "Rất tiếc, trang bạn đang tìm trong blog này không tồn tại." và bạn có thể tùy biến thông báo hiển thị trong phần Cài đặt > Tùy chọn tìm kiếm > Không tìm thấy trang tùy chỉnh

Copy


<p><data:messages.noResultsFound/></p>

cho ra thông báo hiển thị tại trang kết quả tìm kiếm nếu không có kết quả như hình:

Mẫu ví dụ mình sử dụng thẻ dữ liệu cho văn bản hiển thị tuy nhiên bạn có thể sử dụng văn bản trực tiếp thay vì sử dụng thẻ data nhưng lưu ý về văn bản với ngôn ngữ cài đặt mà mình có viết bài hiển thị văn bản theo ngôn ngữ trong thiết kế Blogspot.

Cuối cùng để hiển thị được các điều kiện này các bạn cần đặt thẻ tag <b:include name='noContentPlaceholder'/> bên trong thẻ tag <b:includable id='main'> (widget Blog1 v2) và <b:includable id='main' var='top'> (widget Blog1 v1)