[Learn Hugo] 프로젝트 구조

우리는 정적 사이트와 동적 사이트 간의 차이점을 토론하고 Hugo CLI를 사용하여 Hello World 프로젝트를 만들었다.본고는 이 프로젝트의 폴더 구조를 더욱 상세하게 소개할 것이다.
다음은 Dellhello-world의 프로젝트입니다.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
│   └── index.html
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
우선, 실행 hugo server 명령이 resources 폴더를 만들 수 있음을 알 수 있습니다.이것은 그림이나 스타일 같은 모든 자원을 만드는 특수한 곳이다.우리는 잠시 후에 우과관에 관한 장과 절에서 그것을 토론할 것이다.이제 이 폴더가 Hugo에서 생성된 것만 알면 개발자 스스로는 그 안에 어떤 내용도 넣지 않습니다.
나머지 디렉터리와 파일은 개발자가 관리한다.
원형
원형이 왜 중요한지 이해하기 위해서 우리는 반드시 앞의 내용을 소개해야 한다.가격 인하의 상하문에서 가장 중요한 것은 키 값으로 제공된 메타데이터이다.
예를 들어, 다음 문서를 봅니다.
---
author: Shakespeare
book: Hamlet
---

To be, or not to be: that is the question.
--- 사이에 싸인 부분은 가장 앞의 내용이다.우리의 예에서 관건은 작가와 책, 가치관은 셰익스피어와 햄릿이다.값은 목록이나 대상과 같은 더 복잡한 데이터 구조일 수 있음을 주의하십시오.우리가 사용하는 격식은 yaml이다.Hugo도 json, toml 또는 org 앞의 내용을 지원한다.
왜 이게 중요합니까?우리가 처리할 대부분의 내용은 가격 인하 문서의 형식으로 표시될 것이다.앞의 내용을 사용하면 문서의 일부 특성을 정의할 수 있습니다. 이 특성들은 Hugo가 내용을 어떻게 미리 보여주는지 알려 줍니다.
우리들에게 실제 예를 보여 주자.Hugo에는 컨텐트를 생성하는 명령이 있습니다.이를 사용하여 첫 번째 게시물을 작성합니다.
hugo new posts/this-is-my-first-post.md
이를 실행하면 다음과 같은 할인 문서가 작성됩니다.
--------
title: "This Is My First Post"
date: 2020-09-24T09:20:46-07:00
draft: true
--------
만약 우리가 관찰archetypes/default.md한다면, 우리는 생성된 날카로운 물질이 어디에서 나오는지 볼 수 있다.파일의 기본 원형 파일을 다음과 같이 수정합니다.
--------
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
featured: false
--------
이제 다른 게시물을 만듭니다.
hugo new posts/this-is-my-second-post.md
이번에 생성된 프런트엔드 물질은 다음과 같이 기본 원형에 따라 다릅니다.
--------
title: "This Is My Second Post"
date: 2020-09-24T09:27:20-07:00
draft: true
featured: false
--------
사이트가 발전함에 따라 구조화된 내용은 더욱 두드러진다.우리는 앞으로 더 많은 원형을 만들고 싶어 할 것이다.생성 내용의 처리를 정의하는 등 더 높은 용례도 있다.
이제 우과가 새로운 내용을 위해 앞부분 내용을 만들 때 주의해야 할 부분이라는 것을 명심하세요.
프로비저닝
우리의 예에서 그것은 config.toml 파일이다.더 큰 프로젝트에 대해서는 하나의 디렉터리로 개발과 생산 환경에 단독 설정을 제공할 수 있다.지원되는 형식은 json, yamltoml입니다.
설정 파일에서 많은 명령을 제공할 수 있습니다.이 시리즈의 깊이에 따라 우리는 가장 중요한 내용에 대해 더 많은 것을 알게 될 것이다.
컨텐트
원형을 토론할 때, 우리는 이미 이 폴더를 사용했다.일반적으로 이것은 내용을 놓는 곳이다.만약 네가 블로그를 쓰고 있다면, 너의 게시물은 여기에 놓을 것이다.만약 네가 사람들에게 어떻게 인코딩하는지 가르치고 싶다면, 너의 강좌도 여기에 속한다.
주의해야 할 점은 Hugo가 유형에 따라 내용을 구분할 수 있다는 점이다.내용의 유형을 정의할 수 있는 여러 가지 방법이 있다.
예를 들어 content/posts/this-is-my-first-post.mdcontent/posts/this-is-my-second-post.md에 게시된 게시물은 POST 유형입니다.이것은 그들이 속한 하위 디렉터리의 이름으로 정의됩니다.
컨텐트 표지에서 유형을 지정할 수도 있습니다.
--------
title: "This Is My First Post"
date: 2020-09-24T09:20:46-07:00
draft: true
type: tutorial
--------
현재, 이 문서는 더 이상 포스터가 아니라tutorial 형식입니다.
데이터
이 폴더는 개발자가 웹 사이트에 내용과 함께 표시하기를 원할 수도 있는 다양한 데이터를 포함하고 있습니다.이것은 단독 페이지를 만드는 데 사용되지 않지만, 다른 페이지의 상하문에서 끌어올릴 수 있습니다.구성 파일과 유사하게 Hugo는 json, yaml, toml 형식의 데이터를 지원합니다.
배치
이것은 웹 사이트의 HTML을 포함하는 폴더입니다.이 자체는 하나의 독립된 주제로 다음 게시물에서 상세하게 소개할 것이다.
정지했어
이 폴더는 어떤 처리도 필요 없이 원래대로 사용해야 하는 파일을 저장하는 데 사용된다.CSS, 자바스크립트, 심지어 그림 같은 미디어 파일도 가능합니다.
메시지
Hugo는 프로젝트에 사용되는 모든 테마를 위탁 관리하는 데 사용되는 풍부한 테마 생태계로 유명하다.많은 강좌는 개발자로 하여금 기존의 주제를 설치함으로써 학습을 시작하게 한다.비록 이것은 좋은 방법일 수도 있지만, 만약 당신이 가능한 한 빨리 시작하고 싶다면, 0부터 시작하면 당신의 생활을 장기적으로 보기 쉽게 할 것이다.결국 우과 주제는 우과 사이트와 비슷하다.레이아웃과 템플릿의 작업 방식을 이해하면 테마를 사용하고 수정하는 데 도움이 될 것입니다.
이 절은 여기까지!다음에 우리는 레이아웃, 템플릿을 소개하고 실제 사이트를 구축하기 시작할 것이다.안녕히 계세요!

좋은 웹페이지 즐겨찾기