Hướng dẫn how do i download a website all coding html css javascript? - làm cách nào để tải xuống một trang web có tất cả mã html css javascript?

Đã bao nhiêu lần, với tư cách là Frontend Developers, chúng tôi đã quyết định triển khai một bản sao của một số tính năng mà trang web của bên thứ ba có trong trang web của chúng tôi? Tôi thường làm điều này rất nhiều, đặc biệt khi không có sự thay thế nguồn mở cho tính năng này và tôi không muốn viết nó từ đầu vì sẽ mất rất nhiều thời gian để kết thúc với một cái gì đó tốt đẹp. Cách dễ nhất để làm điều này là bằng cách đọc mã nguồn của một trang web, sử dụng CTRL + U trong chrome chẳng hạn, đọc các tệp JavaScript cũng như miễn là chúng không được thu nhỏ (ví dụ như trong các trang web bán các mẫu).

Điều này chỉ khó chịu khi chúng tôi nói về việc làm nổi bật mã, vì bạn không thể so sánh cú pháp làm nổi bật do trình duyệt cung cấp với bản được cung cấp bởi IDE yêu thích của bạn như Visual Studio Code, NetBeans, v.v. Một bản sao của mã và tài nguyên của trang web để thao túng nó tại địa phương phải không? Nhờ một kịch bản khá hữu ích sử dụng Puppeteer, điều này có thể dễ dàng thực hiện trong vòng vài phút (và vài giây sau khi thực hiện). Trong bài viết này, chúng tôi sẽ giải thích cho bạn cách dễ dàng thực hiện Cloner trang web của riêng bạn với Node.js.

1. Cài đặt trang web Scrapper Puppeteer

Một trong những lợi thế có giá trị nhất của việc sử dụng tập lệnh dựa trên Puppeteer, phiên bản không đầu của crom, là bạn sẽ không chỉ có thể sao chép các tính năng trang web tĩnh thực hiện JavaScript hoặc thậm chí là JavaScript, mà còn có thể Tải xuống nội dung và tài nguyên được tạo bởi các trang động sử dụng React hoặc Angular. Cài đặt thư viện trang web-scraper-puppeteer bằng NPM trong thiết bị đầu cuối của bạn:

npm install website-scraper website-scraper-puppeteer

Để biết thêm thông tin về dự án này, vui lòng truy cập kho lưu trữ chính thức tại GitHub tại đây. Plugin này, về cơ bản & nbsp; bắt đầu crom ở chế độ không đầu, chỉ mở trang và chờ cho đến khi toàn bộ trang được tải. Nó không phải là lý tưởng vì có lẽ bạn cần phải đợi cho đến khi một số tài nguyên được tải hoặc nhấp vào một số nút hoặc đăng nhập.

2. Tạo tập lệnh tải xuống

Sau khi cài đặt plugin trên thư mục làm việc của bạn với NPM, bạn sẽ chỉ cần tạo tệp JavaScript với mã sẽ tải xuống một số trang web. Tạo tệp index.js và đặt mã sau bên trong:

// index.js
const scrape = require('website-scraper');
const PuppeteerPlugin = require('website-scraper-puppeteer');
const path = require('path');

scrape({
    // Provide the URL(s) of the website(s) that you want to clone
    // In this example, you can clone the Our Code World website
    urls: ['https://ourcodeworld.com/'],
    // Specify the path where the content should be saved
    // In this case, in the current directory inside the ourcodeworld dir
    directory: path.resolve(__dirname, 'ourcodeworld'),
    // Load the Puppeteer plugin
    plugins: [ 
        new PuppeteerPlugin({
            launchOptions: { 
                // If you set  this to true, the headless browser will show up on screen
                headless: true
            }, /* optional */
            scrollToBottom: {
                timeout: 10000, 
                viewportN: 10 
            } /* optional */
        })
    ]
});

Mã trước đó sẽ nhập các thư viện đã cài đặt và Trình trợ giúp đường dẫn Node.js (để tạo một đường dẫn tuyệt đối của thư mục hiện tại). Chúng tôi sẽ gọi phương thức Scrape, cung cấp đối số đầu tiên là một đối tượng với cấu hình cần thiết để bắt đầu với bản sao trang web. Các tùy chọn quan trọng nhất là thuộc tính URLS, mong đợi một loạt các chuỗi, trong đó mọi mục là một URL web của trang của trang web mà bạn muốn sao chép. Tùy chọn thư mục tương ứng với đường dẫn thư mục cục bộ nơi nên đặt nội dung trang web. Tùy chọn plugins sẽ tải plugin Puppeteer cho Scrapper thông thường để sao chép các trang web động đúng cách.

3. Chạy tập lệnh

