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!