สร้างบล็อกปฏิกิริยาที่รวดเร็วด้วย Svelte และ Sapper

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

ในบทช่วยสอนนี้เราจะใช้ Sapper เพื่อสร้างเว็บไซต์บล็อกที่มีน้ำหนักเบาโดยใช้ Svelte Components (ดูของเรา วิธีการเริ่มบล็อก โพสต์เคล็ดลับทางเทคนิคน้อยลงในบล็อก) Svelte เป็นกรอบที่มีความแตกต่าง มันวิเคราะห์รหัสในเวลารวบรวมและสร้างชุดของโมดูลในวานิลลาจาวาสคริปต์ซึ่งหลีกเลี่ยงความต้องการรันไทม์ หากคุณต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับเลย์เอาต์ให้ตรวจสอบโพสต์ของเราเกี่ยวกับวิธีการที่สมบูรณ์แบบ เค้าโครงเว็บไซต์ . หรือสำหรับตัวเลือกอื่น ๆ ดูด้านบนเหล่านี้ ผู้สร้างเว็บไซต์ และจำไว้ว่าคุณจะต้องได้รับของคุณด้วย เว็บโฮสติ้ง บริการ ณ จุด

ดาวน์โหลดไฟล์การสอนบน Filesilo ที่นี่

01. ติดตั้งการอ้างอิง

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

ดาวน์โหลดไฟล์การสอน (ด้านบน) ค้นหาพวกเขาในบรรทัดคำสั่งและติดตั้งการอ้างอิง

> npm install

02. สร้างเซิร์ฟเวอร์ออก

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

เปิด Server.js และสร้างเซิร์ฟเวอร์ด้วย Express ใช้คำแนะนำของพวกเขาเรารวมถึง การบีบอัด เพื่อลดขนาดไฟล์ที่เราส่งและ คน เพื่อให้บริการไฟล์คงที่

 ด่วน ()
  .ใช้(
    การบีบอัด ({threshold: 0}),
    SIRV ("คงที่", {dev}),
    Sapper.middleware ()
  )
  .it (พอร์ต); 

03. ติดตั้งแอปพลิเคชัน

ในฝั่งไคลเอ็นต์เราต้องบอก Sapper สถานที่ที่จะติดตั้งแอปพลิเคชัน นี่คล้ายกับปฏิกิริยาของ DOM ทำให้เกิด หรือ vue $ mount วิธีการ ภายใน client.js เริ่มต้น sapper แล้วติดตั้งกับรูท & lt; div & gt; ธาตุ. องค์ประกอบนั้นรวมอยู่ในไฟล์เทมเพลตซึ่งเราจะมาต่อในภายหลัง

 นำเข้า * เป็น Sapper จาก "@ sapper / app";
Sapper.Start ({
  เป้าหมาย: document.getElementbyid (
   "ราก")
}); 

04. เริ่มต้นเซิร์ฟเวอร์การพัฒนา

ด้วยการตั้งค่าเซิร์ฟเวอร์พื้นฐานและไคลเอ็นต์ไคลเอ็นต์เราสามารถเริ่มต้นเซิร์ฟเวอร์การพัฒนา สิ่งนี้เป็นการเริ่มต้นการสร้างไฟล์เซิร์ฟเวอร์ไคลเอนต์และพนักงานบริการและมันจะเริ่มขึ้นที่พอร์ต 3000 ตามค่าเริ่มต้น เมื่อใดก็ตามที่มีการเปลี่ยนแปลงไฟล์มันจะสร้างส่วนของแอปพลิเคชันที่เปลี่ยนแปลง

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

 & gt; NPM Run Dev 

05. สร้างเส้นทางเซิร์ฟเวอร์

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

ที่ เส้นทาง / บล็อก / index.json.js ไฟล์จะสร้าง /blog.json จุดสิ้นสุดบนเซิร์ฟเวอร์ของเรา นำเข้าโพสต์บล็อกและสร้าง JSON บางส่วนจากพวกเขา

 นำเข้าโพสต์จาก "./_posts.js";
const contents = json.stringify (
  posts.map (โพสต์ = & gt; ({
    ผู้เขียน: post.author,
    ภาพ: โพสต์ .Image,
    หัวข้อ: Post.title,
    Slug: Post.slug
  }))
); 

06. ส่งคืนโพสต์บล็อก

