contentful hugo
v4.1.0
これは、Contentful CMS からデータを取得し、それを静的サイト ジェネレーターで使用するための Markdown または YAML ファイルに変換する CLI ツールです。これは、YAML フロントマターで Markdown を使用する静的サイト ジェネレーターで使用できますが、Hugo に固有の機能がいくつかあります。また、Contentful から Webhook を受信して、取得コマンドと削除コマンドを再トリガーできるシンプルな Express サーバーも含まれています (プレビュー環境を実行するときに役立ちます)。
Node.js をインストールします (サポートされる最小バージョンは Node v18)
NPMと
# local install
npm install contentful-hugo
# global install
npm install contentful-hugo -gPNPMを使用
# 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 | ディレクトリを初期化します。コンテンツフル リッチ テキスト フィールドの構成ファイルとデフォルトのショートコードを生成します。 | |
| --プレビュー | -P | プレビュー モードで実行され、公開済みエントリと未公開エントリの両方が Contentful から取得されます。 |
| - 待って | -W | Contentful からデータを取得する前に、指定されたミリ秒数待機します。 |
| --config | -C | 設定ファイルへのパスを指定します。 |
| - サーバ | -S | サーバー モードで実行して Contentful から Webhook を受信します |
| - ポート | サーバーモードのポートを指定します (デフォルトは 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。 (マークダウン、リッチテキスト、または文字列フィールドを使用できます) |
| タイプ | オプション | フロントマターの「type」フィールドの値を手動で設定します（hugo docsを参照） |
| 解決エントリ | オプション | 指定された参照フィールドやアセット フィールドをそのプロパティ パラメータの 1 つに解決します。 |
| オーバーライド | オプション | フィールド値またはフィールド名のカスタム オーバーライドを行う |
| フィルター | オプション | Contentful 検索パラメータのオブジェクトを受け入れて、結果をフィルタリングします。内容の充実したドキュメントを参照 |
| ロケールを無視する | オプション | ローカリゼーション設定を無視し、デフォルトのロケールからのみ取得します (デフォルトは false)。 |
| カスタムフィールド | オプション | フィールドと値のオブジェクトを受け入れます。値は、標準の静的な値、または Contentful エントリをパラメータとして受け入れて値を返す関数にすることができます。 |
| 分野 | 必須 | 説明 |
|---|---|---|
| ID | 必須 | コンテンツフルコンテンツタイプID |
| ディレクトリ | 必須 | ファイルを生成するディレクトリ |
| ファイル名 | オプション | ファイル名を決定するエントリ プロパティ。 (デフォルトでは、これはsys.idになります) |
| ファイル拡張子 | オプション | 「md」、「yml」、「yaml」、または「json」を指定できます（デフォルトは「md」） |
| ヘッドレスです | オプション | コンテンツ タイプ内のすべてのエントリをヘッドレス リーフ バンドルに変換します (hugo ドキュメントを参照)。 isTaxonomy が true に設定されている場合は true に設定できません。 |
| isTaxonomy (実験的) | オプション | カスタム分類メタデータを可能にするファイル構造内のエントリを整理します (hugo ドキュメントを参照)。 isHeadless が true に設定されている場合は、true に設定できません。 |
| メインコンテンツ | オプション | メインのマークダウン コンテンツにするフィールドのフィールド ID。 (マークダウン、リッチテキスト、または文字列フィールドを使用できます) |
| タイプ | オプション | フロントマターの「type」フィールドの値を手動で設定します（hugo docsを参照） |
| 解決エントリ | オプション | 指定された参照フィールドやアセット フィールドをそのプロパティの 1 つに解決します。 |
| オーバーライド | オプション | フィールド値またはフィールド名のカスタム オーバーライドを行う |
| フィルター | オプション | Contentful 検索パラメータのオブジェクトを受け入れて、結果をフィルタリングします。内容の充実したドキュメントを参照 |
| ロケールを無視する | オプション | ローカリゼーション設定を無視し、デフォルトのロケールからのみ取得します (デフォルトは 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にコピーされます。 ./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形式となります。単一タイプのファイルには、構成ファイルで指定された fileName に基づいて名前が付けられます。繰り返し可能なタイプのファイルには、Contenful のエントリ ID に基づいた名前が付けられるため、ファイルを簡単にリンクできます。
次のフィールドは常にフロントマターに表示されます。
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 }} "
/>画像の場合、Contentful の画像 API を利用するために、アセット URL にパラメータを追加できます。
< 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 のマークダウンとしてレンダリングされます。
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 を使用して、フィールドのプレーンテキスト バージョンが生成されます。これにより、他のデータを使用せずにテキストだけをすばやくフェッチできます。単純な使用例は、プレーンテキスト出力を使用して Web ページのメタディスクリプションを自動的に生成することです。
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' ,
} ,
] ,
]
} )これで、カテゴリフィールドには値としてスラッグのみが表示されます。
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 frontmatter に表示されるフィールド データを操作できるvalueTransformerオプションもあります。 valueTransformerフィールド値をパラメータとして持つメソッドを受け取り、フロントマターに表示される最終結果を返します。 ( valueTransformerメソッドである必要があるため、このオプションは JavaScript 構成ファイルでのみ機能することに注意してください)
以下は、フィールド名を「url」から「videoId」に変更し、 valueTransformer使用して URL からビデオ ID を抽出し、それをフロントマターに配置する例です。
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が返すことができるプロパティは 1 つだけですが、オーバーライドを使用すると、フィールド値に対して何でもできるようになります。
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 固有のフィールドにも使用できます。
// 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を実行します。
