contentful hugo
v4.1.0
這是一個 CLI 工具，可以從 Contentful CMS 中提取資料並將其轉換為 Markdown 或 YAML 文件，以便與靜態站點生成器一起使用。它可以與任何使用 Markdown 和 YAML frontmatter 的靜態站點產生器一起使用，但它具有一些特定於 Hugo 的功能。它還包括一個簡單的 Express 伺服器，可以從 Contentful 接收 Webhooks 以重新觸發獲取和刪除命令（在運行預覽環境時很有用）。
安裝 Node.js（最低支援版本是 Node v18）
與 NPM
# 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 ]| 旗幟 | 別名 | 描述 |
|---|---|---|
| --初始化 | 初始化目錄。為內容豐富的富文本欄位產生設定檔和預設短代碼 | |
| - 預覽 | -P | 在預覽模式下運行，從 Contentful 中提取已發布和未發布的條目 |
| - 等待 | -W | 等待指定的毫秒數，然後再從 Contentful 中擷取資料。 |
| --配置 | -C | 指定設定檔的路徑。 |
| --伺服器 | -S | 在伺服器模式下運行以接收來自 Contentful 的 Webhooks |
| - 港口 | 指定伺服器模式的連接埠（預設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' ,
} ,
] ,
} ) ; javascript 配置與 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 | 場地 | 必需的 | 描述 |
|---|---|---|
| 空間 | 選修的 | 內容空間 ID（如果未設置，則預設為 CONTENTFUL_SPACE 環境變數） |
| 代幣 | 選修的 | 內容交付令牌（如果未設定，則預設為 CONTENTFUL_TOKEN 環境變數） |
| 預覽令牌 | 選修的 | 內容預覽令牌（如果未設定，則預設為 CONTENTFUL_PREVIEW_TOKEN 環境變數） |
| 環境 | 選修的 | 內容豐富的環境 ID（如果未設置，則預設為“master”） |
| 場地 | 必需的 | 描述 |
|---|---|---|
| ID | 必需的 | 內容內容類型 ID |
| 目錄 | 必需的 | 您想要產生檔案的目錄 |
| 檔案名稱 | 必需的 | 產生的檔案名 |
| 檔案副檔名 | 選修的 | 可以是“md”、“yml”、“yaml”或“json”（預設為“md”） |
| 主要內容 | 選修的 | 您想要作為主要 Markdown 內容的欄位的欄位 ID。 （可以是 markdown、richtext 或字串欄位） |
| 類型 | 選修的 | 手動設定 frontmatter 中「type」欄位的值（請參閱hugo 文件） |
| 解析條目 | 選修的 | 將指定的引用欄位和/或資產欄位解析為其屬性參數之一 |
| 覆蓋 | 選修的 | 對欄位值或欄位名稱進行自訂覆蓋 |
| 過濾器 | 選修的 | 接受內容搜尋參數的物件來過濾結果。查看內容豐富的文檔 |
| 忽略語言環境 | 選修的 | 忽略本地化設置，僅從預設區域設定中提取（預設為 false） |
| 自訂字段 | 選修的 | 接受欄位和值的物件。這些值可以是標準靜態值，也可以是接受 Contentful 條目作為參數並傳回值的函數 |
| 場地 | 必需的 | 描述 |
|---|---|---|
| ID | 必需的 | 內容內容類型 ID |
| 目錄 | 必需的 | 您想要產生檔案的目錄 |
| 檔案名稱 | 選修的 | 將指示檔案名稱的條目屬性。 （預設情況下，這將是sys.id ） |
| 檔案副檔名 | 選修的 | 可以是“md”、“yml”、“yaml”或“json”（預設為“md”） |
| 是無頭的 | 選修的 | 將內容類型中的所有條目轉換為無頭葉束（請參閱hugo 文件）。當 isTaxonomy 設定為 true 時，無法設定為 true。 |
| isTaxonomy（實驗） | 選修的 | 在文件結構中組織條目，允許自訂分類元資料（請參閱hugo 文件）。當 isHeadless 設定為 true 時，無法設定為 true。 |
| 主要內容 | 選修的 | 您想要作為主要 Markdown 內容的欄位的欄位 ID。 （可以是 markdown、richtext 或字串欄位） |
| 類型 | 選修的 | 手動設定 frontmatter 中「type」欄位的值（請參閱hugo 文件） |
| 解析條目 | 選修的 | 將指定的引用欄位和/或資產欄位解析為其屬性之一 |
| 覆蓋 | 選修的 | 對欄位值或欄位名稱進行自訂覆蓋 |
| 過濾器 | 選修的 | 接受內容搜尋參數的物件來過濾結果。查看內容豐富的文檔 |
| 忽略語言環境 | 選修的 | 忽略本地化設置，僅從預設區域設定中提取（預設為 false） |
| 自訂字段 | 選修的 | 接受欄位和值的物件。這些值可以是標準靜態值，也可以是接受 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參數。此參數接受可提交至 git 的輸入目錄 ( inputDir ) 和標準內容或資料目錄的輸出目錄 ( outputDir )。 inputDir 中的所有項目都將在建置時複製到 outputDir 中，並保留其資料夾結構。
例如，在下面的配置中./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 中的檔案變更。
以下是根據任意條件動態變更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 格式。單一類型的檔案將以設定檔中指定的檔案名稱命名。可重複類型的檔案將以其在 Contenful 中的條目 ID 命名，這樣可以輕鬆地將檔案連結在一起。
以下欄位將始終出現在您的 frontmatter 中：
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 的圖像 api
< 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連結條目將包含其 id 和內容類型 id 欄位。
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 中的條目 ID 命名，從而可以使用 Hugo 中的.Site.GetPage輕鬆檢索它
// 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 }}相關文件：
設定為內容類型的「mainContent」的富文本欄位將呈現為 Hugo 的 markdown。
諸如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" >}}在獲取富文本資料之前，請確保您已執行contentful-hugo --init ，以便您將擁有所有富文本短代碼。獲得這些短代碼後，您可以擴展和修改它們以滿足您的需求。
富文本短代碼清單包括：
預設情況下，富文本短代碼將顯示未配置項目的通知。
您可以透過導覽至layouts/shortcodes/contentful-hugo/{shortcode-name}.html來自訂它們
富文本欄位將產生反映 API 中 JSON 結構的巢狀數組。每個節點都需要循環並根據 nodeType 欄位產生 HTML。
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」的欄位 ID 產生該欄位的純文字版本。這使您可以快速獲取文字本身，而無需任何其他資料。一個簡單的用例是使用純文字輸出自動產生網頁的元描述。
richTextField_plaintext : ' This is a simple paragraph. This is a paragraph with italicized text. '解析條目選項可讓您指定引用條目或資產中的屬性以解析該欄位值。例如，假設您有一個在posts中引用的category內容類型。通常 contentful-hugo 會給出以下結果
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' ,
} ,
] ,
]
} )現在，類別欄位將僅將 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採用以欄位值作為參數的方法，然後傳回將出現在 frontmatter 中的最終結果。 （請注意，由於valueTransformer必須是一個方法，因此該選項僅適用於 javascript 設定檔）
下面是一個範例，我們將欄位名稱從“url”變更為“videoId”，然後使用valueTransformer從 url 中提取影片 id，然後將其放在 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
} ,
} ,
} ,
] ,
} ,
] ;在包含陣列的欄位上使用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選項來輸入搜尋參數，從而允許您根據條目的某些屬性來過濾條目。有關內容搜尋參數的更多信息，請訪問他們的文檔。
請注意，以下搜尋參數將被忽略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 特定字段，例如建置選項
// 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=6000 。hugo server --disableFastRender
