แนวปฏิบัติที่ดีที่สุดในการจัดการกับองค์ประกอบโครงสร้างทั่วไปของหน้า?

คำถามพื้นฐานมาก: ฉันกำลังเขียนโค้ดเว็บแอปที่มีหน้าเว็บไม่กี่หน้า หน้าเว็บเหล่านี้มีองค์ประกอบที่ใช้ร่วมกันตามปกติ เช่น ส่วนหัว/หน่วยโฆษณาด้านบนและแถบด้านข้างของไซต์จะปรากฏในทุกหน้า HTML เป็นแบบคงที่ (ไม่ได้สร้างแบบไดนามิก "ajaxy-ness" ของมันถูกสร้างเสร็จในฝั่งไคลเอ็นต์)

วิธีที่ดีที่สุดในการนำเข้า/"รวม" องค์ประกอบทั่วไปเหล่านั้นลงในหน้าเว็บของฉันคืออะไร วิธีแก้ปัญหาที่ฉันใช้คือให้ไฟล์ HTML มีตัวยึดตำแหน่งว่าง

<div id="header"></div>
<div id="leftSideBar"></div>
(...)

แล้วทำใน $(document).ready(): ของ jquery

$.get("header.html", function(html) { $("#header").html(html); });
// ....

นี่เป็นวิธีที่ดีที่สุดในการทำเช่นนี้หรือไม่? ฉันยังใหม่ต่อการพัฒนาเว็บ : )

ฉันเดาว่าฉันสามารถขุดเครื่องมือสร้างโค้ด "เหมือนมาโคร" ที่ฉันใช้กับไฟล์ HTML เพื่อแทนที่ เช่น "#header" ด้วยเนื้อหาของ header.html วิธีดังกล่าวในการโหลดหน้าเว็บจะต้องมีคำขอเดียวสำหรับไฟล์ HTML ไฟล์เดียว ซึ่งฟังดูดีกว่า

วิธีที่ชาญฉลาดในการบรรลุเป้าหมายนี้คืออะไร? ฉันแน่ใจว่าปัญหานี้ได้รับการแก้ไขแล้วนับพันครั้ง

แก้ไข: ฝั่งเซิร์ฟเวอร์ถูกเข้ารหัสใน Python+cherrypy (ฉันคิดว่ามันสมเหตุสมผลที่จะพยายามหลีกเลี่ยงการสร้าง HTML แบบไดนามิกเมื่อทำเว็บแอป "web 2.0-ish" โปรดแก้ไขให้ฉันด้วยถ้าฉันผิด อย่างที่ฉันบอกไป ฉันยังใหม่กับสภาพแวดล้อมนี้มาก)

ขอขอบคุณสำหรับข้อมูลเชิงลึกของคุณ

ลาร่า


javascript ajax
person laramichaels    schedule 28.12.2009    source แหล่งที่มา
comment
นี่ดูเหมือนเป็นแนวทางที่ค่อนข้างสมเหตุสมผลในความคิดของฉัน บล็อกว่างไม่มีความหมายเชิงลบในโลก HTML ดังนั้นสิ่งที่คุณทำอยู่จึงถูกต้องตามกฎหมายอย่างสมบูรณ์   -  person Nathan Taylor    schedule 28.12.2009
comment
แก้ไขคำตอบของฉันเพื่อรวมวิธีการทำเทมเพลตโดยใช้เฟรมเวิร์ก   -  person marcgg    schedule 28.12.2009
comment
คุณใช้อะไรบนฝั่งเซิร์ฟเวอร์? เราไม่สามารถตอบคำถามของคุณโดยไม่รู้ตัวได้   -  person Domenic    schedule 28.12.2009
comment
@Domenic ขออภัยที่ไม่ได้ทำให้ชัดเจน ผนวกบันทึกเกี่ยวกับคำถามนั้นด้วย   -  person laramichaels    schedule 28.12.2009

คำตอบ (3)


arrow_upward
5
arrow_downward

หากคุณต้องการรวมไฟล์ โปรดพิจารณาใช้ภาษาแบ็กเอนด์บางภาษา เช่น PHP หรือ ASP Javascript ไม่ได้ตั้งใจจะทำสิ่งนี้จริงๆ แม้ว่าสิ่งนี้จะได้ผลก็ตาม

<?php include 'other_file.php'; ?>

ฉันคิดว่าการใช้จาวาสคริปต์ในการทำเช่นนี้จะทำให้ SEO ไม่ดีและการโหลดหน้าเว็บอาจดูแปลกสำหรับผู้ใช้ปลายทาง หากคุณไม่ต้องการใช้ภาษาแบ็กเอนด์จริงๆ IDE บางตัวมีวิธีจัดการเทมเพลต คุณสามารถตรวจสอบสิ่งนั้นได้

เกี่ยวกับเฟรมเวิร์ก ส่วนใหญ่มีวิธีจัดการเทมเพลต ASP.NET มีระบบมาสเตอร์เพจ Ruby on Rails มีเลย์เอาต์

