현재 이 블로그처럼 수정하는 방법에 대해 알려드리겠습니다.

https://themeforest.net/item/flexiblog-react-gatsby-blog-template/27538998

위 링크에서 테마를 구입할 수 있습니다. 현재 $29 입니다.

그런데 수정하는 방법이 정말 어렵습니다.

기본적인 설정방법은

https://elegantstack-docs.web.app/flexiblog-theme-documentation/

위 링크에 있습니다.

하지만 알려주지 않은 부분이 너무 많습니다.

그래서 제가 직접 물어보고 알아낸 방법을 모두 알려드리겠습니다.

원본파일 수정사항

반드시 원본파일을 수정해야 되는 부분이 있습니다.

Shadowing이 들어가기 전에 이미 읽어지는 부분이라 Shadowing이 불가능한 부분입니다.

글 목록 요약부분 수정

이 부분을 수정하지 않으면 글 요약 부분이 … 라고 표기되거나 몇글자 안나오는 버그가 생깁니다.

수정할 원본파일

@elegantstack/packages/blog/core/src/types/file.gql

위 파일의 대략 26번째 줄 근처

@elegantstack/packages/blog/core/src/types/interfaces.gql

위 파일의 대략 19번째 줄 근처에서

위 내용을

위 내용으로 바꿉니다.

글 목록의 요약부분에서 한글 및 영어, 숫자를 포함하여 60글자만 출력하기입니다.

원본에 있는대로 100 글자를 출력하니 한글의 경우 크기가 커서 4줄까지 늘어날 수 있습니다.

60으로 설정해야 한글만 있어도 2줄로 표시되어 UI가 깨지지 않습니다.

글 목록 및 글 본문에서 글 작성 시간의 변환

@elegantstack/packages/blog/core/src/fragments/article.preview.js

위 경로에 있는 원본파일에서

위 내용을 찾아서

위와 같이 수정합니다.

글 작성 시간을 우리나라 형식으로 바꿔줍니다. 시각, 분, 초가 필요없다면 해당 부분을 지우면 됩니다.

원본파일 수정사항은 여기까지하면 됩니다.

Component Shadowing

Gatsby는 Component Shadowing이라는 기능을 사용할 수 있습니다.

원본 파일을 수정하지 않고, 특정 위치에 파일을 위치시키면 원본을 덮어쓰는 기능입니다.

자주 업데이트가 되는 테마라면 이 기능이 필수입니다.

원본을 수정했다면 업데이트 할 때 모든 파일을 대조해야됩니다.

그런 수고를 줄일 수 있는 좋은 기능입니다.

푸터에 내용 추가 및 헤더 로고 쿼리 수정하기

@elegantstack/packages/flow-ui/layout/src/Footer/Footer.Logo.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-layout/Footer/Footer.Logo.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing한 파일에서

위 내용 밑에

위 내용을 추가해줬습니다.

그 이유는 freepik에서 Vector 파일을 썼기 때문에, 라이센스 적용을 위해 해당 문구를 Footer에 넣어줘야 할 필요가 있었기 때문입니다.

그리고 Shadowing한 파일에서 ./Header/Header.Logo 파일을 불러오기 때문에 헤더 로고 파일도 만들어줬습니다.

@elegantstack/packages/flow-ui/layout/src/Header/Header.Logo.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-layout/Header/Header.Logo.jsx

위 경로로 폴더를 만들고 파일을 복사했습니다.

Shadowing한 파일에서 28 ~ 29번째 줄 쯤에

위와 같이 LogoQuery를 LogoQuery2로 수정해줬습니다. 그대로 두면 중복쿼리 문제로 빌드할 때 문제가 있더라구요.

이건 커스텀으로 로고파일을 저장했을때도 필요할 것입니다.

algolia 검색창 문구 수정

Discover news, articles and more...를 원하는 문구로 수정 가능합니다.

@elegantstack/packages/flow-ui/widgets/src/Search/Search.Box.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-widgets/Search/Search.Box.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing한 파일에서 대략 53번째 줄에

위 내용 중 Discover news, articles and more... 대신 원하는 문구로 수정 가능합니다.

algolia 검색창 클릭시 나오는 문구 및 검색 결과 문구 수정하기

@elegantstack/packages/flow-ui/widgets/src/Search/Search.Results.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-widgets/Search/Search.Results.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing한 파일에서 대략 22번째 줄에

위 내용에서 What are you looking for? 대신 원하는 문구로 수정 가능합니다.

그리고 검색 결과가 없을 때 나오는 문구도 수정할 수 있습니다.

대략 26번째 줄에

위 내용을

