เกี่ยวกับเลย์เอาต์

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

ทุกธีมจะมีเลย์เอาต์ของเพจหลายเลย์เอาต์ โปรดดู เกี่ยวกับธีม

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

เลย์เอาต์ประกอบด้วยโครงสร้าง HTML ที่ถูกต้อง รวมถึงมาร์คอัปพิเศษที่ตัวแสดงผลของ Oracle Content Management รู้จัก เลย์เอาต์ต้องขึ้นต้นด้วยคำสั่ง DOCTYPE เพื่อคอนฟิเกอร์เบราเซอร์ให้แสดงผลเพจในโหมดที่เป็นไปตามมาตรฐาน ตัวอย่างเช่น <!DOCTYPE html> องค์ประกอบบางอย่างกำหนดให้จำเป็นต้องมีคำสั่งนี้เพื่อให้ได้ผลลัพธ์ที่ดีที่สุด

รหัสตัวอย่างนี้แสดงเลย์เอาต์ขั้นต่ำ:

1  <!DOCTYPE html>
3  <head>
4          <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6          <script src="/_themes/[!--$SCS_THEME_NAME--]/assets/js/topnav.js"></script>
7          <link rel="stylesheet" type="text/css"
8                 href="/_themes/[!--$SCS_THEME_NAME--]/assets/css/main.css">
9          <link rel="stylesheet" type="text/css"
10                href="/_themes/[!--$SCS_THEME_NAME--]/designs/[!--$SCS_DESIGN_NAME--]/design.css">
11
12         <!--$SCS_RENDER_INFO-->
13         <!--$SCS_SITE_HEADER-->
13         <!--$SCS_PAGE_HEADER-->
14  </head>
15  <body>
16         <div id="topNavigation"></div>
17         <div id="mainContentSlot" class="scs-slot scs-responsive"></div>
18
19         <script data-main="/_sitescloud/renderer/renderer.js"
20                src="/_sitescloud/renderer/require.js"></script>
21         <!--$SCS_SITE_FOOTER-->
22  </body>
23  </html>

โทเค็นต่างๆ จะได้รับการขยายเมื่อแสดงผลเพจในเบราเซอร์

  • [!--$SCS_THEME_NAME--]

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

  • [!--$SCS_DESIGN_NAME--]

    ตัวเลือกนี้จะขยายไปยังชื่อของการออกแบบที่เลือกไว้สำหรับไซต์ในปัจจุบัน ตัวเลือกนี้ช่วยให้การออกแบบหลายรายการสามารถใช้เลย์เอาต์ภายในธีมได้

  • [!--$SCS_RENDER_INFO--]

    ตัวเลือกนี้จะขยายไปยังแท็กสคริปต์ที่มีลำดับชั้นของเพจและองค์ประกอบที่แสดงผลข้อมูลสำหรับเพจ ซึ่งควรถูกวางในส่วน <head> ของเลย์เอาต์

  • [!--$SCS_SITE_HEADER--]

    ตัวเลือกนี้จะขยายไปยังค่าส่วนหัวของไซต์ที่ได้รับการระบุอยู่ในฟิลด์ส่วนหัวในคุณสมบัติ Search Engine Optimization (SEO) สามารถป้อนมาร์คอัปสำหรับทั้งไซต์ที่คุณต้องการวางบนทุกเพจได้ที่นี่ โปรดดู ตั้งค่าคุณสมบัติของเอ็นจินการค้นหา

  • [!--$SCS_PAGE_HEADER--]

    คำสั่งนี้จะขยายเป็นค่าส่วนหัวเพจที่พบในฟิลด์ส่วนหัวเพจในคุณสมบัติการตั้งค่าเพจของตัวสร้างไซต์ สามารถป้อนมาร์คอัปเฉพาะเพจที่คุณต้องการวางบนเพจนี้ได้ที่นี่

  • [!--$SCS_SITE_FOOTER--]

    ตัวเลือกนี้จะขยายไปยังค่าส่วนท้ายของไซต์ที่พบในฟิลด์ส่วนท้ายในคุณสมบัติ Search Engine Optimization (SEO) สามารถป้อนมาร์คอัปสำหรับทั้งไซต์ที่คุณต้องการวางบนทุกเพจได้ที่นี่ โปรดดู ตั้งค่าคุณสมบัติของเอ็นจินการค้นหา

หมายเหตุ:

โทเค็นสามารถใช้คำนำหน้า <!--$ และคำต่อท้าย --> เป็นตัวคั่นแทน [!--$ และ --]

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

  • /_sitescloud/ ถูกแทนที่ด้วย /_sitesclouddelivery/

  • /_themes/ ถูกแทนที่ด้วย /_themesdelivery/

สล็อต เป็นอีลิเมนต์ DIV ในเลย์เอาต์ที่มีค่า "scs-slot" ในแอททริบิวคลาส สล็อตคือส่วนที่ผู้ใช้สามารถเพิ่มองค์ประกอบที่จะเติมในเนื้อหาของไซต์ สามารถกำหนดอีลิเมนต์ DIV หลายรายการเป็นสล็อตด้วยการระบุแอททริบิวคลาส "scs-slot" แต่ละสล็อตต้องมีแอททริบิว id ที่ไม่ซ้ำกัน

หมายเหตุ:

สล็อตไม่สามารถซ้อนกัน แต่คุณสามารถให้คำแนะนำว่ากำลังซ้อนกันอยู่โดยการใช้ CSS เพื่อซ้อนทับ หากต้องการทำเช่นนี้ ให้ใช้กลุ่มองค์ประกอบหรือเลย์เอาต์ของส่วน โปรดดู สร้างเลย์เอาต์ของส่วน

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

แท็ก <script> ขั้นสุดท้าย (บรรทัด 19 ในตัวอย่าง) จะโหลดรหัสการแสดงผล Oracle Content Management รหัสนี้ทำหน้าที่วาดองค์ประกอบบนเพจ และยังช่วยให้รหัสที่กำหนดเองเข้าใช้ API การแสดงผลได้ หากไม่มีแท็ก <script> นี้ ตัวสร้างไซต์จะไม่สามารถเปลี่ยนแปลงเพจตามเลย์เอาต์ได้