oldskool html bootstrap
Initial Release
Oldskool เป็นเทมเพลต HTML Bootstrap 5 ที่ตอบสนองที่ทันสมัยและยืดหยุ่นพร้อมรายชื่อการ์ดที่ปรับแต่งได้ในหน้าหมวดหมู่และการแสดงผลิตภัณฑ์ที่ยอดเยี่ยมในหน้าผลิตภัณฑ์แต่ละรายการ มันเป็นจุดเริ่มต้นที่สมบูรณ์แบบสำหรับเว็บไซต์ค้าปลีกแฟชั่นใด ๆ และการออกแบบที่สะอาดและน้อยที่สุดของแม่แบบหมายความว่าง่ายต่อการปรับเปลี่ยนและไม่เจ็บปวดในการรวมเข้ากับแอปพลิเคชันอีคอมเมิร์ซที่กำหนดเองของคุณ และเหนือสิ่งอื่นใดฟรี!
ดูสาธิต | ดาวน์โหลด Zip
หากคุณไม่ได้ตั้งใจจะทำงานกับซอร์สโค้ดเทมเพลต (และนั่นหมายความว่าคุณจะไม่รวบรวมหรือเรียกใช้เซิร์ฟเวอร์ Webpack Dev) คุณไม่จำเป็นต้องติดตั้งอะไรเลย คุณสามารถนำทางไปยังโฟลเดอร์ DIST และเริ่มแก้ไขไฟล์
นักพัฒนาส่วนใหญ่จะแก้ไขซอร์สโค้ดและจะเรียกใช้ webpack เพื่อคอมไพล์ไฟล์เทมเพลตอีกครั้ง หากเป็นกรณีนี้ให้ตรวจสอบให้แน่ใจว่าคุณติดตั้ง node.js คุณสามารถดาวน์โหลดได้จากที่นี่
git clone https://github.com/PixelRocket-Shop/oldskool-html-bootstrap.gitnpm install ในบรรทัดคำสั่งของคุณnpm start เพื่อเริ่ม WebPack DevServernpm run build เทมเพลตประกอบด้วย 10 หน้า:
เพื่อให้การทำซ้ำรหัสให้น้อยที่สุดเราได้ใช้ handlebars.js เป็นเอ็นจิ้นเทมเพลตและ partials เพื่อเพิ่มรหัสเดียวกันในหน้าต่างๆอย่างรวดเร็ว นอกจากนี้เรายังใช้ปลั๊กอินแฮนด์บาร์สำหรับข้อมูล JSON - สิ่งนี้ช่วยให้เราสามารถใช้ลูปและส่งออกบล็อกรหัส HTML เดียวแทนการทำ HTML เดียวกันซ้ำ
URL สาธิต
โปรดทราบว่านี่เป็นเทมเพลต HTML เท่านั้น มันไม่ได้เชื่อมต่อกับฐานข้อมูลและจะไม่ทำงานโดยอัตโนมัติในระบบการจัดการเนื้อหา (WordPress ฯลฯ ) คุณจะต้องรวมรหัสของเราลงในแอปพลิเคชันของคุณ
- Dist - เทมเพลตรุ่นที่สร้างขึ้น ไปที่นี่หากคุณไม่ต้องการทำงานกับซอร์สโค้ดเทมเพลต แต่ได้รับการเตือน: หากคุณปรับแต่งสิ่งใดในโฟลเดอร์นี้โดยตรงจากนั้นก็คอมไพล์เทมเพลตอีกครั้งโดยใช้ WebPack เว้นแต่คุณจะย้ายโฟลเดอร์ DIST ออกจากเทมเพลตการเปลี่ยนแปลงของคุณจะถูกแทนที่
- Node_Modules - ไดเรกทอรีที่ NPM ติดตั้งการพึ่งพา คุณจะไม่เห็นโฟลเดอร์นี้จนกว่าคุณจะทำการติดตั้งเทมเพลตให้เสร็จสมบูรณ์ คุณไม่จำเป็นต้องสร้างโฟลเดอร์นี้
- SRC - ซอร์สโค้ดเทมเพลต ไปที่นี่เพื่อปรับแต่งแม่แบบของคุณ
- SRC/สินทรัพย์ - สินทรัพย์เทมเพลตเช่น CSS, JS, รูปภาพ ฯลฯ
- SRC/DATA - ไฟล์ข้อมูล JSON เทมเพลต เราใช้ไฟล์ JSON เหล่านี้เพื่อให้งานของคุณง่ายขึ้นในการแทรกเนื้อหาลงในเทมเพลต
- SRC/HTML - หน้าแม่แบบ ไปที่นี่เพื่อแก้ไขหน้าเว็บที่มีอยู่หรือเพิ่มหน้าใหม่
- SRC/Partials - HandleBars บางส่วนแม่แบบบางส่วน
HandleBars เป็นเอ็นจิ้นเทมเพลตที่ช่วยให้เราสามารถรักษาซอร์สโค้ดเทมเพลตของเราให้เป็นระเบียบและสะอาดที่สุดเท่าที่จะทำได้ มันลดการทำซ้ำรหัสและผ่านการใช้ฟังก์ชั่นผู้ช่วยช่วยให้นักพัฒนาแม่แบบสามารถส่งออกข้อมูลจำนวนมากด้วยรหัสน้อยที่สุดได้อย่างรวดเร็ว คุณสามารถอ่านเพิ่มเติมได้ที่นี่
เราใช้ HandleBars ด้วยเหตุผลหลักสองประการ: ประการแรกการใช้ HandleBars Partials ช่วยให้เราสามารถอ้างอิงไฟล์เดียวกันในไฟล์ HTML หลายไฟล์และหมายความว่าคุณต้องแก้ไขรหัสจากแหล่งเดียวเท่านั้น หากคุณคุ้นเคยกับการทำงานกับ React หรือ Vue สิ่งนี้จะเหมือนกับการอ้างอิงส่วนประกอบ ประการที่สองการใช้ข้อมูล JSON สำหรับข้อมูลแคตตาล็อกจำลองของเราทำให้รหัสแม่แบบของเราสะอาด เราสามารถส่งออกผลิตภัณฑ์จำลอง 10 รายการบนหน้ารายชื่อของเราได้อย่างง่ายดายโดยส่งสัญญาณลูปแฮนด์บาร์พื้นฐาน
เปิดไฟล์ต่อไปนี้ในเทมเพลตของเรา: src/html/index.html
รอบบรรทัด 21 คุณจะเห็นรหัสต่อไปนี้:
{{> swiper/swiper-homepage-hero }}
นั่นคือแฮนด์บาร์บางส่วน รหัสนั้นบอกให้ HandleBars ดูภายในโฟลเดอร์ที่เรียกว่า Swiper (อยู่ในโฟลเดอร์ Partials) จากนั้นค้นหาไฟล์ที่เรียกว่า Swiper-Homepage-Hero และแทรกลงในไฟล์ index.html เมื่อรวบรวม
มีบันทึกสำคัญสองสามข้อเกี่ยวกับการใช้งานส่วนหนึ่งของแฮนด์บาร์ของเรา:
มาดูกันว่าเราใช้แฮนด์บาร์เพื่อให้ฐานรหัสของเราสะอาดได้อย่างไร เปิดหน้าหมวดหมู่: src/html/category.html
รอบบรรทัด 40 คุณจะพบรหัสนี้:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
และนั่นคือลูปของเราสำหรับหน้าหมวดหมู่ เรากำลังส่งผ่านข้อมูล JSON ไปยัง HandleBars Loop ของเราจากนั้นภายในลูปเรากำลังอ้างอิงแฮนด์บาร์บางส่วนและส่งข้อมูลสำหรับแต่ละรายการลูป:
{{> listing-cards/listing-card-one this }}
ปลั๊กอิน WebPack HandleBars ที่เราใช้มาพร้อมกับยูทิลิตี้ที่มีประโยชน์มากที่ช่วยให้เราสามารถส่งผ่านไฟล์ JSON เป็นข้อมูลเทมเพลต
โปรดนำทางไปที่: src/data นี่คือที่ที่ไฟล์ข้อมูลเทมเพลตของเราอยู่ คุณสามารถแก้ไขลบหรือเพิ่มของคุณเองในโฟลเดอร์นี้
อีกครั้งถ้าเราอ้างอิงลูปหน้าหมวดหมู่ของเรา:
{{#if (config category-products)}}
{{#each category-products.entries}}
<div class="col-12 col-sm-6 col-lg-4">
{{> listing-cards/listing-card this }}
</div>
{{/each}}
{{/if}}
ส่วนสำคัญที่นี่เกี่ยวกับข้อมูลเทมเพลตคือหมวดหมู่ผลิตภัณฑ์ สิ่งนี้หมายความว่าภายในโฟลเดอร์ข้อมูลของเราคุณจะพบไฟล์ JSON ที่เรียกว่า "หมวดหมู่ผลิตภัณฑ์" ไฟล์หมวดหมู่นี้ไฟล์ json นี้มี "คีย์" เรียกว่า "รายการ"
ไฟล์ CSS/SASS ของเทมเพลตทั้งหมดจะถูกเก็บไว้ในโฟลเดอร์สินทรัพย์ของเทมเพลต นำทางไปยัง SRC/Assets/SCSS เปิด Theme.scss กับบรรณาธิการของคุณ
นี่คือจุดเริ่มต้นหลักสำหรับไฟล์ SASS/CSS อื่น ๆ ทั้งหมด
หากต้องการสร้างหน้าใหม่นำทางในโปรแกรมแก้ไขรหัสของคุณไปที่: SRC/HTML เพื่อให้ง่ายขึ้นในการรับ HTML ที่ถูกต้องให้โคลนหน้ามีอยู่ เปลี่ยนชื่อไฟล์ที่สร้างขึ้นใหม่เป็น URL ที่คุณต้องการ และนั่นคือ ตอนนี้คุณมีอิสระที่จะเปิดหน้าใหม่ด้วยตัวแก้ไขรหัสของคุณทำการเปลี่ยนแปลงแล้วบันทึกไฟล์ ออกจาก Webpack devserver และรีสตาร์ทเพื่อให้หน้าปรากฏขึ้น
Bootstrap มีเว็บไซต์เอกสารที่ครอบคลุมซึ่งจะแนะนำคุณในการตั้งค่าและใช้คุณสมบัติ bootstrap เริ่มต้นทั้งหมด Bootstrap 5 ถูกรวมเข้ากับซอร์สโค้ดของแม่แบบของเราอย่างสมบูรณ์ โปรดดูเว็บไซต์เอกสารของ Bootstrap ก่อนสำหรับคุณสมบัติ bootstrap เริ่มต้นใด ๆ : เยี่ยมชมเว็บไซต์เอกสารของ Bootstrap
รองเท้าบู๊ต
aos.js
สาด
ปั้น
พิกซาเบย์
mediumzoom.js
nouislider.js
simplebar.js
swiper.js
คุณสามารถค้นหาเว็บไซต์ของเราได้ที่นี่หรือคุณสามารถส่งอีเมลถึงเราได้ที่ [email protected]
