Sửa Lỗi Load more posts Theme Blogspot Sevida 1.7

Sửa Lỗi Theme Blogspot Sevida 1.7. Nút "Load more post" đã hoạt động bình thường, khi kích vào, các trang đã được load thêm không còn bị treo ở icon loading nữa.

Sevida là một themes blogsopt khá đẹp và nhiều chức năng. Trên themeforest.net, Sevida được bán với giá 21$. Đối với những bạn chưa có điều kiện mua thì các bạn vẫn có thể trải nghiệm theme Sevida với các phiên bản chia sẻ miễn phí trên mạng. Hôm nay, mình sẽ hướng dẫn các bạn cách sửa lỗi "Load more posts" trên themes Sevida bản 1.7.

Trạng thái lỗi:

Khi các bạn kích hoạt chức năng hiển thị "Load more posts" trong thiết lập của themes

var configSummary = {
    thumbnailSize: "s180-c", // Define the post thumbnail size
    summaryLength: 200, // Define the summary length
    slideffect: true, // Define to make image slide
    maxImage:5, // Define Maximal Image to image slide
    slideSpeed: 3000, // Define Slideshow Speed in milisecond
    defaultNavigation:"LoadMore",
    defaultView:"grid", // Default view Mode
    postPerPage:6, // Number post every Page (work with PageNavi)
    numshowpage:3 // Number page Number (work with PageNavi)
};

Bạn kích nút "Load more posts" sẽ gặp tình trạng icon loading trang cứ chạy vào vòng mà mãi không thấy trang mới được tải thêm

Tiến hành bắt lỗi:

Chúng ta truy cập vào trang blogspot, kích hoạt chức năng debug của trình duyệt. Ở đây mình dùng Chrome, nhấn F12, qua Tab Console, nhấn nút "Load more posts". Chúng ta bắt được lỗi 404: đường dẫn truy cập không tìm thấy. Để ý kĩ, ta thấy đường dẫn load thêm trang dựa vào chức năng search của blogspot, có chỗ không hợp lí.

Theo phương thức GET, đường dẫn URL sẽ có dạng:

[domain]/[site_name][?var=value][&var=value...]

Đối chiếu theo ta thấy &html đoạn cuối URL là không hợp lí, lên chúng ta sẽ tìm cách xóa đoạn &html phía cuối URL

Từ chỗ bất hợp lí đó, ta tiến hành tìm đoạn mã khởi tạo URL đó

Chọn đối tượng "Load more posts", kích chuột phải chọn Kiểm tra phần tử, ta bắt được đối tượng thuộc class "loadpost", thực hiện lệnh javascript. Ta qua Tab Event Listener, để theo dõi các sự kiện của javascript.

Do nút "Load more posts" khi bạn kích mới tiến hành load thêm trang nên chúng ta sẽ để ý sự kiện click của class loadpost. Ta thấy khi click sẽ thực hiện dòng 1207 của file index, chúng ta tiến hành kích đúp vào (index):1207 để truy cập đến vị trí đó

Ta đối chiếu vị trí đó, ta thấy dòng 1207 là vị trí bắt đầu hàm loadMorePost(e). Theo cách đặt tên hàm là chúng ta đã biết hàm này thực hiện nạp thêm các bài đăng vào trang

Tiến hành sửa lỗi:

Các bạn vô phần chỉnh sửa themes blogspot (Mẫu > Chỉnh sửa HTML), kích vào phần nội dung, Ctrl + F, điền loadMorePost(e), nhấn Enter

Bạn sẽ nhảy nhanh đến vị trí hàm loadMorePost(e). Theo quá trình bắt lỗi ở trên, ta xác định được nguyên nhân không load thêm trang do sai định dạng URL, cần xóa &html và biết được hàm ra đoạn URL đó là của loadMorePost(e). Chúng ta tiến hành tìm và xóa đoạn tạo &html đó đi

Chúng ta xác định được đoạn code t.get(r.olderPostsLink,"html") và tiến hành sửa lại thành t.get(r.olderPostsLink,"")

Sau đó, lưu lại lại themes, tiến hành load lại trang và kiểm tra lại nút "Load more post"

Kết quả:

Nút "Load more post" đã hoạt động bình thường, khi kích vào, các trang đã được load thêm không còn bị treo ở icon loading nữa