npx cms-create-site my-site Hôm nay bạn muốn xây dựng điều gì?
Tìm hiểuVertex là gì
Một trang nội dung chính là một tệp cấu hình. Mọi thứ còn lại là việc của framework.
Vertex CMS là một framework Vue 3 dựng trên vite-ssg. Bạn viết JSON mô tả nội dung của từng trang; nó trả lại cho bạn một trang tĩnh đã kết xuất sẵn, với định tuyến, siêu dữ liệu, giao diện và hình ảnh đều đã được xử lý. Không có mã ứng dụng nào phải viết và không có máy chủ nào phải vận hành.
Trang là dữ liệu, không phải mã
Một trang là danh sách các thành phần và nội dung mà những thành phần đó cần. Thêm một mục là thêm một dòng. Không ai phải mở tệp .vue để đổi một tiêu đề, và việc sửa nội dung không thể làm hỏng bản dựng.
Thiết kế là một bản kê token
Một theme là một đối tượng JavaScript duy nhất chứa các token thiết kế — bảng màu, kiểu chữ, bề mặt, vòng lấy nét, độ nổi. Framework biên dịch nó thành các thuộc tính tùy chỉnh CSS, nên việc khoác áo mới cho cả trang chỉ là một tệp, chứ không phải một đợt rà soát stylesheet.
Đầu ra tĩnh, SEO thực thụ
Mỗi tuyến đường được kết xuất sẵn thành HTML riêng, kèm URL chuẩn, các bản thay thế hreflang, JSON-LD, thẻ Open Graph, sơ đồ trang và một tệp robots.txt suy ra từ thiết lập bản nháp của bạn. Hãy triển khai thư mục đó ở bất cứ đâu có thể phục vụ tệp tĩnh.
Bắt đầu nhanh
Từ con số không đến một trang sẵn sàng triển khai, trong bốn lệnh.
Vertex được phát hành dưới dạng một gói npm duy nhất cùng một plugin Vite. Bộ tạo khung sinh ra một trang chạy được mà bạn có thể dựng ngay; từ đó trở đi, bạn chỉ chỉnh sửa JSON.
Tạo một trang
Tạo thư mục trang, một theme khởi đầu và một trang chủ đã dựng được ngay.
terminal npx cms-create-site my-site cd my-site npm installMô tả một trang
Các khóa phẳng theo ký pháp dấu chấm kèm chỉ số mảng. Framework bung chúng thành đối tượng lồng nhau mà các thành phần của bạn đọc khi kết xuất.
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": "/" }Xem trước
Máy chủ phát triển Vite với nạp lại tức thì. Các chỉnh sửa nội dung được nạp lại ngay lập tức; thay đổi hình ảnh và theme cũng vậy.
terminal npm run devDựng trang tĩnh
Kết xuất sẵn mỗi tuyến đường thành tệp HTML riêng trong dist/, sinh các biến thể hình ảnh đáp ứng, và ghi ra sitemap.xml, robots.txt, manifest.json cùng một trang 404.
terminal npm run build:ssg
Đó là toàn bộ vòng lặp. Để xem mô hình nội dung đầy đủ, các token giao diện và các đích triển khai, hãy đọc tài liệu →
Những gì có sẵn
Những mảnh ghép mà mọi trang nội dung đều cần, đã dựng sẵn.
Đây không phải những plugin bạn phải đi tìm. Chúng nằm trong framework, bật sẵn theo mặc định, và được cấu hình từ cùng một tệp JSON như mọi thứ khác.
Định tuyến kết xuất sẵn
Các tuyến đường được suy ra từ tệp trang của bạn. Mỗi tuyến kết xuất thành HTML riêng ngay khi dựng — không viết lại kiểu SPA, không phục vụ lớp vỏ trang chủ cho những URL nội dung thật.
Nội dung đa ngôn ngữ
Các thư mục theo ngôn ngữ phản chiếu lẫn nhau. Ngôn ngữ gốc được nạp trước và mỗi ngôn ngữ chỉ ghi đè những khóa mà nó định nghĩa, nên một bản dịch từng phần vẫn là một bản dịch hợp lệ.
Hình ảnh đáp ứng
Chỉ cần đặt ảnh gốc vào site/assets/img/. Bản dựng sẽ sinh AVIF, WebP và JPEG ở sáu độ rộng, lưu đệm bên ngoài kho mã của bạn, rồi phục vụ chúng qua srcset trong <picture>.
Siêu dữ liệu SEO
URL chuẩn, bản thay thế hreflang, thẻ Open Graph và Twitter, JSON-LD, breadcrumb suy ra tự động, sitemap.xml, robots.txt và một web app manifest — tất cả đều được sinh ra, không có gì phải bảo trì thủ công.
Khóa bản nháp
Khóa một trang, một tiền tố đường dẫn, hoặc toàn bộ trang bằng mật khẩu. Trang bị khóa được phát hành kèm noindex, nằm ngoài sơ đồ trang, và không kết xuất phần thân cho tới khi được mở khóa.
Theme và tiện ích mở rộng
Theme là bản kê token. Tiện ích mở rộng là các gói thành phần đã được kiểm định. Cả hai đều có thể nằm trong kho mã của bạn hoặc được phát hành lên npm và dùng chung giữa nhiều trang.
Thành phần ba tầng
Thành phần riêng của trang ghi đè thành phần của tiện ích mở rộng, và những thành phần này ghi đè bộ dựng sẵn. Cái cụ thể hơn thắng, và tên có kèm nguồn sẽ phân định khi trùng nhau.
Một trang 404 thực thụ
Framework kết xuất sẵn /404.html với chính bộ khung của trang bạn, nên những URL không khớp sẽ nhận một trang có thương hiệu mang noindex thay vì một phần thân phản hồi rỗng.
Bắt đầu
Vậy thì — hôm nay bạn muốn xây dựng điều gì?
Vertex CMS được cấp phép MIT và đã phát hành lên npm. Hãy tạo một trang, đọc tài liệu, hoặc đọc mã nguồn.
npx cms-create-site my-site