บล็อก tailwind nextjs starter
นี่คือเทมเพลต tailwind CSS tailwind blogging template เวอร์ชัน 2 ขึ้นอยู่กับไดเรกทอรีแอปถัดไปด้วย React Server Component และใช้ ContentLayer เพื่อจัดการเนื้อหา Markdown
น่าจะเป็นเทมเพลตบล็อก markdown ที่มีคุณสมบัติที่หลากหลายที่สุด กำหนดค่าได้อย่างง่ายดายและปรับแต่งได้ สมบูรณ์แบบแทนการแทนที่ Jekyll และ Hugo แต่ละบล็อก
ตรวจสอบเอกสารด้านล่างเพื่อเริ่มต้น
เผชิญกับปัญหา? ตรวจสอบหน้าคำถามที่พบบ่อยและค้นหาปัญหาที่ผ่านมา อย่าลังเลที่จะเปิดปัญหาใหม่หากไม่มีการโพสต์ก่อนหน้านี้
คำขอคุณสมบัติ? ตรวจสอบการอภิปรายที่ผ่านมาเพื่อดูว่ามันถูกนำขึ้นมาก่อนหน้านี้หรือไม่ มิฉะนั้นอย่าลังเลที่จะเริ่มหัวข้อการสนทนาใหม่ ความคิดทั้งหมดได้รับการต้อนรับ!
รูปแบบ
หมายเหตุ : สิ่งเหล่านี้เป็นชุมชนที่มีส่วนร่วมในการใช้เฟรมเวิร์กที่แตกต่างกันหรือมีการเปลี่ยนแปลงที่สำคัญกับ codebase - ไม่ได้รับการสนับสนุนอย่างเป็นทางการ
ทางเลือก Astro - เทมเพลต Astro Tailwind
ทางเลือกที่เปิดใหม่-เทมเพลตบล็อกสตาร์ทเตอร์รีมิกซ์แบบรีมิกซ์
การสนับสนุนสากล - เทมเพลตที่มี I18N และซอร์สโค้ด
ตัวอย่าง v2
- บล็อกสาธิต - repo นี้
- บล็อกส่วนตัวของฉัน - แก้ไขเป็นบล็อกโพสต์โดยอัตโนมัติด้วยวันที่
- บล็อกของ Karhdo - บล็อกของ Karhdo - การผจญภัยการเข้ารหัสของ Karhdo (ซอร์สโค้ด)
- Ben.Codes Blog - บล็อกส่วนตัวของ Benoit เกี่ยวกับการพัฒนาซอฟต์แวร์ (ซอร์สโค้ด)
- บล็อก TSIX - วิศวกรส่วนหน้าใช้เพื่อบันทึกจุดความรู้บางอย่างในการทำงานและการศึกษา中文
- บล็อกของ Soto - เว็บไซต์ส่วนตัวที่เป็นส่วนตัวมากขึ้นที่อัพเกรดจาก V1 (ซอร์สโค้ด)
- บล็อกของ Prabhu - เว็บไซต์ส่วนตัวของ Prabhu พร้อมบล็อก (ซอร์สโค้ด)
- บล็อกของ Rabby Hasan - บล็อกส่วนตัวของ Rabby Hasan เกี่ยวกับการพัฒนาสแต็กเต็มรูปแบบด้วยคลาวด์ (ซอร์สโค้ด)
- enscribe.dev - บล็อกส่วนตัวของใบแจ้งหนี้; shenanigans ความปลอดภัยทางไซเบอร์, frontend webdev ฯลฯ (ซอร์สโค้ด)
- dalelarroder.com - เว็บไซต์ส่วนตัวของ Dale Larroder อัพเกรดจาก V1 (ซอร์สโค้ด)
- Thetalhatahir.com - บล็อกส่วนตัวของ Talha Tahir เพิ่มบทความรูปขนาดย่อ, การ์ด LinkedIn, เนื้อหาฮีโร่ที่สวยงาม, อิโมติคอนเทคโนโลยี
- homing.so - บล็อกส่วนตัวของ Homing เกี่ยวกับสิ่งที่เขากำลังเรียนรู้ (ซอร์สโค้ด)
- บล็อกของ ZS1M - บล็อกส่วนตัวของ ZS1M สำหรับการบันทึกและแบ่งปันเนื้อหาทางเทคนิคการเรียนรู้รายวัน (ซอร์สโค้ด)
- Dariuszwozniak.net - บล็อกการพัฒนาซอฟต์แวร์ (ซอร์สโค้ด)
- Dreams.plus - เว็บไซต์บล็อกสำหรับความคิดและบันทึกสำหรับชีวิตและเทคโนโลยี
- Francisaguilar.co Blog - บล็อกส่วนตัวของ Francis Aguilar ที่พูดถึงเทคโนโลยีการออกกำลังกายและการพัฒนาส่วนบุคคล
- บล็อก min71 dev - บล็อกส่วนตัวเกี่ยวกับ blockchain การพัฒนาและอื่น ๆ (ซอร์สโค้ด)
- บล็อกของ Bryce Yu - บล็อกส่วนตัวของ Bryce Yu เกี่ยวกับระบบกระจายฐานข้อมูลและการพัฒนาเว็บ (ซอร์สโค้ด)
- เว็บไซต์ Senpai Anime Series ระยะไกล - หน้า Landing Page สำหรับซีรีย์อะนิเมะระยะไกลเริ่มต้น Senpai
- Secret Base - บล็อกส่วนตัวของ Jac Hsu เกี่ยวกับเทคโนโลยีความคิดและชีวิตโดยทั่วไป
- ZSEBINFORMATIKUS - บล็อกข้อมูล SuperHighway Guide
- บล็อกของ Anton Morgunov - การพูดคุยเกี่ยวกับวิทยาศาสตร์โดยไม่ต้องใช้ความสนใจมากเกินไปหรือทำไมเคมีเชิงทฤษฎีและการคำนวณจึงเจ๋ง
- บล็อกฮันส์ - บล็อกส่วนตัวของฮันส์เทคโนโลยีส่วนหน้าแกลเลอรี่และไดอารี่การเดินทาง中文(ซอร์สโค้ด)
- พอร์ตโฟลิโอของ Cub3y0nd - หมายเหตุการศึกษาความปลอดภัยไซเบอร์ของ Cub3y0nd 「中文」「中文」
- London Tech Talk - พอดคาสต์สำรวจแนวโน้มเทคโนโลยีและประสบการณ์การใช้ชีวิตชาวต่างชาติ - 日本語
- Crud Flow Blog - บล็อกทางเทคนิคเกี่ยวกับ AI, วิศวกรรมคลาวด์, วิทยาศาสตร์ข้อมูลและการพัฒนาส่วนบุคคล
- บล็อกของ Trillium - แก้ไขให้แสดงประวัติย่อ PDF บน
/resume (ซอร์สโค้ด) - บล็อกเทคโนโลยีของ Frank - บล็อกส่วนตัวของ Frank เกี่ยวกับการพัฒนาซอฟต์แวร์และเทคโนโลยี (ซอร์สโค้ด)
- บล็อกของ Wujie: 旅行者计划 - สวนดิจิตอลส่วนตัวของ Wujie (ซอร์สโค้ด)
- บล็อกของ Xiaodong - บล็อกส่วนตัวของ Xiaodong เกี่ยวกับเทคโนโลยีส่วนหน้าและชีวิต 「中文」 (ซอร์สโค้ด)
- Azurtelier.com - เว็บไซต์ส่วนตัวของ AMOS สำหรับเทคโนโลยีเพลงภาพประกอบ AI ฯลฯ [ภาษาอังกฤษ/中文] (ซอร์สโค้ด)
- joshhaines.com - เว็บไซต์ส่วนตัวสำหรับ Josh Haines (ซอร์สโค้ด)
- บล็อกของ Jigu - บล็อกส่วนตัวของ Jigu เกี่ยวกับ Tech, Crypto, Golang และ Life 「中文」
- Andrewsam.xyz - เว็บไซต์ส่วนตัวของ Andrew โดยใช้ Shadcn, Prisma, MongoDB, Auth.js, หน้าประวัติย่อ, ไทม์ไลน์ประสบการณ์ที่กำหนดเองและส่วนประกอบเทคโนโลยี (ซอร์สโค้ด)
- พอร์ตโฟลิโอของ Rulli Damara Putra - บล็อกส่วนตัวของ Rully และผลงาน
- blog.taoluyuan.com 套路猿 - บล็อกเทคโนโลยีส่วนบุคคลที่รองรับการสลับหลายธรณี 「中英」
- เนื้อเพลง Decode.com - เว็บไซต์เนื้อเพลงนำเสนอเนื้อเพลงต้นฉบับ Romanisation และการแปลภาษาอังกฤษพร้อมตัวเลือกการดูที่ปรับแต่งได้
- Bmacharia.com - บล็อกทางเทคนิคของ Benson Macharia เกี่ยวกับความปลอดภัยทางไซเบอร์และการบริหารความเสี่ยงด้านไอที
- armujahid.me - บล็อกส่วนตัวของ Abdul Rauf เกี่ยวกับเทคโนโลยีและสิ่งที่สุ่ม
- leohuynh.dev - ?? บล็อก Dev ของ Leo - เรื่องราวข้อมูลเชิงลึกและแนวคิด เพิ่ม
/snippets , /books , เพิ่ม ProfileCard , CareerTimeline Components และอื่น ๆ อีกมากมาย - OpenSats Blog - A 501 (c) (3) การกุศลสาธารณะซึ่งมีเป้าหมายที่จะให้ทุนสนับสนุนโครงการฟรีและโอเพนซอร์ซอย่างยั่งยืน (ซอร์สโค้ด)
- Schedles Blog - เคล็ดลับการจัดตารางเวลาโซเชียลมีเดียกลยุทธ์และการอัปเดตผลิตภัณฑ์สำหรับผู้สร้างเนื้อหา (ลิงค์โครงการ)
- บล็อก Yawdev - การพัฒนาด้านไอที / ซอฟต์แวร์ บล็อกเกี่ยวกับเทคโนโลยีและธุรกิจ (ลิงค์โครงการ)
- หมายเหตุวิศวกรรม - Jonas Vetterle เว็บไซต์ส่วนตัวและบล็อก ฉันกำลังเขียนบทความเกี่ยวกับวิศวกรรมซอฟต์แวร์ที่สนใจฉันรวมถึง AI และควอนตัมคอมพิวเตอร์
- Screenager.dev - เว็บไซต์ส่วนบุคคลเป็นพอร์ตโฟลิโอและบล็อก บันทึกการเดินทางการเรียนรู้ของฉันและคำแนะนำบางอย่าง
- บล็อกของ Kezhenxu94 - บล็อกเกี่ยวกับ dev, เคล็ดลับและกลเม็ด, บทเรียนและอื่น ๆ
ใช้เทมเพลต? อย่าลังเลที่จะสร้าง PR และเพิ่มบล็อกของคุณในรายการนี้
ตัวอย่าง v1
v1-blogs-showcase.webm
ขอบคุณชุมชนของผู้ใช้และผู้มีส่วนร่วมในเทมเพลต! เราไม่รับรายชื่อบล็อกใหม่อีกต่อไปที่นี่ หากคุณอัปเดตจากเวอร์ชัน 1 เป็นเวอร์ชัน 2 อย่าลังเลที่จะลบบล็อกของคุณออกจากรายการนี้และเพิ่มลงในรายการด้านบน
- ตำราอาหารของ Aloisdg - พร้อมรูปภาพและสูตรอาหาร!
- การสาธิตของ Gautierarcin พร้อมการแปลถัดไป - รวมถึงการแปลโพสต์ MDX, ซอร์สโค้ด, ซอร์สโค้ด
- สวนดิจิตอลของ David Levai - การออกแบบที่กำหนดเองและเพิ่มการสมัครสมาชิกอีเมล
- thvu.dev - เพิ่ม
mdx-embed , ดูจำนวนการอ่านนาทีและอื่น ๆ - Irvin.dev - เว็บไซต์ส่วนตัวของ Irvin Lin เพิ่มการฝัง YouTube
- kirillso.com - บล็อกและเว็บไซต์ส่วนตัว
- เล็กน้อย sharpe.com - บล็อก บริษัท หลักของ Tincre
- blog.b00st.com - บล็อกโปรโมชั่นหลักของ b00st.com
- Astrosaurus.me - บล็อกส่วนตัวของ Ephraim Atta -Duncan
- Dhanrajsp.me - เว็บไซต์ส่วนตัวและบล็อกของ Dhanraj
- blog.r00ks.io - บล็อกส่วนตัวของ Austin Rooks (ซอร์สโค้ด)
- Honghong.me - เว็บไซต์ส่วนตัวของ Tszhong (ซอร์สโค้ด)
- Marceloformentao.dev - เว็บไซต์ส่วนบุคคลของ Marcelo Formentão (ซอร์สโค้ด)
- abiraja.com - ด้วยองค์ประกอบตัวอย่างรหัส JS ที่รันได้!
- bpiggin.com - บล็อกส่วนตัวของ Ben Piggin
- maqib.cn - บล็อกของนักพัฒนาส่วนหน้าจีน狂奔小马的博客 (源码)
- Ambilena.com - บล็อกเพลงอิเล็กทรอนิกส์และสำนักพิมพ์สำหรับนักดนตรีที่กำลังจะมาถึง
- 0xchai.io - บล็อกส่วนตัวของชัย
- Techipedia - แอปพลิเคชันเว็บแบบก้าวหน้าอย่างง่ายพร้อมปุ่มติดตั้งที่กำหนดเองและแถบความคืบหน้าสูงสุด
- Reubence.com - สวนดิจิตอลของ Reuben Rapose
- axolo.co/blog - ข่าวการจัดการวิศวกรรม & การอัปเดต Axolo.co (พร้อมภาพตัวอย่างสำหรับบทความในโฮมเพจ)
- Musing.vercel.app - บล็อกส่วนตัวของ Parth Desai (ซอร์สโค้ด)
- onyourmental.com - เว็บไซต์ของ Curtis Warcup สำหรับ On Mental Podcast ของคุณ (ซอร์สโค้ด)
- cwarcup.com - เว็บไซต์ส่วนตัวและบล็อกของ Curtis Warcup (ซอร์สโค้ด)
- Ondiek-elijah.me - เว็บไซต์และบล็อกของ Ondiek Elijah (ซอร์สโค้ด)
- Jmalvarez.dev - บล็อกส่วนตัวของJosé Miguel álvarez (ซอร์สโค้ด)
- Justingosses.com - เว็บไซต์ส่วนตัวและบล็อกของ Justin Gosses (ซอร์สโค้ด)
- https://bitoflearning-9a57.fly.dev/ - บล็อกส่วนตัวของ Sangeet Agarwal ซึ่งเปลี่ยนรูปใหม่เพื่อรีมิกซ์โดยใช้สแต็กอินดี้ (ซอร์สโค้ด)
- raphaelchelly.com - เว็บไซต์ส่วนตัวและบล็อกของRaphaël Chelly (ซอร์สโค้ด)
- Kaveh.Page - บล็อกส่วนตัวของ Kaveh Tehrani เพิ่มไดเร็กทอรีแท็กการ์ดโปรไฟล์เวลาอ่านบนไดเรกทอรีโพสต์ ฯลฯ
- Drakerossman.com - บล็อกของ Drake Rossman เกี่ยวกับ Nixos, Rust, Rust, สถาปัตยกรรมซอฟต์แวร์และการจัดการวิศวกรรมรวมถึง Musings ทั่วไป
- meamenu.com - หน้า Landing Page และบล็อกผลิตภัณฑ์เริ่มต้นจากเทมเพลตนี้ นอกจากนี้ยังใช้ framer-motion สำหรับภาพเคลื่อนไหวเทมเพลตเลย์เอาต์ที่กำหนดเอง Waline สำหรับความคิดเห็นบล็อกและรูปแบบ primereact [ita]
- giovanni.orciuolo.it - เว็บไซต์ส่วนตัวของ Giovanni Orciuolo บล็อกและทุกสิ่งที่น่าเบื่อ
แรงจูงใจ
ฉันต้องการพอร์ตบล็อกที่มีอยู่ของฉันไปยัง NextJs และ Tailwind CSS แต่ไม่มีเทมเพลตที่ใช้ง่ายจากกล่องที่จะใช้ดังนั้นฉันจึงตัดสินใจที่จะสร้าง การออกแบบดัดแปลงมาจากบล็อก TailwindLabs
ฉันอยากให้มันเกือบจะเต็มไปด้วยเทมเพลตบล็อกยอดนิยมเช่น Beautiful-Jekyll และ Hugo Academic แต่ด้วยระบบนิเวศที่ดีที่สุดของ React และแนวทางปฏิบัติที่ดีที่สุดของการพัฒนาเว็บในปัจจุบัน
คุณสมบัติ
- next.js พร้อม typescript
- ContentLayer เพื่อจัดการตรรกะเนื้อหา
- การปรับแต่งจัดแต่งทรงผมง่ายด้วย tailwind 3.0 และแอตทริบิวต์สีปฐมภูมิ
- MDX - เขียน JSX ในเอกสาร Markdown!
- ใกล้กับคะแนนประภาคารที่สมบูรณ์แบบ - รายงานประภาคาร
- น้ำหนักเบา 85KB โหลด js แรก
- มุมมองที่เป็นมิตรกับมือถือ
- ธีมแสงและมืด
- การเพิ่มประสิทธิภาพแบบอักษรด้วย Next/Font
- บูรณาการกับ Pliny ที่ให้:
- ตัวเลือกการวิเคราะห์ที่หลากหลายรวมถึงอูมามิ, การวิเคราะห์ที่ง่าย, Posthog และ Google Analytics
- ความคิดเห็นผ่านทาง Giscus คำพูดหรือ disqus
- จดหมายข่าว API และส่วนประกอบที่รองรับ MailChimp, Buttondown, ConvertKit, Klaviyo, Revue, Emailoctopus และ Beehiiv
- คำสั่งพาเล็ตค้นหาด้วย KBAR หรือ Algolia
- ไวยากรณ์ด้านเซิร์ฟเวอร์ที่เน้นด้วยหมายเลขบรรทัดและการเน้นสายผ่านผ่าน rehype-prism-plus
- การแสดงคณิตศาสตร์ที่รองรับผ่าน Katex
- การอ้างอิงและการสนับสนุนบรรณานุกรมผ่านการทดสอบซ้ำ
- GitHub แจ้งเตือนผ่านคำพูด-github-blockquote-alert
- การเพิ่มประสิทธิภาพภาพอัตโนมัติผ่านทางถัดไป/ภาพ
- รองรับแท็ก - แต่ละแท็กที่ไม่ซ้ำกันจะเป็นหน้าของตัวเอง
- สนับสนุนผู้เขียนหลายคน
- 3 รูปแบบบล็อกที่แตกต่างกัน
- 2 รูปแบบรายการบล็อกที่แตกต่างกัน
- สนับสนุนการกำหนดเส้นทางซ้อนของโพสต์บล็อก
- หน้าโครงการ
- ส่วนหัวความปลอดภัยที่กำหนดค่าไว้ล่วงหน้า
- SEO เป็นมิตรกับฟีด RSS แผนผังไซต์และอีกมากมาย!
โพสต์ตัวอย่าง
- คู่มือ Markdown
- เรียนรู้เพิ่มเติมเกี่ยวกับรูปภาพใน next.js
- ทัวร์การเรียงลำดับคณิตศาสตร์
- ตารางภาพ MDX ง่ายๆ
- ตัวอย่างของร้อยแก้วยาว
- ตัวอย่างของโพสต์เส้นทางซ้อนกัน
คู่มือเริ่มต้นด่วน
- โคลน repo
npx degit ' timlrx/tailwind-nextjs-starter-blog '
- ปรับแต่ง
siteMetadata.js (ข้อมูลที่เกี่ยวข้องกับเว็บไซต์) - แก้ไขนโยบายความปลอดภัยของเนื้อหาใน
next.config.js หากคุณต้องการใช้ผู้ให้บริการวิเคราะห์รายอื่นหรือโซลูชันการแสดงความคิดเห็นนอกเหนือจาก Giscus - ปรับแต่ง
authors/default.md (ผู้เขียนหลัก) - แก้ไข
projectsData.ts - แก้ไข
headerNavLinks.ts เพื่อปรับแต่งลิงก์การนำทาง - เพิ่มโพสต์บล็อก
- ปรับใช้บน vercel
การติดตั้ง
โปรดทราบว่าหากคุณใช้ Windows คุณอาจต้องเรียกใช้:
$env :PWD = $( Get-Location ) .Path
การพัฒนา
ก่อนอื่นให้เรียกใช้เซิร์ฟเวอร์การพัฒนา:
เปิด http: // localhost: 3000 พร้อมเบราว์เซอร์ของคุณเพื่อดูผลลัพธ์
แก้ไขเค้าโครงใน app หรือเนื้อหาใน data ด้วยการโหลดสดใหม่หน้าจะอัปเดตอัตโนมัติในขณะที่คุณแก้ไข
ขยาย / ปรับแต่ง
data/siteMetadata.js - มีข้อมูลที่เกี่ยวข้องกับเว็บไซต์ส่วนใหญ่ซึ่งควรแก้ไขตามความต้องการของผู้ใช้
data/authors/default.md - ข้อมูลผู้เขียนเริ่มต้น (จำเป็น) ผู้เขียนเพิ่มเติมสามารถเพิ่มเป็นไฟล์ใน data/authors
data/projectsData.js - ข้อมูลที่ใช้ในการสร้างการ์ดสไตล์ในหน้าโครงการ
data/headerNavLinks.js - ลิงก์นำทาง
data/logo.svg - แทนที่ด้วยโลโก้ของคุณเอง
data/blog - แทนที่ด้วยโพสต์บล็อกของคุณเอง
public/static - สินทรัพย์เก็บเช่นรูปภาพและ Favicons
tailwind.config.js และ css/tailwind.css - การกำหนดค่า Tailwind และสไตล์ชีทซึ่งสามารถปรับเปลี่ยนเพื่อเปลี่ยนรูปลักษณ์และความรู้สึกโดยรวมของเว็บไซต์
css/prism.css - ควบคุมสไตล์ที่เกี่ยวข้องกับบล็อกรหัส อย่าลังเลที่จะปรับแต่งและใช้ธีม PRISMJS ที่คุณต้องการเช่นธีมปริซึม
contentlayer.config.ts - การกำหนดค่าสำหรับ ContentLayer รวมถึงคำจำกัดความของแหล่งเนื้อหาและปลั๊กอิน MDX ที่ใช้ ดูเอกสารประกอบ ContentLayer สำหรับข้อมูลเพิ่มเติม
components/MDXComponents.js - ส่งรหัส JSX ของคุณเองหรือส่วนประกอบตอบสนองโดยระบุไว้ที่นี่ จากนั้นคุณสามารถใช้โดยตรงในไฟล์ .mdx หรือ .md โดยค่าเริ่มต้นลิงก์ที่กำหนดเองส่วนประกอบ next/image ส่วนประกอบสารบัญและแบบฟอร์มจดหมายข่าวจะถูกส่งผ่าน โปรดทราบว่าส่วนประกอบควรถูกส่งออกเริ่มต้นเพื่อหลีกเลี่ยงปัญหาที่มีอยู่กับ next.js.
layouts - เทมเพลตหลักที่ใช้ในหน้า:
- ขณะนี้มีรูปแบบโพสต์ 3 รูปแบบ:
PostLayout , PostSimple และ PostBanner PostLayout เป็นเค้าโครงคอลัมน์ 2 คอลัมน์เริ่มต้นพร้อมข้อมูลเมตาและผู้แต่ง PostSimple เป็นรุ่นที่เรียบง่ายของ PostLayout ในขณะที่ PostBanner มีภาพแบนเนอร์ - มี 2 รูปแบบรายการบล็อก:
ListLayout , เค้าโครงที่ใช้ในเวอร์ชัน 1 ของเทมเพลตพร้อมแถบค้นหาและ ListLayoutWithTags ซึ่งปัจจุบันใช้ในเวอร์ชัน 2 ซึ่งไม่ได้ใช้แถบค้นหา แต่มีแถบด้านข้างพร้อมข้อมูลบนแท็ก
app - หน้าไปยัง อ่านเอกสารถัดไปสำหรับข้อมูลเพิ่มเติม
next.config.js - การกำหนดค่าที่เกี่ยวข้องกับ next.js คุณต้องปรับนโยบายความปลอดภัยของเนื้อหาหากคุณต้องการโหลดสคริปต์รูปภาพ ฯลฯ จากโดเมนอื่น ๆ
โพสต์
เนื้อหาเป็นแบบจำลองโดยใช้ ContentLayer ซึ่งช่วยให้คุณสามารถกำหนดสคีมาเนื้อหาของคุณเองและใช้เพื่อสร้างวัตถุเนื้อหาที่พิมพ์ ดูเอกสารประกอบ ContentLayer สำหรับข้อมูลเพิ่มเติม
หน้าปัด
Frontmatter เป็นไปตามมาตรฐานของ Hugo
โปรดดูที่ contentlayer.config.ts สำหรับรายการข้อมูลล่าสุดของฟิลด์ที่รองรับ รองรับฟิลด์ต่อไปนี้:
title (required)
date (required)
tags (optional)
lastmod (optional)
draft (optional)
summary (optional)
images (optional)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)
นี่คือตัวอย่างของ post frontmatter:
---
title: 'Introducing Tailwind Nexjs Starter Blog'
date: '2021-01-12'
lastmod: '2021-01-18'
tags: ['next-js', 'tailwind', 'guide']
draft: false
summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
images: ['/static/images/canada/mountains.jpg', '/static/images/canada/toronto.jpg']
authors: ['default', 'sparrowhawk']
layout: PostLayout
canonicalUrl: https://tailwind-nextjs-starter-blog.vercel.app/blog/introducing-tailwind-nextjs-starter-blog
---
ปรับใช้
หน้า GitHub
pages.yml เวิร์กโฟลว์มีอยู่แล้ว เพียงเลือก "การกระทำของ GitHub" ใน: Settings > Pages > Build and deployment > Source
vercel
วิธีที่ง่ายที่สุดในการปรับใช้เทมเพลตคือการปรับใช้บน Vercel ตรวจสอบเอกสารการปรับใช้ next.js สำหรับรายละเอียดเพิ่มเติม
ทำให้เป็นตะลึง
NETLIFY ของ NEXT.JS Runtime กำหนดค่าเปิดใช้งานการทำงานของคีย์ next.js บนเว็บไซต์ของคุณโดยไม่จำเป็นต้องมีการกำหนดค่าเพิ่มเติม NetLify สร้างฟังก์ชั่นที่ไม่มีเซิร์ฟเวอร์ที่จะจัดการฟังก์ชัน next.js เช่นหน้าเซิร์ฟเวอร์เรนเดอร์ (SSR) หน้าเซิร์ฟเวอร์ (SSR), การฟื้นฟูแบบคงที่แบบเพิ่มขึ้น (ISR), next/images ฯลฯ ฯลฯ
ดู next.js บน netlify สำหรับค่าการกำหนดค่าที่แนะนำและรายละเอียดเพิ่มเติม
บริการโฮสติ้งแบบคงที่ (GitHub Pages / S3 / Firebase ฯลฯ )
วิ่ง:
$ EXPORT=1 UNOPTIMIZED=1 yarn build
จากนั้นปรับใช้โฟลเดอร์ที่สร้าง out หรือเรียกใช้ npx serve out ในพื้นที่
สำคัญ
หากการปรับใช้กับเส้นทางพื้นฐาน URL เช่น https://example.org/myblog คุณต้องใช้ BASE_PATH shell-var พิเศษไปยังคำสั่ง build:
$ EXPORT=1 UNOPTIMIZED=1 BASE_PATH=/myblog yarn build
=> ในรหัสของคุณ ${process.env.BASE_PATH || ''}/robots.txt จะพิมพ์ "/myblog/robots.txt" ในการสร้าง out (หรือเท่านั้น /robots.txt ถ้า yarn dev , คือ: บน localhost: 3000)
เคล็ดลับ
อีกทางเลือกหนึ่งสำหรับ UNOPTIMIZED=1 เพื่อใช้งานต่อ next/image คุณสามารถใช้ผู้ให้บริการเพิ่มประสิทธิภาพภาพทางเลือกเช่น IMGIX, Cloudinary หรือ Akamai ดูเอกสารการเพิ่มประสิทธิภาพรูปภาพสำหรับรายละเอียดเพิ่มเติม
พิจารณาลบคุณสมบัติต่อไปนี้ที่ไม่สามารถใช้ในการสร้างแบบคงที่:
- แสดงความคิดเห็น
headers() จาก next.config.js - ลบโฟลเดอร์
api และส่วนประกอบที่เรียกฟังก์ชันฝั่งเซิร์ฟเวอร์เช่นส่วนประกอบจดหมายข่าว ไม่จำเป็นต้องใช้ทางเทคนิคและเว็บไซต์จะสร้างได้สำเร็จ แต่ API ไม่สามารถใช้งานได้เนื่องจากเป็นฟังก์ชั่นฝั่งเซิร์ฟเวอร์
คำถามที่พบบ่อย
- ฉันจะเพิ่มส่วนประกอบ MDX ที่กำหนดเองได้อย่างไร
- ฉันจะปรับแต่งการค้นหา
kbar ได้อย่างไร - ปรับใช้กับ Docker
สนับสนุน
ใช้เทมเพลต? สนับสนุนความพยายามนี้โดยให้ดาวบน GitHub แบ่งปันบล็อกของคุณเองและให้เสียงตะโกนบน Twitter หรือกลายเป็นผู้สนับสนุนโครงการ
ใบอนุญาต
MIT © Timothy Lin
