gatsby starter try ghost ดาวน์โหลด - gatsby starter try ghost ดาวน์โหลดซอร์สโค้ด

gatsby starter try ghost

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

1.0.0

ดาวน์โหลด

ผู้เริ่มต้นบล็อกของ Jamify

ผู้เริ่มต้น Gatsby สำหรับการสร้างบล็อกจาก Ghost CMS ที่ไม่มีหัว

เปลี่ยนบล็อก Ghost ของคุณให้เป็นเว็บไซต์คงที่ที่รวดเร็ว ธีม Gatsby นี้มาแทนที่ส่วนหน้าของเครื่องยนต์ Ghost Handlebars โดยมีรูปลักษณ์และความรู้สึกของ Ghost Casper ที่ได้รับการปรับปรุง เนื้อหาทั้งหมดมาจาก Ghost CMS ที่ไม่มีหัว

ฉันไม่ได้ดูแลปลั๊กอินนี้อีกต่อไป แต่ยินดีต้อนรับ PR สำหรับการแก้ไขและอัปเดตเวอร์ชันมากที่สุด!

ทางเลือก

เบื่อ gatsby-config.js หรือยัง? ลองใช้งาน Blogody เพื่อดูโซลูชันแบบครบวงจรพร้อมสิทธิประโยชน์อื่นๆ อีกมากมาย!

ชอบ Next.js มากกว่า Gatsby หรือไม่ ตรงไปที่ next-cms-ghost!

- บทช่วยสอน

ดูบทช่วยสอนสำหรับคำแนะนำที่เป็นประโยชน์เกี่ยวกับการใช้โปรเจ็กต์นี้

- สาธิต

เล่นกับเดโมเพื่อสร้างความประทับใจแรกพบ

คุณสมบัติ

รูปลักษณ์และความรู้สึกของ Ghost Casper
รูปภาพที่โหลดแบบ Lazy Loading และเอฟเฟกต์เบลอ ?
เลื่อนไม่มีที่สิ้นสุด
กระทู้เด่นปักหมุดอยู่ด้านบน ?
ส่วนหัวการนำทางที่ติดหนึบ
วางเมาส์เหนืออวาตาร์ของผู้แต่ง
หน้าสไตล์ 404
ปรับ SEO ให้เหมาะสม
ตอบสนองอย่างเต็มที่
เส้นทางขั้นสูง ?
เรียบเรียงและขยายได้
เปิดใช้งานการสร้างส่วนเพิ่ม ?

- รวมปลั๊กอิน

มีปลั๊กอินต่อไปนี้รวมอยู่เพื่อความสะดวก:

ชื่อ	เวอร์ชัน	คำอธิบาย
`gatsby-theme-ghost-dark-mode`		สลับโหมดมืด ?
`gatsby-rehype-ghost-links`		เขียนลิงก์ CMS ใหม่จากแบบสัมบูรณ์เป็นแบบสัมพัทธ์
`gatsby-rehype-prismjs`		การเน้นไวยากรณ์ด้วย PrismJS
`gatsby-theme-ghost-members` ?		การสมัครสมาชิก

หากคุณไม่ต้องการ คุณสามารถนำออกมาใน gatsby-config.js และ package.json ซึ่งอาจช่วยคุณประหยัดเวลาในระหว่างกระบวนการสร้าง

- ปลั๊กอินเพิ่มเติม

สามารถรวมคุณสมบัติเพิ่มเติมได้โดยการติดตั้งธีมหรือปลั๊กอิน Gatsby ปลั๊กอินต่อไปนี้ได้รับการทดสอบเพื่อทำงานกับ gatsby-starter-try-ghost :

ชื่อ	เวอร์ชัน	คำอธิบาย
`gatsby-rehype-inline-images` ?		รูปภาพอินไลน์ที่โหลดแบบ Lazy Loading พร้อมการเบลอ
`gatsby-theme-ghost-contact`		ติดต่อเพจ
`gatsby-theme-ghost-commento`		ระบบแสดงความคิดเห็นด้วย Commento
`gatsby-theme-ghost-toc` ?		สารบัญ
`gatsby-plugin-ackee-tracker`		ติดตามเว็บไซต์ด้วย Ackee
`gatsby-plugin-google-analytics`		การติดตามไซต์ด้วย Google Analytics

- เริ่มต้นใช้งาน

ติดตั้งสตาร์ทเตอร์นี้โดยการรัน
```
gatsby new try-ghost https://github.com/styxlab/gatsby-starter-try-ghost
```
เปลี่ยนไดเรกทอรี
```
 cd try-ghost
```
วิ่ง
```
yarn develop
```
และเยี่ยมชมเว็บไซต์ของคุณที่ http://localhost:8000