ฟังก์ชั่นการส่งออกของเซิร์ฟเวอร์ที่สอดคล้องกับวิธีการ HTTP ตัวอย่างเช่นเพื่อตอบสนองต่อการร้องขอการรับเราจะส่งออกฟังก์ชั่นที่เรียกว่า รับ จากไฟล์เส้นทางเซิร์ฟเวอร์ สร้าง รับ ฟังก์ชั่นที่ตอบสนองต่อข้อมูลที่เรารวบรวมในขั้นตอนก่อนหน้าในรูปแบบ JSON เปิด http: // localhost: 3000 / blog.json ในเบราว์เซอร์และตรวจสอบโพสต์กำลังจะผ่าน

 ฟังก์ชั่นการส่งออกรับ (req, res) {
  res.writehead (200, {
    "ประเภทเนื้อหา": "แอปพลิเคชัน / JSON"
  });

  Res.end (เนื้อหา);
} 

07. สร้างหน้าดัชนี

หน้าใน Sapper เป็นส่วนประกอบ Svelte ปกติ แต่ละองค์ประกอบเป็นไฟล์เดียวที่มี .svelte ส่วนขยายและมีตรรกะและจัดแต่งทรงผมทั้งหมดสำหรับการจัดการตัวเอง JavaScript ใด ๆ ส่วนประกอบนี้จำเป็นต้องทำงานจะอยู่ภายใน & lt; สคริปต์ & gt; แท็ก - เช่นเดียวกับหน้า HTML ใด ๆ

ภายใน เส้นทาง / index.svelte นำเข้าส่วนประกอบ Svelte อื่น ๆ ที่เราสามารถใช้เพื่อสร้างหน้านี้ ส่งออก โพสต์ ตัวแปรที่เราจะเติมในภายหลัง

 & lt; สคริปต์ & gt;
  นำเข้าคอนเทนเนอร์จาก
   "../components/container.svelte";
  การนำเข้า postsummary จาก
   "../components/postsummary.svelte";
  ส่งออกให้โพสต์;
& lt; / script & gt; 

08. ดึงข้อมูลบล็อกโพสต์

