Hugo: 단축 코드에서 부분 사용

최근에 나는 공통적으로 상당히 동일한 HTML 마크업을 갖는 다양한shortcodes이 있는 이 엣지 케이스를 가지고 있었습니다.

Hugo를 사용하면 마크다운 파일(콘텐츠에 사용됨)의 단축 코드를 바로 가기로 사용하여 사용자 지정 템플릿을 로드할 수 있습니다. 대신 HTML을 직접 사용할 수도 있지만 유지 관리가 훨씬 어렵습니다.

제가 가장 좋아하는 기능 중 하나는 layouts/shortcodes 디렉토리 내의 하위 폴더에 단축 코드를 구성하는 기능입니다. 다른 단축 코드 안에 단축 코드를 중첩할 수도 있습니다!

Source: Hugo documentation - Create Your Own Shortcodes

그러나 여러 템플릿에서 불필요한 중복을 방지하기 위해 일종의 포함을 사용할 수 있습니다.

<!-- layouts/shortcodes/myshortcode.html -->
<!-- layouts/shortcodes/myshortcode2.html -->
{{ $param1 := .Get 0 }}
{{ partial "mypartial" (dict "param1" $param1) }}


  • $param1layouts/shortcodes/myshortcode.html 모두에서 layouts/shortcodes/myshortcode2.html를 잡을 수 있습니다.
  • 부분의 위치는 layouts/partials/mypartial.html입니다.
  • 위치 매개변수 대신 named parameters을 사용할 수 있으므로 .Get 0.Get "myparameter"가 됩니다. .Get 0 , .Get 1 , .Get 2 등이 더 읽기 쉽습니다.

  • 그런 다음 템플릿 파일에서 다음을 수행합니다.

    <div class="myhtml">
    {{ with .param1 }}
        {{ . }}
    {{ end }}
    </div>
    

    좋은 웹페이지 즐겨찾기