위와 같이 바꾸면 됩니다.

그리고 Shadowing 한 파일이 Search.style.js 파일도 필요하므로

@elegantstack/packages/flow-ui/widgets/src/Search/Search.style.js

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-widgets/Search/Search.style.js

위 경로로 폴더를 만들고 파일을 복사합니다.

검색창 수정은 이렇게 마무리 합니다.

SEO에서 언어를 한글로 바꾸기

@elegantstack/packages/flow-ui/widgets/src/Seo/Seo.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-widgets/Seo/Seo.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing 한 파일을 열어서 대략 71번째 줄에

로 바꿔줍니다.

메인 화면의 Let’s Talk 밑에 있는 문구 바꾸기

@elegantstack/packages/flow-ui/widgets/src/Social/Social.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-widgets/Social/Social.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing 한 파일을 열어서 대략 15번째 줄에

위 내용을 바꿔주면 한글로 표시됩니다.

메인화면 히어로 부분 수정하기

@elegantstack/packages/themes/gatsby-theme-flexiblog-personal/src/components/Hero/Hero.Content.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/gatsby-theme-flexiblog-personal/components/Hero/Hero.Content.jsx

위 경로로 폴더를 만들고 파일을 복사합니다.

Shadowing 한 파일을 열어서 대략 23번째줄부터 끝까지

위와 같이 바꿔줬습니다. 원래 Contact Me 부분이 있는데 삭제했습니다.

글 상세보기 레이아웃 변경하기

https://flexiblog-sales.firebaseapp.com/

위 링크에 밑에 보면 Post Page에 6개의 레이아웃이 있습니다.

하지만 공식 문서에 어떻게 바꾸는지 적혀있지 않아 서포트에 물어보니 알려주더군요 ㅎㅎ

먼저 6개의 레이아웃 중에 원하는 레이아웃을 고릅니다.

그리고 해당 레이아웃이 어떤 테마에 있는지 알아야 합니다.

저는 Wide Hero 레이아웃이 마음에 들어서 찾아보니 Science 테마에 있더라구요.

Science 테마의 Post.jsx 파일을 Shadowing 하면 됩니다.

@elegantstack/packages/themes/gatsby-theme-flexiblog-science/src/containers/Post.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/gatsby-theme-flexiblog-personal/containers/Post.jsx

위와 같은 경로에 폴더와 파일을 생성합니다.

여기서 주의할 점은 폴더가 다르죠?

Science 테마의 Post.jsx 파일을 Personal 테마의 Post.jsx파일을 Shadowing 한다고 보면 됩니다.

그런데 Wide Hero 레이아웃은 카테고리 부분이 없어 기본 레이아웃에서 가져왔습니다.

그래서 최종 @elegantstack/site/src/@elegantstack/gatsby-theme-flexiblog-personal/containers/Post.jsx 파일의 내용을 보면

위와 같이 됩니다. 참 쉽죠? ㅎㅎ

About 페이지 내용 수정하기

@elegantstack/packages/themes/gatsby-theme-flexiblog-personal/src/pages/about.jsx

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/gatsby-theme-flexiblog-personal/pages/about.jsx

위와 같은 경로에 폴더와 파일을 생성합니다.

Shadowing 한 파일을 열어서 원하는대로 수정 후

마지막 부분에 쿼리명을 수정해줘야 합니다.

저는 위와 같이 AboutQueryshadowing 라고 수정해줬습니다. 이걸 바꾸지 않으면 빌드할 때 중복 쿼리 에러가 납니다.

word-break 속성 추가

위 스샷에 있듯이, 레이아웃을 뚫고 나오는 경우가 있습니다.

CSS 속성의 경우

위와 같이 잡아주면 되는데요.

자바스크립트의 경우는 약간 다르더라구요.

@elegantstack/packages/flow-ui/theme/src/theme/styles.js

위 파일을 Shadowing하기 위해

@elegantstack/site/src/@elegantstack/flow-ui-theme/theme/styles.js

위와 같은 경로에 폴더와 파일을 생성합니다.

Shadowing 한 파일을 열어서 1~6번째 줄을

위와 같이 넣어주면 됩니다.

CSS처럼 word-break가 아닌 wordBreak라는게 인상적이었습니다. ㅎㅎ

코드 블록 스타일 주기

위에 있는 스샷처럼 자바스크립트 등 스타일을 주고 싶다면

마크다운 파일을 작성할 때

위와 같이 jsx를 지정해주면 됩니다. 알려진 언어들은 대부분 될 것입니다.

이상 테마 수정방법에 대해 알려드렸습니다.

앞으로 알려드릴 부분이 많네요. ㅎㅎ