Hiểu về Max Results trong tìm kiếm nhãn bài đăng

Tìm kiếm nhãn bài đăng (search label) là một chức năng cơ bản của blogger. Trong đó giá trị max results được sử dụng để giới hạn kết quả tìm kiếm và tạo phân trang. Trong bài viết này, chúng ta sẽ tìm hiểu một vài thủ thuật nhỏ xoay quanh giá trị này

Với đường dẫn tìm kiếm thông thường https://www.yourblog.com/search/label/xxx khi chưa tích hợp phân trang có đánh số blogger sẽ giới hạn kết quả tìm kiếm và tự tạo phân trang với button (bài đăng cũ hơn hoặc bài đăng mới hơn) nhưng khi đã tích hợp mà trong đường dẫn tìm kiếm không có giá trị max results hoặc giá trị max results không khớp với giá trị bài đăng trên trang chủ thì phân trang sẽ bị sai và đương nhiên là rất thiếu chuyên nghiệp

Thời đại phát triển rồi giờ người ta dùng phân trang đánh số hết, vào blog nào vài nghìn bài mà gặp phân trang điều hướng dạng mũi tên thì cảm thấy hơi ngán 😅. Vì vậy mà giá trị max-results sẽ càng trở nên quan trọng hơn

Trước tiên chắc chắn rằng bạn đã tích hợp thành công phân trang có đánh số vào blog rồi nhé. Và trong bài viết này tôi phân trang với giá trị bài đăng là 10 trùng với bài trên trang chính

I. Tích hợp thủ công

Trong blog có vài chỗ sử dụng tính năng search label như

• Tìm kiếm trên menu
• Tiện ích nhãn do blogger cung cấp
• Các label gán trên meta-post (ngoài trang index) hoặc label gán trong post-meta (trang bài viết)
• Tìm kiếm label của đường dẫn breadcrumbs
• Label cuối bài đăng
• ... Nói chung cứ chỗ nào hiển thị tên label chỗ đó sẽ có search label

* Với Menu

Liên kết ban đầu:

<a href='/search/label/xxx'>XXX</a>

sửa thành:

<a href='/search/label/xxx?&amp;max-results=10'>XXX</a>

* Với các trường hợp còn lại thẻ gọi dữ liệu thường có dạng

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

bạn sửa thành

<a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag' expr:title='data:label.name' ...>...</a>

Tìm nhanh với từ khóa "data:label.url" để tránh bỏ sót.

* Với thanh tìm kiếm

Để đặt giá trị max-results bạn thêm thẻ input sau vào trong form

<input name='max-results' type='hidden' value='10'/>

Cách này rất thủ công nhưng sẽ giúp bạn hạn chế được sử dụng js, tuy nhiên mỗi lần đổi số lượng bài đăng trên trang chính thì fix hơi khoai 😀

II. Sử dụng js

Anh nào hay đổi số lượng bài đăng trên trang chính sẽ thích điều này. Ta sẽ sử dụng jquery để đồng loạt thêm max-results vào các liên kết search label. Nhưng trước tiên bạn cần hiểu một chút về selector jquery như sau

• #menu a[href^='/search/label']: tìm tất cả thẻ a có href chứa /search/label của menu có id là menu (tránh thêm vào các liên kết rỗng hoặc liên kết tuyệt đối)
• .Label:not(#Label3) a: tìm tất cả thẻ a có cha là class Label nhưng không có id là Label3
• #meta-post a[rel='tag']: tìm tất cả thẻ a có thuộc tính rel='tag' nằm trong thành phần có id là meta-post
• .breadcrumbs span a:not(.bhome): tìm tất cả thẻ a (loại bỏ thẻ a có class bhome) nằm trong thành phần có class là breadcrumbs (phải loại bỏ thẻ a có class bhome vì trên đường dẫn breadcrumbs liên kết về trang chủ không cần thêm max-results, các liên kết khác là liên kết search label nên cần thêm)

Sở dĩ tôi phải liệt kê mấy cái khó hiểu ở trên là do mỗi template cách đặt id class khác nhau, nếu bạn cứ bê nguyên code của tôi vào trỏ selector không đúng, lúc chạy không được lại đổ cho thủ thuật dởm

Theo phân tích ở trên code js của tôi sẽ như sau (chèn trước thẻ </head> không sử dụng thẻ điều kiện để code chạy trên mọi trang)

<script type='text/javascript'>//<![CDATA[
var perPage = 10;
$(window).on("load", function() {
    $("#menu a[href^='/search/label'],.Label:not(#Label3) a,#meta-post a[rel='tag'],.breadcrumbs span a:not(.bhome),.label-head a[rel='tag']").attr("href", function(a, e) {
        return e.replace(e, e + "?&max-results=" + perPage)
    })
});
//]></script>

Tuy nhiên nếu đã tích hợp phân trang đánh số bạn sẽ thấy trùng lặp biến perPage, cách xử lý đơn giản đó là bạn xóa biến đó trong code phân trang đi là xong !

Tùy thuộc vào cách trình bày, hiển thị nhãn trên các trang khác nhau mà bạn thêm/bớt các selector màu xanh cho phù hợp, tránh dư thừa code

Với cách dùng js này khi đổi số bài đăng hiển thị trên trang chính, bạn chỉ cần thay đổi giá trị perPage, đương nhiên là nhẹ nhàng hơn rất nhiều

Lưu ý: đã dùng cách 1 thì phải xóa cách 2 và ngược lại. Tránh dùng cả 2 gây chồng chất giá trị max-results

Ok thủ thuật chắc cũng không khó hiểu mấy hi vọng sẽ giúp ích được cho bạn trong quá trình hoàn thiện blog

Để lại bình luận nếu không làm được và chúc thành công !