contentful hugo
v4.1.0
นี่คือเครื่องมือ CLI ที่ดึงข้อมูลจาก Contentful CMS และแปลงเป็นไฟล์ Markdown หรือ YAML เพื่อใช้กับเครื่องมือสร้างไซต์แบบคงที่ สามารถใช้กับเครื่องมือสร้างเว็บไซต์แบบคงที่ที่ใช้ Markdown กับ YAML frontmatter ได้ แต่มีคุณสมบัติบางอย่างที่เป็นเฉพาะของ Hugo นอกจากนี้ยังมีเซิร์ฟเวอร์ Express ธรรมดาที่สามารถรับ webhooks จาก Contentful เพื่อเรียกใช้คำสั่งรับและลบอีกครั้ง (มีประโยชน์เมื่อเรียกใช้สภาพแวดล้อมการแสดงตัวอย่าง)
ติดตั้ง Node.js (เวอร์ชันขั้นต่ำที่รองรับคือ Node v18)
กับ เอ็นพีเอ็ม
# local install
npm install contentful-hugo
# global install
npm install contentful-hugo -gกับ PNPM
# local install
pnpm install contentful-hugo
# global install
pnpm install contentful-hugo -gกำหนดค่าให้เสร็จสิ้น จากนั้นรันคำสั่งต่อไปนี้ในเทอร์มินัล
# # initialize the directory
contentful - hugo -- init
# # fetch content from contentful
contentful - hugo [ flags ]npx contentful - hugo -- init
npx contentful - hugo [ flags ]
# or when using pnpm
pnpm contentful - hugo -- init
pnpm contentful - hugo [ flags ]| ธง | นามแฝง | คำอธิบาย |
|---|---|---|
| --init | เริ่มต้นไดเร็กทอรี สร้างไฟล์กำหนดค่าและรหัสย่อเริ่มต้นสำหรับช่องข้อความที่มีเนื้อหาสมบูรณ์ | |
| --ดูตัวอย่าง | -ป | ทำงานในโหมดแสดงตัวอย่าง ซึ่งจะดึงทั้งรายการที่เผยแพร่และยังไม่ได้เผยแพร่จาก Contentful |
| --รอ | -ว | รอตามจำนวนมิลลิวินาทีที่ระบุก่อนที่จะดึงข้อมูลจาก Contentful |
| --config | -ค | ระบุเส้นทางไปยังไฟล์กำหนดค่า |
| --เซิร์ฟเวอร์ | -ส | ทำงานในโหมดเซิร์ฟเวอร์เพื่อรับ webhooks จาก Contentful |
| --ท่าเรือ | ระบุพอร์ตสำหรับโหมดเซิร์ฟเวอร์ (ค่าเริ่มต้น 1414) | |
| --ทำความสะอาด | ลบไดเร็กทอรีใด ๆ ที่ระบุใน singleTypes และ RepeatableTypes | |
| --ช่วย | แสดงความช่วยเหลือ | |
| --รุ่น | แสดงหมายเลขเวอร์ชัน |
contentful - hugo -- wait = 2000 -- preview -- config = " my_custom_config.js "
# or
contentful - hugo -- wait 2000 -- preview -- config my_custom_config.js{
"name" : " my-hugo-project " ,
"scripts" : {
"dev" : " contentful-hugo --preview && hugo server " ,
"build" : " contentful-hugo && hugo --minify "
}
} ในตัวอย่างนี้ เมื่อคุณรัน npm run dev จะใช้ contentful-hugo ก่อนเพื่อดึงข้อมูล Contentful จากนั้นจึงเริ่มเซิร์ฟเวอร์ Hugo ในทำนองเดียวกันเมื่อคุณทำคำสั่ง npm run build มันจะใช้ contentful-hugo ก่อนเพื่อดึงข้อมูล Contentful จากนั้นรัน hugo --minify เพื่อสร้างเวอร์ชันย่อของไซต์ Hugo ของคุณ
การพยายามใช้แพ็กเกจนี้ก่อนที่จะกำหนดค่าให้เสร็จสิ้นจะส่งคืนข้อผิดพลาดในคอนโซล
Error: There is an error in your config file, or it does ' t exits.
Check your config for errors or run "contentful-hugo --init" to create a config file. ตามค่าเริ่มต้นไลบรารีนี้จะค้นหาตัวแปรสภาพแวดล้อมต่อไปนี้ คุณยังสามารถแทนที่ค่าเหล่านี้ด้วยไฟล์กำหนดค่าได้ (ดูการกำหนดค่า)
ไฟล์ .env:
หากต้องการประกาศตัวแปรสภาพแวดล้อมเหล่านี้ ให้สร้างไฟล์ .env ในไดเร็กทอรีรากของโปรเจ็กต์ของคุณ
CONTENTFUL_SPACE = ' <space-id> '
CONTENTFUL_TOKEN = ' <content-accessToken> '
# optional but required for preview mode
CONTENTFUL_PREVIEW_TOKEN = ' <preview-accessToken> 'คุณยังสามารถประกาศตัวแปรสภาพแวดล้อมในบรรทัดคำสั่งได้
พาวเวอร์เชลล์:
$ env: CONTENTFUL_SPACE = " <contentful_space_id> "
$ env: CONTENTFUL_TOKEN = " <contentful_acessToken> "
$ env: CONTENTFUL_PREVIEW_TOKEN = " <contentful_preview_accessToken> "ทุบตี:
export CONTENTFUL_SPACE= " <contentful_space_id> "
export CONTENTFUL_TOKEN= " <contentful_accessToken> "
export CONTENTFUL_PREVIEW_TOKEN= " <contentful_preview_accessToken> "ก่อนที่จะเริ่มต้น คุณจะต้องสร้างไฟล์กำหนดค่าในรูทของที่เก็บของคุณ Contentful-hugo โดยค่าเริ่มต้นจะค้นหาไฟล์ต่อไปนี้เป็นการกำหนดค่า
contentful-hugo.config.tscontentful-hugo.config.jscontentful-hugo.config.yamlcontentful-hugo.yamlcontentful-settings.yaml คุณยังสามารถระบุไฟล์กำหนดค่าแบบกำหนดเองได้โดยใช้แฟล็ก --config (ไฟล์กำหนดค่า Javascript หรือ YAML เป็นประเภทไฟล์ที่ยอมรับในปัจจุบันเท่านั้น)
import { defineConfig } from 'contentful-hugo' ;
export default defineConfig ( {
// fetches from default locale if left blank
locales : [ 'en-US' , 'fr-FR' ] ,
contentful : {
// defaults to CONTENTFUL_SPACE env variable
space : 'space-id' ,
// defaults to CONTENTFUL_TOKEN env variable
token : 'content-deliver-token' ,
// defaults to CONTENTFUL_PREVIEW_TOKEN env variable
previewToken : 'content-preview-token' ,
// defaults to "master"
environment : 'master' ,
} ,
singleTypes : [
{
id : 'homepage' ,
directory : 'content' ,
fileName : '_index' ,
} ,
{
id : 'siteSettings' ,
directory : 'data' ,
fileName : 'settings' ,
fileExtension : 'yaml' , // default is md
} ,
] ,
repeatableTypes : [
{
id : 'posts' ,
directory : 'content/posts' ,
mainContent : 'content' ,
resolveEntries : {
categories : 'fields.slug' ,
author : 'fields.name' ,
relatedPosts : 'sys.id' ,
} ,
} ,
{
id : 'seoFields' ,
isHeadless : true ,
directory : 'content/seo-fields' ,
customFields : {
// these fields will be added to the frontmatter
myCustomField : 'myCustomFieldVal' ,
myOtherCustomField : ( entry ) => {
return entry . fields . whatever ;
} ,
} ,
} ,
{
id : 'reviews' ,
directory : 'content/reviews' ,
mainContent : 'reviewBody' ,
} ,
{
id : 'category' ,
directory : 'content/categories' ,
isTaxonomy : true ,
} ,
] ,
staticContent : [
{
inputDir : 'static_content' ,
outputDir : 'content' ,
} ,
] ,
} ) ; การกำหนดค่าจาวาสคริปต์นั้นค่อนข้างเหมือนกับการกำหนดค่า typescript
import { defineConfig } from 'contentful-hugo' ;
export default defineConfig ( {
// stuff goes here
} ) ;ไวยากรณ์ CommonJS ควร ใช้งานได้ (ฉันไม่ได้ทดสอบสิ่งนี้จริง ๆ มันอาจจะใช้งานได้อาจจะไม่ก็ได้)
const { defineConfig } = require ( 'contentful-hugo' ) ;
module . exports = defineConfig ( {
// stuff goes here
} ) ; # contentful-hugo.config.yaml
locales : # fetches from default locale if left blank
- en-US
- fr-FR
contentful :
space : ' space-id ' # defaults to CONTENTFUL_SPACE env variable
token : ' content-deliver-token ' # defaults to CONTENTFUL_TOKEN env variable
previewToken : ' content-preview-token ' # defaults to CONTENTFUL_PREVIEW_TOKEN env variable
environment : ' master ' # defaults to "master"
singleTypes :
# fetches only the most recently updated entry in a particular content type
# Generated file will be named after the fileName setting
- id : homepage
directory : content
fileName : _index
- id : siteSettings
directory : data
fileName : settings
fileExtension : yaml # default is md
repeatableTypes :
# fetches all the entries of a content type and places them in a directory.
# Generated files will be named after their Entry ID in Contentful.
- id : posts
directory : content/posts
fileExtension : md
mainContent : content
resolveEntries : # resolves a reference or asset field to a specific property
categories : fields.slug
author : fields.name
relatedPosts : sys.id
- id : seoFields
isHeadless : true
directory : content/seo-fields
customFields :
# will be added to the frontmatter
myCustomFields : ' myCustomFieldValue '
- id : reviews
directory : content/reviews
mainContent : reviewBody
- id : staff
isHeadless : true
directory : content/staff
- id : category
directory : content/categories
isTaxonomy : true | สนาม | ที่จำเป็น | คำอธิบาย |
|---|---|---|
| ช่องว่าง | ไม่จำเป็น | Contentful Space ID (ค่าเริ่มต้นเป็นตัวแปรสภาพแวดล้อม CONTENTFUL_SPACE หากไม่ได้ตั้งค่า) |
| โทเค็น | ไม่จำเป็น | โทเค็นการนำส่งเนื้อหา (ค่าเริ่มต้นเป็นตัวแปรสภาพแวดล้อม CONTENTFUL_TOKEN หากไม่ได้ตั้งค่า) |
| ดูตัวอย่างโทเค็น | ไม่จำเป็น | โทเค็นการแสดงตัวอย่างเนื้อหา (ค่าเริ่มต้นเป็นตัวแปรสภาพแวดล้อม CONTENTFUL_PREVIEW_TOKEN หากไม่ได้ตั้งค่า) |
| สิ่งแวดล้อม | ไม่จำเป็น | ID สภาพแวดล้อมที่มีเนื้อหาครบถ้วน (ค่าเริ่มต้นเป็น "หลัก" หากไม่ได้ตั้งค่า) |
| สนาม | ที่จำเป็น | คำอธิบาย |
|---|---|---|
| รหัส | ที่จำเป็น | รหัสประเภทเนื้อหาที่มีเนื้อหาครบถ้วน |
| ไดเรกทอรี | ที่จำเป็น | ไดเร็กทอรีที่คุณต้องการสร้างไฟล์ |
| ชื่อไฟล์ | ที่จำเป็น | ชื่อของไฟล์ที่สร้างขึ้น |
| ไฟล์นามสกุล | ไม่จำเป็น | สามารถเป็น "md", "yml", "yaml" หรือ "json" (ค่าเริ่มต้นคือ "md") |
| เนื้อหาหลัก | ไม่จำเป็น | รหัสฟิลด์สำหรับฟิลด์ที่คุณต้องการให้เป็นเนื้อหา Markdown หลัก (อาจเป็นช่องมาร์กดาวน์ Richtext หรือสตริงก็ได้) |
| พิมพ์ | ไม่จำเป็น | ตั้งค่าด้วยตนเองสำหรับฟิลด์ "ประเภท" ในส่วนหน้า (ดูเอกสาร Hugo) |
| แก้ไขรายการ | ไม่จำเป็น | แก้ไขฟิลด์อ้างอิงที่ระบุและ/หรือฟิลด์สินทรัพย์ให้เป็นพารามิเตอร์คุณสมบัติตัวใดตัวหนึ่ง |
| แทนที่ | ไม่จำเป็น | ทำการแทนที่แบบกำหนดเองสำหรับค่าฟิลด์หรือชื่อฟิลด์ |
| ตัวกรอง | ไม่จำเป็น | ยอมรับออบเจ็กต์ของพารามิเตอร์การค้นหา Contentful เพื่อกรองผลลัพธ์ ดูเอกสารที่มีเนื้อหาครบถ้วน |
| ละเว้นLocales | ไม่จำเป็น | ละเว้นการตั้งค่าการแปลและดึงเฉพาะจากภาษาเริ่มต้นเท่านั้น (ค่าเริ่มต้นเป็นเท็จ) |
| ฟิลด์ที่กำหนดเอง | ไม่จำเป็น | ยอมรับวัตถุของเขตข้อมูลและค่า ค่าอาจเป็นค่าคงที่มาตรฐานหรือฟังก์ชันที่ยอมรับรายการ Contentful เป็นพารามิเตอร์และส่งกลับค่า |
| สนาม | ที่จำเป็น | คำอธิบาย |
|---|---|---|
| รหัส | ที่จำเป็น | รหัสประเภทเนื้อหาที่มีเนื้อหาครบถ้วน |
| ไดเรกทอรี | ที่จำเป็น | ไดเร็กทอรีที่คุณต้องการสร้างไฟล์ |
| ชื่อไฟล์ | ไม่จำเป็น | คุณสมบัติรายการที่จะกำหนดชื่อไฟล์ (โดยค่าเริ่มต้นจะเป็น sys.id ) |
| ไฟล์นามสกุล | ไม่จำเป็น | สามารถเป็น "md", "yml", "yaml" หรือ "json" (ค่าเริ่มต้นคือ "md") |
| คือหัวขาด | ไม่จำเป็น | เปลี่ยนรายการทั้งหมดในประเภทเนื้อหาให้เป็นชุดบันเดิลแบบ headless (ดูเอกสาร Hugo) ไม่สามารถตั้งค่าเป็นจริงได้เมื่อตั้งค่า isTaxonomy เป็นจริง |
| คืออนุกรมวิธาน (ทดลอง) | ไม่จำเป็น | จัดระเบียบรายการในโครงสร้างไฟล์เพื่อให้สามารถกำหนดข้อมูลเมตาอนุกรมวิธานแบบกำหนดเองได้ (ดูเอกสาร Hugo) ไม่สามารถตั้งค่าเป็นจริงได้เมื่อตั้งค่า isHeadless เป็นจริง |
| เนื้อหาหลัก | ไม่จำเป็น | รหัสฟิลด์สำหรับฟิลด์ที่คุณต้องการให้เป็นเนื้อหามาร์กดาวน์หลัก (อาจเป็นช่องมาร์กดาวน์ Richtext หรือสตริงก็ได้) |
| พิมพ์ | ไม่จำเป็น | ตั้งค่าด้วยตนเองสำหรับฟิลด์ "ประเภท" ในส่วนหน้า (ดูเอกสาร Hugo) |
| แก้ไขรายการ | ไม่จำเป็น | แก้ไขฟิลด์อ้างอิงที่ระบุและ/หรือฟิลด์เนื้อหาให้เป็นคุณสมบัติอย่างใดอย่างหนึ่ง |
| แทนที่ | ไม่จำเป็น | ทำการแทนที่แบบกำหนดเองสำหรับค่าฟิลด์หรือชื่อฟิลด์ |
| ตัวกรอง | ไม่จำเป็น | ยอมรับออบเจ็กต์ของพารามิเตอร์การค้นหา Contentful เพื่อกรองผลลัพธ์ ดูเอกสารที่มีเนื้อหาครบถ้วน |
| ละเว้นLocales | ไม่จำเป็น | ละเว้นการตั้งค่าการแปลและดึงเฉพาะจากภาษาเริ่มต้นเท่านั้น (ค่าเริ่มต้นเป็นเท็จ) |
| ฟิลด์ที่กำหนดเอง | ไม่จำเป็น | ยอมรับวัตถุของเขตข้อมูลและค่า ค่าอาจเป็นค่าคงที่มาตรฐานหรือฟังก์ชันที่ยอมรับรายการ Contentful เป็นพารามิเตอร์และส่งกลับค่า |
การกำหนดค่ายังมีฟิลด์ locales ที่ซึ่งช่วยให้คุณสามารถระบุสถานที่ที่คุณต้องการดึงมาได้ ฟิลด์นี้สามารถรับอาร์เรย์ของสตริง อาร์เรย์ของอ็อบเจ็กต์ หรือรวมกันได้
ตามค่าเริ่มต้น นามสกุลไฟล์เฉพาะสถานที่จะถูกใช้สำหรับการแปลหลายรายการ
const { defineConfig } = require ( 'contentful-hugo' ) ;
// produce en-us.md and fr-fr.md files
module . exports = defineConfig ( {
locales : [ 'en-US' , 'fr-FR' ] ;
// rest of config
} )
// produce en.md and fr.md files
module . exports = defineConfig ( {
locales : [
{
code : 'en-US' ,
mapTo : 'en'
} ,
{
code : 'fr-FR' ,
mapTo : 'fr'
}
]
// rest of config
} )
// produce en-us.md files and fr.md files
module . exports = defineConfig ( {
locales : [
'en-US' ,
{
code : 'fr-FR' ,
mapTo : 'fr'
}
]
// rest of config
} )หลังจากกำหนดค่าสถานที่ใน Contentful Hugo แล้ว คุณจะต้องอัปเดตการกำหนดค่า Hugo ของคุณให้คำนึงถึงสถานที่เหล่านี้ ปรึกษาเอกสาร Hugo สำหรับรายละเอียดเพิ่มเติม
# config.toml
[ languages ]
[ languages . en-us ]
# language settings
[ languages . fr-fr ]
# language settings มีบางครั้งที่คุณต้องการวางเนื้อหาในไดเร็กทอรีตามสถานที่ แทนที่จะใช้การแปลตามนามสกุลไฟล์ ในการดำเนินการนี้ คุณจะต้องรวม [locale] ไว้ในพาธของไฟล์ไดเร็กทอรีของคุณ
เมื่อใช้ไดเร็กทอรีเฉพาะโลแคล นามสกุลไฟล์เฉพาะโลแคล (เช่น en.md หรือ fr.md ) จะลดลง
const { defineConfig } = require ( 'contentful-hugo' ) ;
module . exports = defineConfig ( {
locales : [ 'en' , 'fr' ]
singleTypes : [
{
id : 'settings' ,
fileName : 'settings' ,
fileExtension : 'yaml' ,
directory : 'data/[locale]'
/*
produces:
- data/en/settings.yaml
- data/fr/settings.yaml
*/
}
]
repeatableTypes : [
{
id : 'post' ,
directory : 'content/[locale]/post' ,
/*
produces:
- content/en/post/[entryId].md
- content/fr/post/[entryId].md
*/
} ,
] ,
} ) ; การตั้งค่าที่แนะนำสำหรับ Contentful Hugo คือให้เนื้อหาของคุณ (โดยปกติคือ ./content ) และไดเร็กทอรีข้อมูล (โดยปกติคือ ./data ) ถูกละเว้นในการควบคุมเวอร์ชัน เนื่องจาก contentful-hugo จะสร้างไดเร็กทอรีเหล่านี้ในขณะสร้าง อย่างไรก็ตาม สิ่งนี้จะสร้างปัญหาสำหรับอินสแตนซ์ที่คุณมีเพจที่ไม่ได้รับการจัดการใน Contentful และไม่ได้ถูกสร้างขึ้นในขณะสร้างโดยแหล่งอื่น
เพื่อจัดการกับปัญหานี้ Contentful-Hugo มีพารามิเตอร์ staticContent พารามิเตอร์นี้ยอมรับไดเร็กทอรีอินพุต ( inputDir ) ที่สามารถคอมมิตกับ git และไดเร็กทอรีเอาต์พุต ( outputDir ) ซึ่งจะเป็นเนื้อหามาตรฐานหรือไดเร็กทอรีข้อมูลของคุณ รายการทั้งหมดใน inputDir จะถูกคัดลอกไปยัง outputDir ณ เวลาสร้าง และจะคงโครงสร้างโฟลเดอร์ไว้ โครงสร้าง.abs
ตัวอย่างเช่น ในการกำหนดค่าด้านล่าง ./static_content/posts/my-post.md จะถูกคัดลอกไปยัง ./content/posts/my-post.md และ ./static_data/global-settings.yaml จะถูกคัดลอกไปยัง ./data/global-settings.yaml
const { defineConfig } = require ( 'contentful-hugo' ) ;
module . exports = defineConfig ( {
// rest of config
staticContent : [
{
// all items in ./static_content will be copied to ./content
inputDir : 'static_content' ,
outputDir : 'content' ,
} ,
{
// all items in ./static_data will be copied to ./data
inputDir : 'static_data' ,
outputDir : 'data' ,
} ,
] ,
} ) ;Contentful-Hugo จะคอยดูการเปลี่ยนแปลงไฟล์ใน inputDir's ในขณะที่ทำงานในโหมดเซิร์ฟเวอร์
นี่คือตัวอย่างของการเปลี่ยนแปลงตัวเลือก token , previewToken และ environment แบบไดนามิก ขึ้นอยู่กับเงื่อนไขที่กำหนดเอง
// contentful-hugo.config.js
const { defineConfig } = require ( 'contentful-hugo' ) ;
require ( 'dotenv' ) . config ( ) ; // assuming you have "dotenv" in your dependencies
const myMasterToken = process . env . CONTENTFUL_MASTER_TOKEN ;
const myMasterPreviewToken = process . env . CONTENTFUL_MASTER_PREVIEW_TOKEN ;
const myStagingToken = process . env . CONTENTFUL_STAGING_TOKEN ;
const myStagingPreviewToken = process . env . CONTENTFUL_STAGING_PREVIEW_TOKEN ;
// set some condition
const isStaging = true || false ;
module . exports = defineConfig ( {
contentful : {
space : 'my-space-id' ,
token : isStaging ? myStagingToken : myMasterToken ,
preview : isStaging ? myStagingPreviewToken : myMasterPreviewToken ,
environment : isStaging ? 'staging' : 'master' ,
} ,
// rest of config
} ) ; const { defineConfig } = require ( 'contentful-hugo' ) ;
// contentful-hugo.config.js
module . exports = defineConfig ( {
repeatableTypes : [
{
id : "trips" ,
directory : "content/trips"
overrides : {
// change the url field name to "slug"
url : {
fieldName : "slug"
}
/*
rename "distanceInKilometers" to "distanceInMiles"
and change the field value from km to mi
*/
distanceInKilometers : {
fieldName : "distanceInMiles" , valueTransformer : ( val ) => {
if ( typeof val === 'number' ) {
return val * 0.621371
}
return 0
}
}
}
}
]
} )
// ALTERNATIVE SYNTAX
module . exports = defineConfig ( {
repeatableTypes : [
{
id : "trips" ,
directory : "content/trips"
overrides : [
{
field : "url" ,
options : {
// change the url field name to "slug" in frontmatter
fieldName : "slug"
}
} ,
{
field : "distanceInKilometers" ,
options : {
// rename "distanceInKilometers" to "distanceInMiles"
fieldName : "distanceInMiles" ,
// convert distance to miles and output the result in frontmatter
valueTransformer : ( val ) => {
if ( typeof val === 'number' ) {
return val * 0.621371
}
return 0
}
}
} ]
}
]
} ) สำหรับไฟล์กำหนดค่า JS คุณสามารถใช้ตัวช่วย defineConfig หรือคุณสามารถนำเข้าประเภท ContentfulHugoConfig ได้
//////////// OPTION 1 ////////////
const { defineConfig } = require ( 'contentful-hugo' ) ;
module . exports = defineConfig ( {
// config goes here
} ) ;
//////////// OPTION 2 ////////////
/**
* @type {import('contentful-hugo').ContentfulHugoConfig}
*/
module . exports = {
// rest of config
} ; ตัวอย่างการตั้งค่า .gitignore
# general stuff
.env
node_modules
public
resources
# Contenful Hugo stuff
# temp folder that contentful uses to track files
.contentful-hugo
# since content and data is coming from Contentful
# usually you'll want to ignore those directories
content
dataไฟล์จะถูกสร้างขึ้นในไดเร็กทอรีที่ระบุในไฟล์ปรับแต่ง ส่วนหน้าจะอยู่ในรูปแบบ YAML ไฟล์ประเภทเดียวจะถูกตั้งชื่อตามชื่อไฟล์ที่ระบุในไฟล์ปรับแต่ง ไฟล์ประเภทที่ทำซ้ำได้จะได้รับการตั้งชื่อตาม ID รายการใน Contenful ซึ่งทำให้ง่ายต่อการเชื่อมโยงไฟล์เข้าด้วยกัน
ช่องต่อไปนี้จะปรากฏในส่วนหน้าของคุณเสมอ:
date : # defaults to sys.createdAt unless you have a field with the id "date" then it get's overwritten
sys :
id : # the entry id
updatedAt : # the last time this entry was updated in Contentful
createdAt : # when the entry was created in Contentful
revision : # the revision number
space : # the space id
contentType : # the content type idเนื้อหา เช่น รูปภาพและวิดีโอมาพร้อมกับข้อมูลเพิ่มเติมที่ทำให้ง่ายต่อการใช้งานต่างๆ เช่น ข้อความแสดงแทนหรือเค้าโครงที่ต้องอาศัยการรู้ขนาดของรูปภาพ ฟิลด์มีดังนี้:
assetFieldName :
assetType : # indicates the asset mime type such as image/png, video/mp4, audio/mp3, ect.
url : # url of the asset
title : # title of the asset written in Contentful
description : # description of the asset written in Contentful
width : # width of the asset (images only)
height : # height of the asset (images only)หากคุณใช้ Hugo คุณสามารถเข้าถึงข้อมูลดังต่อไปนี้:
< img
src =" {{ .Params.assetFieldName.url }} "
width =" {{ .Params.assetFieldName.width }} "
/>สำหรับรูปภาพ คุณสามารถเพิ่มพารามิเตอร์ต่อท้าย URL ของเนื้อหาเพื่อใช้ประโยชน์จากรูปภาพของ Contentful ได้
< img
src =" {{ .Params.assetFieldname.url }}?w=200&h=200&fit=fill "
width =" 200 "
height =" 200 "
/>ข้อมูลเดียวกันนี้จะปรากฏในอาร์เรย์สินทรัพย์เช่นแกลเลอรี:
myGallery :
- assetType : ' image/jpg '
url : ' //link-to-image.jpg '
title : ' Image 1 '
description : ' Image 1 Description '
width : 500
height : 500
- assetType : ' image/jpg '
url : ' //link-to-image-2.jpg '
title : ' Image 2 '
description : ' Image 2 Description '
width : 1920
height : 1080รายการที่เชื่อมโยงจะรวมฟิลด์สำหรับรหัสและรหัสประเภทเนื้อหา
linkedEntry :
id : <contentful-entry-id>
typeId : <content-type-ID>
# example with array of linked entries
relatedArticles :
- id : ' 41UFfIhszbS1kh95bomMj7 '
typeId : ' articles '
- id : ' 85UFfIhsacS1kh71bpqMj7 '
typeId : ' articles ' ไฟล์ทั้งหมดตั้งชื่อตามรหัสรายการใน Contentful ทำให้ง่ายต่อการเรียกค้นโดยใช้ .Site.GetPage ใน Hugo
// if you have access to the "Page" object
{{ with . Site . GetPage "<path-to-file>/<entry-id>" }}
{{ . Title }}
{{ end }}
// if you don't have access to the "Page" object
// for example in a nested partial
{{ with site. GetPage "<path-to-file>/<entry-id>" }}
{{ . Title }}
{{ end }}ตัวอย่างง่ายๆ
{{ with . Params . myEntryField }}
{{ $ pagePage := print "path/to/entryDir/" . id }}
{{ with site. GetPage $ pagePath }}
{{ . Title }}
{{ . Params . someOtherField }}
{{ end }}
{{ end }}เอกสารที่เกี่ยวข้อง:
ช่องข้อความแบบ Rich Text ที่กำหนดเป็น "เนื้อหาหลัก" สำหรับประเภทเนื้อหาจะแสดงผลเป็นมาร์กดาวน์สำหรับ Hugo
เนื้อหาไดนามิก เช่น embedded-entry-blocks จะถูกแสดงผลเป็นรหัสย่อพร้อมพารามิเตอร์รวมอยู่ด้วย ซึ่งสามารถใช้เพื่อดึงข้อมูลที่จำเป็นได้
<!-- example embedded entry -->
<!-- you can use the id, contentType, and parentContentType parameters to fetch the desired data -->
{{< contentful-hugo/embedded-entry id="nTLo2ffSJJp5QrnrO5IU9" contentType="gallery" parentContentType="post" >}} ก่อนที่จะดึงข้อมูล Rich Text ตรวจสอบให้แน่ใจว่าคุณได้รัน contentful-hugo --init เพื่อที่คุณจะได้มีรหัสย่อของ Rich Text ทั้งหมด เมื่อคุณมีรหัสย่อเหล่านี้แล้ว คุณสามารถขยายและแก้ไขให้เหมาะกับความต้องการของคุณได้
รายการรหัสสั้นแบบ Rich Text ประกอบด้วย:
ตามค่าเริ่มต้น รหัสแบบสั้น Richtext จะแสดงการแจ้งเตือนสำหรับรายการที่ไม่ได้กำหนดค่า
คุณสามารถปรับแต่งได้โดยไปที่ layouts/shortcodes/contentful-hugo/{shortcode-name}.html
ช่อง Rich text จะสร้างอาร์เรย์ที่ซ้อนกันซึ่งสะท้อนโครงสร้าง JSON ที่มีอยู่ใน API แต่ละโหนดจะต้องวนซ้ำและสร้าง HTML ขึ้นอยู่กับฟิลด์ nodeType
richTextField :
- nodeType : ' paragraph '
data : {}
content :
- data : {}
marks : []
value : ' This is a simple paragraph. '
nodeType : ' text '
- nodeType : ' paragraph '
data : {}
content :
- data : {}
marks : []
value : ' This is a paragraph with '
nodeType : ' text '
- data : {}
marks :
- type : ' italic '
value : ' italicized text. '
nodeType : ' text '
- nodeType : ' embedded-asset-block '
data :
assetType : ' image/jpeg '
url : ' //images.ctfassets.net/some-image-url.jpg '
title : ' Image title will appear here '
description : ' Image description will appear here '
width : 1920
height : 1080
content : []นอกจากนี้ เวอร์ชันข้อความธรรมดาของฟิลด์จะถูกสร้างขึ้นโดยใช้รหัสฟิลด์ที่ต่อท้ายด้วย "_plaintext" วิธีนี้ช่วยให้คุณดึงข้อความได้อย่างรวดเร็วโดยไม่ต้องมีข้อมูลอื่นใด กรณีการใช้งานทั่วไปคือการใช้เอาต์พุตข้อความธรรมดาเพื่อสร้างคำอธิบายเมตาสำหรับหน้าเว็บโดยอัตโนมัติ
richTextField_plaintext : ' This is a simple paragraph. This is a paragraph with italicized text. ' ตัวเลือกแก้ไขรายการช่วยให้คุณสามารถระบุคุณสมบัติจากรายการอ้างอิงหรือสินทรัพย์เพื่อแก้ไขค่าฟิลด์นั้นได้ ตัวอย่างเช่น สมมติว่าคุณมีประเภทเนื้อหา category ที่อ้างอิงใน posts โดยปกติแล้วความพอใจฮิวโก้จะให้ผลดังต่อไปนี้
category :
id : some-entry-id
contentType : category แม้ว่าวิธีนี้จะทำให้ค้นหาหมวดหมู่ได้ง่าย แต่รูปแบบนี้ไม่อนุญาตให้คุณใช้คุณลักษณะการจัดอนุกรมวิธานในตัวของ Hugo ด้วยพารามิเตอร์ resolveEntries คุณสามารถแก้ไขปัญหานี้ได้
// from the config file
module . exports = defineConfig ( {
repeatableTypes : [
id : 'posts' ,
directory : 'content/posts' ,
resolveEntries : {
category : 'fields.slug'
}
// alternative syntax
resolveEntries : [
{
field : 'category' ,
resolveTo : 'fields.slug' ,
} ,
] ,
]
} )ตอนนี้ฟิลด์หมวดหมู่จะแสดงเฉพาะกระสุนเป็นค่าเท่านั้น
category : my-category-slugคุณลักษณะการแก้ไขรายการทำงานได้กับทั้งฟิลด์อ้างอิงและฟิลด์เนื้อหา เช่นเดียวกับฟิลด์การอ้างอิงหลายรายการและฟิลด์เนื้อหาหลายรายการ
การแทนที่สามารถใช้เพื่อแก้ไขชื่อฟิลด์และค่าของฟิลด์
ต่อไปนี้เป็นตัวอย่างง่ายๆ ของการเปลี่ยนชื่อฟิลด์จาก "url" เป็น "videoUrl"
repeatableTypes: [
{
id : 'youtubeVideo' ,
directory : 'content/_youtubeVideo' ,
isHeadless : true ,
overrides : {
// the name of the url field to videoUrl
url : {
fieldName : 'videoUrl'
}
}
// alternative syntax
overrides : [
{
field : 'url' ,
options : {
fieldName : 'videoUrl' ,
} ,
} ,
] ,
} ,
] ; overrides ยังมีตัวเลือก valueTransformer ที่ให้คุณจัดการข้อมูลฟิลด์ที่จะปรากฏใน frontmatter valueTransformer ใช้เมธอดที่มีค่าฟิลด์เป็นพารามิเตอร์ จากนั้นส่งคืนผลลัพธ์สุดท้ายที่จะปรากฏในส่วนหน้า (โปรดทราบว่าเนื่องจาก valueTransformer ต้องเป็นวิธีการ ตัวเลือกนี้จะใช้ได้เฉพาะในไฟล์กำหนดค่า javascript เท่านั้น)
นี่คือตัวอย่างที่เราเปลี่ยนชื่อฟิลด์จาก "url" เป็น "videoId" จากนั้นเราใช้ valueTransformer เพื่อแยกรหัสวิดีโอออกจาก url แล้ววางไว้ในส่วนหน้า
repeatableTypes: [
{
id : 'youtubeVideo' ,
directory : 'content/_youtubeVideo' ,
isHeadless : true ,
overrides : {
url : {
fieldName : 'videoId' ,
// "value" is whatever value is currently saved in the field.
// in this case it's a url for a youtube video
valueTransformer : ( value ) => {
if ( ! value ) {
return null ;
}
const url = new URL ( value ) ;
// extract the video id from the url and return it
return url . searchParams . get ( 'v' ) ;
}
}
}
// alternative syntax
overrides : [
{
field : 'url' ,
options : {
fieldName : 'videoId' ,
valueTransformer : ( value ) => {
// transform the value
} ,
} ,
} ,
] ,
} ,
] ; เมื่อใช้ตัวเลือก valueTransformer บนฟิลด์ที่มีอาร์เรย์ ตรวจสอบให้แน่ใจว่าได้วนซ้ำค่าเมื่อจัดการค่านั้น
repeatabledTypes: [
{
id : 'post' ,
directory : 'content/posts' ,
overrides : {
authors : {
valueTransformer : ( authorRefs ) => {
const authors = [ ] ;
for ( const ref of authorRefs ) {
// get the name, photo, and bio of the author
// and add it to the array
authors . push ( {
name : ref . fields . name ,
photo : ref . fields . photo . fields . file . url ,
bio : ref . fields . bio ,
} ) ;
}
return authors ;
} ,
} ,
} ,
} ,
] ; ตอนนี้ฟิลด์ authors จะมีลักษณะดังนี้:
authors :
- name : Some Name
photo : //images.cfassets.net/path-to-photo.jpg
bio : some bio text
- name : Some other name
photo : //images.cfassets.net/path-to-photo.jpg
bio : some other bio text ดังที่คุณเห็นว่าสิ่งนี้สามารถใช้เพื่อสร้างผลลัพธ์ที่คล้ายกับพารามิเตอร์ resolveEntries แต่ resolveEntries สามารถส่งคืนคุณสมบัติได้เพียงรายการเดียว ในขณะที่มีการแทนที่ คุณสามารถทำทุกอย่างที่คุณต้องการด้วยค่าฟิลด์
คุณสามารถใช้ตัวเลือกใน filters เพื่อป้อนพารามิเตอร์การค้นหาเพื่อให้คุณสามารถกรองรายการตามคุณสมบัติบางอย่างได้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับพารามิเตอร์การค้นหา Contentful โปรดไปที่เอกสารของพวกเขา
โปรดทราบว่าพารามิเตอร์การค้นหาต่อไปนี้จะถูกละเว้น content_type , skip , order , limit
module . exports = defineConfig ( {
singleTypes : [
// get a homepage with a specific entryId
{
id : 'homepage' ,
directory : 'content' ,
fileName : '_index' ,
filters : {
'sys.id' : 'my-homepace-id'
}
}
]
repeatableTypes : [
// only get events that start after 01/01/2020
{
id : 'events' ,
directory : 'content/events' ,
filters : {
'fields.startDate[gte]' : '2020-01-01T00:00:00Z' ,
} ,
} ,
// get posts where author is "John Doe" and contains the tag "flowers"
{
id : 'posts' ,
directory : 'content/posts' ,
filters : {
'fields.author' : 'John Doe' ,
'fields.tags' : 'flowers'
} ,
} ,
] ;
} ) คุณสามารถใช้พารามิเตอร์ customFields เพื่อเพิ่มฟิลด์เพิ่มเติมให้กับรายการของคุณได้ การกำหนดค่าสำหรับฟิลด์ที่กำหนดเองอาจเป็นค่าคงที่หรือวิธีการที่ยอมรับรายการ Contentful เป็นพารามิเตอร์และส่งกลับค่า
สมมติว่าเรามีประเภทเนื้อหาของผู้เขียนซึ่งมีฟิลด์ต่อไปนี้:
นี่คือตัวอย่างการกำหนดค่า:
module . exports = defineConfig ( {
// rest of config
repeatableTypes : [
{
id : 'author' ,
directory : 'content/authors' ,
customFields : {
// both "myCustomField" and "fullName"
// will be appended to the frontmatter for author entries
myCustomField : 'myCustomFieldValue' ,
fullName : ( entry ) => {
const { firstName , lastName } = entry . fields ;
return ` ${ firstName } ${ lastName } ` ;
} ,
} ,
} ,
] ,
} ) ;นี่คือสิ่งที่การกำหนดค่านั้นจะส่งผลให้
---
firstName : ' John '
lastName : ' Doe '
slug : ' john-doe '
myCustomField : ' myCustomFieldValue ' # custom field
fullName : ' John Doe ' # custom field
---คุณสามารถใช้สิ่งนี้กับฟิลด์เฉพาะของ Hugo เช่น Build Options
// prevent a content type from appearing in list pages
{
customFields : {
_build : {
render : 'alway' ,
list : 'never' ,
publishResources : true
}
}
}
// prevent a content type from rendering a single page
{
customFields : {
_build : {
render : 'never' ,
list : 'always' ,
publishResources : true
}
}
} ปัญหาเหล่านี้คือปัญหาที่ทราบแล้ว
--wait ให้กับสคริปต์ของคุณ นี่คือตัวอย่างที่เรารอเพิ่มอีก 6 วินาที contentful-hugo --wait=6000hugo server --disableFastRender
