휴고 파셜

2848 단어 beginnerstutorialjamstackhugo
작성자: Mike Neumegen

Hugo용 Git 기반 CMS인 CloudCannon에서 제공했습니다.



부분 파일의 기본 개념은 간단합니다. 반복을 줄이거나 일부 복잡성을 숨기기 위해 레이아웃에 포함할 수 있는 파일입니다. 부분적으로 사이트에 탐색 모음을 추가합니다. 이 논리를 baseof.html 에 직접 추가할 수 있지만 때로는 레이아웃을 더 작은 부분으로 분할하여 2000줄 파일을 처리할 필요가 없도록 하는 것이 좋습니다.

첫 번째 부분



최종 경로가 partials가 되도록 layouts 디렉토리에 /layouts/partials/ 디렉토리를 만듭니다. 다음 내용으로 생성nav.html 내부:

    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/about/">About</a></li>
      </ul>
    </nav>


그것이 처리 된 내비게이션입니다. 이제 레이아웃에 포함할 차례입니다. /layouts/_default/baseof.html를 열고 아래에 다음을 추가합니다<body>.

    {{ partial "nav.html" }}


Go에서 작은따옴표는 문자열에 적합하지 않습니다. 큰따옴표만 문자열을 지정합니다.

페이지를 렌더링하면 됩니다.

두 번째 부분



부분의 힘을 보여주기 위해 다른 시나리오를 시도해 봅시다. baseof.html의 내용을 부분으로 이동하여 <head>를 더욱 단순화합니다. 다음 콘텐츠로 생성/layouts/partials/meta.html:

    <meta charset="utf-8">
    <title>{{ print .Page.Title }}</title>
    {{ $style := resources.Get "sass/main.scss" | resources.ToCSS | resources.Minify }}
    <link rel="stylesheet" href="{{ $style.Permalink }}">


이 부분에는 현재 페이지의 컨텍스트가 필요한 변수가 있습니다. 다행스럽게도 현재 페이지의 컨텍스트를 단일 문자로 전달할 수 있습니다.
/layouts/_default/baseof.html를 열고 <head>의 내용을 다음으로 바꿉니다.

    {{ partial "meta.html" . }}


끝에 있는 그 작은.은 현재 페이지의 컨텍스트를 전달하여 부분이 현재 페이지의 제목을 인쇄할 수 있도록 합니다. Hugo 사이트에 이 내용이 많이 올라오는 것을 볼 수 있습니다. 기다리세요.

무엇 향후 계획?



다음 강의에서는 Hugo 템플릿의 기본 사항을 살펴보고 데이터를 조작하고 반복하는 방법을 살펴보겠습니다.
Hugo에서 데이터 사용
기본 계산기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage