บทช่วยสอน: เพิ่มเค้าโครงหน้าที่กำหนดเองให้กับเว็บไซต์ของคุณ

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

ในบทช่วยสอนนี้ คุณจะได้เรียนรู้วิธีสร้างเค้าโครงหน้าแบบกำหนดเองโดยใช้ Liquid

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

ต่อไปนี้เป็นขั้นตอนและแอสเซทที่สร้างขึ้นเพื่อให้เค้าโครงหน้าแบบกำหนดเอง:

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

ข้อกำหนดเบื้องต้น

• การสมัครใช้งาน Power Pages หรือแบบทดลองใช้ ทดลองใช้ Power Pages ฟรีที่นี่
• สร้างไซต์ Power Pages แล้ว สร้างไซต์ Power Pages
• ความรู้พื้นฐานของ HTML และ Liquid

ขั้นตอนที่ 1: สร้างเท็มเพลตเว็บและเขียนรหัสเท็มเพลตแบบไม่ตายตัว

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

1. ไปที่ Power Pages

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

   

3. ใน แอปการจัดการพอร์ทัล เลื่อนไปที่ส่วน เนื้อหา และเลือก เทมเพลตเว็บ

4. จากหน้าจอ เทมเพลตเว็บที่ใช้งานอยู่ เลือก สร้าง

5. ตั้งชื่อเทมเพลตสำหรับเว็บ เค้าโครงแบบสองคอลัมน์

   

6. วางโค้ดต่อไปนี้ในฟิลด์ ต้นทาง:

   <div class=container>
     <div class=page-heading>
       <ul class=breadcrumb>
         {% for crumb in page.breadcrumbs -%}
           <li>
             <a href={{ crumb.url }}>{{ crumb.title }}</a>
           </li>
         {% endfor -%}
         <li class=active>{{ page.title }}</li>
       </ul>
       <div class=page-header>
         <h1>{{ page.title }}</h1>
       </div>
     </div>
     <div class=row>
       <div class=col-sm-4 col-lg-3>
         {% block sidebar %}{% endblock %}
       </div>
       <div class=col-sm-8 col-lg-9>
         {% block content %}{% endblock %}
       </div>
     </div>
   </div>
   

7. เลือก บันทึก

ขั้นตอนที่ 2: สร้างเท็มเพลตเว็บใหม่ที่ขยายเท็มเพลตเค้าโครงพื้นฐานของเรา

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

1. ใน แอปการจัดการพอร์ทัล เลื่อนไปที่ส่วน เนื้อหา และเลือก เทมเพลตเว็บ

2. จากหน้าจอ เทมเพลตเว็บที่ใช้งานอยู่ เลือก สร้าง

3. ตั้งชื่อเทมเพลตเว็บ การนำทางด้านซ้ายของเว็บลิงก์

การนำทางด้านซ้ายของ Weblinks (เท็มเพลตเว็บ)

สังเกตว่ารหัสใช้คำสำคัญ extends แบบ Liquid อย่างไรเพื่อรวมเทมเพลตเค้าโครงพื้นฐาน

{% extends 'Two Column Layout' %}

{% block sidebar %}
  {% assign weblinkset_id = page.adx_navigation.id %}
  {% if weblinkset_id %}
    {% assign nav = weblinks[page.adx_navigation.id] %}
    {% if nav %}
      <div class=list-group>
        {% for link in nav.weblinks %}
          <a class=list-group-item href={{ link.url }}>
            {{ link.name }}
          </a>
        {% endfor %}
      </div>
    {% endif %}
  {% endif %}
{% endblock %}

{% block content %}
  <div id="mainContent" class = "wrapper-body" role="main">
    {% include 'Page Copy' %}
  </div>
{% endblock %}

ขั้นตอนที่ 3: สร้างเท็มเพลตเพจใหม่ที่ใช้เท็มเพลตเว็บดังกล่าว

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

1. ใน แอปการจัดการพอร์ทัล เลื่อนไปที่ส่วน เว็บไซต์ และเลือก เทมเพลตหน้า

