找到
20
篇与
Thủ Thuật
相关的结果
- 第 2 页
-
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:end Code 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/nprogress Giới thiệu về nprogress Giố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ỉnh Qua 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]
-
Tăng Tốc Website Với Instant Page Giới thiệu Trang chủ: https://instant.page Github: 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] instantclick.jpeg图片 Cách sử dụng Dá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ắc Khi 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ình Cấ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 định Sử 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 trang Nế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]
-
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 MIUI图片 Ứng dụng để cài đặt Sử dụng ứng dụng SetEdit có sẵn trên CH Play Ứng Dụng SetEdit图片 Bật 120hz cho toàn bộ ứng dụng Vào cài đặt -> màn hình -> tốc độ làm mới -> chọn 120hz Tìm đến dòng user_refresh_rate chọn edit, sửa thành 1 Đổi ngôn ngữ, vùng sang Việt Nam Tìm dòng system_locales chọn edit, sửa thành vi-VN Tắt tự động quét mạng wifi Nhấn Thêm cài đặt mới và nhập wifi.supplicant_scan_interval và đặt giá trị của nó ở 120 Nhấn Thêm cài đặt mới và nhập pm.sleep_mode và đặt giá trị của nó là 1 Kế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]
-
Hosting 1GB Disk 20GB Băng Thông SSL Free 2022 Thông tin Easy to Use Latest cPanel Hosting for 1 Website 1GB SSD Disk Space 20GB Monthly Bandwidth Some Premium Features 5 Email Accounts 1 FTP Account Unlimited SQL Databases Unlimited Subdomains Free Automatic SSL Certificate Imunify360 Premium Security Free Hosting Support (Lvl 1) 1-Click App Installer (Softaculous) Ảnh Thông Số图片 Trang chủ图片 Đăng kí [button color=" #ff0000" url="https://alchosting.net/free-hosting/"]Free Web Hosting - ALCHosting Networks[/button]
-
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 :@(无语) Aru Aru图片 Feisha Feisha图片 Luo Tianyi Luo Tianyi图片 YYDS YYDS图片 Tù Tù图片 Black Cat Mèo đen图片 BiliBili BiliBili图片 Tả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
