ดาวน์โหลด nuxt netlify cms starter template - nuxt netlify cms starter template ดาวน์โหลดซอร์สโค้ด

nuxt netlify cms starter template

หมวดหมู่อื่นๆ

v2.0.0

ดาวน์โหลด

Nuxt.js + เทมเพลตเริ่มต้น Netlify CMS

สร้างเว็บไซต์แบบคงที่และไม่ต้องใช้เซิร์ฟเวอร์ด้วย Vue.js และ Netlify CMS

นี่คือเทมเพลตเริ่มต้นสำหรับสร้างเว็บไซต์แบบคงที่ด้วย Vue.js และ Netlify CMS ที่ใช้ Nuxt v1.x ครอบคลุมอะไรบ้าง:

ตั้งค่าผ่าน Vue CLI ?
ตั้งค่าโปรเจ็กต์ Nuxt.js ที่เกือบจะว่างเปล่าได้อย่างง่ายดาย
ขณะนี้ไม่ได้รับการปรับให้เหมาะสมสำหรับ Vue CLI v3.0
ตัดต่อเนื้อหาผ่าน Netlify CMS ✏️
Netlify CMS คือ CMS ฝั่งไคลเอ็นต์ที่เชื่อมต่อโดยตรงกับพื้นที่เก็บข้อมูล git ของคุณเพื่อแก้ไขไฟล์มาร์กดาวน์
นอกจากนี้ยังรองรับรูปแบบไฟล์อื่นๆ ด้วย แต่เทมเพลตนี้จะใช้งานได้กับรูปแบบมาร์กดาวน์ส่วนหน้าที่เป็นค่าเริ่มต้นเท่านั้น
แสดงเนื้อหาใน Vue.js ผ่านโมดูล Nuxtent/Nuxtdown ⁉️
โมดูล Nuxtdown (ทางแยกคงที่จาก Nuxtent) ช่วยให้สามารถสืบค้นเนื้อหาและแสดงใน UI ได้
การสร้างไซต์แบบคงที่ผ่าน Nuxt.js ✅
Nuxt.js ซึ่งเป็นเฟรมเวิร์กที่มีชื่อเสียงในการสร้างแอปพลิเคชัน Vue.js สากล ได้สร้างไซต์แบบคงที่

Nuxt.js + เทมเพลตเริ่มต้น Netlify CMS

การกำหนดค่า
การพัฒนา
การผลิต
การปรับใช้ด้วยตนเองผ่าน FTP
ปรับใช้กับ Netlify
ปรับใช้กับโซลูชัน CI อื่นๆ
ข้อกำหนดเบื้องต้น
ตั้งค่า
การใช้งาน
ปัญหาที่ทราบ
ผลงาน

ข้อกำหนดเบื้องต้น

ตรวจสอบให้แน่ใจว่าได้ติดตั้ง node 8.0+ และ npm 5.0+ แล้ว
คุณรู้ว่า Netlify CMS และ Nuxt.js คืออะไร

ตั้งค่า

ติดตั้งผ่าน vue-cli : หากคุณใช้ Vue CLI เวอร์ชันใหม่กว่า คุณอาจต้องติดตั้งแพ็คเกจเพิ่มเติมเพื่อให้ vue init ทำงานได้ เนื่องจากเทมเพลตนี้ยังไม่ได้รับการปรับให้เหมาะสมสำหรับ Vue CLI รุ่นใหม่

 $ vue init renestalder/nuxt-netlify-cms-starter-template my-project
  $ cd โครงการของฉัน
                  # ติดตั้งการพึ่งพา $ ติดตั้ง npm # หรือติดตั้งเส้นด้าย

พุชโปรเจ็กต์ไปยังที่เก็บ git ของคุณ : หากต้องการแก้ไขเนื้อหาได้เลย คุณต้องพุชโปรเจ็กต์ของคุณไปที่ที่เก็บ git CMS จะเชื่อมต่อโดยตรงกับที่เก็บ git เสมอ และแก้ไขเนื้อหาบนชุดสาขาใน static/admin/config.yml

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

การใช้งาน

การกำหนดค่า

