구문

Rino.js 2부터, Rino.js의 구문은 표준 HTML을 기반으로 변경되어 직관적이고 배우기 쉽습니다. 예를 들어, 컴포넌트는 다음과 같이 정의됩니다 (프로젝트 구조를 참조하세요):

<component @path="/header" @tag="header" />

이 페이지에서는 프로젝트 구조에서 다루지 않은 Rino.js 구문을 설명합니다.

자바스크립트 / 타입스크립트

Rino.js는 JavaScript나 TypeScript를 활용한 강력한 템플릿 기능을 지원합니다. 이 기능을 통해 npm 패키지를 통합하거나, 파일을 읽고, 프로그래밍적으로 HTML 콘텐츠를 생성할 수 있습니다. 정적 사이트 생성(SSG)에만 사용 가능합니다.

주요 포인트:

• @type 속성을 사용해 언어(js, javascript, ts, typescript)를 지정하세요.
• console.log()를 통해 모든 콘텐츠를 출력합니다.
• Javascript/Typescript 패키지를 사용할 수 있습니다.
• HTML 페이지 경로가 프로세스 인수로 전달되므로 공유하는 컴포넌트에서 HTML 페이지 경로에 따라 페이지 템플릿을 만들 수 있습니다.

예시:

자바스크립트 사용:

<script @type="js" type="text/javascript">
import os from "os";
console.log(os.type());
console.log("<div>Hello, Rino.js!</div>");
<\/script>

타입스크립트 사용:

<script @type="ts" type="text/typescript">
import os from "os";
console.log(os.type());
console.log("<div>Hello, Rino.js with TypeScript!</div>");
<\/script>

마크다운

Rino.js는 HTML 파일 내에 마크다운을 직접 포함할 수 있습니다. 이는 @path 속성을 사용해 외부 파일에서 Markdown을 로드하는 옵션을 보완합니다.

주요 포인트:

• @type 속성에 md 또는 markdown 값을 사용하세요.
• 닫는 <\/script> 태그는 백슬래시(<\/)를 추가해 이스케이프 처리하세요.

예시:

<script @type="md" type="text/markdown">
  # 마크다운 제목
  HTML 파일에 포함된 마크다운 콘텐츠입니다.
<\/script>