Hugo에 대한 임의 인용

정적 Hugo 사이트에 임의의 인용문을 추가하고 싶었는데 위젯을 찾을 수 없어서... 그래서 하나 작성했습니다. 나는 이것이 Hugo 확장에 대해 더 많이 배울 수 있는 훌륭한 방법이라고 생각했고 실제로 그렇게 되었습니다.

👉   See my working example and GitHub repository.

단축 코드와 페이지 부분 위젯에 동일한 논리를 사용하고 싶었지만 불행히도 Hugo는 이러한 유형에 매개 변수를 다르게 전달합니다. 결국 두 위치에서 논리를 반복하는 것이 더 깔끔했습니다. 더 나은 솔루션을 찾으면 나중에 다시 방문할 수 있습니다.

사용 방법

Hugo 사이트에 임의의 따옴표를 추가하는 방법은 다음과 같습니다.

템플릿의 /layouts/shortcodes에 the shortcode을 추가합니다.

page partial을 /layouts/partials에 더합니다.

example stylesheet에서 .quote_heading , .quote_text 및 .quote_source를 테마의 사용자 정의 스타일에 추가합니다.

Hugo 프로젝트의 루트에 quotes.csv 파일을 추가합니다. 여기 a link to mine가 있습니다.

CSV 파일 정보

따옴표에는 다른 포함된 따옴표와 함께 쉼표가 포함되는 경향이 있기 때문에 필드 구분 기호로 파이프를 사용했습니다. 사실, 나는 펀트를 쳤다. 이 프로젝트를 다시 열면 JSON 또는 SQLite 로 리팩토링합니다.

레코드에는 다음과 같은 두 개의 필드가 있습니다.

"This is the 'first' quote."|"— Someone"
"This is the “second” quote."|"— Someone Else"

필드는 큰따옴표로 구분됩니다. Hugo와 JavaScript가 데이터를 전달하는 방식으로 인해 큰따옴표를 표현해야 하는 경우 적절하게 이스케이프 처리하기가 어렵습니다. 대신 작은 따옴표를 사용하거나 위의 "두 번째"따옴표와 같은 유니코드 둥근 따옴표를 사용해야 합니다.

단축 코드 사용 방법

Hugo 페이지에 이 단축 코드를 추가하십시오.

{{% quote [style] [heading] %}}

style는 정수입니다.

스타일1에 서식이나 CSS가 없습니다. 단일 공백으로 구분된 임의의 인용문과 출처를 표시합니다. 스타일 1은 제목을 지원하지 않습니다.

매개변수를 생략하면 스타일2이 기본값입니다. 스타일을 지정할 수 있는 CSS 선택기가 있는 선택적 제목, 텍스트 및 소스를 표시합니다.

heading는 따옴표 위에 표시할 선택적 문자열입니다.

쇼트코드 예시

다음은 제목이 없는 스타일 2의 서식 있는 인용문입니다.

{{% quote %}}

다음은 형식이 지정되지 않은 인용문입니다.

{{% quote 1 *%}}

다음은 제목이 있는 형식화된 인용문입니다.

{{% quote 2 "Quote of the Day" %}}

페이지 부분 사용 방법

페이지 부분 버전에는 페이지 머리말에 추가 필드가 필요합니다.

quote: 
  style: 2
  display: true
  heading: "Quote of the Day"

style는 정수입니다. 유효한 값은 1 및 2 입니다.

스타일1에 서식이나 CSS가 없습니다. 단일 공백으로 구분된 임의의 인용문과 출처를 표시합니다. 스타일 1은 제목을 지원하지 않습니다.

매개변수를 생략하면 스타일2이 기본값입니다. 스타일을 지정할 수 있는 CSS 선택기가 있는 선택적 제목, 텍스트 및 소스를 표시합니다.

display는 부울입니다.

true = 디스플레이

false = 숨김

heading는 따옴표 위에 표시할 선택적 문자열입니다.

페이지 부분 예

페이지 부분을 호출하려면 페이지에 추가하십시오.

{{ partial "quote.html" . }}

제한 사항

단일 페이지에 임의의 따옴표를 둘 이상의 위치에 추가할 수 없습니다. 개선이 가능한 부분입니다.

직접 확인하세요

my working example 및 GitHub repository을 참조하십시오.