Unduhan prevjs - unduhan kode sumber prevjs

prevjs

Kategori lainnya

1.0.0

Unduh

logo

Tentang

PrevJS adalah generator situs web statis super mudah yang dibangun di atas template EJS. Tujuan utamanya adalah membangun, mengoptimalkan, dan menerapkan situs web statis dengan lebih sedikit pekerjaan.

Fitur

?‍ Buat - Dibuat untuk orang-orang front-end yang ingin membuat kode dalam html, js, dan css biasa . Yang juga berarti Anda dapat mengubah situs web statis yang ada menjadi situs sebelumnya dengan mudah
⏱ Build - Ekspor dioptimalkan untuk SEO dengan pembuatan peta situs, pengambilan halaman sebelumnya, konversi webp, dan minifikasi. Skor 99 di alat kecepatan halaman Google.
? Deploy - Host ke CDN Anda dengan sekali klik. Dukungan siap pakai untuk AWS CloudFront
? Templat dinamis - Hasilkan halaman web statis secara dinamis dari data JSON dengan satu templat. Bermanfaat untuk blog ya dok
? Pratinjau template dinamis tanpa ekspor. Cukup masukkan jalur dinamis di browser Anda dan PrevJS akan secara otomatis memuat halaman dengan data terkait
? Situs PrevJS dapat menjadi bagian dari situs web Anda yang sudah ada . Karena situs sebelumnya hampir tidak memiliki dependensi atau modul node. Ini dapat menjadi bagian dari situs web Anda yang sudah ada meskipun itu adalah situs JSP atau PHP.
? Pratinjau langsung situs - tidak memuat ulang halaman web setelah diedit
? Bukti masa depan , kode baik dalam pengembangan dan ekspor adalah web asli karena tidak memerlukan modifikasi atau perpustakaan khusus (kecuali ejs). Artinya, meskipun PrevJS tidak dikelola, kode Anda tidak akan rusak seperti generator situs lain yang tidak dikelola.
Ⓜ️ Mendukung situs web penurunan harga secara asli. Konversikan situs web dengan file .md ke html beserta gaya dan skrip. Contoh: https://prevjs.com

Prasyarat

Perangkat lunak

Instal nodejs dan npm dari http://nodejs.org/.
(Opsional - alternatif untuk NPM) Manajer paket benang, instal https://yarnpkg.com/getting-started/install

Pengetahuan

Diperlukan: HTML Dasar, CSS diperlukan untuk mendesain halaman web
Opsional: Pengetahuan tentang templat https://ejs.co/ merupakan nilai tambah yang besar
Opsional: Jquery, Bootstrap akan banyak membantu
Tidak diperlukan pengetahuan tentang kerangka aplikasi tingkat lanjut seperti reaksi.

Cara menggunakan

Langkah 1: Instal perintah CLI prevjs dari registri NPM

npm install @produle/prevjs -g

(Opsional - alternatif untuk NPM) Perintah benang: yarn --global add @produle/prevjs

Langkah 2: Untuk membuat situs prevjs yang sangat mendasar (Opsional)

prevjs --create /path-to-where-my-website-folder-should-be/

Langkah 3: Untuk melihat pratinjau situs web Anda di mesin lokal

prevjs --run /path-to-my-website-folder/recipe.json

Langkah 4: Untuk mengoptimalkan dan mengekspor situs web Anda untuk produksi

prevjs --export /path-to-my-website-folder/recipe.json

Langkah 5: Untuk menerapkan situs web Anda yang diekspor dalam produksi AWS cloudfront

prevjs --deploy /path-to-my-website-folder/recipe.json (Membutuhkan pengaturan perintah aws)

Untuk membuat daftar resep situs web yang tersedia secara lokal

prevjs --list-recipes local

Untuk menginstal resep tertentu

prevjs --create business1 /path-to-my-site/recipe.json

Contoh Struktur Situs Web SebelumnyaJS

 website/recipe.json => Stores configuration of this website for PrevJS
website/index.ejs => Index page of the website
website/about/index.ejs => Example route of another page in site

website/DRAFTS => Any page that should not be deployed, are placed inside this folder
website/DRAFTS/working.ejs => Example drafts page

website/PARTIALS => All re-used components and sections of website used in multiple pages
website/PARTIALS/header.ejs => Example partial for header in all pages

website/TEMPLATES => Contains templates for dynamically generating pages from json data
website/TEMPLATES/example-template/template.ejs => HTML page with data variables of an example template
website/TEMPLATES/example-template/template.json => Contains array of page data each with unique dynamic route

website/STATIC => All static files like images,js and css are stored here
website/STATIC/css/external => All third party css files
website/STATIC/css/internal => All internal styles written for this site
website/STATIC/js/external => All third party JS files and libraries
website/STATIC/js/internal => All internal js code written for this site
website/STATIC/images => Images used in this website, can be nested like webpages
website/STATIC/favicon.ico => Website Favicon

Contoh file resep.json

 {
  "recipe_ver": "0.0.1",
  "name": "business-website",
  "description": "Business - Product site",
  "author": "Business Inc",
  "production_url": "https://business.com",
  
   "optimize": {
    "webp": "true",
    "minify_js": "true",
    "minify_css": "true",
    "minify_html": "true"
  },
  "deploy": {
    "domain": "https://business.com",
    "type": "aws",
    "aws_bucket": "",
    "aws_cfdistributions": ""
  }
}

Pembuatan halaman dinamis menggunakan TEMPLATES

Folder TEMPLATES ini digunakan untuk menghasilkan halaman dengan data secara dinamis. Data dapat berupa inline di dalam template.json atau dari url JSON jarak jauh. Berguna ketika desain halaman web tidak berubah tetapi hanya datanya saja yang berbeda untuk setiap halaman.

Setiap folder templat di dalam TEMPLATES harus berisi file berikut dengan nama spesifik berikut:

template.ejs = Berisi struktur html template yang diisi dengan variabel data

template.json = Berisi array data halaman yang digunakan untuk menghasilkan halaman menggunakan template.ejs

Contoh template.json

 {
  "generate": true,
  "pages": [
    {
      "path": "doc/article1",
      "source": "inline",
      "data": {
        "title": "Doc Title 1",
        "post": "Post article 1"
      }
    },
    {
      "path": "doc/article2",
      "source": "jsonurl",
      "dataurl": "https://recipes.prevjs.com/examples/basic/article2.json"
    
    }
  ]
}

Kiat

Untuk mengatur jalur absolut ke aset di dalam file ejs, Gunakan variabel ini <%= siteobj.urlpath => Variabel ini dilengkapi dengan garis miring dan secara otomatis mendeteksi antara lingkungan lokal dan produksi.