ดาวน์โหลด pug starter - ดาวน์โหลดซอร์สโค้ด pug starter

pug starter

ข้อมูลเว็บไซต์

Render multiple CSS support

ดาวน์โหลด

Pug Starter

หากคุณต้องการเริ่มต้นอาชีพในฐานะ นักพัฒนาเว็บ ให้เป็นงานที่ได้รับการว่าจ้างและเข้าถึงงานที่จ่ายสูงสุดในตลาดให้ไปที่งานว้าว

สารบัญ

บทเรียนวิดีโอ YouTube
โครงการสดที่สร้างขึ้นด้วย Pug-Starter
ข้อกำหนดเบื้องต้น
การติดตั้ง
การใช้งาน
สไตล์

โครงสร้างไฟล์โครงการ

 .
├── 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

หมายเหตุ: แอตทริบิวต์ inline ได้รับการอัปเดตเป็น embed

Old Way:

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

วิธีใหม่:

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

เพิ่มการสนับสนุน ModularCSS เมื่อเปิดใช้งานใน config ของ package.json มันจะแปลงไฟล์ SCSS/SASS ทั้งหมดเป็นพา ธ CSS ของผู้สื่อข่าว

เพิ่มการสนับสนุน BaseURL ซึ่งสามารถกำหนดค่าสำหรับ gitHub.io และโดเมนที่กำหนดเอง ตรวจสอบ แพ็คเกจ ส่วนการกำหนดค่า json สำหรับ

deploytogithubio - (จริง | เท็จ) โดยค่าเริ่มต้นจะถูกตั้งค่าเป็น จริง และจะส่งผลกระทบต่อค่าของ baseUrl เมื่อคุณต้องการปรับใช้กับ gitHub.io; คุณต้องการตั้งค่าเป็น เท็จ หากคุณต้องการใช้ CustomUrl เป็นค่าของ baseUrl
CustomUrl - ถ้าคุณต้องการให้ BaseUrl มีค่าเช่น http://my-project.wowjob.dev หรืออื่น ๆ
GITHUBURL - ถ้าคุณต้องการให้ BaseUrl มีค่าเช่น http://github.com/marianzburlea/pug-starter.git หรืออื่น ๆ

ในที่สุดคุณสามารถใช้ baseURL เพื่อนำหน้าเส้นทางของคุณเช่น:

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

หรือ

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

หรือ

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

บทเรียนวิดีโอ YouTube

ฉันต้องการเปลี่ยนบทเรียนเหล่านั้นเป็นใหม่โดยใช้เทคนิคใหม่

เพื่อช่วยให้คุณได้มากยิ่งขึ้นฉันได้รวบรวมบทเรียน YouTube บางส่วนไว้ด้วยกัน:

ติดตั้ง nodejs, git และ gitHub

วิธีสร้างเว็บไซต์ฟรีใน 3 Easy Steps 2017

ในที่สุดฝันร้ายก็จบลงแล้ว! บทช่วยสอน HTML5 เกี่ยวกับวิธีสร้างเค้าโครงหน้าเว็บ 2017

สร้างเว็บไซต์ HTML5 PAIN FREE TUTORIAL สำหรับผู้เริ่มต้น 2017

แพ็คเกจเริ่มต้นสำหรับโครงการเทมเพลต PUG (อดีตหยก)

หมายเหตุ : ตัวเลือกบูลีน config.render.sourcefilechange ได้รับการเพิ่มลงใน package.json พฤติกรรมแตกต่างจากค่า:

จริง - มันแสดงผลหากมีการเปลี่ยนแปลงไฟล์ต้นฉบับ (ไฟล์ PUG); สิ่งนี้มีความเร็วที่มากขึ้นมากเมื่อทำการเรนเดอร์เมื่อเทียบกับตัวเลือกอื่น ๆ แต่มันก็เกี่ยวข้องเฉพาะเมื่อคุณทำการเปลี่ยนแปลงไฟล์ปัจจุบันที่ดูโดยปั๊ก หากคุณทำการเปลี่ยนแปลงไฟล์ที่ขยายและอยู่ในเส้นทางที่มี "_" เช่นเดียวกับเลย์เอาต์การเปลี่ยนแปลงจะไม่สะท้อน
FALSE - มันแสดงผลหากไฟล์ PUG ใด ๆ มีการเปลี่ยนแปลงและเปรียบเทียบผลลัพธ์กับไฟล์ปลายทาง (HTML ที่สร้างขึ้นตอนนี้ด้วย HTML ที่สร้างขึ้นก่อนหน้านี้) ซึ่งอาจช้าลงเมื่อจำนวนไฟล์เพิ่มขึ้น

โครงการสดที่สร้างขึ้นด้วย Pug-Starter