กำหนดค่า

 //siteConfig.js
module . exports = {
    // Do not include a trailing slash!
    siteUrl : `https://your-blog.com` ,

    // Maximum number of post shown per page
    // Infinite Scroll: Initial chunk of posts, subsequent posts are fetched one by one
    postsPerPage : 3 ,

    // This allows an alternative site title for meta data for pages.
    siteTitleMeta : `Gatsby Starter Ghost CMS` ,

    // This allows an site description for meta data for pages.
    siteDescriptionMeta : `Turn your Ghost blog into a flaring fast static site with Gatsby` ,

    // Used for App and Offline manifest e.g. Mobile Home Screen
    shortTitle : `Ghost` ,
    siteIcon : `favicon.png` ,
    backgroundColor : `#e9e9e9` ,
    themeColor : `#15171A` ,

    // Include Gatsby images for lazy loading and image optimizations (default: true)
    gatsbyImages : true ,

    // Overwrite navigation menu (default: []), label is case sensitive
    // overwriteGhostNavigation: [{ label: `Home`, url: `/` }],
} ;

ในการกำหนดค่าที่แสดงด้านบน ฟิลด์ที่สำคัญที่สุดที่ต้องเปลี่ยนแปลงคือ siteUrl , siteTitleMeta และ siteDescriptionMeta อัปเดตอย่างน้อยเพื่อให้เหมาะกับความต้องการของคุณ

- คีย์ Ghost Content API

เนื้อหาทั้งหมดมาจาก Ghost CMS ตามค่าเริ่มต้น เนื้อหาจะถูกดึงมาจากตำแหน่งสาธิตที่ https://cms.gotsby.org แน่นอนว่าคุณต้องการแหล่งที่มาของเนื้อหาของคุณเอง มีสองวิธีในการทำให้คีย์เนื้อหาของคุณพร้อมใช้งาน เลือกวิธีการตามสถานการณ์การสร้างของคุณ

สร้างร่วมกับผู้ให้บริการคลาวด์

หากคุณสร้างโปรเจ็กต์ของคุณด้วยผู้ให้บริการคลาวด์ (เช่น Gatsby, Netlify, Vercel) ตัวเลือกที่ดีที่สุดคือการจัดเตรียมคีย์พร้อมตัวแปรสภาพแวดล้อม:

สำคัญ	ค่า (ตัวอย่าง)
GHOST_API_URL	http://localhost:2368
GHOST_CONTENT_API_KEY	9fccdb0e4ea5b572e2e5b92942

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

การก่อสร้างในท้องถิ่น

หากคุณสร้างในเครื่องหรือบนเครือข่ายส่วนตัวที่โลกไม่สามารถเข้าถึงไดเร็กทอรี build คุณสามารถเพิ่มไฟล์ .ghost.json ใหม่ในไดเร็กทอรีฐานของคุณได้อย่างปลอดภัยด้วยโครงสร้าง JSON ต่อไปนี้:

    {
        " development " : {
            " apiUrl " : " http://localhost:2368 " ,
            " contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
        },
        " production " : {
            " apiUrl " : " http://localhost:2368 " ,
            " contentApiKey " : " 9fccdb0e4ea5b572e2e5b92942 "
        }
    }

ไฟล์นี้เป็นส่วนหนึ่งของ .gitignore เพื่อหลีกเลี่ยงการเผยแพร่ไปยังพื้นที่เก็บข้อมูลสาธารณะของคุณโดยไม่ตั้งใจ เปลี่ยน apiUrl และ contentApiKey ให้ตรงกับคีย์ Ghost CMS Content API ของคุณเอง

- ตรวจสอบโหมด headless ของ Ghost CMS

เพื่อให้ได้ผลลัพธ์ SEO ที่ดีที่สุด ขอแนะนำอย่างยิ่งให้ปิดการใช้งานฟรอนต์เอนด์ของธีม Ghost Handlebars เริ่มต้นโดยการเลือก ทำให้ไซต์นี้เป็นแฟล็กส่วนตัว ภายในการตั้งค่า Ghost admin ของคุณ ซึ่งเปิดใช้งานการป้องกันด้วยรหัสผ่านด้านหน้าการติดตั้ง Ghost และตั้งค่า <meta name="robots" content="noindex" /> เพื่อให้ส่วนหน้า Gatsby ของคุณกลายเป็นแหล่งข้อมูลที่เชื่อถือได้สำหรับเครื่องมือค้นหา