hugo toigian
1.0.0
Tailwind CSS를 사용한 최소 Hugo 테마
Toigian-Tối giản(베트남어): 미니멀리스트(영어)면책조항 : 저는 프론트엔드 개발자가 아니며, 그저 뭔가를 조정하는 것을 좋아하는 사람이므로 제 코드가 예쁘거나 깨끗하지 않을 수 있습니다. Tailwind CSS를 배우려고 시도했는데, 그 결과가hugo-toigian입니다.
이 스크린샷은 오래되었을 수 있습니다. 최신 데모 사이트를 살펴보십시오.
| 어두운 | 빛 |
|---|---|
tối giản ) 디자인. Mellow.dev에서 많은 영감을 받았습니다.git , npm 이 설치되었습니다.snap install hugo --channel=extendednpm install -g autoprefixer )과 함께 환경에 postcss-cli JavaScript 패키지( npm install -g postcss postcss-cli )를 설치해야 합니다. Hugo Snap 패키지를 사용하는 경우 PostCSS와 플러그인을 Hugo 사이트 디렉터리 내에 로컬로 설치해야 합니다(예: -g 플래그 없이 npm install postcss-cli . hugo new site hugo-example-site
cd hugo-example-site
git initgit submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian cd themes/hugo-toigian
npm installconfig.toml 파일에서 테마를 업데이트하세요. theme = " hugo-toigian "hugo server -DF --disableFastRenderhugo --environment production --minifyconfig.toml 파일에 추가할 수 있는 몇 가지 구성 옵션이 있습니다.
baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"
[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true
[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "
[ markup ]
defaultMarkdownHandler = " goldmark "
# By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
# It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
[ markup . goldmark ]
[ markup . goldmark . renderer ]
unsafe = true # Enable user to embed HTML snippets in Markdown content.
[ markup . highlight ]
codeFences = true
guessSyntax = true
lineNos = false
noClasses = false
tabWidth = 4
[ markup . tableOfContents ]
startLevel = 2
endLevel = 4
ordered = true
# The left side navbar at the top
[ menu ]
[[ menu . nav ]]
name = " About "
url = " /about "
weight = 2
[[ menu . nav ]]
name = " Posts "
url = " /posts "
weight = 3개별 페이지의 머리말에 추가 매개변수를 지정할 수 있습니다.
# Your posts tags
tags = [ ]
# If you have enabled comments for the site, you can disable it for specific pages
comment = true단축번호를 확인하세요.
layouts/partials/ 에 있는 테마의 구성 요소를 쉽게 재정의할 수 있는 레이아웃 부분이 있습니다.| 빈 부분 | 놓기 | 용법 |
|---|---|---|
layouts/partials/custom/head.html | <head> 태그를 닫기 전 | 맞춤 CSS/js 추가 |
layouts/partials/custom/content-before.html | 페이지 콘텐츠 전 | |
layouts/partials/custom/content-after.html | 페이지 콘텐츠 이후 | |
layouts/partials/font.html | 사용자 정의 글꼴 가져오기 |
| 파일 | 설명 |
|---|---|
assets/css/custom.css | CSS 스타일 사용자 정의 또는 재정의 |
예를 들어 선택한 글꼴(Inconsolata)이 마음에 들지 않고 원하는 글꼴을 사용하려면 다음 단계를 따르세요.
layouts/partials/font.html 만듭니다. <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
rel =" stylesheet "
/>assets/css/custom.css 생성: // change the default mono font to Overpass
:root {
--font-mono : " Overpass " ;
--font-serif : " Inter " ;
}이미 아시다시피 저는 프론트엔드 개발자가 아닙니다. 따라서 잘못된 점을 발견하거나 개선하고 싶다면 주저하지 말고 이슈/풀 요청을 제출하세요.
주요 목표는 다음과 같습니다.
누락된 구성이나 사용자 정의 옵션을 발견하면 언제든지 이슈를 열어주세요.
