데모 웹사이트 | 변경 내역
Yue는 블로그에 적합한 최소한의 다국어 사용자 정의 가능한 Hugo 테마입니다.
스크린샷은 오래되었을 수 있으므로 데모 웹사이트를 방문하는 것이 좋습니다.
데스크탑의 조명 모드
데스크탑의 다크 모드
모바일의 라이트 모드
모바일의 다크 모드
최소한의 외관
설치가 용이함(Git 및 Hugo가 설치되어 있으면 몇 초 안에 웹사이트 생성 가능)
자세한 문서
자동 다크 모드
다국어
단일 페이지의 번역 목록
언어 선택기(해당 페이지 또는 홈페이지로 이동)
여러 저자
목차(폴딩 가능, 사용 가능한 경우에만 생성됨)
홈페이지, 단일 페이지, 섹션 페이지, 용어 페이지의 수정 날짜
사용자 정의 날짜 형식
홈 페이지 및 섹션 페이지의 페이지 매김
전체 텍스트 RSS
태그 및 카테고리
저작권 공지 (저작자와 연도 설정 가능)
RSS 링크
제목 앵커 링크
모바일 우선 및 반응형
SCSS
검색 엔진 최적화
마이크로데이터
메타 설명
오픈 그래프
섹션별 페이지 수( /posts/ , /tags/ 등)
맞춤화
파비콘
스타일(SCSS)
목차(HTML)
모든 기능을 확인하려면hugo.yaml(기본 구성) 및 exampleSite/hugo.yaml(데모 사이트 구성)을 확인하세요.
Git과 최신 Hugo 확장을 설치합니다.
# 웹사이트 만들기git init my-websitecd my-website# themegit 하위 모듈 설치 add --length=1 https://github.com/CyrusYip/hugo-theme-yue themes/hugo-theme-yue git commit --message "add theme"# 데모 컨텐츠 생성cp --recursive themes/hugo-theme-yue/exampleSite/* .# Previewhugo 서버
이제 작동하는 데모 웹사이트가 생겼습니다. content 디렉터리에는 콘텐츠가 포함되어 있으며, hugo.yaml 구성 파일입니다. 자유롭게 그들과 함께 놀아보세요.
CD 내 웹사이트 git 하위 모듈 업데이트 --remote
테마를 업데이트하기 전에 CHANGELOG.md를 읽어보는 것이 좋습니다.
피드 수집기(예: Inoreader)에서 업데이트와 변경 로그를 구독할 수 있습니다.
업데이트: https://github.com/CyrusYip/hugo-theme-yue/commits/main.atom
변경 내역: https://github.com/CyrusYip/hugo-theme-yue/commits/main/CHANGELOG.md.atom
웹사이트 프로젝트를 복제할 때 추가 옵션을 사용해야 합니다.
git clone --recurse-submodules --shallow-submodules [email protected]:사용자 이름/my-website.git
웹사이트를 설정한 후 인터넷에서 호스팅하고 싶을 수도 있습니다. 이를 수행하는 방법에는 여러 가지가 있습니다. 호스팅 및 배포 | 휴고. 무엇을 선택해야 할지 모르겠다면 Netlify에서 시작할 수 있습니다. Netlify의 호스트 | 휴고.
hugo.yaml 에서 baseURL을 도메인 이름(예: https://my-cool-domain.org/ )으로 변경했는지 확인하세요.
-baseURL: https://yue.cyrusyip.org/+baseURL: https://my-cool-domain.org/
권장 빌드 명령:
휴고 --gc --minify
--gc 사용하지 않는 캐시 파일을 제거하고 --minify 웹 사이트(주로 HTML)의 크기를 줄입니다.
새 게시물을 작성하세요.
hugo new content content/en/posts/my-first-post.md
사용법에 대해 자세히 알아보려면 다음을 참조하세요.
기본 사용법 | 휴고
디렉토리 구조 | 휴고
설정은 exampleSite/hugo.yaml(데모 사이트의 구성) 및hugo.yaml(기본 구성, 전자에서 가져옴)에 나열되어 있습니다.
웹 사이트 프로젝트의 루트에 있는 hugo.yaml 은 exampleSite/hugo.yaml의 복사본인 구성 파일입니다.
구성에 대해 알아보려면 Hugo 구성 | 휴고.
지원되는 언어:
en : 영어
fr : 프랑스어
zh-CN : 중국어 간체
다국어 웹사이트를 만들려면 다국어 모드 | 휴고 및 exampleSite/hugo.yaml.
번역 파일은 i18n 디렉터리와 data/i18n.yaml에 있습니다. 추가 언어에 대한 기여를 환영합니다.
새로운 언어에 기여하려면:
i18n 디렉터리에 언어 파일(예: 프랑스어의 경우 fr.yaml )을 만듭니다.
i18n/en.yaml의 내용을 새 파일에 복사합니다.
모든 주석( # ... )을 제거하고 내용을 번역합니다.
data/i18n.yaml의 콘텐츠도 번역하세요.
계속해서 번역에 기여하고 싶다면 i18n/en.yaml(https://github.com/CyrusYip/hugo-theme-yue/commits/main/i18n/en.yaml) 피드를 구독하여 최신 변경 사항을 받아보실 수 있습니다. .atom) RSS 리더를 사용합니다.
귀하의 웹 사이트가 영어가 아닌 경우 /tags 및 /categories 제목을 사용자 정의하고 싶을 수도 있습니다.
예를 들어, zh-CN 웹사이트의 /tags 제목을 사용자 정의하려면 content/zh-CN/tags/_index.md 만들고 다음 내용을 파일에 추가합니다.
--- title: Chinese Tags ---
Yue를 사용하면 파비콘, 스타일(SCSS) 및 콘텐츠(HTML)를 사용자 정의할 수 있습니다.
파비콘은 브라우저 탭의 제목 옆에 있는 아이콘입니다. 파비콘을 사용하려면 favicon.ico static 디렉터리에 넣으세요. 온라인 favicon.ico 생성기에서 favicon.ico 생성할 수 있습니다.
Yue는 SCSS(libsass)를 사용하여 스타일을 추가합니다. 모든 파일은 자산/scss에 있습니다. 스타일을 사용자 정의하려면 assets/scss/_style-start.scss 및 assets/scss/_style-end.scss 생성하십시오.
_style-start.scss 가 먼저 적용되며 이 파일의 변수를 재정의할 수 있습니다.
$base-글꼴-크기: 15px;
_style-end.scss 마지막에 적용되며, 이 파일에 스타일을 추가할 수 있습니다.
바닐라 CSS는 SCSS에서도 유효합니다.
참고자료:
CSS: 계단식 스타일 시트 | MDN
Sass: Sass 기본
디렉토리 구조 | 휴고
이러한 파일을 생성하여 HTML 코드를 삽입할 수 있습니다.
layouts/partials/head/head-start.html
layouts/partials/head/head-end.html
layouts/partials/single/single-end.html
layouts/partials/body/body-end.html
head-start.html <head> 요소 시작 부분에 추가됩니다.
사용 사례:
스크립트 미리 로드
스크립트 로드
스타일 로드
다음은 스크립트를 미리 로드하는 예입니다.
<link rel="preload" as="script" href="https://unpkg.com/@swup/head-plugin@2"><link rel="preload" as="script" href="https: //unpkg.com/@swup/preload-plugin@3"><link rel="preload" as="script" href="https://unpkg.com/swup@4">
head-end.html <head> 요소 끝에 추가됩니다.
사용 사례:
스크립트 로드
스타일 로드
다음은 Google Analytics 및 로컬 스크립트를 추가하는 예입니다.
<!-- Google Analytics --><script async src="https://www.googletagmanager.com/gtag/js?id=G-F46B15BRUF"></script><script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-F46B15BRUF');</script><!-- 로컬 스크립트, 경로: 자산/js/my-script.js -->{{ 리소스 포함.Get "js/my-script .js" | js.Build }} <script defer src="{{ .RelPermalink }}"></script>{{ end }} 게시물의 <main> 요소 끝에 single-end.html 추가됩니다.
사용 사례:
댓글 서비스(예: Disqus 및 Giscus)
다음은 Giscus를 추가하는 예입니다.
{{ $언어 := "" }}
{{- /*
소문자 LanguagePrefix에 대한 해결 방법,
https://github.com/gohugoio/hugo/issues/9404를 참조하세요.
*/ -}}
{{ eq site.LanguagePrefix "/zh-cn"인 경우 }}
{{ $언어 = "zh-CN" }}
{{ 또 다른 }}
{{ $언어 = "en" }}
{{ end }}<script src="https://giscus.app/client.js" data-repo="CyrusYip/yue-test" data-repo-id="P_9hJMbXtqr" data-category="일반" 데이터 -category-id="SIB_ldsflk712ldRsjf7" data-mapping="경로 이름" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="preferred_color_scheme" data-lang="{{ $언어 }}" crossorigin="anonymous" async></script>댓글 서비스 목록: 댓글 | 휴고.
body-end.html <body> 요소 끝에 추가됩니다.
사용 사례:
동적으로 스크립트 로드
버그를 신고하려면 문제를 제출하세요. 질문하려면 토론을 시작하세요.
Hugo에는 많은 기능이 있습니다. 배우려면 Hugo 문서를 읽어보세요.
CHANGELOG.md를 참조하세요.
이 프로젝트에서는 Hugo-bin - npm을 사용하여 Hugo 버전을 관리합니다. 전제조건: Node.js 및 npm.
이 저장소를 복제하세요.
npm 설치 npm run clean:서버:공유
package.json에는 다른 유용한 명령이 나열되어 있습니다. 권장 Hugo 버전을 사용하려면 npx hugo 실행하세요.
Node.js 및 npm이 설치되어 있지 않은 경우 package.json에 나열된 버전을 설치하면 됩니다.
"hugo-bin": { "buildTags": "확장", "버전": "x.yyy.z"},CHANGELOG.md는 각 커밋에서 업데이트되어야 합니다.
Yue를 사용하고 웹사이트의 소스 코드가 GitHub에서 호스팅되는 경우, hugo-theme-yue 주제를 저장소에 추가할 수 있습니다.
hugo-theme-yue 주제에 대한 링크입니다.
저는 많은 프로젝트를 통해 많은 것을 배웠습니다. 감사합니다, 개발자 여러분.
hugo-xmin(최소 템플릿)
휴고 테마 제인(RSS 템플릿)
hugo-theme-zen(언어 선택기)
휴고 테마 gruvbox (색상)
gruvbox (색상)
hugo-theme-stack(소스 코드, 문서 및 구성)
hugo-PaperMod(소스 코드, 문서 및 구성)
이 프로젝트는 MIT 라이선스를 받았습니다.