นี่คือตัวอย่างการใช้ Rails :

<html>
...
<div id="content"> <%= yield %> </div>
...
</html>

ที่นี่เนื้อหาทั้งหมดของหน้าย่อยจะเข้าสู่ "ผลตอบแทน" นี่คือลิงก์เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนั้น

เฟรมเวิร์กบางตัวสามารถรองรับตัวยึดตำแหน่งได้หลายอัน

person marcgg    schedule 28.12.2009
comment
เมื่อพิจารณาถึงความสามารถในการเข้าถึง การใช้จาวาสคริปต์เพื่อดึงเนื้อหาถือเป็นแนวทางที่ผิดมาก - person dusoft; 28.12.2009
comment
มาร์ค ฉันไม่ได้แต่งงานกับความคิดที่จะรวมไฟล์ด้วย ฉันแค่สงสัยว่าคนที่ไม่ได้สร้าง html แบบไดนามิกหลีกเลี่ยงการทำซ้ำองค์ประกอบของหน้าทั่วไปในทุกหน้าของเว็บไซต์ได้อย่างไร ขอบคุณสำหรับความช่วยเหลือใด ๆ - person laramichaels; 28.12.2009
comment
@lara: ฉันจะบอกว่าคนเหล่านี้ใช้เทมเพลต (อ้างอิงการแก้ไขของฉันใน dreamweaver) หรือเพียงแค่ทำซ้ำโค้ด - person marcgg; 28.12.2009
comment
หากคุณไม่ได้ใช้ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ ฟังก์ชันการรวมฝั่งเซิร์ฟเวอร์บางรูปแบบหรือเพียงสร้างหน้าเว็บแต่ละหน้าจากเทมเพลตโดยใช้ภาษาสคริปต์ก็เป็นตัวเลือกที่ต้องพิจารณาอย่างแน่นอน - person Adam Luchjenbroers; 28.12.2009

arrow_upward
1
arrow_downward

ในระดับหนึ่ง ขึ้นอยู่กับสิ่งที่คุณใช้บนฝั่งเซิร์ฟเวอร์ในการแสดงผลหน้าเว็บ หากคุณใช้สคริปต์ฝั่งเซิร์ฟเวอร์เพื่อสร้างเพจ คุณควรจะสามารถใช้เฟรมเวิร์กเว็บได้ (เช่น Django หรือ RubyOnRails) หรือแม้แต่เครื่องมือสร้างเทมเพลตพื้นฐาน เช่น เกนชิ. ฟังก์ชันการรวมขั้นพื้นฐานอาจมีอยู่ในภาษาที่คุณใช้ (เช่น PHP)

หากเป็นเพียง HTML แบบคงที่ คุณอาจต้องการพิจารณาการตั้งค่ารูปแบบของฝั่งเซิร์ฟเวอร์บางรูปแบบ เช่น Apache SSI หรือ NGINX SSI คุณจะต้องเลือกอันที่ใช้งานได้กับเซิร์ฟเวอร์ใดก็ตามที่คุณใช้ และคุณจะต้องมีสิทธิ์เพียงพอในการติดตั้งและกำหนดค่าปลั๊กอินหรือโมดูล

หรืออีกทางหนึ่ง คุณอาจต้องการดูการใช้สคริปต์เพื่อสร้างเพจของคุณ (แก้ไข สร้าง และปรับใช้) วิธีการง่ายๆ โดยใช้ cat / sed / awk / สร้าง (ข้อมูลอ้างอิงที่เป็นประโยชน์เพิ่มเติม - Sed & Awk) อาจเป็นสิ่งที่คุณต้องการ หรือคุณอาจต้องการใช้เครื่องมือสร้างเทมเพลตและภาษาเช่น Python หรือ Perl

person Adam Luchjenbroers    schedule 28.12.2009
comment
ขอบคุณมาก! แอปพลิเคชันเว็บถูกเข้ารหัสด้วย python แต่ฉัน (ไม่แนะนำ) พยายามทำให้ HTML ทั้งหมดคงที่ ฉันไม่รู้ว่า NGIX สามารถทำสิ่งนั้นให้ฉันได้ นั่นควรจะแก้ไขได้ : ) -ล - person laramichaels; 28.12.2009

arrow_upward
0
arrow_downward

ฉันจะมีฝั่งเซิร์ฟเวอร์ที่จัดการรวม และสิ่งนี้จะหมายถึงคำขอจากไคลเอนต์น้อยลง และอาจมีประโยชน์อื่น ๆ ด้วย (ง่ายต่อการแก้ไขจุดบกพร่อง js เป็นต้น)

การมีกระบวนการเซิร์ฟเวอร์รวมไว้จริงๆ จะไม่สร้างความตึงเครียดให้กับมันมากนัก

person MarkR    schedule 28.12.2009