การตรวจสอบสิทธิ์และโมเดล CMS กำหนดค่าตำแหน่งที่เก็บข้อมูลของคุณ และวิธีที่ผู้ใช้ CMS จะเข้าสู่ระบบเพื่อแก้ไขเนื้อหา กำหนดไฟล์และฟิลด์สำหรับเนื้อหาของคุณด้วย
ไฟล์ : static/admin/config.yml
เอกสารประกอบ : เอกสาร Netlify CMS อย่างเป็นทางการ -> การกำหนดค่า
การกำหนดเส้นทางและการสอบถาม
เมื่อแกะกล่อง UI จะไม่มีเงื่อนงำว่าเนื้อหาของคุณถูกจัดเก็บไว้ที่ใด และเส้นทางไดนามิกใดที่เป็นของเนื้อหาใด Nuxt.js สามารถแมปหน้าคงที่ตามค่าเริ่มต้นเท่านั้น ตรวจไม่พบเส้นทางแบบไดนามิก เช่น โพสต์ในบล็อกที่มีชื่อไฟล์ต่างกัน การกำหนดค่าสำหรับสิ่งนี้เกิดขึ้นโดย Nuxtdown
ไฟล์ : nuxtdown.config.js
เอกสารประกอบ : Nuxtdown Readme
ข้อมูลเว็บไซต์ทั่วไป
ข้อมูลทั่วไป เช่น แท็ก HTML <head> และชื่อหน้าได้รับการตั้งค่าผ่าน Nuxt.js ไม่ต้องกังวลกับการกำหนดค่าการกำหนดเส้นทางสำหรับ Nuxt.js ซึ่งแก้ไขได้โดย Nuxtdown
ไฟล์ : nuxt.config.js
เอกสารประกอบ : เอกสาร Nuxt.js อย่างเป็นทางการ -> การกำหนดค่า

การพัฒนา

ในระหว่างการพัฒนา ให้รันแอปพลิเคชันของคุณเวอร์ชัน SPA ฝั่งไคลเอ็นต์ ใช้งาน dev หรือ serve อะไรก็ได้ที่เหมาะกับคุณมากกว่า พวกเขาทำเช่นเดียวกัน

 # ให้บริการพร้อมการรีโหลดแบบ hot ที่ localhost:3000$ npm run dev

ไปที่ http://localhost:3000

การผลิต

สำหรับการผลิต ให้สร้างไซต์แบบคงที่

 # สร้างโครงการคงที่ $ npm run create

การปรับใช้ด้วยตนเองผ่าน FTP

เพื่อให้ทำงานบนเซิร์ฟเวอร์ที่ใช้งานจริงของคุณ บิลด์จำเป็นต้องทราบ URL/โดเมนสุดท้ายที่ไซต์จะทำงาน สำหรับสิ่งนี้ คุณสามารถแก้ไขงาน npm generate:manual ใน package.json และตั้งค่า URL ที่ใช้งานจริงของคุณได้ สิ่งนี้มีประโยชน์เมื่อคุณปรับใช้เว็บไซต์ของคุณด้วยตนเอง:

 # สร้างโปรเจ็กต์แบบคงที่ซึ่งจะถูกโฮสต์บน URL ที่ระบุใน package.json$ npm run create:manual

ปรับใช้กับ Netlify

โฟลเดอร์ของโปรเจ็กต์ที่คุณสร้างขึ้นจะมีไฟล์ netlify-example.toml ที่คุณสามารถเปลี่ยนชื่อเป็น netlify.toml เพื่อเริ่มต้นใช้งาน Netlify ได้ โดยจะตั้งค่า BASE_URL โดยอัตโนมัติตามการกำหนดค่า Netlify ของคุณและประเภทการใช้งาน (การใช้งานจริง การใช้งานสาขา การใช้งานตัวอย่าง) ดังนั้น ไม่จำเป็นต้องตั้งค่า URL ที่ใช้งานจริงใน package.json

ปรับใช้กับโซลูชัน CI อื่นๆ

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

ปัญหาที่ทราบ

ใช้ไม่ได้กับ Nuxt v2.3.0 และสูงกว่า : มีการเปลี่ยนแปลงบางอย่างใน Nuxt v2.3.0 ที่ไม่สามารถใช้งานร่วมกับ Nuxtdown/Nuxtent ได้ นั่นเป็นเหตุผลว่าทำไมเวอร์ชันปัจจุบันจึงได้รับการแก้ไขเป็น v2.2.x