contentful hugo
v4.1.0
Ini adalah alat CLI yang mengambil data dari Contentful CMS dan mengubahnya menjadi file Markdown atau YAML untuk digunakan dengan generator situs statis. Ini dapat digunakan dengan generator situs statis apa pun yang menggunakan Markdown dengan frontmatter YAML, tetapi ia memiliki beberapa fitur khusus untuk Hugo. Ini juga mencakup server Express sederhana yang dapat menerima webhook dari Contentful untuk memicu kembali perintah ambil dan hapus (berguna saat menjalankan lingkungan pratinjau).
Instal Node.js (Versi minimum yang didukung adalah Node v18)
dengan NPM
# local install
npm install contentful-hugo
# global install
npm install contentful-hugo -gdengan PNPM
# local install
pnpm install contentful-hugo
# global install
pnpm install contentful-hugo -gSelesaikan konfigurasi lalu jalankan perintah berikut di terminal
# # 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 ]| bendera | alias | keterangan |
|---|---|---|
| --init | Inisialisasi direktori. Menghasilkan file konfigurasi dan kode pendek default untuk bidang teks kaya Contentful | |
| --pratinjau | -P | Berjalan dalam mode pratinjau, yang menarik entri yang diterbitkan dan tidak diterbitkan dari Contentful |
| --Tunggu | -W | Tunggu hingga jumlah milidetik yang ditentukan sebelum mengambil data dari Contentful. |
| --konfigurasi | -C | Tentukan jalur ke file konfigurasi. |
| --server | -S | Jalankan dalam mode server untuk menerima webhook dari Contentful |
| --pelabuhan | Tentukan port untuk mode server (Default 1414) | |
| --membersihkan | Hapus semua direktori yang ditentukan dalam singleTypes dan repeatableTypes | |
| --membantu | Tunjukkan bantuan | |
| --versi | Tampilkan nomor versi |
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 "
}
} Dalam contoh ini ketika Anda menjalankan npm run dev pertama-tama ia akan menggunakan contentful-hugo untuk menarik data Contentful kemudian memulai serverhugo. Dengan cara yang sama ketika Anda melakukan perintah npm run build pertama-tama ia akan menggunakan contentful-hugo untuk menarik data Contentful, lalu menjalankanhugo hugo --minify untuk membuat versi kecil dari situshugo Anda.
Mencoba menggunakan paket ini sebelum menyelesaikan konfigurasi akan menghasilkan kesalahan di konsol
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. Secara default perpustakaan ini akan mencari variabel lingkungan berikut. Anda juga dapat mengganti nilai-nilai ini dengan file konfigurasi. (Lihat konfigurasi)
Berkas .env:
Untuk mendeklarasikan variabel lingkungan ini, buat file .env di direktori root proyek Anda.
CONTENTFUL_SPACE = ' <space-id> '
CONTENTFUL_TOKEN = ' <content-accessToken> '
# optional but required for preview mode
CONTENTFUL_PREVIEW_TOKEN = ' <preview-accessToken> 'Anda juga dapat mendeklarasikan variabel lingkungan di baris perintah
cangkang kekuatan:
$ env: CONTENTFUL_SPACE = " <contentful_space_id> "
$ env: CONTENTFUL_TOKEN = " <contentful_acessToken> "
$ env: CONTENTFUL_PREVIEW_TOKEN = " <contentful_preview_accessToken> "Pesta:
export CONTENTFUL_SPACE= " <contentful_space_id> "
export CONTENTFUL_TOKEN= " <contentful_accessToken> "
export CONTENTFUL_PREVIEW_TOKEN= " <contentful_preview_accessToken> "Sebelum memulai, Anda perlu membuat file konfigurasi di root repositori Anda. Contentful-hugo secara default akan mencari file berikut sebagai konfigurasi.
contentful-hugo.config.tscontentful-hugo.config.jscontentful-hugo.config.yamlcontentful-hugo.yamlcontentful-settings.yaml Anda juga dapat menentukan file konfigurasi khusus menggunakan flag --config . (File konfigurasi Javascript atau YAML adalah satu-satunya tipe file yang diterima saat ini)
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' ,
} ,
] ,
} ) ; Konfigurasi javascript hampir sama dengan konfigurasi TypeScript.
import { defineConfig } from 'contentful-hugo' ;
export default defineConfig ( {
// stuff goes here
} ) ;Sintaks CommonJS juga harus berfungsi (saya sebenarnya tidak mengujinya, mungkin berhasil, mungkin juga tidak)
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 | bidang | diperlukan | keterangan |
|---|---|---|
| ruang angkasa | opsional | Contentful Space ID (Default pada variabel lingkungan CONTENTFUL_SPACE jika tidak disetel) |
| token | opsional | Token pengiriman konten (Default pada variabel lingkungan CONTENTFUL_TOKEN jika tidak disetel) |
| pratinjauToken | opsional | Token pratinjau konten (Default pada variabel lingkungan CONTENTFUL_PREVIEW_TOKEN jika tidak disetel) |
| lingkungan | opsional | ID lingkungan yang penuh konten (Defaultnya adalah "master" jika tidak disetel) |
| bidang | diperlukan | keterangan |
|---|---|---|
| pengenal | diperlukan | ID tipe konten yang berisi |
| direktori | diperlukan | Direktori tempat Anda ingin file dibuat |
| Nama file | diperlukan | Nama file yang dihasilkan |
| ekstensi file | opsional | Dapat berupa "md", "yml", "yaml", atau "json" (defaultnya adalah "md") |
| Konten utama | opsional | ID Bidang untuk bidang yang Anda inginkan menjadi konten Penurunan Harga utama. (Bisa berupa bidang penurunan harga, teks kaya, atau string) |
| jenis | opsional | Tetapkan nilai secara manual untuk bidang "ketik" di materi depan (lihat dokumen Hugo) |
| penyelesaianEntri | opsional | Selesaikan bidang referensi dan/atau bidang aset tertentu ke salah satu parameter propertinya |
| menimpa | opsional | Lakukan penggantian khusus untuk nilai bidang atau nama bidang |
| filter | opsional | Menerima objek parameter pencarian Contentful untuk memfilter hasil. Lihat Dokumen yang berisi |
| abaikan Lokal | opsional | Abaikan pengaturan pelokalan dan hanya tarik dari lokal default (defaultnya salah) |
| bidang khusus | opsional | Menerima objek bidang dan nilai. Nilai dapat berupa nilai statis standar atau fungsi yang menerima entri Contentful sebagai parameter dan mengembalikan nilai |
| bidang | diperlukan | keterangan |
|---|---|---|
| pengenal | diperlukan | ID tipe konten yang berisi |
| direktori | diperlukan | Direktori tempat Anda ingin file dibuat |
| Nama file | opsional | Entry property yang akan mencatat nama file. (Secara default ini adalah sys.id ) |
| ekstensi file | opsional | Dapat berupa "md", "yml", "yaml", atau "json" (defaultnya adalah "md") |
| adalah Tanpa Kepala | opsional | Mengubah semua entri dalam tipe konten menjadi kumpulan daun tanpa kepala (lihat dokumen Hugo). Tidak dapat disetel ke true bila isTaxonomy disetel ke true. |
| isTaxonomy (Eksperimental) | opsional | Atur entri dalam struktur file yang memungkinkan metadata taksonomi khusus (lihat dokumen Hugo). Tidak dapat disetel ke true bila isHeadless disetel ke true. |
| Konten utama | opsional | ID Bidang untuk bidang yang ingin Anda jadikan konten penurunan harga utama. (Bisa berupa bidang penurunan harga, teks kaya, atau string) |
| jenis | opsional | Tetapkan nilai secara manual untuk bidang "ketik" di materi depan (lihat dokumen Hugo) |
| penyelesaianEntri | opsional | Selesaikan bidang referensi dan/atau bidang aset tertentu ke salah satu propertinya |
| menimpa | opsional | Lakukan penggantian khusus untuk nilai bidang atau nama bidang |
| filter | opsional | Menerima objek parameter pencarian Contentful untuk memfilter hasil. Lihat Dokumen yang berisi |
| abaikan Lokal | opsional | Abaikan pengaturan pelokalan dan hanya tarik dari lokal default (defaultnya salah) |
| bidang khusus | opsional | Menerima objek bidang dan nilai. Nilai dapat berupa nilai statis standar atau fungsi yang menerima entri Contentful sebagai parameter dan mengembalikan nilai |
Konfigurasi ini juga memiliki bidang locales yang memungkinkan Anda menentukan lokal mana yang ingin Anda ambil. Bidang ini dapat berisi larik string, larik objek, atau kombinasi.
Secara default, ekstensi file spesifik lokal akan digunakan untuk beberapa terjemahan.
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
} )Setelah mengonfigurasi lokal di Contentful Hugo, Anda perlu memperbarui konfigurasi Hugo Anda untuk memperhitungkan lokal tersebut. Konsultasikan dokumen Hugo untuk lebih jelasnya.
# config.toml
[ languages ]
[ languages . en-us ]
# language settings
[ languages . fr-fr ]
# language settings Terkadang ada kasus di mana Anda ingin menempatkan konten dalam direktori berdasarkan lokalnya daripada menggunakan terjemahan berbasis ekstensi file. Untuk melakukan ini, Anda cukup memasukkan [locale] ke dalam jalur file direktori Anda.
Saat menggunakan direktori spesifik lokal, ekstensi file spesifik lokal (yaitu en.md atau fr.md ) akan dihapus
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
*/
} ,
] ,
} ) ; Penyiapan yang disarankan untuk Contentful Hugo adalah membiarkan direktori konten Anda (biasanya ./content ) dan data (biasanya ./data ) diabaikan dalam kontrol versi. Ini karena contentful-hugo akan membuat direktori ini pada waktu pembuatan. Namun, hal ini menimbulkan masalah jika Anda memiliki halaman yang tidak dikelola di Contentful dan tidak dibuat pada waktu pembuatan oleh sumber lain.
Untuk mengatasi masalah ini Contentful-Hugo memiliki parameter staticContent . Parameter ini menerima direktori masukan ( inputDir ) yang dapat dikomit ke git, dan direktori keluaran ( outputDir ) yang akan menjadi direktori konten atau data standar Anda. Semua item di inputDir akan disalin ke outputDir pada waktu pembuatan dan akan mempertahankan struktur foldernya.abs
Misalnya pada konfigurasi di bawah ini ./static_content/posts/my-post.md akan disalin ke ./content/posts/my-post.md , dan ./static_data/global-settings.yaml akan disalin ke ./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 juga akan memperhatikan perubahan file di inputDir saat berjalan dalam mode server.
Berikut adalah contoh mengubah opsi token , previewToken , dan environment secara dinamis bergantung pada kondisi apa pun.
// 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
}
}
} ]
}
]
} ) Untuk file konfigurasi JS Anda dapat menggunakan helper defineConfig atau Anda dapat mengimpor tipe 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
} ; Contoh pengaturan .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
dataFile akan dihasilkan di direktori yang ditentukan dalam file konfigurasi. Materi depan akan dalam format YAML. File bertipe tunggal akan diberi nama berdasarkan nama file yang ditentukan dalam file konfigurasi. File dengan tipe berulang akan diberi nama berdasarkan ID entrinya di Contentful, yang memudahkan untuk menautkan file bersama.
Bidang berikut akan selalu muncul di frontmatter Anda:
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 idAset seperti gambar dan video dilengkapi dengan beberapa informasi tambahan yang memudahkan penerapan hal-hal seperti teks alternatif atau tata letak yang mengandalkan pengetahuan dimensi gambar. Bidangnya adalah sebagai berikut:
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)Jika Anda menggunakan Hugo Anda dapat mengakses informasi seperti di bawah ini:
< img
src =" {{ .Params.assetFieldName.url }} "
width =" {{ .Params.assetFieldName.width }} "
/>Untuk gambar, Anda dapat menambahkan parameter ke url aset untuk memanfaatkan api gambar Contentful
< img
src =" {{ .Params.assetFieldname.url }}?w=200&h=200&fit=fill "
width =" 200 "
height =" 200 "
/>Informasi yang sama juga akan muncul dalam susunan aset seperti galeri:
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 : 1080Entri tertaut akan menyertakan bidang untuk id dan id tipe kontennya.
linkedEntry :
id : <contentful-entry-id>
typeId : <content-type-ID>
# example with array of linked entries
relatedArticles :
- id : ' 41UFfIhszbS1kh95bomMj7 '
typeId : ' articles '
- id : ' 85UFfIhsacS1kh71bpqMj7 '
typeId : ' articles ' Semua file diberi nama berdasarkan id entrinya di Contentful sehingga memudahkan untuk mengambilnya menggunakan .Site.GetPage di 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 }}Contoh sederhana
{{ with . Params . myEntryField }}
{{ $ pagePage := print "path/to/entryDir/" . id }}
{{ with site. GetPage $ pagePath }}
{{ . Title }}
{{ . Params . someOtherField }}
{{ end }}
{{ end }}Dokumentasi yang Relevan:
Bidang teks kaya yang ditetapkan sebagai "Konten utama" untuk tipe konten akan dirender sebagai penurunan harga untuk Hugo.
Konten dinamis seperti embedded-entry-blocks dirender sebagai kode pendek dengan menyertakan parameter yang dapat digunakan untuk mengambil data yang diperlukan.
<!-- 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" >}} Sebelum mengambil data teks kaya, pastikan Anda telah menjalankan contentful-hugo --init sehingga Anda memiliki semua kode pendek teks kaya. Setelah Anda memiliki kode pendek ini, Anda dapat memperluas dan memodifikasinya sesuai kebutuhan Anda.
Daftar kode pendek teks kaya meliputi:
Secara default, kode pendek richtext akan menampilkan pemberitahuan untuk item yang belum dikonfigurasi.
Anda dapat menyesuaikannya dengan membuka layouts/shortcodes/contentful-hugo/{shortcode-name}.html
Bidang teks kaya akan menghasilkan array bersarang yang mencerminkan struktur JSON yang ada di API. Setiap node perlu diulang dan menghasilkan HTML bergantung pada bidang 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 : []Selain itu, versi teks biasa dari bidang tersebut akan dibuat menggunakan ID bidang yang ditambahkan dengan "_plaintext". Ini memungkinkan Anda dengan cepat mengambil teks itu sendiri tanpa data lainnya. Kasus penggunaan sederhana adalah menggunakan keluaran teks biasa untuk secara otomatis menghasilkan deskripsi meta untuk halaman web.
richTextField_plaintext : ' This is a simple paragraph. This is a paragraph with italicized text. ' Opsi penyelesaian entri memungkinkan Anda menentukan properti dari entri atau aset yang direferensikan untuk menentukan nilai bidang tersebut. Misalnya, Anda memiliki tipe konten category yang direferensikan dalam posts . Biasanya contentful-hugo akan memberikan hasil sebagai berikut
category :
id : some-entry-id
contentType : category Meskipun ini memudahkan untuk menemukan kategori, format ini tidak memungkinkan Anda menggunakan fitur taksonomi bawaan Hugo. Dengan parameter resolveEntries Anda dapat mengatasinya.
// 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' ,
} ,
] ,
]
} )Sekarang bidang kategori hanya akan menampilkan slug sebagai nilainya.
category : my-category-slugFitur entri penyelesaian berfungsi dengan bidang referensi dan bidang aset, serta beberapa bidang referensi dan beberapa aset.
Penggantian dapat digunakan untuk mengubah nama bidang dan nilai bidang.
Berikut contoh sederhana mengubah nama field dari "url" menjadi "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 juga memiliki opsi valueTransformer yang memungkinkan Anda memanipulasi data bidang yang akan muncul di frontmatter. valueTransformer mengambil metode yang memiliki nilai bidang sebagai parameter dan kemudian mengembalikan hasil akhir yang akan muncul di frontmatter. (Perhatikan bahwa karena valueTransformer harus berupa metode, opsi ini hanya akan berfungsi di file konfigurasi javascript)
Berikut ini contoh di mana kita mengubah nama field dari "url" menjadi "videoId" dan kemudian kita menggunakan valueTransformer untuk mengekstrak id video dari url dan kemudian menempatkannya di frontmatter.
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
} ,
} ,
} ,
] ,
} ,
] ; Saat menggunakan opsi valueTransformer pada bidang yang berisi array, pastikan untuk mengulang nilai saat memanipulasinya.
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 ;
} ,
} ,
} ,
} ,
] ; Sekarang bidang authors akan terlihat seperti ini:
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 Seperti yang Anda lihat, ini dapat digunakan untuk menghasilkan hasil yang serupa dengan parameter resolveEntries , tetapi resolveEntries hanya dapat mengembalikan satu properti sementara dengan override Anda dapat melakukan apa pun yang Anda inginkan dengan nilai bidang.
Anda dapat menggunakan opsi filters untuk memasukkan parameter pencarian yang memungkinkan Anda memfilter entri berdasarkan beberapa propertinya. Untuk info lebih lanjut tentang parameter pencarian Contentful, kunjungi dokumen mereka.
Ketahuilah bahwa parameter pencarian berikut akan diabaikan 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'
} ,
} ,
] ;
} ) Anda dapat menggunakan parameter customFields untuk menambahkan kolom tambahan ke entri Anda. Konfigurasi untuk bidang khusus dapat berupa nilai statis atau metode yang menerima entri Contentful sebagai parameter dan mengembalikan nilai.
Katakanlah kita memiliki tipe konten penulis dengan bidang berikut:
Berikut ini contoh konfigurasi:
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 } ` ;
} ,
} ,
} ,
] ,
} ) ;Inilah hasil konfigurasi itu
---
firstName : ' John '
lastName : ' Doe '
slug : ' john-doe '
myCustomField : ' myCustomFieldValue ' # custom field
fullName : ' John Doe ' # custom field
---Anda juga dapat menggunakan ini untuk bidang khusus Hugo seperti Opsi Bangun
// 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
}
}
} Ini adalah beberapa masalah yang diketahui.
--wait ke skrip Anda. Berikut ini contoh di mana kita menunggu tambahan 6 detik contentful-hugo --wait=6000 .hugo server --disableFastRender
