simple f3 bootstrap 5 multi lang site ดาวน์โหลด - simple f3 bootstrap 5 multi lang site Source Source Source Download

simple f3 bootstrap 5 multi lang site

หมวดหมู่อื่นๆ

1.0.0

ดาวน์โหลด

เว็บไซต์ที่เรียบง่ายและหลายภาษาโดยใช้ Fat Free

การตั้งค่าส่วนหน้า / แบ็กเอนด์สำหรับเว็บไซต์ที่เรียบง่ายหลายภาษาโดยใช้ Bootstrap 5 และเฟรมเวิร์ก PHP ที่ปราศจากไขมัน ( แต่ไม่มีฐานข้อมูล-นี่ไม่ใช่ CMS )

ภาพรวม

การรวม Bootstrap 5 เข้ากับกรอบ PHP ที่ปราศจากไขมันเพื่อสร้างเว็บไซต์ที่:

ใช้เทมเพลตสำหรับการประกอบหน้าเว็บ
จัดเตรียม URL ที่สะอาด
สนับสนุนการเลือกภาษาอัตโนมัติ
ทำงานบนเซิร์ฟเวอร์ที่ใช้ร่วมกัน
ติดตั้งง่าย (เพียงแค่คัดลอกและวางไม่จำเป็นต้องจัดการแพ็คเกจ)

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

สำหรับการเปิดตัว Bootstrap 5.3 ซึ่งรองรับ Dark Mode (และไม่รองรับ Internet Explorer อีกต่อไป) ฉันได้สร้างเว็บไซต์สาธิตและที่เก็บใหม่

การสาธิต

รหัสจากที่เก็บนี้ทำงานที่ https://sbf-bootstrap5.alwaysdata.net/ ทำงานบนบริการโฮสติ้งฟรีที่ให้ PHP และ Apache ความตั้งใจสำหรับรหัสที่จะเป็นแพ็คเกจที่สมบูรณ์แบบที่เป็นไปได้แทนที่จะเป็นเพียงจุดเริ่มต้นกระดูกเปลือยสำหรับการสร้างไซต์

การออกแบบนี้ไม่ใช่ CMS ไม่มีฐานข้อมูล เนื้อหาทั้งหมดอยู่ในไฟล์การกำหนดค่าไฟล์คอนโทรลเลอร์และเทมเพลตเนื้อหาซึ่งทำงานได้ดีสำหรับไซต์คงที่

การใช้การตั้งค่า

ไฟล์ทั้งหมดของฉันสำหรับไซต์สาธิตการกำหนดค่าปลอดไขมันคอนโทรลเลอร์และไฟล์เทมเพลตและไฟล์ SCSS ภาพและ JavaScript ที่เกี่ยวข้องอยู่ในที่เก็บ GitHub นี้ ไฟล์ bootstrap และปลอดไขมันมีให้บริการจาก bootstrap และปราศจากไขมัน

ควรเปลี่ยนเนื้อหาเฉพาะไซต์ของฉันด้วยเนื้อหาสำหรับเว็บไซต์อื่น

สิ่งที่รวมอยู่ (ไม่ใช่รายการที่ครอบคลุม)

ปราศจากไขมัน

config.ini
Routes.ini
ไฟล์คอนโทรลเลอร์ทั้งหมด
เทมเพลตทั้งหมดสำหรับหน้าเว็บ

ไม่รวมไฟล์ที่ไม่มีไขมัน-ไฟล์เหล่านั้นมีให้บริการจากไขมันปราศจากไขมัน

รองเท้าบู๊ต

Bootstrap นั้นง่ายต่อการจัดโครงสร้างด้วยคลาสที่มีอยู่และใช้ SASS มีบางสิ่งที่ฉันเปลี่ยนจากรหัส bootstrap มาตรฐาน:

สำหรับเมนู Offcanvas ของ Bootstrap:
- ใช้ปุ่มสลับ Navbar ทั้งเปิดและปิดเมนู (ไม่จำเป็นต้องใช้ปุ่มปิดในเมนู)
- ปิดเมนูโดยอัตโนมัติเมื่อคลิกลิงก์หน้าเดียวกัน
- เพิ่มตัวเลือกสำหรับการโฟกัสที่จะอยู่ในเป้าหมายมากกว่าปุ่มเมนู - ต้องมีการแก้ไขไฟล์แหล่งที่มาของ module.js
สำหรับภาพพื้นหลังแบบเต็มหน้าจอพร้อมโมดอล
- เพิ่มคลาส is-fixed ให้กับภาพพื้นหลังแบบคงที่ดังนั้นจึงทำงานกับโมดอลส์ (Bootstrap มีฟังก์ชั่น แต่ก็ไม่ได้บันทึกไว้อย่างดี)

ไม่รวมไฟล์ bootstrap - ไฟล์เหล่านั้นพร้อมใช้งานจาก bootstrap

เว็บไซต์ทั่วไป

การสร้างแผนผังไซต์แบบไดนามิกด้วย XHTML: ลิงก์สำหรับภาษาอื่น
ใช้ preload และ picture เพื่อให้เลือกภาพฮีโร่ (สมาร์ทโฟน 4 ตัว, แท็บเล็ต 4 แท็บเล็ตและ 5 แล็ปท็อป/จอภาพ) เพื่อให้เบราว์เซอร์เลือกจากเพื่อปรับปรุงความเร็วในการโหลดหน้าเว็บ
ใช้ปลั๊กอิน SMTP ของ FatFree สำหรับข้อความอีเมล
หน้าการตอบกลับข้อผิดพลาดที่กำหนดเอง

การสนับสนุนหลายภาษา

ในขณะที่เนื้อหาสำหรับเว็บไซต์สาธิตเป็นภาษาอังกฤษ แต่การสาธิตมีหน้าจีนและเกาหลีเพื่อแสดงให้เห็นถึงการดำเนินการหลายภาษา หน้าแรกของจีนและเกาหลีถูกสร้างขึ้นจากโฮมเพจภาษาอังกฤษโดยใช้ Google Translate ส่วนที่เหลือของหน้าจีนและเกาหลีซึ่งมีไว้เพื่อแสดงให้เห็นถึงการนำทางเพียงแค่มีการแปลของ Google ในชื่อและคำอธิบายของหน้าภาษาอังกฤษ

การใช้แบบอักษรระบบ

รูปแบบตัวอักษรใช้ system-ui, แบบอักษรเดียวกันกับที่ระบบปฏิบัติการใช้เพื่อแสดงข้อความ สิ่งนี้ให้รูปลักษณ์ที่คล้ายกันกับสิ่งที่ผู้ใช้เห็นบนหน้าจอระบบและเพิ่มความเร็วเวลาเริ่มต้นหน้าเว็บเนื่องจากไม่มีแบบอักษรให้ดาวน์โหลด