stablo

เทมเพลตบล็อก stablo - next.js & sanity cms

Stablo เป็นเทมเพลตบล็อก Jamstack ที่สร้างขึ้นด้วย next.js, tailwind CSS และ Sanity CMS โดย Web3Templates มันมาพร้อมกับเวอร์ชันฟรี & โปร

การติดตั้ง↓

การสาธิตสด

สาธิตเวอร์ชันฟรี→

Demo เวอร์ชันโปร→

คุณสมบัติ

คุณสมบัติ	เวอร์ชันฟรี	เวอร์ชันโปร
next.js v13
/ไดเรกทอรีแอพ
tailwind css
Sanity CMS (v3)
ตามความต้องการ
โพสต์ใหม่อัปเดตอัตโนมัติ	ตามเวลา
การตอบสนองต่อมือถือ
โหมดมืดและแสง
หน้าติดต่อที่ใช้งานได้
เก็บถาวร (การแบ่งหน้า)
หน้าหมวดหมู่
หน้าผู้เขียน
หน้าค้นหา
หน้าแรก - ค่าเริ่มต้น
หน้าแรก - สำรอง
หน้าแรก - น้อยที่สุด
หน้าแรก - Lifestlye
หน้าแรก - สองคอลัมน์
โพสต์บล็อก - ค่าเริ่มต้น
บล็อกโพสต์ - น้อยที่สุด
บล็อกโพสต์ - Lifestlye
บล็อกโพสต์ - พร้อมแถบด้านข้าง
สนับสนุน 6 เดือน
อัปเดตฟรี
ใบอนุญาต	GPL-2.0	ทางการค้า
การกำหนดราคา	ฟรี	$ 49
	ปรับใช้ฟรี	ซื้อโปร

คลิกปุ่มด้านบนสำหรับโคลนคลิกเดียว & ปรับใช้สำหรับเทมเพลตนี้ อ่านคู่มือเริ่มต้นด่วนด้านล่าง

ตัวอย่างเทมเพลต

ตัวอย่าง Sanity CMS

การติดตั้ง

ขั้นตอนที่ 1: ปรับใช้กับ vercel

ใช้ปุ่มปรับใช้ด้านล่าง มันจะช่วยให้คุณปรับใช้สตาร์ทเตอร์โดยใช้ Vercel รวมถึงเชื่อมต่อกับสตูดิโอสติของคุณโดยใช้การรวม Sanity Vercel

การปรับใช้ข้างต้นจะกำหนดค่าต่อไปนี้โดยอัตโนมัติ:

• สร้างที่เก็บใหม่ใน GitHub
• สร้างโครงการด้านสติปัญญา
• ติดตั้งการรวมสติใน Vercel
• เพิ่มการตั้งค่า Cors & API ที่จำเป็นในโครงการ
• ปรับใช้ส่วนหน้าไปยัง Vercel

หรือคุณสามารถปรับใช้กับบริการอื่น ๆ เช่นหน้า NetLify หรือ CloudFlare หรือ AWS ขยาย

ขั้นตอนที่ 2: ตั้งค่าโครงการในพื้นที่

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

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

git clone https://github.com/ < usename > / < repo > .git your-project-name

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

npx vercel link

ตอนนี้เรียกใช้คำสั่งต่อไปนี้เพื่อดึงตัวแปร .env ไปยังระบบท้องถิ่นของคุณ

npx vercel env pull

ตอนนี้คุณจะเห็นว่ามีการสร้างไฟล์ .env.local ใหม่แล้ว หากสิ่งนี้ไม่ได้ผลคุณสามารถเปลี่ยนชื่อ .env.local.example เป็น .env.local และเพิ่ม ID โครงการสติปัญญาด้วยตนเอง

ตอนนี้คุณสามารถเปิดตัวแก้ไขรหัสของคุณ (ถ้ายังไม่ได้) เราชอบ VSCODE รันคำสั่งในเทอร์มินัลรวมภายในตัวแก้ไขรหัส

npm install
# or
yarn install
# or
pnpm install

เราชอบ pnpm เพื่อบันทึกพื้นที่ดิสก์ของคุณ

ขั้นตอนที่ 3: นำเข้าข้อมูลตัวอย่าง (ไม่บังคับ)

