wodle
1.0.0
Wodle เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่โดยใช้เฟรมเวิร์กและเครื่องมือใหม่สำหรับการพัฒนาเว็บไซต์สมัยใหม่ มันสร้างขึ้นบน Next.js และ Tachyons และคุณสามารถเปลี่ยนไซต์คงที่ที่สร้างขึ้นให้เป็นเว็บไซต์ไดนามิกเต็มรูปแบบได้อย่างง่ายดาย
เนื่องจาก NextJS และ CSS ที่ใช้งานได้ทำให้การเริ่มต้นใช้งานบล็อกหรือเพจแบบคงที่เป็นเรื่องง่าย ดังนั้นจึงเป็นจุดเริ่มต้นที่ดีสำหรับบล็อกเกอร์และนักพัฒนาที่ต้องการเรียนรู้เทคโนโลยีเหล่านั้น
คุณสามารถติดตั้ง Wodle ผ่าน npm:
npm install -g wodle
เมื่อติดตั้ง Wodle แล้ว คุณสามารถใช้คำสั่ง wodle ได้ หากต้องการสร้างไซต์ใหม่ คุณสามารถดำเนินการได้:
wodle myBlog
ซึ่งจะสร้างไซต์ใหม่ที่เรียกว่า myBlog ในไดเร็กทอรีเดียวกันกับที่คุณรันคำสั่ง
ในการเริ่มต้นกับไซต์ใหม่ของคุณ คุณเพียงแค่ต้องใส่ซีดีลงไป จากนั้นจึงติดตั้งการอ้างอิง:
cd myBlog
yarn
ซึ่งจะดึงข้อมูลการขึ้นต่อกันทั้งหมด เมื่อพร้อมแล้ว คุณก็สามารถเริ่มการทำงานของเซิร์ฟเวอร์ได้:
yarn dev
และไปที่ localhost:3000/ คุณควรเห็นไซต์เช่นนี้:
เซิร์ฟเวอร์นั้นจะรับฟังการเปลี่ยนแปลงในแอปของคุณและโหลดเบราว์เซอร์ใหม่
หากคุณต้องการรันไซต์ของคุณโดยไม่ต้องโหลดซ้ำ คุณสามารถเรียกใช้:
yarn start
หากต้องการสร้างไซต์ของคุณ คุณสามารถเรียกใช้:
yarn build
ซึ่งจะสร้างโฟลเดอร์ out/ พร้อมไซต์คงที่ของคุณพร้อมที่จะเผยแพร่
เว็บไซต์ของคุณจะมีโฟลเดอร์ที่แตกต่างกัน:
โฟลเดอร์นี้มีไฟล์เพจของคุณและชื่อไฟล์ตรงกับเส้นทาง ดังนั้นหากคุณต้องการเพิ่มเพจใหม่ใน /new-page คุณจะต้องเพิ่มส่วนประกอบใหม่ในโฟลเดอร์นี้ที่เรียกว่า new-page.js สำหรับการกำหนดเส้นทางขั้นสูง โปรดตรวจสอบที่นี่
โครงสร้างมาพร้อมกับส่วนประกอบของเพจบางส่วนที่สร้างไว้ล่วงหน้าในโฟลเดอร์ components
ในโฟลเดอร์นี้ คุณจะพบส่วนประกอบที่สร้างไว้ล่วงหน้าทั้งหมดบนไซต์ ส่วนประกอบหลักของแอปฐานรากนี้คือ:
ส่วนประกอบแถบด้านข้างที่รับรายการและแสดงผล Nav ด้วย NavItems เนื้อหาสำหรับส่วนประกอบนี้อยู่ใน content/sideBarOptions.js
ส่วนประกอบนี้จะล้อมสิ่งที่คุณต้องการแสดงในส่วนหลัก (กึ่งกลางของไซต์)
ส่วนประกอบนี้แสดงผลบทความหลัก ตามที่คุณเห็นในดัชนีและบทความแต่ละบทความ การสาธิตเนื้อหาที่สามารถประมวลผลได้โดยส่วนประกอบนี้ ซึ่งอยู่ที่ content/mainArticle
ส่วนประกอบนี้จะแสดงรายการบทความดังที่คุณจะเห็นในแต่ละหน้าจากเมนูแถบด้านข้าง คุณสามารถดูรายการใน content/ ในไฟล์ <something>Articles.js
ในหมู่คนอื่น ๆ
โฟลเดอร์สไตล์ของคุณมีไว้สำหรับ CSS ทั้งหมดของคุณ (ตอนนี้เกือบจะว่างเปล่าด้วย CSS และ Tachyons ที่ใช้งานได้)
คุณสามารถลบเพจต่อไปได้ (ลบไฟล์ออกจากโฟลเดอร์ pages ) เพิ่มเพจ บทความ ตัวเลือกตามรูปแบบบนโครง หรือเพียงแค่เปลี่ยนทุกอย่างตามที่คุณต้องการ! คุณสามารถอ่านคำแนะนำที่ดีได้บนเว็บไซต์ Next.js และ Tachyons เพื่อสร้างเว็บไซต์หรือบล็อกที่ยอดเยี่ยมของคุณ!
อ้างอิงจากงาน chibicode.com และ jspg ก่อนหน้านี้
