อ่านในภาษาอังกฤษ

แชร์ผ่าน


แก้ไขโค้ดด้วย Visual Studio Code สำหรับเว็บ (พรีวิว)

[หัวข้อนี้คือเอกสารรุ่นก่อนวางจำหน่าย และอาจจะมีการเปลี่ยนแปลงในอนาคต]

จากสตูดิโอออกแบบ คุณสามารถแก้ไขโค้ดของไซต์ได้โดยใช้ Visual Studio Code สำหรับเว็บ คุณลักษณะนี้ช่วยให้คุณสามารถแก้ไขเนื้อหาแบบคงที่, HTML, CSS, Liquid และ JavaScript สำหรับเมตาดาต้าของเว็บไซต์ต่อไปนี้:

เมตาดาต้า เนื้อหา
ฟอร์มขั้นสูง (ฟอร์มแบบหลายขั้นตอน) JavaScript
ฟอร์มพื้นฐาน JavaScript
ส่วนย่อยของเนื้อหา เนื้อหาในส่วนย่อยของเนื้อหาที่รองรับทั้งหมด
รายการ JavaScript
ไฟล์เว็บ ดูและดาวน์โหลดไฟล์สื่อ แก้ไขไฟล์ข้อความ (โค้ด)
เว็บเพจ เนื้อหาที่รองรับทั้งหมด (ตามภาษา), JavaScript และ CSS
เทมเพลตเว็บ เนื้อหาที่รองรับทั้งหมด

หมายเหตุ

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

Visual Studio Code สำหรับเว็บเป็น Microsoft Visual Studio Code รูปแบบฟรีที่ไม่ต้องติดตั้งใดๆ ในเว็บเบราว์เซอร์ของคุณ ทำให้คุณสามารถเรียกดูโค้ดของไซต์และทำการเปลี่ยนแปลงโค้ดที่ไม่ซับซ้อนได้อย่างรวดเร็วและปลอดภัย ข้อมูลเพิ่มเติม: ประสบการณ์ Visual Studio Code สำหรับเว็บ

ข้อสำคัญ

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

การสาธิตการใช้ Visual Studio Code สำหรับเว็บเพื่อแก้ไขไซต์ Power Pages

หมายเหตุ

  • ในครั้งแรก Visual Studio Code สำหรับเว็บ อาจใช้เวลาโหลดสักครู่เนื่องจากจะทำการติดตั้งส่วนขยายที่จำเป็นสำหรับคุณลักษณะนี้
  • ไม่รองรับการดำเนินการสร้าง ลบ และเปลี่ยนชื่อไฟล์
  • คุณลักษณะนี้ใช้ส่วนขยายเว็บ Power Platform Tools ส่วนขยายของเว็บถูกจำกัดโดย Sandbox ของเบราว์เซอร์ ดังนั้นจึงมีข้อจำกัดเมื่อเทียบกับส่วนขยายปกติ
    • Power Platformไม่รองรับ CLI
    • คุณลักษณะของส่วนขยายเว็บ Power Platform Tools มีเฉพาะการใช้งานการแก้ไขโค้ด Power Pages
    • คุณลักษณะนี้ไม่สามารถใช้งานใน Government Community Cloud (GCC), Government Community Cloud (GCC High) และกระทรวงกลาโหม (DoD) ผู้ใช้ในภูมิภาคเหล่านี้จะใช้ แอปการจัดการพอร์ทัล เพื่อแก้ไขโค้ด โปรดดู การแก้ไขโค้ดในแอปการจัดการพอร์ทัล สำหรับข้อมูลเพิ่มเติม

แก้ไขโค้ดมีอยู่ในสตูดิโอออกแบบ

คุณสามารถเริ่มแก้ไขโค้ดของเว็บไซต์ของคุณได้โดยใช้ Visual Studio Code สำหรับเว็บจากโฮมเพจ Power Pages โดยเลือกตัวเลือก แก้ไขโค้ดของไซต์ จากเมนูดรอปดาวน์ แก้ไข

คุณยังสามารถแก้ไขโค้ดในสตูดิโอออกแบบได้จากส่วนต่อไปนี้:

มาดูวิธีการแก้ไขโค้ดโดยใช้พื้นที่เหล่านี้กัน

แก้ไขโค้ดของเว็บเพจจากพื้นที่ทำงานเพจ

เมื่อคุณเปิดสตูดิโอออกแบบ Power Pages คุณจะเห็นตัวเลือก แก้ไขโค้ด ในเมนูเพจ1 และมุมขวาบนของหน้าจอ2