หากต้องการดูเหมือนสิ่งที่คุณได้เห็นในการสาธิตด้วยเนื้อหาและรูปภาพทั้งหมดให้ทำตามขั้นตอนด้านล่าง:

1. หากคุณยังไม่ได้ติดตั้ง @sanity/cli ติดตั้งทั่วโลกก่อน

npm install -g @sanity/cli
# or
pnpm install -g @sanity/cli

จากนั้นเข้าสู่ระบบเพื่อความมีสติโดยใช้คำสั่ง sanity login

 sanity login

ตอนนี้คุณจะสามารถนำเข้าเนื้อหาตัวอย่างได้โดยเรียกใช้คำสั่ง sanity-import ไฟล์นี้อยู่ที่ /lib/sanity/data/production.tar.gz และจะโหลดโดยอัตโนมัติโดยเรียกใช้คำสั่งด้านล่าง

npm run sanity-import
# or
pnpm sanity-import

ขั้นตอนที่ 4: เสร็จสิ้น!

ตอนนี้เรียกใช้โครงการของคุณโดยใช้คำสั่งด้านล่าง

npm run dev
# or
pnpm dev

ตอนนี้โครงการของคุณควรจะขึ้นและส่วนหน้าต่อไป JS จะทำงานบน http: // localhost: 3000

Sanity Studio สามารถเข้าถึงได้โดยใช้ http: // localhost: 3000/studio หรือคุณสามารถเรียกใช้บน https: // localhost: 3333 เซิร์ฟเวอร์โดยใช้คำสั่งต่อไปนี้

npm run sanity
# or
pnpm sanity

ขั้นตอนที่ 5. Redploy

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

คุณสามารถ git push การเปลี่ยนแปลงและควรเรียกใช้การปรับใช้ใหม่โดยอัตโนมัติ ถ้าไม่คุณสามารถปรับใช้กับ Vercel โดยใช้คำสั่งต่อไปนี้

 npx vercel --prod

การติดตั้งด้วยตนเอง

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

ขั้นตอนที่ 1. โคลน repo

โคลน GitHub repo หรือใช้ไฟล์ที่ดาวน์โหลดในเครื่องท้องถิ่นของคุณ

ขั้นตอนที่ 2. ตัวแปรการตั้งค่า. .env

เปิดโฟลเดอร์โครงการและเปลี่ยนชื่อ .env.local.example วางไว้ในโฟลเดอร์รูทลงใน .env.local และเพิ่มรหัสโครงการสติปัญญาของคุณ คุณสามารถสร้างโครงการใหม่ได้โดยไปที่ลิงค์นี้: https://www.sanity.io/get-started/create-project

หากคุณมีโครงการแล้วให้คัดลอกรหัสโครงการจาก https://sanity.io/manage

 NEXT_PUBLIC_SANITY_PROJECT_ID=xxyyzz

ขั้นตอนที่ 3. อนุญาตให้ Cors Origins

ในการทำให้สตูดิโอทำงานได้อย่างถูกต้องคุณต้องเพิ่มแหล่งกำเนิด Cors ในความมีสติ นี่คือการตั้งค่าโดยอัตโนมัติหากคุณใช้การปรับใช้ Vercel เยี่ยมชม https://www.sanity.io/manage/personal/project/<project-id>/api ในเบราว์เซอร์ของคุณเพื่อเพิ่มแหล่งกำเนิด cors

คลิก Add CORS origin และป้อน URL เป็น http://localhost:3000 และตรวจสอบช่องทำเครื่องหมายรับรอง

ขั้นตอนที่ 4 ดำเนินการต่อจากขั้นตอนข้างต้น

ตอนนี้คุณจะสามารถดำเนินการต่อจากคำแนะนำข้างต้นเพื่อนำเข้าข้อมูลตัวอย่างและเรียกใช้โครงการในเครื่อง

ความช่วยเหลือและการสนับสนุน

มีบางอย่างไม่ทำงานอย่างที่คาดไว้? เพิ่มปัญหา GitHub หากคุณต้องการการสนับสนุนหรือความช่วยเหลือส่วนบุคคลโปรดพิจารณาซื้อเวอร์ชัน Pro และเราจะช่วยเหลือคุณทางอีเมล

ผู้สนับสนุน