npx cms-create-site my-site วันนี้คุณอยากสร้างอะไร?
ไปดูกันVertex คืออะไร
เว็บไซต์เนื้อหาก็คือไฟล์การตั้งค่าไฟล์หนึ่ง ส่วนที่เหลือเป็นเรื่องของเฟรมเวิร์ก
Vertex CMS คือเฟรมเวิร์ก Vue 3 ที่สร้างอยู่บน vite-ssg คุณเขียน JSON อธิบายว่าแต่ละหน้ามีอะไรบ้าง แล้วมันจะคืนเว็บไซต์สแตติกที่เรนเดอร์ล่วงหน้ามาให้ พร้อมการกำหนดเส้นทาง เมทาดาต้า ธีม และรูปภาพที่จัดการเรียบร้อยแล้ว ไม่มีโค้ดแอปพลิเคชันให้เขียน และไม่มีเซิร์ฟเวอร์ให้ดูแล
หน้าเว็บคือข้อมูล ไม่ใช่โค้ด
หน้าหนึ่งคือรายการคอมโพเนนต์ และเนื้อหาที่คอมโพเนนต์เหล่านั้นต้องใช้ การเพิ่มส่วนใหม่คือการเพิ่มบรรทัดเดียว ไม่มีใครต้องเปิดไฟล์ .vue เพียงเพื่อแก้หัวข้อ และการแก้ไขเนื้อหาก็ไม่อาจทำให้การบิลด์พังได้
การออกแบบคือรายการโทเคน
ธีมคืออ็อบเจ็กต์ JavaScript ชิ้นเดียวที่รวมโทเคนการออกแบบไว้ — ชุดสี ตัวอักษร พื้นผิว วงโฟกัส และระดับความสูง เฟรมเวิร์กจะคอมไพล์มันเป็น CSS custom properties ดังนั้นการเปลี่ยนโฉมทั้งเว็บไซต์จึงเป็นงานของไฟล์เดียว ไม่ใช่การไล่ตรวจสไตล์ชีตทั้งกอง
ผลลัพธ์แบบสแตติก พร้อม SEO ของจริง
ทุกเส้นทางจะถูกเรนเดอร์ล่วงหน้าเป็น HTML ของตัวเอง พร้อม URL แบบ canonical, ทางเลือก hreflang, JSON-LD, แท็ก Open Graph, แผนผังเว็บไซต์ และ robots.txt ที่ได้มาจากการตั้งค่าฉบับร่างของคุณ นำโฟลเดอร์นี้ไปวางที่ใดก็ได้ที่ให้บริการไฟล์
เริ่มต้นอย่างรวดเร็ว
จากศูนย์สู่เว็บไซต์ที่พร้อมนำขึ้นใช้งาน ด้วยสี่คำสั่ง
Vertex มาในรูปแบบแพ็กเกจ npm เพียงตัวเดียวบวกกับปลั๊กอิน Vite ตัวสร้างโครงจะเขียนเว็บไซต์ที่ใช้งานได้จริงซึ่งคุณบิลด์ได้ทันที จากนั้นก็เหลือแค่แก้ไข JSON
สร้างเว็บไซต์
สร้างไดเรกทอรีของเว็บไซต์ ธีมเริ่มต้น และหน้าแรกที่บิลด์ได้อยู่แล้ว
เทอร์มินัล npx cms-create-site my-site cd my-site npm installอธิบายหน้าเว็บ
คีย์แบบแบนในรูปแบบจุด พร้อมดัชนีอาร์เรย์ เฟรมเวิร์กจะคลี่มันออกเป็นอ็อบเจ็กต์ซ้อนชั้นที่คอมโพเนนต์ของคุณอ่านตอนเรนเดอร์
site/content/en/pages/home.json { "components[0]": "Header", "components[1]": "Hero", "components[2]": "Footer", "content.hero.headline": "Welcome", "content.hero.subhead": "Built with Vertex CMS.", "content.hero.cta.text": "Get in touch", "content.hero.cta.href": "/contact", "path": "/" }ดูตัวอย่าง
เซิร์ฟเวอร์สำหรับพัฒนาของ Vite พร้อมฮอตรีโหลด การแก้ไขเนื้อหาจะโหลดใหม่ทันที เช่นเดียวกับการเปลี่ยนรูปภาพและธีม
เทอร์มินัล npm run devบิลด์เว็บไซต์สแตติก
เรนเดอร์ทุกเส้นทางล่วงหน้าเป็นไฟล์ HTML ของตัวเองใน dist/ สร้างรูปภาพหลายขนาดแบบ responsive และเขียน sitemap.xml, robots.txt, manifest.json พร้อมหน้า 404
เทอร์มินัล npm run build:ssg
นั่นคือทั้งหมดของกระบวนการ สำหรับโมเดลเนื้อหาฉบับเต็ม โทเคนของธีม และปลายทางการนำขึ้นใช้งาน โปรดอ่าน เอกสาร →
สิ่งที่มีมาให้
ชิ้นส่วนที่เว็บไซต์เนื้อหาทุกแห่งต้องใช้ สร้างไว้ให้แล้ว
สิ่งเหล่านี้ไม่ใช่ปลั๊กอินที่คุณต้องไปตามหา มันอยู่ในเฟรมเวิร์ก เปิดใช้งานตั้งแต่ต้น และตั้งค่าจากไฟล์ JSON เดียวกันกับทุกอย่าง
การกำหนดเส้นทางแบบเรนเดอร์ล่วงหน้า
เส้นทางได้มาจากไฟล์หน้าเว็บของคุณ แต่ละเส้นทางถูกเรนเดอร์เป็น HTML ของตัวเองตอนบิลด์ — ไม่มีการเขียน URL ใหม่แบบ SPA และไม่มีการส่งเปลือกหน้าแรกให้กับ URL เนื้อหาจริง
เนื้อหาหลายภาษา
ไดเรกทอรีแยกตามภาษาที่สะท้อนกันและกัน ภาษาหลักจะถูกโหลดก่อน และแต่ละภาษาจะเขียนทับเฉพาะคีย์ที่ตนกำหนดไว้ ดังนั้นการแปลเพียงบางส่วนก็ยังเป็นการแปลที่ใช้งานได้
รูปภาพแบบ responsive
เพียงวางไฟล์ต้นฉบับไว้ใน site/assets/img/ กระบวนการบิลด์จะสร้าง AVIF, WebP และ JPEG ในหกความกว้าง เก็บแคชไว้นอกที่เก็บโค้ดของคุณ แล้วส่งผ่าน srcset ภายใน <picture>
เมทาดาต้าสำหรับ SEO
URL แบบ canonical, ทางเลือก hreflang, การ์ด Open Graph และ Twitter, JSON-LD, breadcrumb ที่คำนวณให้อัตโนมัติ, sitemap.xml, robots.txt และ web app manifest — สร้างให้ทั้งหมด ไม่ต้องดูแลด้วยมือ
การล็อกฉบับร่าง
ล็อกหน้าเดียว ล็อกตามคำนำหน้าพาธ หรือล็อกทั้งเว็บไซต์ด้วยรหัสผ่าน หน้าที่ถูกล็อกจะเผยแพร่พร้อม noindex ไม่ปรากฏในแผนผังเว็บไซต์ และจะไม่เรนเดอร์เนื้อหาจนกว่าจะปลดล็อก
ธีมและส่วนขยาย
ธีมคือรายการโทเคน ส่วนขยายคือชุดคอมโพเนนต์ที่ผ่านการตรวจสอบแล้ว ทั้งสองอย่างวางไว้ในที่เก็บโค้ดของคุณก็ได้ หรือเผยแพร่ขึ้น npm เพื่อใช้ร่วมกันหลายเว็บไซต์ก็ได้
คอมโพเนนต์สามระดับ
คอมโพเนนต์เฉพาะของเว็บไซต์จะเขียนทับคอมโพเนนต์ของส่วนขยาย ซึ่งเขียนทับชุดที่มาพร้อมเฟรมเวิร์กอีกที ระดับที่เจาะจงกว่าจะชนะ และชื่อที่ระบุแหล่งที่มาจะช่วยแยกแยะเมื่อชื่อชนกัน
หน้า 404 ของจริง
เฟรมเวิร์กจะเรนเดอร์ /404.html ล่วงหน้าโดยใช้ส่วนหัวส่วนท้ายของเว็บไซต์คุณเอง URL ที่ไม่ตรงกับอะไรเลยจึงได้หน้าที่มีแบรนด์พร้อม noindex แทนที่จะเป็นเนื้อหาตอบกลับที่ว่างเปล่า
เริ่มใช้งาน
แล้ววันนี้ — คุณอยากสร้างอะไร?
Vertex CMS ใช้สัญญาอนุญาต MIT และเผยแพร่อยู่บน npm สร้างเว็บไซต์สักแห่ง อ่านเอกสาร หรือจะอ่านซอร์สโค้ดก็ได้
npx cms-create-site my-site