แก้ไขโค้ดจากพื้นที่ทำงานเพจ

โค้ดเทมเพลตส่วนหัวจากพื้นที่ทำงานเพจ

เลือก แก้ไขส่วนหัวของไซต์ แล้วเลือก แก้ไขโค้ด เพื่อเปิดโปรแกรมแก้ไขโค้ด

แก้ไขโค้ดจากส่วนหัวของเพจ

แก้ไขโค้ด CSS แบบกำหนดเองจากพื้นที่ทำงานการกำหนดลักษณะ

ไปที่ พื้นที่ทำงานการกำหนดลักษณะ และเลือกเมนู แก้ไขโค้ด ของ CSS แบบกำหนดเองเพื่อเปิดตัวแก้ไขโค้ด

แก้ไขโค้ดจาก CSS แบบกำหนดเอง

รวมการแจ้งเตือนข้อขัดแย้ง

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

การเปรียบเทียบโค้ดจะแสดงโค้ดปัจจุบันควบคู่ไปกับโค้ดของคุณและอนุญาตให้คุณย้อนกลับไปใช้การเปลี่ยนแปลงที่มีอยู่ ยอมรับการเปลี่ยนแปลงทีละรายการหรือใช้การเปลี่ยนแปลงและเขียนทับเนื้อหาที่มีอยู่

รวมข้อขัดแย้งในโค้ด

คุณจะตรวจสอบเนื้อหาล่าสุดและรวมหรือเขียนทับโค้ดหรือยกเลิกการเปลี่ยนแปลงได้

บทช่วยสอน: แก้ไขโค้ดของไซต์โดยใช้ Visual Studio Code สำหรับเว็บ

ในบทช่วยสอนนี้ คุณจะได้รับการแนะนำการแก้ไขโค้ดของไซต์โดยใช้ Visual Studio Code สำหรับเว็บ

ขั้นตอนที่ 1: แก้ไขโค้ดของไซต์โดยใช้ Visual Studio Code สำหรับเว็บ

  1. เปิดไซต์ของคุณใน สตูดิโอออกแบบ Power Pages

  2. เลือก แก้ไขโค้ด ที่มุมขวาบน

    การเปิดใน Visual Studio Code จากสตูดิโอออกแบบ

  3. เลือก เปิด Visual Studio Code จากกล่องโต้ตอบการยืนยัน

  4. ลงชื่อเข้าใช้ Visual Studio Code โดยใช้ข้อมูลประจำตัวของสภาพแวดล้อม

  5. รอให้ส่วนขยายเว็บ Power Platform Tools เริ่มต้นและโค้ดของเว็บเพจโหลดในบานหน้าต่างด้านซ้าย

ขั้นตอนที่ 2: อัปเดตเนื้อหาและโค้ด

  1. ตัวสำรวจทางด้านซ้ายของหน้าจอจะโหลดเมตาดาต้าของการกำหนดค่าเว็บไซต์ที่เกี่ยวข้อง ซึ่งสามารถแก้ไขได้โดยใช้ Visual Code สำหรับเว็บ

    เมนูตัวสำรวจสำหรับพื้นที่ทำงานที่ไม่มีชื่อแสดงเว็บไฟล์

  2. ทำการเปลี่ยนแปลงไฟล์เมตาดาต้าที่เกี่ยวข้อง แล้วกด Ctrl+S เพื่อบันทึกการเปลี่ยนแปลง

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

    ส่วนติดต่อเพื่อให้ผู้ใช้เลือกปุ่มซิงค์ เพื่อซิงโครไนซ์การเปลี่ยนแปลงที่ทำใน Visual Studio Code ไปยังสตูดิโอออกแบบ

  4. เลือก แสดงตัวอย่าง เพื่อดูการเปลี่ยนแปลงในไซต์ Power Pages

การใช้ Visual Studio Code สำหรับเว็บ หรือ Visual Studio Code Desktop

ผู้ใช้สามารถแก้ไข ดีบัก และแสดงตัวอย่างการเปลี่ยนแปลงจากการแก้ไขเพจได้โดยใช้ Visual Studio Code สำหรับเว็บโดยไม่ต้องใช้เครื่องมือภายนอก Visual Studio Code Desktop นำเสนอคุณสมบัติขั้นสูงอื่นๆ สำหรับการแก้ไขข้อมูลเมตาของไซต์ทั้งหมด และการรวมกับ GitHub, เฟรมเวิร์ก และกระบวนการการรวมอย่างต่อเนื่อง/การพัฒนาอย่างต่อเนื่อง (CI/CD)

