contentful hugo
v4.1.0
이는 Contentful CMS에서 데이터를 가져와 정적 사이트 생성기와 함께 사용할 수 있도록 Markdown 또는 YAML 파일로 변환하는 CLI 도구입니다. YAML 프론트매터와 함께 Markdown을 사용하는 모든 정적 사이트 생성기와 함께 사용할 수 있지만 Hugo에만 해당되는 일부 기능이 있습니다. 또한 Contentful에서 웹후크를 수신하여 명령 가져오기 및 삭제를 다시 트리거할 수 있는 간단한 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 | 디렉터리를 초기화합니다. 콘텐츠가 풍부한 서식 있는 텍스트 필드에 대한 구성 파일 및 기본 단축 코드를 생성합니다. | |
| --시사 | -피 | Contentful에서 게시된 항목과 게시되지 않은 항목을 모두 가져오는 미리보기 모드에서 실행됩니다. |
| --기다리다 | -W | Contentful에서 데이터를 가져오기 전에 지정된 밀리초 동안 기다리십시오. |
| --config | -기음 | 구성 파일의 경로를 지정합니다. |
| --섬기는 사람 | -에스 | 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를 사용하여 콘텐츠가 있는 데이터를 가져온 다음 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(설정되지 않은 경우 기본값은 '마스터') |
| 필드 | 필수의 | 설명 |
|---|---|---|
| ID | 필수의 | 콘텐츠가 포함된 콘텐츠 유형 ID |
| 예배 규칙서 | 필수의 | 파일을 생성할 디렉터리 |
| 파일 이름 | 필수의 | 생성된 파일 이름 |
| 파일 확장자 | 선택 과목 | "md", "yml", "yaml" 또는 "json"일 수 있습니다(기본값은 "md"). |
| 주요내용 | 선택 과목 | 기본 Markdown 콘텐츠가 될 필드의 필드 ID입니다. (마크다운, 서식 있는 텍스트 또는 문자열 필드일 수 있음) |
| 유형 | 선택 과목 | 머리말의 "type" 필드 값을 수동으로 설정합니다(hugo 문서 참조). |
| 항목 해결 | 선택 과목 | 지정된 참조 필드 및/또는 자산 필드를 해당 속성 매개변수 중 하나로 확인합니다. |
| 재정의 | 선택 과목 | 필드 값 또는 필드 이름에 대한 사용자 정의 재정의 수행 |
| 필터 | 선택 과목 | 결과를 필터링하기 위해 콘텐츠가 포함된 검색 매개변수의 개체를 허용합니다. 콘텐츠가 풍부한 문서 보기 |
| 로케일 무시 | 선택 과목 | 현지화 설정을 무시하고 기본 로캘에서만 가져옵니다(기본값은 false) |
| 사용자 정의 필드 | 선택 과목 | 필드와 값의 개체를 허용합니다. 값은 표준 정적 값이거나 Contentful 항목을 매개변수로 받아들이고 값을 반환하는 함수일 수 있습니다. |
| 필드 | 필수의 | 설명 |
|---|---|---|
| ID | 필수의 | 콘텐츠가 포함된 콘텐츠 유형 ID |
| 예배 규칙서 | 필수의 | 파일을 생성할 디렉터리 |
| 파일 이름 | 선택 과목 | 파일 이름을 나타내는 항목 속성입니다. (기본적으로 sys.id 입니다) |
| 파일 확장자 | 선택 과목 | "md", "yml", "yaml" 또는 "json"일 수 있습니다(기본값은 "md"). |
| 헤드리스 | 선택 과목 | 콘텐츠 유형의 모든 항목을 헤드리스 리프 번들로 변환합니다(hugo 문서 참조). isTaxonomy가 true로 설정된 경우 true로 설정할 수 없습니다. |
| isTaxonomy(실험적) | 선택 과목 | 사용자 정의 분류 메타데이터를 허용하는 파일 구조로 항목을 구성합니다(hugo 문서 참조). isHeadless가 true로 설정된 경우 true로 설정할 수 없습니다. |
| 주요내용 | 선택 과목 | 주요 마크다운 콘텐츠가 될 필드의 필드 ID입니다. (마크다운, 서식 있는 텍스트 또는 문자열 필드일 수 있음) |
| 유형 | 선택 과목 | 머리말의 "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에 복사되며 해당 폴더 구조를 유지합니다.abs
예를 들어 아래 구성에서 ./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를 사용하여 필드의 일반 텍스트 버전이 생성됩니다. 이를 통해 다른 데이터 없이 텍스트 자체를 빠르게 가져올 수 있습니다. 간단한 사용 사례는 일반 텍스트 출력을 사용하여 웹페이지에 대한 메타 설명을 자동으로 생성하는 것입니다.
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 머리말에 나타날 필드 데이터를 조작할 수 있는 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 하나의 속성만 반환할 수 있는 반면 재정의를 사용하면 필드 값으로 원하는 모든 작업을 수행할 수 있습니다.
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 플래그를 추가하세요. 다음은 추가 contentful-hugo --wait=6000 6초를 기다리는 예입니다.hugo server --disableFastRender 를 실행하세요.