หากคุณต้องการให้โครงการของคุณอยู่ในรายการที่นี่ฝากข้อความไว้ใน Codetap บน Facebook คุณจะต้องเป็นโครงการอย่างน้อยหนึ่งเวอร์ชันสุดท้าย (จะไม่มีการยอมรับเบต้า / อัลฟ่าหรือทำงานอยู่)) จะได้รับการยอมรับ

ผู้แต่ง: Marian Zburlea
- กินผัก (สด) - กินผัก (แหล่งที่มา)
- W3Schools Replica (สด) - W3Schools Replica (แหล่งที่มา)
- เรซูเม่ของฉัน (สด) - เรซูเม่ของฉัน (แหล่งที่มา)
- บล็อกด่วน (สด) - บล็อกด่วน (แหล่งที่มา)
- Tesla ช่วยชีวิต (Live) - Tesla ช่วยชีวิต (แหล่งที่มา)
ผู้แต่ง: Istvan ACS
- Acme Mobile First (Live) - Acme Mobile First (แหล่งที่มา)
- Thumb Gallery (Live) - Thumb Gallery (แหล่งที่มา)

ข้อกำหนดเบื้องต้น

โครงการต้องการ NodeJS v.4+

ในการติดตั้ง nodejs เยี่ยมชมหน้าดาวน์โหลด nodejs ดาวน์โหลดแพ็คเกจ appropiate สำหรับระบบ operatin ของคุณคลิกที่ไฟล์ที่ดาวน์โหลดเปิดและติดตาม procees การติดตั้ง หากคุณไม่ทราบมากเกี่ยวกับเรื่องนี้เพียงคลิกที่ปุ่มถัดไปและติดตั้งปุ่มและเลือก "ฉันเห็นด้วย" เมื่อได้รับแจ้งและคุณควรจะสบายดี

การติดตั้ง

ก่อนที่คุณจะติดตั้ง: โปรดอ่านข้อกำหนดเบื้องต้น

$ npm i

หรือ

$ npm install

หมายเหตุ: หากคุณพบข้อผิดพลาด pngquant-bin บน Windows ลองรัน:

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

ก่อนที่คุณจะเรียกใช้ npm start

การใช้งาน

ในการเรียกใช้โครงการในโหมดการพัฒนาและเปิดเซิร์ฟเวอร์ท้องถิ่นที่ซิงโครไนซ์ในหลาย ๆ อุปกรณ์ที่ใช้:

npm start

หรือ

npm run dev

เพื่อสร้างโครงการสำหรับการใช้งานการผลิต:

npm run prod

หากต้องการปรับใช้โครงการของคุณไปยังหน้า gitHub โดยอัตโนมัติและทำให้สามารถใช้งานได้ที่ https: // [ชื่อผู้ใช้ชื่อของคุณ]

npm run deploy

สไตล์

โครงการรองรับทั้งแผ่นงาน ที่ฝัง และ ภายนอก คุณสามารถไม่มีใครอื่นหรืออื่น ๆ หรือทั้งสองอย่าง

รูปแบบแอปพลิเคชันหน้าเดียว

เมื่อคุณกำลังสร้างแอพหรือเว็บไซต์หน้าเดียวไม่มีจุดที่จะมีแผ่นสไตล์ที่โหลดจากไฟล์ภายนอกและฉันจะอธิบายว่าทำไม: จุดของการโหลดแผ่นสไตล์ภายนอกคือการอนุญาตให้เบราว์เซอร์แคชไฟล์เหล่านั้นและเมื่อคุณเยี่ยมชมเว็บเพจอื่นของเว็บไซต์เดียวกัน ในหน้าเดียวไม่มีหน้าอื่นที่จะไปที่เทคนิคไฟล์ภายนอกไม่ได้ใช้

รูปแบบแอปพลิเคชันหลายหน้า

ในสถานการณ์นี้คุณสามารถมีทั้ง การฝัง และภายนอกหรือภายนอก สถานการณ์ที่พบบ่อยที่สุดคือการมีไฟล์แผ่นรูปแบบภายนอกเพียงหนึ่งไฟล์ที่จะโหลดและส่วนใหญ่เวลาที่ใช้ได้

หากคุณต้องการปรับปรุง SEO และประสบการณ์การใช้งานของคุณให้ดียิ่งขึ้นฉันขอแนะนำให้ใช้การรวมกันของทั้ง การฝัง และภายนอก แผ่นสไตล์ ฝัง ควรมีจำนวนสไตล์ขั้นต่ำสำหรับส่วนที่มองเห็นได้เริ่มต้นของหน้าเพื่อแสดงผล ส่วนที่เหลือของสไตล์สามารถใส่ในไฟล์ CSS ภายนอก