외부 콘텐츠로 정적인 웹사이트를 만들어 봅시다.
이 게시물에서는 GatsbyJS를 사용하여 모든 데이터 소스의 데이터를 정적 렌더링하는 방법을 보여 드리겠습니다.
React를 즐기고 표준을 준수하는 고성능 웹을 원한다면 GatsbyJS를 살펴보세요.
무슨 일을 하나요?
React 코드를 정적 HTML 파일 모음으로 컴파일합니다.
왜 관심을 가져야 합니까?
GatsbyJS는 콘텐츠를 노드 트리로 표현합니다. 노드는 이미지일 수도 있고 텍스트 블록일 수도 있습니다.
예를 들어 블로그 게시물은 텍스트 및 이미지 노드의 모음입니다.
gatsby-node.js 파일에서 직접 노드를 생성할 수 있습니다. 하지만 더 쉬운 방법이 있습니다.
노드는 플러그인에 의해 생성됩니다. 필요한 플러그인은 선택한 CMS에 따라 다릅니다.
가장 간단한 옵션은 파일을 노드로 변환하는 파일 시스템 플러그인입니다.
귀하에게 적합한 플러그인을 찾으려면 여기를 살펴보세요
기존 플러그인에서 다루지 않는 데이터 소스가 있다면 직접 구축해보세요.
과정은 상당히 간단하며, 복잡한 부분은 이미지뿐입니다.
gatsby 프로젝트 루트 폴더에 gatsby-node.ts(또는 js) 파일을 생성합니다.
시작하려면 이 코드를 추가하세요. gatsby 프로젝트가 빌드되면 sourceNodes 메소드가 자동으로 호출됩니다.
import { GatsbyNode } from "gatsby" import { createRemoteFileNode } from "gatsby-source-filesystem" export const sourceNodes: GatsbyNode["sourceNodes"] = async ({ actions: { createNode }, createNodeId, createContentDigest, store, cache, }) => { }
이제 데이터를 가져오겠습니다. 여기서는 https://inuko.net 앱 플랫폼을 사용하지만 프로세스는 모든 소스에서 유사합니다.
interface IPost { id: string; title: string; content: string; image_id: string; } const fetchPosts = async () => { const postQuery = { entity: { name: "cms_content", allattrs: true, links: [{ name: "cms_site", from: "siteid", to: "id", alias: "cs", filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] } }] } }; const posts = await fetchJson("/api/fetch", postQuery) as IPost[]; return posts; }
그리고 필요한 이미지도 가져오겠습니다.
interface IImage { id: string; name: string; // sunset.jpg image_url: string; // https://sample.com/54565735235464322 } const fetchImages = async () { const imageQuery = { entity: { name: "cms_image", allattrs: true, links: [{ name: "cms_site", from: "siteid", to: "id", alias: "cs", filter: { conditions: [{ attribute: "name", operator: "eq", value: "NAME_OF_MY_WEB" }] } }] } }; const images = await fetchJson("/api/fetch", imageQuery) as IImage[]; return images; }
이제 (블로그) 게시물 목록과 이미지(링크) 목록이 생겼습니다.
이 예에서는 각 게시물에 일부 텍스트 콘텐츠와 단일 이미지의 ID가 있는 간단한 구조가 있습니다.
다음 단계는 서버에서 가져온 데이터를 개츠비가 사용할 수 있는 데이터로 변환하는 것입니다.
gatsby의 데이터는 *노드*로 표현되므로 서버 데이터를 노드로 변환하는 방법을 살펴보겠습니다.
export const sourceNodes: GatsbyNode["sourceNodes"] = async ({ actions: { createNode }, createNodeId, createContentDigest, store, cache, }) => { const posts = await fetchPosts(); const images = await fetchImages(); // create an object for image by id lookup const imageDict = images.reduce((d, c) => (d[c.id] = c, d), {} as { [name: string]: IImage }); for (const post of posts) { // create a node from post const postNodeId = createNodeId(`XPost-${post.id}`) if (post.image_id && imageDict[post.image_id]) { const image = imageDict[post.image_id]; const name = image.name; const url = image.image_url; const fileNode = await createRemoteFileNode({ url: url, //store, cache, createNode, createNodeId, // !!! important !!! // If your image url does not have a valid image extension, this will tell the system what type of image we are adding ext: name.substring(name.lastIndexOf(".")), }); post.mediaFile___NODE = fileNode.id post.internalId = post.id; // copy our internal post. id is replaced by gatsbyjs const nodeMeta = { id: postNodeId, parent: null, children: [], internal: { type: `XPosts`, mediaType: `text/json`, content: JSON.stringify(post), contentDigest: createContentDigest(post), }, } createNode(Object.assign({}, post, nodeMeta)) } } }
모든 게시물을 반복하고 각 게시물에 해당하는 노드를 만듭니다.
게시물에 post.image_id 이미지가 있으면 우리는 또한 remoteFileNode 노드를 생성하고
포스트 노드에 추가하세요
post.mediaFile___NODE = fileNode.id
중요 참고: gatsby는 파일 노드에서 자동으로 이미지 노드를 생성하지만 그것이 이미지인지 감지하는 방법이 필요합니다.
URL에 파일 확장자가 포함되어 있거나 서버가 이미지 콘텐츠 유형으로 응답하면 모든 준비가 완료된 것입니다.
그렇지 않은 경우 파일 노드(png, jpg)에 명시적인 확장자를 설정하여 이미지 노드 생성을 트리거할 수 있습니다.
확장자: name.substring(name.lastIndexOf("."))
왜 우리가 이미지를 노드로 로딩하는 수고를 하는지 궁금하실 것입니다. 이미지 URL을 직접 사용할 수도 있습니다.
예를 들어 인증된 서비스 뒤에 이미지가 있을 수도 있습니다.
하지만 진짜 이유는 gatsby가 제공하는 환상적인 이미지 플러그인을 사용하고 싶기 때문입니다.
웹을 보는 모든 장치에 가장 적합한 형식과 크기로 이미지를 자동으로 변환합니다.
이는 이미지가 더 빨리 로드되고 더 좋아 보일 것임을 의미합니다(그리고 Google에서 더 나은 점수를 얻습니다:).
이제 생성한 노드를 사용할 준비가 되었습니다.
이를 수행할 수 있는 방법은 다양합니다. 이 예에서는 몇 가지 게시물을 기능 페이지
먼저 관심 있는 데이터 노드를 로드해야 합니다. useStaticQuery를 사용하겠습니다.
그런 다음 로드된 모든 게시물을 렌더링하는 재사용 가능한 구성 요소인 SectionGrid에 데이터를 전달합니다.
const FeaturePage = (props:{}) => { const data = useStaticQuery(graphql` query featuresQueryEn { allXPosts( filter: {language: {eq: "en"}, pageid: {label: {eq: "features"}}} sort: {position: ASC} ) { edges { node { id content title mediaFile { childImageSharp { gatsbyImageData } } } } } } `); return <SectionGrid data={data} title={<h1>Features</h1>} /> }
렌더링 시간!
import { Link } from "gatsby"; import { GatsbyImage } from "gatsby-plugin-image"; import React from "react"; export const SectionGrid = (props: {data: any, title: string}) => { const edges = props.data.allXPosts.edges as any[]; return <div className="sectionGrid"> <div className="hero"> {props.title} </div> {edges.map(edge => { const node = edge.node; return <div className="section"> <div> <GatsbyImage image={node.mediaFile.childImageSharp.gatsbyImageData} alt={edge.name} /> </div> <div className="sectionText"> <h2>{node.title}</h2> <div>{node.content}</div> </div> </div> })} </div> }
이 구성 요소는 쿼리에서 얻은 모든 노드를 반복합니다. 그리고 게시물 이미지용 div와 텍스트 콘텐츠용 div 두 개를 렌더링합니다.
멋지고 성능이 뛰어난 웹사이트를 구축하는 것이 그 어느 때보다 쉬워졌습니다.
Gatsbyjs(및 해당 플러그인)와 같은 도구는 우리를 위해 대부분의 어려운 작업을 수행합니다.
따라서 우리는 콘텐츠와 디자인에 100% 시간을 할애할 수 있습니다.
이 게시물을 통해 귀하의 작업 흐름을 더욱 자동화할 수 있기를 바랍니다.
이제 제품 카탈로그, 지식 기반 또는 기타 귀중한 콘텐츠를 웹사이트로 가져올 수 있습니다.
복사-파스타가 없고 완전 자동화된 이미지 처리가 가능합니다.
즐거운 해킹되세요!
위 내용은 GatsbyJS용 외부 콘텐츠의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!