메인로드 이미지 처리

메인로드에서 사용하는 허구 이미지의 세부 사항, 유형 및 크기

Page content

Mainroad은 Hugo 정적 사이트 생성기용 테마입니다.
좋은 외관뿐만 아니라 훌륭한 이미지 처리 기능도 제공합니다.

보시다시피, 이 사이트는 마크다운으로 텍스트를 작성하고 이미지를 추가한 후, Hugo를 사용하여 깔끔한 HTML, JS, CSS 파일을 생성하는 방식을 사용하고 있습니다.

topimage

위치

썸네일 이미지는 페이지의 front matter에 정의됩니다.

thumbnail: img/thumb.jpg

썸네일의 가시성은 config.toml에서 설정됩니다.

[Params.thumbnail]
  visibility = ["list", "post"]

Mainroad에 존재하는 어려움

  • Mainroad는 썸네일 이미지를 /static 폴더에서 찾고, 페이지 번들에서 찾지 않습니다.
  • 기본적으로 하나의 이미지가 목록 페이지의 썸네일과 상세 페이지의 상단 이미지로 모두 사용됩니다.
  • 썸네일 이미지는 크기 조정 없이 그대로 public 폴더로 복사됩니다.

불편한 점…

  • 위와 같은 방식은 상세 페이지의 이미지가 썸네일로 사용될 경우 대역폭 사용이 매우 비효율적이 됩니다.
  • 정적 폴더에 이미지를 저장하는 것이 매우 불편합니다. 병렬 포스트 트리 구조에서조차 페이지 번들에 저장하지 않기 때문입니다.

이미지 유형 및 크기

썸네일

  • 작은 목록 (모바일 뷰) 73x53
  • 중간 목록 (데스크탑 뷰) 235x171

상세 페이지 - 내부

  • 최대 데스크탑 678x495
  • 아이패드 프로 597x436
  • 아이폰 XR 374x273
  • 아이폰 14 맥스 390x285
  • 아이패드 미니 479x350

해결책

다음과 같이 저장하면 됩니다.

  • static 폴더에 중간 목록 (데스크탑 뷰)용 썸네일 이미지 235x171을 저장합니다.
  • 미리 정의된 썸네일 세트를 사용합니다. 예를 들어, 10개의 썸네일을 준비하고 가장 적절한 것을 선택하거나 순환 사용합니다.
  • 페이지 번들에 데스크탑용 이미지 678x495를 저장합니다.
  • 페이지 텍스트에서 ![img](localimg.png)와 같이 참조합니다.
  • 썸네일 가시성을 [“list”]로 설정합니다.

유용한 링크