단축 코드
목차
기본 Hugo 단축 코드 외에도 Congo는 추가 기능을 위해 몇 가지 추가 기능을 추가합니다.
Alert #
alert는 글에 스타일화된 메시지 상자를 출력합니다. 이는 독자가 놓치지 않도록 중요한 정보에 주의를 끌기 위해 사용됩니다.
입력은 Markdown으로 작성되므로 원하는 대로 형식화할 수 있습니다.
기본적으로 경고 아이콘을 사용하여 경고 메시지 상자를 표시합니다. 아이콘을 변경하려면 단축 코드에 아이콘 이름을 포함하세요. 아이콘 사용 방법에 대한 자세한 내용은 아이콘 단축 코드를 참조하세요.
예시:
{{< alert >}}
**Warning!** 경고 경고!
{{< /alert >}}
{{< alert "twitter" >}}
여기 [좋아요 댓글 구독 알림설정](https://twitter.com/jpanther) 부탁드립니다.
{{< /alert >}}
Badge #
badge는 메타데이터를 표시하는 데 유용한 스타일화된 뱃지 구성 요소를 출력합니다.
Example:
{{< badge >}}
새 글!
{{< /badge >}}
Button #
button는 주요 작업을 강조하는 데 사용할 수 있는 스타일화된 버튼 구성 요소를 출력합니다. 이는 세 가지 선택적 매개변수가 있습니다.
| Parameter | Description |
|---|---|
href |
버튼이 링크할 URL입니다. |
target |
링크의 대상입니다. |
download |
브라우저가 URL을 탐색하는 대신 리소스를 다운로드해야 하는지 여부입니다. 이 매개변수의 값은 다운로드된 파일의 이름이 됩니다. |
Example:
{{< button href="#button" target="_self" >}}
호출
{{< /button >}}
Chart #
chart는 간단한 구조화된 데이터를 사용하여 글에 차트를 포함합니다. 이는 여러 가지 다른 차트 스타일을 지원하며, 모든 것은 단축 코드 태그 사이에 차트 매개변수를 제공하여 구성할 수 있습니다. 간단히 단축 코드 태그 사이에 차트 매개변수를 제공하고 Chart.js가 나머지를 처리합니다.
공식 Chart.js 문서에서 구문 및 지원되는 차트 유형에 대한 자세한 내용을 참조하세요.
예시:
{{< chart >}}
type: 'bar',
data: {
labels: ['Tomato', 'Blueberry', 'Banana', 'Lime', 'Orange'],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 3],
}]
}
{{< /chart >}}
차트 샘플 페이지에서 추가 차트.js 예시를 참조하세요.
Figure #
Congo는 콘텐츠에 이미지를 추가하기 위한 figure 단축 코드를 포함합니다. 단축 코드는 추가 성능 이점을 제공하기 위해 기본 Hugo 기능을 대체합니다.
제공된 이미지가 페이지 리소스인 경우, Hugo Pipes를 사용하여 이미지를 최적화하고 다양한 장치 해상도에 적합한 이미지를 제공하기 위해 크기를 조정합니다. 정적 자산 또는 외부 이미지에 대한 URL이 제공되면 Hugo에서 이미지 처리 없이 이미지를 포함합니다.
figure 단축 코드는 여섯 가지 매개변수를 허용합니다.
| Parameter | Description |
|---|---|
src |
필수. 이미지의 로컬 경로/파일명 또는 URL입니다. 경로와 파일명을 제공하는 경우, 테마는 다음 검색 순서를 사용하여 이미지를 찾습니다. 먼저, 페이지와 함께 번들로 제공되는 페이지 리소스입니다; 그런 다음 assets/ 디렉토리의 자산; 마지막으로, static/ 디렉토리의 정적 이미지입니다. |
alt |
이미지에 대한 대체 텍스트 설명입니다. |
caption |
이미지 캡션에 대한 Markdown입니다. 이는 이미지 아래에 표시됩니다. |
class |
이미지에 적용할 추가 CSS 클래스입니다. |
href |
이미지가 링크할 URL입니다. |
default |
기본 Hugo figure 동작으로 돌아가기 위한 특수 매개변수입니다. 단순히 default=true를 제공하고 나머지는 Hugo 단축 코드 구문을 사용하세요. |
Congo는 표준 Markdown 구문을 사용하여 포함된 이미지의 자동 변환도 지원합니다. 다음 형식을 사용하고 테마가 나머지를 처리합니다.
예시:
{{< figure
src="abstract.jpg"
alt="Abstract purple artwork"
caption="Photo by [Jr Korpa](https://unsplash.com/@jrkorpa) on [Unsplash](https://unsplash.com/)"
>}}
<!-- OR -->
Icon #
icon은 SVG 아이콘을 출력하고 아이콘 이름을 유일한 매개변수로 사용합니다. 아이콘은 현재 텍스트 크기와 일치하도록 크기가 조정됩니다.
예시:
{{< icon "github" >}}
Output:
아이콘은 Hugo 파이프라인을 사용하여 매우 유연합니다. Congo는 소셜, 링크 및 기타 용도를 위한 많은 기본 제공 아이콘을 포함합니다. 지원되는 아이콘 전체 목록은 아이콘 샘플 페이지를 참조하세요.
사용자 정의 아이콘은 프로젝트의 assets/icons/ 디렉토리에 자산을 추가하여 추가할 수 있습니다. 그런 다음 아이콘은 .svg 확장자 없이 SVG 파일 이름을 사용하여 단축 코드에서 참조할 수 있습니다.
아이콘은 아이콘 파트리얼을 호출하여 부분에서도 사용할 수 있습니다.
Katex #
katex 단축 코드는 KaTeX 패키지를 사용하여 글 콘텐츠에 수학 표현식을 추가하는 데 사용할 수 있습니다. 지원되는 TeX 함수의 온라인 참조를 참조하세요.
글에 수학 표현식을 포함하려면 콘텐츠 어디에나 단축 코드를 배치하세요. 이는 한 번만 포함되어야 하며, KaTeX는 해당 페이지에서 자동으로 모든 마크업을 렌더링합니다. 인라인 및 블록 표기법 모두 지원됩니다.
인라인 표기법은 \\( 및 \\) 구분 기호로 식을 래핑하여 생성할 수 있습니다. 또는 $$ 구분 기호를 사용하여 블록 표기법을 생성할 수 있습니다.
예시:
{{< katex >}}
\\(f(a,b,c) = (a^2+b^2+c^2)^3\\)
\(f(a,b,c) = (a^2+b^2+c^2)^3\)
수학 표기법 샘플 페이지에서 더 많은 예시를 확인하세요.
Lead #
lead는 글의 시작에 중점을 두는 데 사용됩니다. 이는 소개를 스타일화하거나 중요한 정보를 강조하는 데 사용할 수 있습니다. 단순히 마크다운 콘텐츠를 lead 단축 코드로 래핑하세요.
Example:
{{< lead >}}
고생 끝에 낙이 온다
{{< /lead >}}
Mermaid #
mermaid는 텍스트를 사용하여 상세한 다이어그램과 시각화를 그릴 수 있습니다. 이는 다이어그램, 차트 및 기타 출력 형식을 지원하는 Mermaid를 사용합니다.
단순히 mermaid 단축 코드 내에 Mermaid 구문을 작성하고 플러그인이 나머지를 처리합니다.
공식 Mermaid 문서에서 구문 및 지원되는 다이어그램 유형에 대한 자세한 내용을 참조하세요.
예시:
{{< mermaid >}}
graph LR;
A[Lemons]-->B[Lemonade];
B-->C[Profit]
{{< /mermaid >}}
다이어그램 및 흐름도 샘플 페이지에서 더 많은 Mermaid 예시를 확인하세요.
Profile #
profile 단축 코드는 사이트 저자의 세부 정보를 표시하는 블록을 삽입합니다. 이는 Congo의 홈페이지 레이아웃에서 동일한 템플릿을 사용하지만 모든 글 콘텐츠에도 삽입할 수 있습니다. 이는 하나의 선택적 매개변수를 허용합니다.
| Parameter | Description |
|---|---|
align |
프로필 요소의 정렬 - 유효한 옵션은 start, center 및 end입니다. 값이 제공되지 않으면 center 정렬이 사용됩니다. |
템플릿은 언어 구성에서 설정한 저자 매개변수를 사용하여 채워집니다.
예시:
{{< profile align="center" >}}
