การตั้งค่าส่วนหน้า / แบ็กเอนด์สำหรับเว็บไซต์ที่เรียบง่ายและหลายภาษาโดยใช้ Bootstrap 4 พร้อมเฟรมเวิร์ก PHP ที่ปราศจากไขมัน แต่ไม่มีฐานข้อมูล
ฉันต้องการเฟรมเวิร์ก PHP ที่จะใช้กับ Bootstrap 4 เพื่อสร้างเว็บไซต์ที่จะ:
ตัวเลือกของฉันปราศจากไขมัน- "Micro-Framework ที่ทรงพลัง แต่ใช้งานง่าย"
เพื่อให้แน่ใจว่าฉันสามารถสร้างไซต์ได้ฉันสร้างเว็บไซต์ ไซต์เกี่ยวกับวิธีที่ฉันใช้ bootstrap และปราศจากไขมันเพื่อสร้างไซต์ และเว็บไซต์คือบันทึกของฉันสำหรับสิ่งที่ฉันทำและทำไม
นี่ไม่ใช่ CMS ไม่มีฐานข้อมูล เนื้อหาทั้งหมดอยู่ในไฟล์การกำหนดค่าไฟล์คอนโทรลเลอร์และเทมเพลตเนื้อหา
*หมายเหตุ: ฉันมีที่เก็บที่คล้ายกันสำหรับ bootstrap 5 ที่ https://github.com/richdebourke/simple-f3-bootstrap-5-multi-lang-site
รหัสทั้งหมดจากที่เก็บนี้เปิดใช้งานที่ http://sbf-testing.byethost7.com ความตั้งใจสำหรับรหัสที่จะเป็นแพ็คเกจที่สมบูรณ์แบบที่เป็นไปได้แทนที่จะเป็นเพียงจุดเริ่มต้นกระดูกเปลือยสำหรับการสร้างไซต์ การสาธิตกำลังทำงานบนบริการโฮสติ้งฟรีที่ให้ PHP และ Apache แต่ไม่มีอีเมลและบอทส่วนใหญ่ถูกบล็อกดังนั้นจึงไม่มีแบบฟอร์มการติดต่อและไม่มี SSL 1 (นั่นคือเหตุผลที่ฉันพูดว่า "เกือบสมบูรณ์" ไซต์) แต่สิ่งเหล่านั้นควรจะง่ายพอที่จะนำไปใช้กับโฮสต์การผลิต
หมายเหตุ 1 : บริการโฮสติ้งเสนอใบรับรองที่ลงนามด้วยตนเอง แต่ฉันไม่แน่ใจว่า Google ยอมรับการจัดอันดับการค้นหา เนื่องจากบริการโฮสติ้งบล็อกบอทส่วนใหญ่มันยากที่จะได้รับการตรวจสอบความเป็นเจ้าของของฉันดังนั้นฉันจึงใช้งานเว็บไซต์โดยไม่ต้อง SSL
ไฟล์ทั้งหมดของฉันสำหรับไซต์สาธิตการกำหนดค่าปลอดไขมันคอนโทรลเลอร์และไฟล์เทมเพลตและไฟล์ SCSS ภาพและ JavaScript ที่เกี่ยวข้องอยู่ในที่เก็บ GitHub นี้ ไฟล์ bootstrap และปลอดไขมันมีให้บริการจาก bootstrap และปราศจากไขมัน
ควรง่ายพอที่จะแทนที่เนื้อหาเฉพาะไซต์ของฉันด้วยเนื้อหาสำหรับเว็บไซต์อื่น
ไม่รวมไฟล์ที่ไม่มีไขมัน-ไฟล์เหล่านั้นมีให้บริการจากไขมันปราศจากไขมัน
Bootstrap นั้นง่ายต่อการจัดโครงสร้างด้วยคลาสที่มีอยู่และใช้ SASS มีสองสิ่งที่ฉันเปลี่ยนจากรหัส bootstrap มาตรฐาน:
ไม่รวมไฟล์ bootstrap - ไฟล์เหล่านั้นพร้อมใช้งานจาก bootstrap
ในขณะที่เนื้อหาสำหรับเว็บไซต์สาธิตเป็นภาษาอังกฤษ แต่การสาธิตมีหน้าจีนและเกาหลีเพื่อแสดงให้เห็นถึงการดำเนินการหลายภาษา หน้าแรกของจีนและเกาหลีถูกสร้างขึ้นจากโฮมเพจภาษาอังกฤษโดยใช้ Google Translate ส่วนที่เหลือของหน้าจีนและเกาหลีซึ่งมีไว้เพื่อแสดงให้เห็นถึงการนำทางเพียงแค่มีการแปลของ Google ในชื่อและคำอธิบายของหน้าภาษาอังกฤษ
สำหรับการอัปเดตเดือนกรกฎาคม 2565 นอกเหนือจากการตรวจสอบว่าไซต์ทำงานร่วมกับเวอร์ชันล่าสุดของ Fat Free, Bootstrap 4 และ JQuery ฉันยังแก้ไขเว็บไซต์เป็น:
ใช้แบบอักษรระบบ-เปลี่ยนจากการใช้ Google Fonts เป็นการใช้แบบอักษร system-ui การใช้ Google Fonts ต้องการให้เบราว์เซอร์ของผู้ใช้ส่งคำขอไปยัง Google สำหรับ Stylesheet และไฟล์ Font ที่จำเป็น ที่เกี่ยวข้องกับการส่งที่อยู่ IP ของผู้ใช้ไปยัง Google ซึ่งกฎระเบียบป้องกันข้อมูลทั่วไปของสหภาพยุโรป (GDPR) กล่าวว่าไม่ได้รับอนุญาต system-ui สั่งให้เบราว์เซอร์ใช้แบบอักษรเดียวกันกับที่ระบบปฏิบัติการใช้เพื่อแสดงข้อความ สิ่งนี้ให้รูปลักษณ์ที่คล้ายกันกับสิ่งที่ผู้ใช้เห็นบนหน้าจอระบบและเพิ่มความเร็วเวลาเริ่มต้นหน้าเว็บเนื่องจากไม่มีแบบอักษรให้ดาวน์โหลด
ไฟล์ bootstrap & jQuery ที่เป็นโฮสต์-เปลี่ยนจากการใช้เครือข่ายการจัดส่งเนื้อหาสำหรับเฟรมเวิร์กและไฟล์ไลบรารีเพื่อให้ไฟล์จากเซิร์ฟเวอร์ของฉันอีกครั้งเนื่องจากข้อกำหนด GDPR สำหรับการไม่แชร์ที่อยู่ IP ของผู้ใช้กับไซต์อื่น ๆ ตอนนี้ฉันใช้ webpack เพื่อรวม jQuery, bootstrap javaScript, ปลั๊กอินการผ่อนคลาย jQuery และ JavaScript สำหรับเว็บไซต์เป็นไฟล์เดียว (ไฟล์หนึ่งไฟล์จะดาวน์โหลดได้เร็วขึ้น)
สนับสนุนการเคลื่อนไหวที่ลดลงอย่างน่าสนใจ-ในขณะที่ Boostrap รองรับการตั้งค่าผู้ใช้สำหรับการเคลื่อนไหวที่ลดลงฉันไม่ได้ปรับภาพเคลื่อนไหว jQuery ตอนนี้ฉันทำ
รองรับ Propers-Color-Scheme-เพิ่มรูปแบบโหมดมืดสำหรับผู้ใช้ที่ต้องการรูปแบบมืดแทนที่จะเป็นรูปแบบแสง
เว็บไซต์สาธิตทำงานร่วมกับเวอร์ชันล่าสุด:
และด้วย:
รหัสนี้มีให้ภายใต้ใบอนุญาต MIT ดูไฟล์ใบอนุญาตสำหรับรายละเอียด
ไม่มีไขมันฟรีภายใต้ใบอนุญาตสาธารณะ GNU (GPL v3)
Bootstrap มีให้ภายใต้ใบอนุญาต MIT
การนำทาง Offcanvas ให้ไว้ภายใต้ใบอนุญาต MIT
2018/09/23 - รีลีสเริ่มต้น
2019/01/ 02-ตรวจสอบความถูกต้องของเว็บไซต์ทำงานด้วยไขมันฟรี 3.6.5 และอัปเดตเนื้อหาหน้าเว็บบางส่วนเพื่อผลลัพธ์ของเครื่องมือค้นหาที่ดีขึ้น
2019/05/10 - ตรวจสอบความถูกต้องของเว็บไซต์กับ jQuery 3.4.1 และ bootstrap 4.3.1
2019/05/27 - ย้ายส่วนสำหรับประกาศคุกกี้ของสหภาพยุโรปไปที่ด้านล่างของหน้าเนื่องจาก Google บางครั้งรวมถึงข้อความแจ้งเตือนในตัวอย่างของหน้าผลลัพธ์ของเครื่องมือค้นหา
2019/07/02 - นำไปใช้ display=swap บน Google Fonts ซึ่งไม่จำเป็นต้องใช้ตัวจัดการแบบอักษรอย่างน้อยสำหรับ Google Fonts (ฉันใช้ Font Face Observer)
2020/01/ 20-ตรวจสอบความถูกต้องของไซต์ทำงานด้วยไขมันฟรี 3.7.1 และ bootstrap 4.4.1 และทำการแก้ไขเล็กน้อยกับเนื้อหา
2020/07/ 05-การตรวจสอบความถูกต้องของเว็บไซต์ทำงานด้วยไขมันปราศจากไขมัน 3.7.2, bootstrap 4.5.0 และ jQuery 3.5.1, กำจัดไฟล์ CSS ที่ไม่ได้ระบุ (เพียงแค่จัดหาไฟล์ CSS ขนาดเล็กบนเว็บไซต์) และทำการแก้ไขเล็กน้อยกับเนื้อหา (รวมถึงคำอธิบายเกี่ยวกับวิธีการทำรหัส
2022/07/15- ตรวจสอบความถูกต้องของไซต์ทำงานด้วยไขมันฟรี 3.8.0, bootstrap 4.6.1 และ jQuery 3.6.0, เปลี่ยนจาก Google แบบอักษรเป็นการใช้แบบอักษรของระบบเพิ่มการสนับสนุนสำหรับการเคลื่อนไหวที่ลดลงและโหมดมืดและอัปเดตเนื้อหา
2022/11/17 - ตรวจสอบความถูกต้องของไซต์ทำงานกับ jQuery 3.6.1 และเปลี่ยนไปให้ภาพ WebP ที่มีความละเอียดสูงและสูงสำหรับโหมดแสงและมืดโดยใช้องค์ประกอบรูปภาพและแหล่งที่มา
2023/07/09- เพิ่มลิงก์ไปยัง Bootstrap 5.3 พร้อมที่เก็บเฟรมเวิร์ก PHP ที่ปราศจากไขมัน
2023/10/07 - ตรวจสอบความถูกต้องของเว็บไซต์ทำงานกับ Bootstrap 4.6.2 และ JQuery 3.7.1 โฮสต์สำหรับไซต์สาธิตกำลังใช้งาน PHP 8.2 ดังนั้นการสาธิตจึงใช้ไขมันฟรี 3.8.2