Rino.js
언어

콘텐츠 네비게이션:


발행 시간: 2025-04-15T01:21:00.000Z

프로젝트 구조

Rino.js는 HTML, 마크다운, CSS, JavaScript, TypeScript로 구성된 폴더를 정적 웹사이트로 변환합니다. 사용하는 폴더만 만들면 됩니다.

my-site/
  rino-config.js
  dev.js
  generate.js
  sitemap.js
  feed.js
  backoffice.js
  pages/
  components/
  mds/
  public/
  scripts/export/
  styles/export/
  contents/ko/blog/
  content-theme/ko/
  i18n/ko/

페이지와 컴포넌트

pages/의 파일은 상대 경로를 유지합니다.

pages/index.html      -> dist/index.html
pages/about.html      -> dist/about.html
pages/docs/index.html -> dist/docs/index.html

재사용할 HTML은 components/에 둡니다. .html 확장자 없이 불러옵니다.

<component rino-import="layout/header"></component>

이 코드는 components/layout/header.html을 읽습니다. 결과를 HTML 요소로 감싸고 다른 속성을 래퍼에 복사하려면 rino-tag를 사용합니다.

<component rino-import="button" rino-tag="button" type="button" class="primary"></component>

이전의 rino-path가 아니라 rino-import를 사용하세요. rino-path는 v3에서 지원하지 않습니다. 컴포넌트가 순환 참조하지 않도록 주의하세요.

마크다운

재사용할 마크다운은 mds/에 둡니다.

<script rino-type="md" rino-import="intro" rino-tag="section"></script>

공개 파일 (public)

public/의 파일은 출력 루트로 그대로 복사됩니다.

public/favicon.ico       -> dist/favicon.ico
public/images/photo.webp -> dist/images/photo.webp

브라우저 스크립트와 스타일

scripts/export/의 JavaScript와 TypeScript는 번들되어 dist/scripts/에 기록됩니다.

scripts/export/app.js -> dist/scripts/app.js
scripts/export/app.ts -> dist/scripts/app.js

styles/export/의 CSS는 의존성을 해석한 뒤 최소화되어 dist/styles/에 기록됩니다. 로컬 파일은 @import "../shared/tokens.css";처럼 표준 CSS 문법으로 가져옵니다.

<link rel="stylesheet" href="/styles/app.css" />
<script src="/scripts/app.js"></script>

콘텐츠 컬렉션

마크다운 컬렉션 경로는 contents/{theme}/{category}/{number-title}.md 형식입니다.

contents/ko/blog/1-first-post.md

파일 시작 부분에 HTML 주석으로 JSON 메타데이터를 작성할 수 있습니다.

<!--
{
  "title": "환영합니다",
  "time": "2026-08-31T10:00:00.000Z",
  "description": "첫 번째 글입니다."
}
-->

# 안녕하세요

각 테마에는 content-theme/{theme}/content.html과 content-list.html이 필요합니다. 콘텐츠 템플릿에서는 {{ content.title }}, {{ content.body }}, {{ content.urlPath }}, {{ content.time }}을 사용할 수 있습니다.

dist/contents/ko/blog/1-first-post.html
dist/contents-list/ko/blog/blog-1.html

설정과 메타데이터 생성

rino-config.js는 출력 경로, 개발 서버 포트, 사이트 URL, 추가 사이트맵 URL, 로케일을 설정합니다.

export default {
  dist: "./dist",
  port: 3000,
  site: { url: "https://example.com" },
  sitemap: ["https://example.com/custom-page"],
  i18n: { defaultLocale: "en", locales: ["en", "ko"] },
};

Rino.js는 페이지와 콘텐츠에서 sitemap.xml, RSS 및 Atom 피드, 테마별 피드를 만들 수 있습니다. 선택 기능인 백오피스 서버는 콘텐츠와 이미지 도구를 제공하며 3100부터 사용 가능한 포트를 찾습니다.