h030 Site의 IsServer 변수사용법에 대해 알고 싶어요

config.toml에는 다음과 같은 항목이 있습니다.

googleAnalytics = "UA-173380994-1"

Google Analytics 의 internal template을 사용할 수 있습니다.

{{ template "_internal/google_analytics.html" . }}
{{ template "_internal/google_analytics_async.html" . }}

저 안에는 .Site.GoogleAnalytics 변수를 다음과 같이 이용하고 있습니다.

layouts/partials/analytics.html

{{ if not .Site.IsServer }}
{{ with .Site.GoogleAnalytics }}
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{{ . }}');
</script>
{{ end }}
{{ end }}

이렇게 함으로써 hugo server를 실행했을 때에는 위의 script 태그가 전개되고, hugo 명령어를 실행할 때는 아래의 script 태그가 전개되게 됩니다.

그런데, 그 정의를 살펴보면, layouts/partials/service/google-analytics.html에 다음과 같이 정의되어 있습니다.

{{ if not .Site.IsServer }}
  {{ template "_internal/google_analytics.html" . }}
  {{ template "_internal/google_analytics_async.html" . }}
{{ end }}

즉 hugo server로 실행 중일 때는 나오지 않는 다는 말입니다.

.Site.IsServer는 서버모드로 빌드되었는 지를 살펴보는 boolean 타입의 변수입니다. Site 가 가지는 변수들의 일람은 여기 에서 살펴볼 수 있습니다.

또 다음과 같이 활용할 수도 있습니다.

{{ if $.Site.IsServer }}
  <script src="/local/materialize/materialize.min.js"></script>
{{ else }}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js" defer></script>
{{ end }}

이렇게 함으로써 hugo server를 실행했을 때에는 위의 script 태그가 전개되고, hugo 명령어를 실행할 때는 아래의 script 태그가 전개되게 됩니다.

그리고 .Inner변수로 넘겨받은 텍스트를 참조할 수 있기 때문에 예를 들어 다음과 같이 구현하는 것도 가능합니다.

{{ if .Site.IsServer }}
  <div class="private">{{ .Inner }}</div>
{{ end }}

여기서는 출력하는 div 요소에 private라고 하는 클래스를 할당을 하고 있습니다. 아래는 private 클래스에 적용하는 스타일 시트의 예입니다. (빨간색 계열의 색으로 강조 표시하도록 하고 있습니다)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.private {
  background: #fee;
  color: #f11;
  padding: 0.5em;
  border: solid 1px #f11;
}
.private::before {
  content: "Private 메모";
  display: block;
  font-weight: bolder;
}

사용방법

작성한 private ShortCode는 markdown 파일 안에서 다음과 같이 이용합니다.
ShortCode이므로 템플릿 파일 안에서는 사용할 수 없다는 점에 주의하세요.

---
title: "샘플 마트다움"
---

{{\< private \>}}
  다음은 비공개 메모입니다.
{{\< /private \>}}

다음과 같이 내부 텍스트에 Markdown 구문을 사용하는 것도 가능합니다.

{{\% private \%}}
여기는 비공개 메모입니다.

- Markdown 의 구문도 사용할 수 있다.
- Markdown 의 구문도 사용할 수 있다.
- Markdown 의 구문도 사용할 수 있다.
{{\% /private \%}}

.Site.Is Server를 사용할 수 없었을 때

.Site.Is Server 변수는 Hugov.0.38 에서 추가되었습니다. v.0.37 이전 버전에서는 로컬 서버에서 웹 페이지를 호스팅하고 있는지 여부를 .Site.Base URL 값이 http:/local host로 시작하고 있는지 여부를 판단했습니다.

layouts/shortcodes/private.html

{{ if hasPrefix .Site.BaseURL "http://localhost" }}
  로컬 서버로 동작하고 있습니다.
{{ end }}