hugo dream plus
Yume
이 테마는 Yue Yang의 Dream 테마의 업그레이드 된 버전이며 다음과 같은 새로운 기능을 포함합니다.
이 테마는 두 가지 목적으로 사용될 수 있습니다.
이 프로젝트는 기고자 언약 행동 강령을 준수합니다. 참여 함으로써이 코드를지지해야합니다. 허용 할 수없는 행동을 [email protected]에보고하십시오.
설치
시작하기
선적 서류 비치
거의 끝났습니다
기여
특허
Hugo 웹 사이트 폴더 내에서 다음 명령을 실행하여 테마를 설치할 수 있습니다.
cd themes
git submodule add https://github.com/UtkarshVerma/hugo-dream-plus dream-plus
git submodule update --init --recursive테마가 성공적으로 설치되면 취향을 충족시키기 위해 테마를 약간 조정해야합니다.
exampleSite 폴더에는 테마를 조정하는 데 사용할 수있는 구성 파일, cards.toml 및 posts.toml 있습니다.
필요한 변수 선언을 관리 하므로이 구성 파일을 귀하의 요구에 따라 편집 할 수 있기 때문에이 구성 파일을 사이트의 기초로 사용해야합니다.
그림과 같이 author 테이블 아래의 params 의 다음 구성 변수를 통해 자신을 정의하십시오.
[ params . author ]
author = " <name of the author> "
description = " Short description of the site "
motto = " author's motto or short description "
# Leaving the avatar variable unset displays svg avatars
avatar = " <absolute path to avatar> "그런 다음 구성 파일 끝에서 소셜 변수를 작성하십시오. 이 테마는 다음과 같은 소셜 사이트를 부수합니다. (예제가 제공됩니다)
| 소셜 링크 | 변하기 쉬운 | 예제 초기화 |
|---|---|---|
| github | github | github = "username" |
| 이메일 | 이메일 | email = "[email protected]" |
| 지저귀다 | 지저귀다 | twitter = "username" |
| 페이스 북 | 페이스 북 | facebook = "username" |
| YouTube | YouTube | youtube = "username" |
| 중간 | 중간 | medium = "username" |
linkedin = "username" | ||
| stackoverflow | stackoverflow | stackoverflow = "number/username" |
| 코데 펜 | 코데 펜 | codepen = "username" |
| 레딧 | 레딧 | reddit = "username" |
이 변수는 config.toml 의 [social] 테이블에 있거나 YAML 또는 JSON 과 동일해야합니다.
[ social ]
github = " UtkarshVerma "이 작업이 완료되면 여기 지시에 따라 Markdown에서 웹 사이트의 " 정보 "섹션을 작성하십시오 : 오류 및 페이지.
앞에서 언급 했듯이이 테마에는 두 개의보기, 카드보기 및 게시물보기가 있습니다. 보기 렌더링 유형은 Dream Plus 에 제공하는 콘텐츠 유형에 따라 다릅니다. 그러므로:
/content 폴더에 cards 폴더가 있으면 카드보기가 활성화됩니다./content 폴더에 posts 폴더가 있으면 포스트 뷰가 활성화됩니다.
contentType변수는 이제 더 이상 사용되지 않았습니다.
두 뷰의 명확한 차이점 중 하나는 카드 보기가 게시물을 지원하지 않고 대신 지정된 링크로 리디렉션하는 반면 Post View는 그렇습니다. 내 사이트를 방문하여 스스로 테스트 할 수 있습니다 (위에서 언급 한). 또한 포스트/카드 생성은 두 뷰 모두에 대해 다르게 수행됩니다. 다음과 같습니다.
hugo new cards/example.md # Card creation
hugo new posts/example.md # Post creation그런 다음 Markdown 카드/게시물을 열고 카드/게시물의 매개 변수를 제공하십시오.
이 테마의 배경을 구성하는 두 가지 방법이 있습니다. 이 설정은 서로 독점적입니다.
특정 배경색을 설정하려면 color 변수를 통해 수행하십시오. 대신 배경으로 무작위로 색상 조합을 설정하려면 색상 변수를 미숙 하게 두십시오.
[ params . background ]
color = " #13547A " # Provide a color as hex or rgb equivalent images 배열을 통해 배경으로 설정하려는 이미지를 지정하십시오. 단일 이미지 배경을 선호하는 경우 배열에 단일 값을 제공하십시오. 예를 들어:
[ params . background ]
images = [ " /images/bg1.jpeg " ] # Single image as background
images = [ " /images/bg1.jpeg " , " <some other image> " ] # Multiple images as background images 배열에 여러 이미지를 제공하면 Dream Plus의 랜덤 이미지 배경 기능이 가능하며, 이는 사이트가 다시로드 될 때마다 주어진 배열 내에서 배경을 순환합니다. blur 변수를 통해 어느 정도 배경을 흐리게 할 수도 있습니다.
모든 백그라운드 구성 변수는
params아래의backround테이블 내부에 배치됩니다.
[ params . background ]
# Random backgrounds
images = [ " /images/bg1.jpeg " , " /images/bg2.jpeg " , " /images/bg3.jpeg " ]
# Blur the background
blur = " 0.2 "각 포스트 카드 또는 카드의 표지는 Dream Plus로 처리됩니다. 표지 파일의 조회 경로는 다음과 같습니다.
/content/cards/<card>/cover.<any-extension>/content/posts/<post>/images/cover.<any-extension>
프론트 매스터를 통해 표지 이미지를 지정하면 이제 더 이상 사용되지 않았습니다.. 카드 표지는 이제cover키를 통해 프론트 마터를 통해 정의 할 수 있습니다. 그러나 이미지 처리는 이러한 커버에 적용되지 않습니다. 또한 프론트 마터 커버는 이미지 리소스보다 우선 순위가 지정되므로 이미지 리소스 커버가 렌더링 되려면 먼저 프론트 마터에서 커버 키를 제거해야합니다.
[params.features] 의 coverArgs 변수를 통해 이미지 처리 프로세스를 수정할 수도 있습니다. 전달 된 인수 .Resize Dream Plus가 활용하는 것입니다. 예를 들어,
[ params . features ]
coverArgs = " 400x300 q50 " # Specify resolution and quality of output image isMobile JS 변수를 사용하여 클라이언트 장치를 기반으로 웹 사이트를 구성 할 수 있습니다. 클라이언트 장치가 모바일이고 그 반대도 true 입니다.
이 테마는 ABABLE 및 오류 페이지의 총 사용자 정의를 지원합니다. 이 페이지는 about.md 및 404.md 파일을 통해 사용자 정의 될 수 있습니다. Dream Plus는 위의 명시된 파일을 일반 Markdown 텍스트로 읽은 다음 렌더링합니다. 파일 작성을 마치고 필요에 따라 파일을 수정 한 후에는 Hugo 사이트의 content 폴더에 붙여 넣으십시오. 이 페이지를 Hugo에 의해 구축하고 <website>.<domain>/about <website>.<domain>/404 그런 다음 Hugo에게 config.toml 파일에서 ignoreFiles 변수를 통해 이들을 무시하도록 지시 할 수 있습니다.
ignoreFiles = [ " content/404.md " , " content/about.md " ] params 의 favicon Config 변수를 통해 웹 사이트에 대한 사용자 정의 Favicon을 설정할 수도 있습니다. 예를 들어,
[params]
favicon = "/images/defaultFav.ico"
Shorte.st 웹 사이트 스크립트 가이 주제에서 구현되었습니다. 이를 사용하려면 params 에서 가장 shortest 테이블을 통해 구성해야합니다.
[ params . shortest ]
enabled = true # Enable shorte.st
apiToken = " " # The API Token you received from shorte.st
domains = [ " " ] # The domains you want to define 페이지가 가진 게시물/카드 양을 제어하려면 paginate Config 변수를 사용하여 수행 할 수 있습니다.
paginate = 4 # Defaults to 10 또한 활성화 된 경우 태그가 모두 헤더 및 사이드 바에 기본적으로 표시되지 않습니다. 혼잡을 피하기 위해 상위 8 개의 태그 (기사가있는) 만 표시됩니다. 그러나 [params.tag] 테이블의 tagLimit 변수를 사용하여 재정의 할 수 있습니다.
[ params . tag ]
enabled = true
tagLimit = 10 # Top 10 tags will be displayed
# or
tagLimit = 0 # Display all tags다른 사소한 구성도 있습니다. 구성 파일 내부의 주석을 참조하여 설정할 수 있습니다.
이 저장소에 대한 문서는 현재 작업 중이며이 저장소의 위키에 추가됩니다. 위키 기부금이 가장 환영합니다. 이 테마의 기능에 대해 자유롭게 물어보십시오.
구성을 완료 한 후에는 좋습니다. 따라서 다음을 사용하여 웹 사이트를 테스트하십시오.
hugo server사이트는 이제 테스트 목적으로 http : // localhost : 1313에서 로컬로 제공됩니다.
예제 사이트를 테스트하려면 구성 파일을 Hugo에 명시 적으로 지정해야합니다. 이것은 다음과 같이 수행됩니다.
# For posts view demo
hugo server --config posts.toml
# For cards view demo
hugo server --config cards.toml이 테마에 추가하는 것이 흥미로운 것을 발견 했습니까? 문제 추적기를 통해 그것에 대해 알려주십시오. 풀 요청도 환영합니다. 기여 방법에 대한 자세한 지침은 Concibling.md 를 참조하십시오.
이 테마는 MIT 라이센스에 따라 릴리스됩니다.
