Unduh pug starter - Unduh Kode Sumber pug starter

pug starter

Data situs web

Render multiple CSS support

Unduh

Pug Starter

Jika Anda ingin memulai karir sebagai pengembang web , menjadi dapat disewa dan mengakses pekerjaan bergaji tertinggi di pasar, kunjungi WoW Job

Daftar isi

Tutorial video YouTube
Proyek Langsung Dibangun dengan Pug-Starter
Prasyarat
Instalasi
Penggunaan
Gaya

Struktur file proyek

 .
├── README.md
├── package.json
├── src
│   ├── _asset
│   │   ├── image
│   │   │   └── become-a-web-developer-today.jpg
│   │   │   └── logo.png
│   │   └── js
│   │       └── all.js
│   │       └── game.js
│   ├── _component
│   │   ├── header
│   │   │   ├── header.pug
│   │   │   └── header.scss
│   │   ├── footer
│   │   │   ├── footer.pug
│   │   │   └── footer.scss
│   │   ├── smart-button
│   │   │   ├── smart-button.pug
│   │   │   └── smart-button.scss
│   │   ├── project-list
│   │   │   ├── project-list.pug
│   │   │   └── project-list.scss
│   │   └── layout
│   │       ├── base.pug
│   │       └── general.scss
│   ├── _data
│   │   ├── site.yml
│   │   └── user.json
│   │   ├── menu.yaml
│   │   └── article.json
│   ├── embed.scss
│   ├── favicon.ico
│   ├── index.pug <---------------- MAIN index
│   ├── style.scss <---------------- MAIN style
│   └── contact
│       └── index.pug
│   └── portfolio
│       └── index.pug
│   └── about-me
│       └── index.pug
│   └── my-first-project
│       └── index.pug
│   └── how-i-got-to-work-with-big-companies
│       └── index.pug
└── yarn.lock

baseurl

Catatan: Atribut inline telah diperbarui ke embed