Cuối cùng, hãy mở thiết bị đầu cuối của bạn và chuyển sang thư mục của tập lệnh bạn vừa viết và thực hiện nó:

node index.js

Điều này sẽ sao chép trang web mong muốn, trong trường hợp này là Code World.Khi nó kết thúc, bạn sẽ tìm thấy trong cùng một thư mục của tập lệnh thư mục mới với tất cả JavaScript, HTML và CSS của trang web.Ví dụ: nhân bản Code World của chúng tôi sẽ tạo ra một cấu trúc tương tự như:

./
├── CK7DK53I.json
├── CK7I4KJM;CK7IP27L
├── css/
│   ├── bootstrap.css
│   ├── cookieconsent.min.css       
│   ├── custom.css
│   ├── font-awesome.min.css        
│   ├── magnific-popup.css
│   ├── simple-line-icons.css       
│   ├── slick.css
│   └── style-dark.css
├── favicon.ico
├── fonts/
│   ├── Simple-Line-Icons.eot       
│   ├── Simple-Line-Icons.svg       
│   ├── Simple-Line-Icons.ttf       
│   ├── Simple-Line-Icons.woff      
│   ├── Simple-Line-Icons.woff2     
│   ├── fontawesome-webfont.eot     
│   ├── fontawesome-webfont.svg     
│   ├── fontawesome-webfont.ttf     
│   ├── fontawesome-webfont.woff    
│   ├── fontawesome-webfont.woff2   
│   ├── fontawesome-webfont_1.eot   
│   └── sprite.svg
├── images/
│   ├── articleocw-5c5a2906da73d.jpg
│   ├── articleocw-5c8fb0eab08af.png
│   ├── articleocw-5c8fe4b534e04.jpg
│   ├── articleocw-5cb14f9ea4cfa.png
│   ├── articleocw-5cb1f4b2bd76b.png
│   ├── articleocw-5cdc8d904e6b9.jpg
│   ├── articleocw-5cdde93a04430.png
│   ├── articleocw-5ce040e91c1a8.png
│   ├── articleocw-5d040d2ec3975.png
│   ├── articleocw-5d200b5b06504.png
│   ├── articleocw-5d45c528f0103.webp
│   ├── articleocw-5d69328bac9a2.webp
│   ├── articleocw-5da07b41aa587.png
│   ├── articleocw-5db79e7faa2c5.webp
│   ├── articleocw-5de93b3040ac4.webp
│   ├── articleocw-5e1df41d2e35b.webp
│   ├── articleocw-5e3caa198aab8.webp
│   ├── articleocw-5e3d7b2a01256.webp
│   ├── articleocw-5e3dbabbcff04.webp
│   ├── articleocw-5e3dd0faa3106.webp
│   ├── articleocw-5e4162f1d2db6.webp
│   ├── articleocw-5e418ee7e81b4.png
│   ├── bestfreehtmlcsstemplates_banner_quad.png
│   ├── graph-bg.png
│   ├── hero-slide-1.jpg
│   ├── hero-slide-2.jpg
│   ├── hero-slide-3.jpg
│   ├── home_bg.jpg
│   ├── jobble.png
│   ├── login_register_bg.jpg
│   ├── login_register_bg_1.jpg
│   ├── main-news-banner__bg.jpg
│   ├── mini_ads.png
│   ├── mini_bestfreehtmlcsstemplates.png
│   ├── mini_wrapbootstrap.png
│   ├── ocw_logo_255.png
│   ├── page-heading-pattern.png
│   ├── page-heading.jpg
│   ├── rosterv3_player_01-bg.png
│   ├── single-post-img5.jpg
│   └── team-roster-slider-bg.jpg
├── index.html
├── js/
│   ├── adsbygoogle.js
│   ├── analytics.js
│   ├── bootstrap.bundle.js
│   ├── bsa.js
│   ├── cookie.js
│   ├── cookieconsent.min.js
│   ├── core.js
│   ├── custom.js
│   ├── init.js
│   ├── integrator.js
│   ├── integrator_1.js
│   ├── jquery.min.js
│   ├── monetization.js
│   ├── osd.js
│   ├── pro.js
│   ├── s_83085e49dfeedee6628ee5a7d7cd7359.js
│   └── show_ads_impl_fy2019.js
├── js_1/
├── raw_83a93c31c68198a3762e2237ff33e529.html
├── raw_b54f5852f835e7a023fcacceb1b6473c.html
└── zrt_lookup.html

Hãy chắc chắn xóa tất cả các quảng cáo, video và phân tích mà bạn có thể tìm thấy trong một số trang web để ngăn chặn ngoại lệ JavaScript sẽ tăng các ngoại lệ trong trang web nhân bản.

Mã hóa hạnh phúc!