คุณสมบัติ VS Code สำหรับเว็บ VS Code Desktop
สร้างเรกคอร์ดเมตาดาต้าการกำหนดค่าเว็บไซต์ใหม่ ไม่ จำกัดเฉพาะเว็บเพจ เทมเพลตเพจ เทมเพลตเว็บ ตัวอย่างเนื้อหา และไฟล์เว็บ
การแก้ไขไซต์โดยตรง ใช่ ไม่
การแก้ไขเมตาดาต้าของไซต์ จำกัดเฉพาะการแก้ไขเว็บเพจ ส่วนย่อยของเนื้อหา ฟอร์มพื้นฐาน ฟอร์มแบบหลายขั้นตอน รายการ และเทมเพลตเว็บ การกำหนดค่าเมตาดาต้า Power Pages ทั้งหมด
การแสดงตัวอย่างไซต์ ที่วางแผนไว้ ที่วางแผนไว้
การรองรับ Power Platform CLI ไม่ ใช่
CPU ขั้นสูงและเวิร์กโฟลว์ที่ผูกกับที่เก็บข้อมูล - การรองรับ ReactJS หรือเครื่องมือสร้างเฟรมเวิร์กอื่นๆ ไม่ใช่ ใช่
การรวม GitHub เข้ากับความสามารถต่างๆ เช่น การเช็คอินโค้ด การเช็คเอาต์ การจัดการข้อขัดแย้ง และการผสาน ไม่ ใช่

การแก้ไขโค้ดในแอปการจัดการพอร์ทัล

หมายเหตุ

  • การใช้ Visual Studio Code สำหรับเว็บเพื่อแก้ไขเว็บไซต์ไม่ได้รับการรองรับใน Government Community Cloud (GCC), Government Community Cloud (GCC High) และกระทรวงกลาโหม (DoD) ผู้ใช้ในภูมิภาคเหล่านี้สามารถใช้ แอปการจัดการพอร์ทัล เพื่อทำการเปลี่ยนแปลงของตน

หากภูมิภาคไม่รองรับ Visual Studio Code สำหรับเว็บ การเลือกไอคอนตัวแก้ไขโค้ด </> ในแถบคำสั่งจะเปิด แอปการจัดการพอร์ทัล

ไปที่เรกคอร์ดของ เว็บเพจ, ฟอร์มพื้นฐาน, ฟอร์มแบบหลายขั้นตอน, รายการ หรือ เทมเพลตเว็บ ที่เกี่ยวข้องเพื่อแก้ไขโค้ด

ชนิด ตำแหน่งโค้ด
เว็บเพจ เลือกเรกคอร์ดของเว็บเพจ
เลือกเรกคอร์ดเนื้อหาของเว็บเพจจากส่วน เนื้อหาที่แปลเป็นภาษาท้องถิ่น
สำเนาของเพจสามารถแก้ไขได้ในฟิลด์ สำเนา (HTML) บนแท็บ ทั่วไป โค้ด
JavaScript ที่กำหนดเอง และ CSS ที่กำหนดเอง สามารถแก้ไขได้จากแท็บ ขั้นสูง
ฟอร์มพื้นฐาน เลือกเรกคอร์ดของฟอร์มพื้นฐาน
แก้ไข JavaScript ที่กำหนดเอง บนแท็บ การตั้งค่าเพิ่มเติม
ฟอร์มแบบหลายขั้นตอน เลือกเรกคอร์ดของฟอร์มแบบหลายขั้นตอน
เลือกขั้นตอนของฟอร์มแบบหลายขั้นตอนจากแท็บ ขั้นตอนของฟอร์ม
แก้ไข JavaScript ที่กำหนดเอง บนแท็บ ตัวเลือกของฟอร์ม
List เลือกเรกคอร์ดของรายการ
แก้ไข JavaScript ที่กำหนดเอง บนแท็บ ตัวเลือก
เทมเพลตเว็บ เลือกเรกคอร์ดของเทมเพลตเว็บ
แก้ไข ต้นทาง บนแท็บ ทั่วไป

บันทึกเรกคอร์ดและดูตัวอย่างเว็บไซต์เพื่อทดสอบโค้ดของคุณ

ดูเพิ่มเติม