Trang chủ
Bảng tin
Lưu trữ
Giới thiệu
Tìm luôn
1
Theme WordPress Zibll Nulled Việt Hoá
52 Xem
2
Typecho - Mã Nguồn Typecho Đã Việt Hoá
52 Xem
3
Test bài viết mới
31 Xem
4
Hướng Dẫn Lấy Site Key, Secret Key Google reCaptCha
30 Xem
5
Chỉ Cần Hai Bàn Tay Và Một Cái Mồm
24 Xem
Share Code
Thủ Thuật
Truyện Hay
Ứng Dụng
Ảnh Đẹp
Chưa Phân Loại
Đăng nhập
/
Đăng ký
Tìm luôn
Tag tìm kiếm
Share Code
Source
JohnCMS
Hosting
Share
Free
Code
Blog
TypeCho
PHP
Mod
Truyện Ngắn
Ảnh Đẹp
Twig
Hot Girl
Girl Xinh
Thủ Thuật
Hack
Dorew
Ý Nghĩa
Bài viết:
0
Bình luận:
0
Trang chủ
Chủ đề
Share Code
Thủ Thuật
Truyện Hay
Ứng Dụng
Ảnh Đẹp
Chưa Phân Loại
Tab
Bảng tin
Lưu trữ
Giới thiệu
Đăng ký
◉
Đăng nhập
Tổng cộng
20
Bài viết của
Thủ Thuật
19-08-2022
Hướng Dẫn Cài PJAX Cho Blog Của Bạn
Giới thiệu: Pjax là một plugin jQuery sử dụng ajax và pushState để mang lại trải nghiệm duyệt web nhanh chóng với các liên kết cố định. Pjax hoạt động bằng cách tìm nạp HTML từ máy chủ của bạn thông qua ajax và thay thế nội dung của phần tử vùng chứa trên trang của bạn bằng HTML đã tải. Sau đó, nó cập nhật URL hiện tại trong trình duyệt bằng cách sử dụng pushState.[tip type="yellow"]Kiến thức html & javascript cơ bản là bắt buộc. Nếu bạn không biết thẻ div và script, vui lòng bỏ qua bài viết này. ::(滑稽)[/tip]Hướng dẫn cài đặt Pjax:Dán 2 script này vào blog/website của bạn<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>JavaScript cơ bản:$(document).pjax(selector, 'a[target!=_blank]', '.container', options) [colour type=" red"]Chú thích:[/colour]selector dùng để liên kết các chuỗi pjax, thường là thẻ a, nếu bạn muốn xóa một số URL bên ngoài, ở đây có thể là a[href^='https://all4u.cf'].container là vùng chứa chuyển đổi nội dung, ví dụ container. Có nghĩa là chỉ có nội dung trong thẻ này la được làm mới. Như đã nói, bạn có thể thay đổi thành tên gì cũng được nhưng đừng trùng với các thẻ css để tránh gây ra vài lỗi vặt.timeout là thời gian chờ ajax tính bằng mili giây sau đó buộc phải làm mới hoàn toàn.Ví dụ code HTML cơ bản:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hướng dẫn tạo PJAX cho Blog/website</title> </head> <body> <div id="container"> <h1>Nội dung cần được làm mới</h1> </div> </body> </html>Thêm hoạt ảnh khi load trang:Cái này cũng không cần thiết lắm, bạn nào thích thì cứ thêm (mình thêm vì muốn cho người khác biết trang mình có Pjax :&(蛆音娘_卖萌))Để tải hoạt ảnh chỉ cần sử dụng hai sự kiện pjax:start và pjax:endCode js hoạt ảnh:$(document).on('pjax:start', function(event) { NProgress.start(); //Bắt đầu tải hoạt ảnh }); $(document).on('pjax:end', function(event) { NProgress.done(); //Kết thúc tải hoạt ảnh });Hoạt ảnh tải của mình hiện đang sử dụng là nprogress: http://ricostacruz.com/nprogressGiới thiệu về nprogressGiống như phần giới thiệu của jquery, nó được đặt ở header hoặc footer.<script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">[tip type="red"]Pjax sử dụng tài nguyên yêu cầu không đồng bộ, tức là mỗi lần yêu cầu dữ liệu nó không tìm nạp lại dữ liệu của toàn bộ trang mà chỉ lấy dữ liệu trong vùng chứa container. Do đó, nếu một vài code chức năng nằm ngoài vùng chứa container chức năng này sẽ không được thực thi (thường thì ta đặt vùng chứa container ở header mà nếu code header ở index khác với những trang khác thì Pjax sẽ không hoạt động ổn định).[/tip]Code hoàn chỉnhQua những dòng trên thì ta có một code hoàn chỉnh như sau:[hide]<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>All4u</title> <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <a href="/1">Trang 1</a> <br> <a href="/2">Trang 2</a> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery.pjax/2.0.1/jquery.pjax.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script> <script> $(document).pjax('a[target!=_blank]', '.container', { fragment: '.container', timeout: 8000 }); $(document).on('pjax:start', function(event) { NProgress.start(); }); $(document).on('pjax:end', function(event) { NProgress.done(); }); </script> </body> </html>[/hide][tip type="green"]Như vậy là xong, đây là tất cả sự hiểu biết của mình về pjax đơn giản này và mình muốn chia sẻ đến mọi người! Nếu có đăng lại xin hãy ghi rõ nguồn. ::(乖)[/tip]
19/08/2022
7 Lượt xem
0 Bình luận
0 Lượt thích
19-08-2022
Tăng Tốc Website Với Instant Page
Giới thiệuTrang chủ: https://instant.pageGithub: https://github.com/instantpage/instant.page[tip type="blue"]Làm cho trang web của bạn trở nên tức thì trong 1 phút và cải thiện đáng kể tỷ lệ chuyển trang của website.[/tip]Cách sử dụngDán JS này trực tiếp vào website của bạn<script src="//instant.page/5.1.0" type="module" integrity="sha384-by67kQnR+pyfy8yWP4kPO12fHKRLHZPfEsiSXR8u2IKcTdxD805MGUXBzVPnkLHw"></script>JS này được lưu trữ trên Cloudflare worker, vì vậy tốc độ sẽ ổn hơn cho website.Nguyên tắcKhi người dùng di chuột qua liên kết, <head> nó sẽ tự động tạo một liên kết <link rel="prefetch" href="url"> để tải trước và lưu vào bộ nhớ đệm, và khi người dùng nhấp vào liên kết, nội dung được lưu trong bộ nhớ cache sẽ được load ngay lập tức.Cấu hìnhCấu hình mặc định là tải trước sau khi người dùng di chuột qua liên kết trong 65mili/giây. Có thể thay đổi bằng cách sửa thẻ <body> thêm <body data-instant-intensity="mousedown".<body data-instant-intensity="mousedown"> ... </body>Sửa đổi độ trễ tải trước mặc địnhSử dụng data-instant-intensity="tốc độ (đơn vị ms)", ví dụ:<body data-instant-intensity="150"> ... </body>Điều chỉnh thời gian trễ thành 150ms.Các liên kết được tải trước ngay khi click vàoĐiều này sẽ chỉ hoạt động trên thiết bị di động và nó thường không được khuyến khích vì mức tiêu thụ lưu lượng quá lớn và gây lãng phí.<body data-instant-intensity="viewport"> ... </body>Nếu bạn cần sử dụng nó trên tất cả các thiết bị thay vì chỉ thiết bị di động thì sửa thành data-instant-intensity="viewport-all", cần lưu ý rằng nếu người dùng đang sử dụng mạng 2G hoặc đã bật tính năng bảo vệ dữ liệu, nó sẽ không hoạt động.Vấn đề phân trangNếu phân trang không hoạt động tốt, tải trước theo mặc định thì hãy sửa đổi các liên kết như sau:<a href="articles?page=2" data-instant>Trang 2</a>Lời cuối[tip type="green"]Nếu bạn cần trải nghiệm nhanh hơn và tốt hơn, mình khuyên bạn nên sử dụng pjax hoặc một vài cách khác. InstantPage chủ yếu là nhẹ và tiện lợi, đồng thời có khả năng tương thích tốt. Không giống như pjax, đòi hỏi nhiều điều chỉnh cấu hình và tương thích với các JS khác trên cùng một trang.[/tip]
19/08/2022
3 Lượt xem
0 Bình luận
0 Lượt thích
19-08-2022
Một Số Mẹo Hay Cho Máy Xiaomi Xách Tay Và Chính Hãng
Đôi lời tâm sựĐối với các anh em dùng các dòng xiaomi xách tay, nếu anh em không muốn unlock máy để up rom thì sau đây mình sẽ hướng dẫn một số cài đặt đơn giản cho máy của anh em nhanh, mượt, pin trâu hơn, hơn nữa có thể full 99% tiếng việtỨng dụng để cài đặtSử dụng ứng dụng SetEdit có sẵn trên CH PlayBật 120hz cho toàn bộ ứng dụngVào cài đặt -> màn hình -> tốc độ làm mới -> chọn 120hzTìm đến dòng user_refresh_rate chọn edit, sửa thành 1Đổi ngôn ngữ, vùng sang Việt NamTìm dòng system_locales chọn edit, sửa thành vi-VNTắt tự động quét mạng wifiNhấn Thêm cài đặt mới và nhập wifi.supplicant_scan_interval và đặt giá trị của nó ở 120Nhấn Thêm cài đặt mới và nhập pm.sleep_mode và đặt giá trị của nó là 1Kết thúc[tip type="green"]Cảm ơn các bạn đã đọc, đây là 1 số mẹo mình sưu tập được, chính mình cũng đang sử dụng em Xiaomi Redmi K40 Pro 5G. Các bạn có cần hỗ trợ gì hãy để lại bình luận bên dưới! :&(蛆音娘_卖萌)[/tip]
19/08/2022
2 Lượt xem
0 Bình luận
0 Lượt thích
19-08-2022
Hosting 1GB Disk 20GB Băng Thông SSL Free 2022
Thông tinEasy to Use Latest cPanelHosting for 1 Website1GB SSD Disk Space20GB Monthly BandwidthSome Premium Features5 Email Accounts1 FTP AccountUnlimited SQL DatabasesUnlimited SubdomainsFree Automatic SSL CertificateImunify360 Premium SecurityFree Hosting Support (Lvl 1)1-Click App Installer (Softaculous)ẢnhĐăng kí[button color=" #ff0000" url="https://alchosting.net/free-hosting/"]Free Web Hosting - ALCHosting Networks[/button]
19/08/2022
8 Lượt xem
0 Bình luận
0 Lượt thích
19-08-2022
Bộ Sưu Tập Biểu Tượng Cảm Xúc
Đây là những smile mà mình đã sưu tầm từ nhiều nguồn khác nhau và tông hợp lại thì có hơn 1000 smile, có nhiều loại khá dễ thương cho anh em chọn. Có vài bộ khác ngon hơn nhưng phải tốn phí và chả có account để tải :@(无语)AruFeishaLuo TianyiYYDSTùBlack CatBiliBiliTải xuống: [button color=" #000000" url="https://upload.dorew.gq/view/462"]Tải File[/button] Pass: pii4u.cf Nguồn: Hữu Phương
19/08/2022
3 Lượt xem
0 Bình luận
0 Lượt thích
1
2