ด้วยการตั้งค่าหน้าเว็บเราสามารถเริ่มต้นนำโพสต์บล็อก (คุณอาจต้องการสำรองข้อมูล การจัดเก็บเมฆ . เราต้องทำเช่นนี้ทันทีที่โหลดหน้า เพื่อให้เซิร์ฟเวอร์ทราบข้อมูลนี้แล้วขอข้อมูลนี้เมื่อแสดงหน้าเว็บจะต้องแยกกัน & lt; สคริปต์บริบท = "โมดูล" & gt; แท็ก.

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

 & lt; สคริปต์บริบท = "โมดูล" & GT;
  ส่งออกฟังก์ชั่น Async ล่วงหน้า () {
    Const res = รอ
     นี่.fetch ("blog.json");
    ข้อมูล const = รอ res.json ();
    ส่งคืน {กระทู้: data};
  }
& lt; / script & gt; 

09. แสดงบทสรุปโพสต์

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

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

 & lt; ภาชนะ & gt;
  & lt; ul & gt;
    {โพสต์ #each เป็นโพสต์}
      & lt; li & gt;
        & lt; postsummary {โพสต์} / & gt;
      & lt; / li & gt;
    {/แต่ละ}
  & lt; / ul & gt;
& lt; / ภาชนะ & gt; 

10. สไตล์คอนเทนเนอร์

เราสามารถใช้ส่วนประกอบที่มีตรรกะซ้ำ ๆ และใช้งานได้ทุกที่ที่ต้องการ - รวมถึงสไตล์ ที่ & lt; ภาชนะ & gt; ปัจจุบันส่วนประกอบไม่ได้ทำอะไรเลย แต่เราสามารถใช้เพื่อให้ความกว้างสูงสุดกับเนื้อหาภายใน

เปิดออก ส่วนประกอบ / container.svelte และเพิ่มสไตล์บางอย่างภายใน & lt; สไตล์ & gt; แท็ก. ทุกสไตล์ที่เราใช้ในส่วนประกอบจะถูกกำหนดขอบเขตไปยังองค์ประกอบนั้นซึ่งหมายความว่าเราสามารถใช้ตัวเลือกทั่วไป

 & lt; สไตล์ & gt;
  DIV {
    ระยะขอบ: 0 อัตโนมัติ;
    padding: 0 1Rem;
    สูงสุดความกว้าง: 50Rem;
  }
& lt; / style & gt; 

11. กำหนด A & Lt; สล็อต & GT;

หากส่วนประกอบถูกออกแบบมาให้เป็นพาเรนต์กับส่วนประกอบอื่น ๆ เราต้องการวิธีการผ่านส่วนประกอบเหล่านั้นผ่าน ที่ & lt; สล็อต & gt; องค์ประกอบทำเช่นนั้นและสามารถวางได้ทุกที่ที่เหมาะสมในมาร์กอัพของคอมโพเนนต์

ด้วย & lt; ภาชนะ & gt; เรากำลังห่อเนื้อหาในรูปแบบ & lt; div & gt; . ใช้ & lt; สล็อต & gt; ข้างใน & lt; div & gt; เพื่อให้ทุกสิ่งทุกอย่างผ่าน

 & lt; div & gt;
  & lt; สล็อต / & gt;
& lt; / div & gt; 

12. การเปิดเผย props postummary

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

เปิด ส่วนประกอบ / postsummary.svelte และกำหนดคุณสมบัติบางอย่างที่ด้านบนของไฟล์ สิ่งเหล่านี้กำลังกรอกข้อมูลโดยผู้ดำเนินการสเปรดที่เราเพิ่มในขั้นตอนที่ 09

 & lt; สคริปต์ & gt;
  ส่งออกให้ผู้แต่ง;
  ส่งออกให้รูปภาพ;
  ส่งออกปล่อยให้กระสุน;
  ส่งออกให้ชื่อ;
& lt; / script & gt; 

13. สรุปบล็อกโพสต์

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

ที่ด้านล่างของส่วนประกอบเพิ่ม HTML บางอย่างเพื่อสร้างสรุป ชั้นเรียนเกี่ยวข้องกับสไตล์ที่กำหนดไว้ล่วงหน้า

& lt; บทความ & gt;
& lt; div class = "โพสต์ภาพ" สไตล์ = "
 พื้นหลังภาพ: URL ({image}) "/ & gt;
& lt; div class = "ร่างกาย" & gt;
  & lt; div class = "ผู้เขียนภาพ" & gt;
    & lt; img src = {comput.image}
     Alt = {actux.name} / & gt;
  & lt; / div & gt;
  & lt; div class = "เกี่ยวกับ" & gt;
    & lt; h1 & gt; {title} & lt; / h1 & gt;
    & lt; span class = "byline" & gt; โดย
     {ผู้แต่งชื่อ} & lt; / span & gt;
  & lt; / div & gt;
& lt; / div & gt;
& lt; / บทความ & gt; 

14. ลิงก์ไปยังบล็อกโพสต์

ซึ่งแตกต่างจากกรอบงานที่คล้ายกันเช่น Next.js, Sapper ทำงานกับลิงค์สมอปกติ ในการสร้างเวลามันสามารถตรวจจับลิงค์ภายในและเพื่อให้การเพิ่มประสิทธิภาพของตัวเอง

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

 & lt; rel = "prefetch" href = "/ บล็อก / {slug}" & gt;
  & lt; บทความ & GT; ... & lt; / บทความ & gt;
& lt; / a & gt; 

15. ดึงโพสต์โดย Slug

Sapper สามารถสร้างหน้าเว็บตามพารามิเตอร์ URL ได้ ในกรณีของเราเราเชื่อมโยงไปยัง / บล็อก / กระสุน ซึ่งหมายความว่ามันแสดงให้เห็นถึงองค์ประกอบที่ / routes/blog/ هlugเหมือนกัน.svelte .

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

 & lt; สคริปต์บริบท = "โมดูล" & GT;
  ส่งออกฟังก์ชั่น Async
   โหลดล่วงหน้า ({params}) {
    const res = รอสิ่งนี้เพียง (
     `บล็อก / $ {params.lug} .json`);
    ข้อมูล const = รอ res.json ();
  }
& lt; / script & gt; 

16. ข้อผิดพลาดหากไม่พบโพสต์

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

ในตอนท้ายของวิธีการโหลดล่วงหน้าแสดงข้อผิดพลาดหากไม่พบโพสต์ มิฉะนั้นให้ตั้งค่า โพสต์ ตัวแปรสำหรับหน้า

 ถ้า (res.status === 200) {
  ส่งคืน {โพสต์: ข้อมูล};
} อื่น {
  this.error (res.status,
    data.message);
} 

17. แสดงโพสต์บล็อก

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

 & lt; บทความและ gt;
  & lt; ภาชนะ & gt;
    & lt; div class = "ชื่อ" & gt;
      & lt; h1 & gt; {post.title} & lt; / h1 & gt;
      & lt; div class = "byline" & gt; โดย
       {post.author.name} & lt; / div & gt;
    & lt; / div & gt;
    & lt; img class = "โพสต์รูปภาพ" src = {post.image} alt = "" / & gt;
     {post.html}
  & lt; / ภาชนะ & gt;
& lt; / บทความ & gt; 

18. แสดง HTML แทน

ดูที่หน้าตอนนี้ทุกอย่างแสดงให้เห็นอย่างถูกต้องจากเนื้อหาโพสต์จริง การแปลง Markdown สร้าง HTML แต่เราเห็นว่าพิมพ์เป็นข้อความบนโพสต์ตัวเอง Sapper มีตัวแยกวิเคราะห์ HTML ในตัวในกรณีนี้ การวาง @html ด้านหน้าของมันจะใช้ parser นี้

 {@ html post.html} 

19. ตั้งหน้า & lt; ชื่อ & gt; ค่า

ฟังก์ชั่นบล็อกของเราถูกต้อง แต่มีการเปลี่ยนแปลงสองสามครั้งที่จำเป็นในการทำให้เสร็จ หนึ่งในนั้นคือการอัพเดท & lt; ชื่อ & gt; บนหน้าเว็บเพื่อ relabel แท็บที่แสดงอยู่

Svelte รองรับ & lt; Svelte: Head & GT; องค์ประกอบซึ่งฉีดอะไรลงใน & lt; หัว & gt; ของหน้า ใช้สิ่งนี้เพื่อตั้งชื่อของโพสต์เป็น & lt; ชื่อ & gt; .

 & lt; Svelte: Head & Gt;
  & lt; ชื่อ & gt; {post.title} |
   Sapper Blog & LT; / ชื่อ & GT;
& lt; / svelte: head & gt; 

20. การอัพเดต & lt; ชื่อ & gt;

ทุกหน้าผ่านเทมเพลตเพื่อประทับตรา HTML สำหรับส่วนที่เหลือของหน้า นี่คือที่ตั้งค่าใด ๆ เช่นการนำเข้าแบบอักษรและแท็ก Meta จะถูกป้อน เปิด Template.html และเพิ่มในตะขอสำหรับเนื้อหาของ & lt; Svelte: Head & GT; องค์ประกอบจากขั้นตอนก่อนหน้า เพิ่มสิ่งนี้ในก่อนปิด & lt; / head & gt; แท็ก.

 & lt; หัว & gt;
  [... ]% sapper.head%
& lt; / head & gt; สิ่งสุดท้ายที่เราต้องเพิ่มเป็นเลย์เอาต์สำหรับบล็อก แทนที่จะปิดแต่ละหน้าในส่วนประกอบ Sapper จะค้นหาไฟล์ "_layout.svelte" เพื่อทำงานนี้ให้เรา
ภายใน _layout.svelte นำเข้า & lt; ส่วนหัว & gt; ส่วนประกอบและแสดงให้เห็นว่าที่ด้านบนของทุกหน้า มันมีลิงค์ที่สะดวกกลับไปที่หน้าแรก 

21. เพิ่มส่วนหัวถาวร

สิ่งสุดท้ายที่เราต้องเพิ่มคือเค้าโครงสำหรับบล็อก แทนที่จะปิดแต่ละหน้าในส่วนประกอบ Sapper จะมองหา _layout.svelte ไฟล์ที่จะทำงานนี้ให้เรา ภายใน _layout.svelte นำเข้า & lt; ส่วนหัว & gt; ส่วนประกอบและแสดงให้เห็นว่าที่ด้านบนของทุกหน้า มันให้ลิงค์ที่สะดวกกลับไปที่หน้าแรก

 & lt; สคริปต์ & gt;
  นำเข้าส่วนหัวจาก
   "../components/header.svelte";
& lt; / สคริปต์ & gt;
& lt; หลัก & gt;
  & lt; ส่วนหัว / & gt;
  & lt; สล็อต / & gt;
& lt; / main & gt; 

เนื้อหานี้ปรากฏในนักออกแบบเว็บไซต์

• คอมโพเนนต์เว็บ: คู่มือที่ดีที่สุด
• 30 ส่วนขยาย Chrome สำหรับนักออกแบบเว็บไซต์และ Devs
• 52 เครื่องมือออกแบบเว็บเพื่อช่วยให้คุณทำงานอย่างชาญฉลาดในปี 2562