Hugo 모듈 커스터마이징 테마 수정 방법: 아이디어 설명

과거 커밋 기록을 살펴보니, 사이트는 여러 번 테마를 변경해 왔습니다. 매번 테마를 변경할 때마다 몇 가지 사용자 정의 수정 사항이 있었고, 여기 그 수정 아이디어를 기록합니다. 제 Github에도 저장소가 있는데, even 테마를 잠시 유지 관리하다가 강박증 때문에 최신 버전의 hugo 컴파일러로 업그레이드하고 싶었지만, even 테마와 호환되지 않아 다시 stack 테마로 전환했습니다.

휴고의 모듈화

모듈화를 언급하면 Nginx 모듈이나 IDEA 플러그인 등이 떠오르는 경우가 많습니다. 보통은 몇몇 모듈을 업로드하여 차별화된 요구사항을 충족할 수 있습니다. 모두가 이러한 모듈을 선호하는 주된 이유는 충분히 유연하기 때문이며, 큰 노력을 들이지 않고도 자체적인 요구사항을 충족할 수 있기 때문입니다. 많은 경우 전체적으로는 비슷하더라도 세부적인 차이가 존재합니다. 이는 기술적 복잡성 외에도 비즈니스 복잡성을 보여주는 것이기도 합니다. 대부분의 경우 우리는 비즈니스 복잡성에 직면하게 됩니다. 이것이 소프트웨어 분야에서 “동업자 간에도 산과 같다는” 속담을 가장 잘 설명하는 것입니다. 요즘은 인터넷 업계뿐만 아니라 금융 업계, 심지어 전통적인 제조업에 이르기까지 정보화 시스템을 활용하여 기업의 생산 및 관리를 돕고 있습니다. 마찬가지로 휴가 신청 시스템이라도 같은 산업 분야라도 서로 다른 회사마다 차이가 있을 수 있습니다.

그리고 Hugo의 모듈은 사람들의 일반적인 인식과는 조금 다르게, 기능별로 차별화된 요구를 충족하기 위한 것이 아니라 디렉토리 구조를 중심으로 동일한 구조를 식별합니다

자료 링크: 07. Hugo 아키텍처 — Hugo의 모듈

[[imports]]
path = "github.com/CaiJimmy/hugo-theme-stack/v3"

git 서브모듈 방식은 여전히 사용할 수 있지만, 본문에서는 권장하지 않습니다. 테마가 업데이트되면 유지 관리가 복잡해지며, 테마를 별도의 git 저장소로 관리해야 합니다.

주제의 수정 로직

앞선 모듈화의 기본 개념을 이해했으면, 사용자 정의 테마를 이해하는 것은 훨씬 쉬워졌습니다. hugo의 현재 테마도 여러 개의 다른 모듈로 조립된 것이며, 우리는 원하는 모듈을 찾아 해당 템플릿 파일을 수정하면 됩니다.

스택 공식 문서에서 발췌:

Using this method, there won’t be any file under themes directory. In order to modify the theme, you will have to copy the file you want to modify to the same directory under layouts directory.

For example, in order to modify the themes/hugo-theme-stack/layouts/partials/head/custom.html file, you will have to copy it to layouts/partials/head/custom.html and modify it there (copy the code from theme’s repository). The same applies to assets and static directories。

템플릿 파일을 어떻게 찾을 수 있나요?

정통적 사고방식

테마의 소스 파일을 살펴보면서 디자인 아이디를 이해하고, 해당 템플릿 파일을 찾아 수정하면 됩니다

거친 사고방식

저는 프론트엔드 코드를 잘 모르는 편이라 때로는 직접적인 방법을 사용합니다. 예를 들어 브라우저에서 해당 페이지를 열고, 수정하고 싶은 부분을 찾아 요소 검사 기능을 통해 CSS 이름을 찾은 다음, 테마 소스 코드에서 검색하여 해당하는 파일을 찾아서 복사한 후 사이트 디렉토리에 붙여넣고 수정하는 방식입니다.

소 팁

공식적으로 기본 제공되는 파일로 스타일을 커스터마이징할 수 있으며, 수정해야 할 부분을 여러 파일로 분리하고 custom.scss 파일에서 다른 파일을 불러와서 사용하면 스타일 파일을 더 효과적으로 관리할 수 있습니다

alt text

수정 내용 요약(6시간)

이제는 AI 코딩의 원년이라고 할 수 있으며, 자세한 내용은 여기서는 생략하고 간단히 나열하자면, 본 사이트의 수정 내용 몇 가지 예를 들어 복사 버튼 스타일 조정, 코드 블록 스타일 재설정 등이 있는데, ChatGPT로도 쉽게 처리할 수 있습니다

전체: 전체 글꼴 스타일은 이전 even과 info cn을 결합한 표시 스타일을 유지하며, 중국어 사용자를 위한 친화적인 디자인입니다
홈페이지: 오른쪽 네비게이션에 마우스 상호작용 애니메이션 추가
처음 페이지: 기사 요약 미리 보기 (시간이 많이 소요되므로, 편리한 방법을 사용했습니다.)
스크롤바: 스크롤바 스타일을 다듬었습니다
코드 블록에 highlight.js 코드 하이라이트 플러그인이 도입되어 코드 블록 스타일이 개선되었습니다
내용 상세: 일부 내용은 재게시되었으며, 원저자 정보 표시 및 원본 링크 표시가 추가되었습니다
아카이브 페이지: 상단의 카테고리 이미지, 테마 자체 색상 오버레이 제거, 원본 이미지 표시
파일 페이지: 연도별 분류 통계 표시 패널이 추가되었습니다
아카이브 페이지: 두 열 레이아웃 표시

스택 테마의 컴포넌트 재사용성이 매우 높아, 홈페이지에 새 글 요약 미리 보기 기능을 추가하는 데 상당한 시간이 소요되었습니다. 관련 컴포넌트를 수정했더니, 게시글 상세 페이지에서도 내용이 중복되어 표시되는 문제가 발생했습니다. golang 템플릿 문법에도 익숙하지 않아 더 많은 시간을 소비했고, 컴포넌트 간의 파라미터 전달은 끝내 해결하지 못했습니다. 결국, 트릭을 사용하여 홈페이지에 별도의 JavaScript 스크립트를 도입하고, 사용자 정의 특수 변수를 통해 요약 미리 보기 기능을 구현했습니다.

때로는 코드 재사용률이 너무 높아서 문제가 될 수도 있는데, 한 부분을 수정하면 다른 부분에도 영향을 미치기 때문에 테마를 수정할 때는 기존 로직을 훼손하지 않도록 주의해야 합니다

댓글 영역

이 친구의 수정은 더욱 완벽해졌습니다: https://blog.reincarnatey.net/2024/0719-better-waline/

이 사이트는 간단하게 Waline 댓글 시스템을 적용했으며, stack 테마는 기본적으로 Waline을 지원하므로 config.toml에서 설정하면 됩니다

추천 홈페이지, 이메일 연락처. 본 사이트는 댓글 기능을 제공하지 않습니다.