Quint는 깨끗하고 경쾌한 느낌을 불러일으키고 명확성과 읽기 용이성을 강조하도록 설계된 미니멀리스트 Hugo 테마입니다. 우아한 내장 이미지 배너와 가벼운 디자인이 특징이므로 콘텐츠 중앙 무대를 표시하는 데 이상적입니다.
새 사이트의 시작 템플릿으로 사용할 수도 있는 데모 사이트 저장소를 확인하세요. (잠깐... 거기에 Netlify에 원클릭 배포 버튼이 있습니다.)
여기 라이브 데모가 있습니다.
미니멀리스트 디자인 : 방해 요소를 최소화하면서 콘텐츠 가독성에 중점을 둡니다.
다크 모드와 라이트 모드 : 시청자의 브라우저/기기 설정을 존중하는 자동 테마 전환입니다.
반응형 레이아웃 : 모바일과 데스크톱 기기 모두에서 멋지게 보입니다.
포함된 이미지 배너 : 사이트의 분위기를 조성하는 아름답고 미니멀한 이미지 배너가 함께 제공됩니다. 언제든지 교체하거나 직접 추가하세요.
사이트 검색 : Lunr.js를 사용하여 정적 사이트에 대한 검색 기능이 내장되어 있습니다.
소셜 아이콘 : 바닥글에 소셜 미디어에 대한 구성 가능한 링크가 있습니다.
Quint를 시작하려면 컴퓨터에 Hugo를 설치해야 합니다. Hugo 설치에 대한 자세한 내용은 공식 Hugo 설명서를 확인하세요.
Hugo를 사용하여 새 사이트를 만드는 방법에 대한 단계별 가이드를 보려면 빠른 시작을 읽어보세요.
Hugo가 설치되면 사이트의 테마 디렉토리에 Quint를 추가하세요. 사이트 루트에서 다음을 실행합니다.
git 하위 모듈 추가 https://github.com/victoriadrake/hugo-theme-quint.git themes/quint
Hugo 사이트의 구성 파일( hugo.toml
, hugo.yaml
또는 hugo.json
)을 열고 quint
사용하도록 theme
매개변수를 업데이트합니다.
hugo.toml
의 경우:테마 = "quint"
hugo.yaml
의 경우:테마: "quint"
Quint는 기본적으로 매우 훌륭해 보입니다. 선택적으로, yoursite/themes/quint/hugo.toml
의 구성 값을 사이트 구성( yoursite/hugo.toml
)으로 복사하여 Quint를 더욱 개인화하세요.
Hugo를 실행하여 사이트를 생성하고 서버를 시작하세요. 사이트 루트에서 다음을 실행합니다.
휴고 서버
웹 브라우저에서 http://localhost:1313
으로 이동하여 Quint 테마가 적용된 사이트를 확인하세요.
최신 버전의 Quint를 다운로드하려면 다음을 실행하세요.
git 하위 모듈 업데이트 --원격 테마/quint
Quint는 사용자 정의가 간단하도록 설계되었습니다.
Hugo 구성에서 이름을 지정하여 사용자 정의 CSS 파일을 쉽게 추가하세요.
[params]css = ["css/custom.css"] # yoursite/static/에 저장된 사용자 정의 CSS 재정의
프로젝트 디렉토리에 있는 동일한 이름의 파일을 사용하여 모든 레이아웃을 재정의할 수 있습니다. 예를 들어 yoursite/layouts/partials/contact.html
파일은 yoursite/themes/quint/layouts/partials/contact.html
보다 우선 적용됩니다.
yoursite/themes/quint/layouts/index.html
파일을 재정의하여 홈 페이지에서 섹션을 추가하거나 제거합니다. 프로젝트 디렉토리( yoursite/layouts/index.html
)에 이 파일의 복사본을 만들고 원하는 partial
을 제거하거나 추가하기만 하면 됩니다.
페이지나 게시물의 머리말에 image
지정되지 않은 경우 Quint는 themes/quint/static/images
디렉터리에서 임의의 이미지를 선택하여 아름다운 이미지 배너를 표시합니다.
이는 이미지 파일 이름에 해당하는 1-10 사이의 임의의 숫자를 선택하여 수행됩니다. 이 컬렉션에 추가하거나 원하는 이미지를 바꿀 수 있습니다. 보유한 이미지 수와 일치하도록 최대 난수를 업데이트하세요.
[params]numImages = 12 # 배너용으로 선택할 임의 이미지 수(themes/quint/static/images에서)
Quint에 대한 기여를 환영합니다! 테마의 기능이나 문서를 개선하려면 GitHub에 문제를 제출하거나 끌어오기 요청을 제출하세요.
시작하려면 몇 가지 아이디어를 원하시나요? 추가되었으면 하는 기능의 간단한 목록은 다음과 같습니다.
코드 블록 복사 버튼
Hugo의 Chroma 구문 강조
파이프라이닝, 핑거프린팅, 번들링 및 축소 기능을 갖춘 Hugo의 자산 생성기
다국어 지원
탐색경로 탐색
이 테마는 MIT 라이센스에 따라 공개됩니다. 자세한 내용은 LICENSE 파일을 참조하세요.
Quint는 뛰어난 오픈 소스 글꼴을 사용합니다.
deviceframes.com에서 생성된 장치 모형.