Jade로 만드는 맞춤 태그 입문

이 기사는 「Web Components 라든지에 흥미는 있지만, SEO도 소중한 것이구나ー」라는 방향의 내용입니다.

rating 태그 만들기



예를 들어, 아래와 같이 표시되는 rating 태그를 만들고 싶은 경우.



HTML에는 <input type="rating" /><ratings /> 태그도 없기 때문에, Jade 로 자작합니다.

우선 Jade의 기법에 대해 가볍게 만져 두면,

Jade
a(href="/" target="_blank") Home

와 같이 작성하면 컴파일 후에 다음과 같은 HTML이 나옵니다.

HTML
<a href="/" target="_blank">Home</a>
img 태그와 같은 빈 요소의 경우는 이렇게 씁니다.

Jade
img(src="logo.png" alt="ロゴ")

어쨌든 자바 스크립트 함수 호출과 유사합니다.
실제로 이런 일도 할 수 있습니다.

Jade
+say(hello="world")

앞에 +를 붙이면 함수 (mixin)를 호출합니다.
그래서 사전에 say 를 정의해 둡시다.

Jade
mixin say
  if (attributes.hello && attributes.hello !== "")
    p Hello, #{attributes.hello}

JavaScript와 비슷하지만 브라우저에서 실행되는 것은 아닙니다. 정적 HTML을 출력합니다.

이 경우 컴파일 결과는 다음과 같습니다.

HTML
<p>Hello, world</p>
hello 속성을 가지는 커스텀 태그 say 의 완성입니다.

rating 태그의 사양 결정



구현에 들어가기 전에, rating 태그와는 어떠하고 싶은지를 명확하게 합니다.
  • value 를 세트 할 수 있고 submit 할 수 있도록 하고 싶다
  • readonly 속성으로 읽기 전용으로 할 수 있도록 하고 싶다
  • stars 속성으로 5 단계 평가에서 변경할 수 있도록 하고 싶다
  • max 속성으로 value 의 최대치를 설정하고 싶다
  • max 속성이 있으면 stars와의 비율로 value를 표시하고 싶습니다.
  • 별의 표시 정밀도는 0.5 단위, 입력 정밀도는 1 단위로 설정하고 싶습니다
  • 입력은 탭으로 수행하고 싶습니다

  • 즉,

    Jade
    +rating(value="3")
    



    아니,

    Jade
    +rating(value="50" max="100")
    



    같은 이미지입니다.

    rating 태그 완성



    길어질 것 같으므로 먼저 완제품을 참조하십시오.

    작동 방식



    CSS를 비활성화하고 보면 알 수 있지만 각 별은 input(type="radio")로 구현됩니다. value"0" 의 경우도 있을 수 있으므로, 디폴트의 radio 의 수는 6 입니다.

    나중에 CSS에서 열심히 하는 것과 JS를 조금 썼습니다. 「별의 표시 정밀도는 0.5 단위」라고 하는 사양이 없으면, JS가 없어도 제대로 움직입니다.

    자세한 소스는 이쪽


  • Mixin
  • CSS
  • JS
  • rating 태그는 조금 복잡하기 때문에, 처음에는 좀 더 간단한 커스텀 태그로 시작하는 것이 좋을지도 모릅니다.
  • icon.jade
  • button.jade

  • 이상입니다.

    Have a nice SEO!

    좋은 웹페이지 즐겨찾기