Tl;Dr;

공식 패키지를 읽으면 다양한 공부가 될 것입니다.

TOC

동기

만드는 방법

사용법

기타 예

요약

1. 동기

최근 Elm에 빠진 방금의 웹 초보자입니다만, netlify로 자신의 홈페이지 를 공개해 보기로 했습니다
(지금 시작한지 ​​CSS가 없기 때문에 아직입니다)
거기서 netlify의 form의 투고를 자동으로 취득해 주는 기능을 사용해 보려고 생각하고 netlify attribute를 추가해 보았습니다
(덧붙여서, 기능으로서는 잘 작동하지 않았습니다. 그것은 나중에)

netlify attribute

netlify attribute 을 form 태그에 추가하면 netlify가 자동으로 게시물을 가져옵니다.

2. 만드는 방법

만드는 방법은 공식 패키지 elm/Html을 참고로했습니다 (elm을 설치하면 $HOME/.elm/0.19.0/package/elm/html/
매우 간단하고 다음과 같은 방법으로 할 수 있습니다.

import VirtualDom

netlify : String -> Html.Attribute msg
netlify str =
  VirtualDom.attribute "netlify" str

3. 사용법

Main.elm

view : Model -> Html Msg
view _ =
  form [netlify]
       [ input [ type_ "text" ] []
       , button [ type_ "submit" ] [ text "submit" ]
       ]

이 view는 다음과 같습니다.

<form netlify>
  <input type="text">
  <button type="submit">submit</button>
</form>

생각대로 할 수 있어요! 했어! !

기타 예

Youtube 등록 버튼 을 사용하는 방법은 다음과 같습니다.

dataChannelid : String -> Html.Attribute msg
dataChannelid id =
    VirtualDom.attribute "data-channelid" id


dataLayout : String -> Html.Attribute msg
dataLayout str =
    VirtualDom.attribute "data-layout" str


dataCount : String -> Html.Attribute msg
dataCount str =
    VirtualDom.attribute "data-count" str


view =
  div [ class "g-ytsubscribe", dataChannelid "UCPf-EnX70UM7jqjKwhDmS8g", dataLayout "full", dataCount "default" ] []

이렇게하면 마왕 참치 나의 YouTube에 링크 할 수 있습니다.
이미지 이미지↓


(단 이것도 여러 조건이 있는 것 같고, 페이지가 열렸을 때에 로드하지 않으면 잘 되지 않습니다. 코드 때문이라기보다는 구조의 문제라고 생각합니다)

요약

의외로 Html.Attribute 추가는 쉬웠다!

공식 패키지를 볼 수있는 것은 정말로 고맙습니다. 여러가지 배울 수 있습니다.

덧붙여서 그 근처에 property 의 추가 방법등도 써 있으므로 나무가 되는 사람은 꼭...?

netlify의 형태로 잘 가지 않았다.

구현한 것은 좋지만 실제로 사용해 보면 아무래도 제대로 작동하지 않는 것 같습니다.

Netlify comes with built-in form handling.
Our build bots do it by parsing your HTML files directly at deploy time,
so there’s no need for you to make an API call or include extra JavaScript on your site.

htps //w w. 네 tぃfy. 코 m / 두 cs / 후 rm 밥 d ぃ g /

흠.

Our build bots do it by parsing your HTML files directly at deploy time,

...

at deploy time

... デプロイ時にHTMLをパースして行います 그래서 정적 파일에 존재하지 않기 때문에 아웃했습니다.

해결책

Elm에서가 아니라 index.html 안에 넣자