$$config title: [gatsby] 블로그 만들기 06-02 keywords: - IT - gatsby $$ # 페이지 템플릿에서 영웅 이미지 렌더링 - 무료 이미지 다운 사이트 https://unsplash.com/ - gatsby-transformer-sharp 설치 ``` npm install gatsby-transformer-sharp ``` Gatsby가 빌드 시 데이터 계층에 노드를 추가할 때 gatsby-transformer-sharp플러그인은 이미지 확장자( 또는 와 File같은)로 끝나는 노드를 찾고 해당 파일에 대한 노드를 생성 합니다..png.jpgImageSharp 이미지의 뭐본이 아닌 새로 node 만들어 불러오는 것이 이다.원본의 용량이 큰 이미지 원보을 블러올경우 사이트에서 작게 만든다 하더라도 블러오는데 시간이 걸리지만 위같은 경우 비교적 빠르다. gatsby-config.js파일에 plugins: `[` 안에 ``` "gatsby-transformer-sharp", ``` 를 추가한다. - mdx파일 이름,내용,경로 변경 mdx 파일에 이름으로 세로운 파일을 만든 후 mdx의 이름을 index로 바꾼다. 다운로드 한 이미지를 넣고 싶은 페이지에 해당하는 파일에 넣는다 ``` hero_image: "./넣은 이미지 이름.jpg" hero_image_alt: "A gray pitbull relaxing on the sidewalk with its tongue hanging out" hero_image_credit_text: "Christopher Ayme" hero_image_credit_link: "https://unsplash.com/photos/ocZ-_Y7-Ptg" ``` mdx 파일에 위 코드를 추가 한다. hero_image: 해당 게시물의 영웅 이미지 파일에 대한 상대 경로 hero_image_alt: 화면 판독기의 대체 텍스트로 사용되거나 이미지가 올바르게 로드되지 않는 경우 이미지에 대한 간단한 설명 hero_image_credit_text: photographer에게 영웅 이미지에 대한 크레딧을 주기 위해 표시할 텍스트 hero_image_credit_link: 영웅 이미지를 다운로드한 페이지 링크 - 간단하게 파일만들고 넣기 파일 이름을 "만들고 넣고 싶은 파일이름/파일명"으로 변경하면 된다. - `localhost:8000/___graphql`에서 잘되는 지 확인 ``` query ($id: String) { mdx(id: {eq: $id}) { frontmatter { title date(formatString: "MMMM D, YYYY") hero_image_alt hero_image_credit_link hero_image_credit_text hero_image { childImageSharp { gatsbyImageData } } } body } } ``` 잘 될 경우 ``` { "data": { "mdx": { "frontmatter": { "title": "My First Post", "date": "July 23, 2021", }, "body": "..." } }, "extensions": {} } ``` - 블로그에 적용 {mdx.slug}.js 에 아래의 내용 추가 ``` import { GatsbyImage, getImage } from 'gatsby-plugin-image' ``` ``` ``` ``` export const query = graphql` query($id: String) { mdx(id: {eq: $id}) { body frontmatter { title date(formatString: "MMMM DD, YYYY") hero_image_alt hero_image_credit_link hero_image_credit_text hero_image { childImageSharp { gatsbyImageData } } } } } ` ``` # 이미지 뒤에 크레딧 추가 ```

Photo Credit:{" "} {data.mdx.frontmatter.hero_image_credit_text}

``` {" "} "Photo Credit:" 텍스트

태그있으므로 "Photo Credit:Author"식으로 나온다. 팁: link 의 경우 다른 외부의 사이트와 연결할 경우 로 연결한다. 그렇기에 gatsby내부에 다른 페이지를 보여 줄때만 이점있다는 것 을 유의 하자 # gatsby-browser.js 공통의 css나 공동으로 사용되는 것들이 있을때 사용된다. # 이미지 없는 글의 처리 이미지가 없을 경우를 처리 할때 falsy문 처리로 이미지 없을 경우 false가 나오므로 && 를 사용하여 처리한다. {image &&(있을 경우 모여줄 화면)} &&로 이미지가 있을 경우만 나온다. # 폰트 추가 - 폰트 사이트 눈누 https://noonnu.cc/ # 웹브라우저에서 새로 고침 cntl shift r # code 하이라이팅 mdx code 하이라이팅 검색 https://woong-jae.com/gatsby/210820-how-to-style-mdx-code 출처 - 다운로드 ``` npm install prism-react-renderer ``` CodeBlock ``` import React from 'react' import Highlight, {defaultProps} from 'prism-react-renderer' export default ({children, className}) => { const language = className.replace(/language-/, '') return ( {({className, style, tokens, getLineProps, getTokenProps}) => (

          {tokens.map((line, i) => (
            
              {line.map((token, key) => (
                
              ))}
            
          ))}

)} ) } ``` ``` import { MDXProvider } from "@mdx-js/react" import CodeBlock from "../components/CodeBlock"; ... const components = { //코드 스타일링 code: CodeBlock, }; const PostTemplate = () => { ... //Syntax Highlight 적용될 부분 ... } ``` # git 대소문자 구분 확인 ``` git config --global core.ignorecase 상대확인 git config --global core.ignorecase false 구별하게하기 ```

게시글 상세