2. จากหน้าจอ เทมเพลตหน้าที่ใช้งานอยู่ เลือก สร้าง

3. กรอกรายละเอียดในฟิล์ด:

   เขตข้อมูล	มูลค่า
   Name	พิมพ์ชื่อ
   เว็บไซต์	เลือกเว็บไซต์ที่ใช้ธีม หากต้องการแสดงรายการตัวเลือกที่มี ให้วางเคอร์เซอร์ในช่องแล้วกด Enter บนแป้นพิมพ์
   ชนิด	เลือก เทมเพลตเว็บ
   เทมเพลตเว็บ	เลือก เว็บลิงค์ การนำทางด้านซ้ายของลิงก์เว็บ (หรืออะไรก็ตามที่คุณตั้งชื่อเทมเพลตเว็บของคุณ)
   ใช้ส่วนหัวและส่วนท้ายของเว็บไซต์	เลือกแล้ว
   เป็นค่าเริ่มต้นหรือไม่	ยกเลิกการเลือกแล้ว
   ชื่อตาราง	ไม่มีการเลือกสิ่งใด
   Description	คำอธิบายของเทมเพลตหน้าของคุณ

   

4. เลือก บันทึก

ขั้นตอนที่ 4: สร้างเว็บเพจเพื่อแสดงเนื้อหา

1. ใน สตูดิโอออกแบบ เลือก ซิงค์ การดำเนินการนี้จะนำการอัปเดตที่ทำในแอปการจัดการพอร์ทัลไปยังสตูดิโอออกแบบ

2. ในพื้นที่ทำงาน Pages เลือก + หน้า

3. ในกล่องโต้ตอบ เพิ่มหน้า:

   1. ป้อน ชื่อหน้า
   2. จาก เค้าโครงแบบกำหนดเอง เลือกเค้าโครงหน้าแบบกำหนดเองของคุณ
   3. เลือก เพิ่ม

   

4. เพิ่มเนื้อหาในส่วนที่แก้ไขได้ของหน้า

การกำหนดค่าของหน้าเพิ่มเติม

ในตัวอย่างนี้ ให้เชื่อมโยงเรกคอร์ดการนำทางกับหน้าเนื้อหาเพื่อให้โค้ดที่กำหนดเองแสดงเมนูบนการนำทางด้านซ้าย

1. ใน สตูดิโอออกแบบ เลือก ... แล้วเลือก การจัดการพอร์ทัล ใช้แอปการจัดการพอร์ทัลเพื่อเพิ่มการกำหนดค่าเพิ่มเติมให้กับเพจของคุณ

2. ในแอป การจัดการพอร์ทัล เลื่อนไปที่ส่วน เนื้อหา และเลือก หน้าเว็บ

3. ค้นหาและเปิดหน้าที่คุณสร้างไว้ก่อนหน้านี้ในพื้นที่ทำงาน Pages ซึ่งจะเปิดหน้าเว็บราก ทำการเปลี่ยนแปลงในหน้าเนื้อหาที่แปลเป็นภาษาท้องถิ่นที่เกี่ยวข้อง

4. ภายในส่วน เนื้อหาที่แปลเป็นภาษาท้องถิ่น ให้เลือกหน้าเว็บเนื้อหาที่แปลเป็นภาษาท้องถิ่น

   

   หมายเหตุ

   หากคุณมีการเตรียมใช้งานหลายภาษา ให้อัปเดตหน้าที่แปลเป็นภาษาท้องถิ่นแต่ละหน้า

5. ไปที่ส่วน เบ็ดเตล็ด และเลือกชุดเว็บลิงก์ที่จะแสดงในฟิลด์ การนำทาง

   

6. บันทึกการเปลี่ยนแปลง และส่งคืนไปยัง สตูดิโอออกแบบ

7. เลือก ดูตัวอย่าง แล้วเลือก เดสก์ท็อป เพื่อดูหน้าแบบกำหนดเองของคุณด้วยการนำทางด้านข้าง

   

ดูเพิ่มเติม

• สร้างเค้าโครงหน้าแบบกำหนดเอง
• ภาพรวมของ Liquid