깃허브 블로그 홈페이지 미리보기 글 출력 에러 해결 방법

Chirpy 테마의 home.html 코드 수정의 필요성

• Tool :
  

🔔 1. 문제 인식

📌 홈페이지의 미리보기 글 출력 에러

• 이번 글은 깃허브 블로그 제작을 위해 Chirpy 테마를 적용하신 분들에게 반드시 필요합니다.
• 왜냐하면 Chirpy 테마가 적용된 홈페이지의 페이지 번호가 정상적으로 작동하지 않기 때문입니다.
• 이는 Chirpy 테마를 적용시킨 블로그에 공통된 사항이며 home.html 코드를 수정해야 됩니다.
• 이번 글에서는 해당 에러에 대한 내용과 간단히 해결할 수 있는 방법에 대해 작성하였습니다.

작성자 블로그의 페이지 번호

🔔 2. Paginator

📌 Chirpy 테마가 적용된 블로그의 홈페이지

• Chirpy 테마가 적용된 블로그의 홈페이지에는 포스팅 된 글들을 미리 볼 수 있습니다.
• 미리보기 처리된 글들은 직사각형의 박스로 구분되며 이들은 한 페이지에 있습니다.
• 홈페이지에서 페이지 당 볼 수 있는 글 개수를 정하는 것은 블로그 운영에 있어 중요합니다.
• 한 페이지 당 볼 수 있는 글의 개수는 _config.yml에서 설정할 수 있습니다.
• 필자의 본 블로그의 경우 paginate: 5로 설정되어 있습니다.

📌 홈페이지의 미리보기 글 출력 설정

• 하지만 Chirpy 테마가 적용된 블로그라면 _config.yml 내용 수정만으로는 부족합니다.
• 왜냐하면 _config.yml 내용을 수정하더라도 Paginator가 정상적으로 작동하지 않기 때문입니다.
• Paginator, Pagination, Paginate 관련 코드는 보통 페이지에 출력되는 내용을 담고 있습니다.
• 그리고 이들은 일반적으로 for 반복문이나 if 조건문으로 구성됩니다.
• 그러므로 페이지 출력 내용에 문제가 있다면 이들 코드가 포함된 내용을 수정하면 됩니다.

🔔 3. home.html

📌 home.html 수정

• 이 에러는 홈페이지를 구성하는 home.html 파일 내용을 수정하면 아주 간단히 해결됩니다.
• Chirpy 테마에서 제공하는 root/_layouts/home.html 내용을 요약하면 아래와 같습니다.
  • 홈페이지에 표시되는 미리보기 글의 제목, 부제목, 메타 정보 표시 설정
  • 미리보기 글의 업로드 일시 설정
  • 미리보기 글의 카테고리 설정
  • 페이지 번호 설정

📌 미리보기 글 설정

• 미리보기로 표시되는 글 내용은 수정할 수 있습니다.
• 작성자의 경우 모든 글의 제목 앞에는 ‘✅’ 아이콘이 표시되도록 설정하였습니다.
• 그리고 부제목으로 설정한 h2 태그 앞뒤로 하이픈 기호가 입력되도록 설정하였습니다.
• Chirpy 테마에는 이러한 미리보기 글 내용이 단 한 페이지에 출력되도록 설정되어 있습니다.

📌 페이지 번호

• Chirpy 테마의 홈페이지의 문제는 출력되는 한 페이지가 모든 페이지에 반복된다는 것입니다.
• 즉, 홈페이지의 1번, 2번, 3번, … 페이지에 모두 동일한 내용이 출력됩니다.
• 그리고 그 동일한 내용은 현재까지 포스팅 된 모든 글에 대한 미리보기입니다.

🔔 4. 문제 해결

📌 에러 근원 유추

• 홈페이지의 페이지 번호 관련 문제점을 인식하였으니 이제 해결해보겠습니다.
• 페이지 번호의 경우 _config.yml 파일의 paginate에서 설정한 대로 잘 증가합니다.
• 문제는 페이지에 출력되는 내용에 대한 코드이며 이를 home.html 파일에서 수정하겠습니다.

📌 site.posts vs paginator.posts

• for 반복문 for 태그 내부에 있는 코드들을 설정된 종점까지 반복시켜 실행합니다.
• 페이지와 관련된 기존 코드는 for post in site.posts입니다.
• 이 코드의 문제점은 포스팅 된 내용이 paginator가 아닌 site에 기반을 둔다는 것입니다.
• 때문에 페이지 번호가 제대로 작동되지 않은 것입니다.
• 기존 코드를 for post in paginator.posts로 수정하면 문제가 해결됩니다.
• 포스팅 된 내용을 site가 아닌 paginator에 기반을 두도록 하는 것입니다.

📌 post-paginator.html

• 해결 방법 자체는 단순히 ‘site’를 ‘paginator’로 수정하는 것입니다.
• 하지만 페이지 번호가 paginator에 기반되어 있다는 사실을 몰랐다면 해결하지 못했을 것입니다.
• 이와 관련된 것은 ChatGPT 4 역시 해결해주지 못하였습니다.
• 작성자가 VS Code에서 Chirpy의 root 폴더를 탐색하여 해결한 것입니다.
• 실제로 root/_includes/post-paginator.html에는 페이지 번호 관련 코드가 작성되어 있습니다.

🎁 5. 부록

📌 깃허브 블로그 관련 블로그 포스팅

• 나만의 깃허브 블로그 개발 기록
• 나만의 깃허브 블로그 만드는 방법
• 나만의 깃허브 블로그 꾸미는 방법
• 나만의 Dark/Light 스타일 적용
• 나만의 깃허브 블로그에 Light/Dark 테마 전환 기능 부여
• Light/Dark 스타일 적용 에러 해결 방법
• 깃허브 Commit & Push 의미 및 Actions 에러 해결 방법
• 깃허브 블로그 홈페이지 미리보기 글 출력 에러 해결 방법