Hugo

Hugo는 일반 HTML을 빌드하고, Ikiform에는 일반 폼 POST면 충분하므로 추가할 JavaScript가 없습니다. Hugo만의 함정은 Markdown입니다. markup.goldmark.renderer.unsafe를 켜지 않으면 Hugo의 렌더러가 콘텐츠 파일의 원시 HTML을 제거하므로, 붙여 넣은 폼이 <!-- raw HTML omitted -->로 바뀝니다. 쇼트코드를 쓰면 HTML을 템플릿 안에 둘 수 있습니다.

설정하기

1. 설정에 폼 ID 추가하기

   baseURL = "https://example.com/"
   
   [params.ikiform]
   formId = "frm_xxxxxxxxxxxxxxxx"
   thanks = "/thanks/"

   baseURL은 실제 https: 주소여야 합니다. 파셜이 이 값으로 thanks를 절대 URL로 바꾸며, Ikiform은 https: 리디렉션만 따릅니다.

2. 파셜 만들기

   {{ $id := .id | default site.Params.ikiform.formId }}
   {{ $thanks := .thanks | default site.Params.ikiform.thanks }}
   <form class="ikiform" action="https://ikiform.com/f/{{ $id }}" method="post">
     <label>Email <input name="email" type="email" autocomplete="email" required></label>
     <label>Message <textarea name="message" rows="5"></textarea></label>
     {{ with .subject }}<input type="hidden" name="_subject" value="{{ . }}">{{ end }}
     {{ with $thanks }}<input type="hidden" name="_redirect" value="{{ . | absURL }}">{{ end }}
     <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden>
     <button type="submit">{{ .button | default "Send" }}</button>
   </form>

   비어 있더라도 항상 dict와 함께 호출하세요. 모든 키는 선택 사항이며 없으면 사이트 파라미터를 사용합니다.

3. 쇼트코드로 감싸기

   {{ partial "ikiform-form.html" (dict "id" (.Get "id") "subject" (.Get "subject") "button" (.Get "button")) }}

   Hugo 0.146부터 템플릿이 layouts/_partials와 layouts/_shortcodes로 옮겨졌습니다. 이전 버전에서는 layouts/partials와 layouts/shortcodes를 사용하세요.

4. 사용하기

   아무 콘텐츠 파일에서:

   ---
   title: Contact
   ---
   
   Questions about pricing? Write to us.
   
   {{< ikiform subject="Pricing question" >}}

   또는 모든 페이지에 폼을 넣으려면 레이아웃에서:

   <footer>
     {{ partial "ikiform-form.html" (dict "subject" "Footer enquiry") }}
   </footer>

리디렉션용으로 content/thanks.md 페이지를 추가하세요. Ikiform은 폼의 허용 도메인에 여러분의 사이트가 포함된 경우에만 _redirect를 따르며, 그렇지 않으면 방문자에게 Ikiform의 감사 페이지가 보입니다. _redirect 규칙을 참고하세요.

허용 도메인

프로덕션 도메인과, 빌드된 사이트를 미리 보는 모든 곳을 등록하세요.

• netlify.app, pages.dev, github.io만 단독으로 추가하지 마세요. 다른 사람의 사이트를 포함해 그 호스트의 모든 사이트가 일치하게 됩니다.

테스트 체크리스트

1. hugo server를 실행하고 페이지를 열어 소스를 보세요. <!-- raw HTML omitted -->가 아니라 <form>이 보여야 합니다.
2. 허용 도메인에 localhost를 넣고 로컬에서 제출하세요. absURL이 http://localhost 주소를 만들고 https: 리디렉션만 따르기 때문에 Ikiform의 감사 페이지로 이동합니다.
3. 미리보기를 배포해 그곳에서 제출하고, 제출이 Ikiform에 표시되며 스팸으로 표시되지 않았는지 확인하세요.
4. 프로덕션 도메인에서 제출하고 /thanks/로 이동하는지 확인하세요.

문제 해결

관련 문서

• Jekyll인클루드와 GitHub Pages 설정.
• EleventyNunjucks, Liquid, Markdown용 쇼트코드.
• HTML 폼리디렉션, 예약 필드, 허니팟.
• 허용 도메인출처를 비교하는 방식과 불일치 시 동작.