Cara lama:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` inline)

Cara Baru:

 if config.entry.css.embed
  link(rel="stylesheet" href=`${embedPath}` embed)

Tambahkan Dukungan ModularCSS . Saat diaktifkan di konfigurasi package.json , ia akan mengonversi semua file SCSS/SASS ke jalur CSS korespondennya.

Tambahkan Dukungan BaseUrl yang dapat dikonfigurasi untuk github.io dan domain khusus. Periksa bagian package.json bagian konfigurasi untuk

Deploytogithubio - (true | false) Secara default diatur ke true dan akan mempengaruhi nilai baseUrl ketika Anda ingin digunakan ke github.io; Anda ingin mengaturnya ke false jika Anda ingin menggunakan CustomUrl sebagai nilai BaseUrl
CustomUrl - Jika Anda ingin BaseUrl memiliki nilai seperti http://my-project.wowjob.dev atau yang lainnya;
Githuburl - Jika Anda ingin BaseUrl memiliki nilai seperti http://github.com/marianzburlea/pug-starter.git atau yang lain;

Pada akhirnya Anda dapat menggunakan BaseUrl untuk mengawali jalur Anda seperti:

 link(rel="stylesheet", href=`${baseUrl}/style.css`)

atau

 a(
  title="Is it possible?"
  target="_blank"
  href=`${baseUrl}/article/nice-weather`
)

atau

 img(alt="Awesome dog" width="100" href=`${baseUrl}/image/cool-dog.jpg`)

Tutorial video YouTube

Saya ingin mengubah tutorial itu menjadi yang baru menggunakan teknik baru.

Untuk membantu Anda lebih banyak lagi, saya telah mengumpulkan beberapa tutorial YouTube:

Instal NodeJs, Git dan GitHub

Cara membuat situs web secara gratis dalam 3 langkah mudah 2017

Nightmare akhirnya berakhir! Tutorial HTML5 Tentang Cara Membangun Tata Layar 2017

Bangun Tutorial Situs Web HTML5 Gratis untuk Pemula 2017

Paket starter untuk proyek berbasis template PUG (bekas Jade).

Catatan : Opsi Boolean Config.Render.SourceFileChange telah ditambahkan ke paket.json . Perilaku berbeda berdasarkan nilainya:

Benar - itu membuat jika file sumber (file PUG) telah diubah; Ini memiliki kecepatan yang jauh lebih besar ketika rendering dibandingkan dengan opsi lain namun hanya relevan jika Anda membuat perubahan pada file saat ini yang ditonton oleh PUG. Jika Anda membuat perubahan pada file yang diperpanjang dan berada di jalur yang berisi "_", seperti tata letak, perubahan tidak akan tercermin.
FALSE - Ini membuat jika ada file PUG yang telah diubah dan membandingkan output dengan file tujuan (HTML yang dihasilkan sekarang dengan HTML yang dihasilkan sebelumnya). Ini bisa lebih lambat ketika jumlah file meningkat.

Proyek Langsung Dibangun dengan Pug-Starter

Jika Anda ingin proyek Anda terdaftar di sini, tinggalkan pesan di Codetap di Facebook. Proyek Anda harus setidaknya versi final satu (tidak ada beta / alpha atau pekerjaan yang sedang berlangsung) akan diterima.

Penulis: Marian Zburlea
- Eat the Veggie (Live) - Eat the Veggie (Sumber)
- Replika W3Schools (Langsung) - Replika W3Schools (Sumber)
- Resume saya (live) - resume saya (sumber)
- Blog Cepat (Langsung) - Blog Cepat (Sumber)
- Tesla menyelamatkan nyawa (hidup) - Tesla menyelamatkan nyawa (sumber)
Penulis: Istvan ACS
- ACME Mobile First (Live) - ACME Mobile First (Sumber)
- Galeri Thumb (Langsung) - Galeri Thumb (Sumber)

Prasyarat

Proyek ini membutuhkan nodejs v.4+

Untuk menginstal nodeJS, kunjungi halaman unduh nodejs, unduh paket approPiate untuk sistem operatin Anda, klik pada file yang diunduh, buka dan ikuti proyek instalasi. Jika Anda tidak tahu banyak tentang itu, cukup klik semua tombol berikutnya dan atau instal dan pilih "Saya setuju" ketika diminta dan Anda akan baik -baik saja.

Instalasi

Sebelum Anda menginstal: silakan baca prasyaratnya

$ npm i

atau

$ npm install

Catatan: Jika Anda mengalami kesalahan pngquant-bin di windows, coba runing:

 npm install [email protected] -D
npm install [email protected] -D

Sebelum Anda menjalankan npm start

Penggunaan

Untuk menjalankan proyek dalam mode pengembangan dan membuka server lokal yang disinkronkan di beberapa perangkat menggunakan:

npm start

atau

npm run dev

Untuk membangun proyek untuk penggunaan produksi:

npm run prod

Untuk secara otomatis menggunakan proyek Anda ke halaman GitHub dan membuatnya tersedia di https: // [Anda-UserName] .github.io/[Anda-namanya] Gunakan:

npm run deploy

Gaya

Proyek ini mendukung lembar embed dan gaya eksternal . Anda tidak dapat memiliki, satu atau yang lain, atau keduanya.

Gaya Aplikasi Halaman Tunggal

Saat Anda membangun aplikasi atau situs web satu halaman, tidak ada gunanya memiliki lembar gaya yang dimuat dari file eksternal dan saya akan menjelaskan mengapa: Titik memuat lembar gaya eksternal adalah untuk memungkinkan browser untuk menyimpan file -file tersebut dan begitu Anda mengunjungi halaman web lain dari situs web yang sama, alih -alih tidak ada permintaan yang akan dimuat dari server dan harus mengunduhnya, jika tidak ada di sana, jika tidak ada yang akan diubah. Dalam satu halaman, tidak ada halaman lain untuk pergi ke oleh karena itu teknik file eksternal tidak berlaku.

Gaya aplikasi multi halaman

Dalam skenario ini Anda dapat memiliki embed dan eksternal atau hanya eksternal. Skenario yang paling umum adalah memiliki hanya satu file lembar gaya eksternal yang akan dimuat dan sebagian besar waktu yang baik -baik saja.

Jika Anda ingin meningkatkan Seo dan pengalaman pengguna lebih jauh, saya sangat merekomendasikan untuk menggunakan kombinasi dari Embed dan Eksternal. Lembar Gaya Embed hanya boleh berisi jumlah gaya minimum untuk bagian awal yang terlihat dari halaman untuk diterjemahkan. Gaya lainnya dapat dimasukkan ke dalam file CSS eksternal.