렌더러 API

루나리아는 생성된 대시보드에 컨텐츠를 슬롯팅하고 오버라이드할 수 있도록 지원합니다. 이 참조 문서에서는 사용 가능한 모든 렌더러 옵션을 다룹니다.

renderer.config.ts

import { defineRendererConfig } from '@lunariajs/core';

export default defineRendererConfig({
  // 여기에 구성 옵션을 작성하세요...
});

팁

렌더러 구성가 적용되도록 하기 위해, lunaria.config.json 파일의 renderer 필드를 채우는 것을 잊지 마세요.

컴포넌트

루나리아는 더 나은 컴포넌트 작성 경험을 위해 내장된 html 태그 리터럴을 제공합니다.

renderer.config.ts

import { defineRendererConfig, html } from '@lunariajs/core';

export default defineRendererConfig({
  slots: {
    afterTitle: () => html`<p>이것은 예제 컴포넌트입니다!</p>`,
  },
});

문법 강조 및 언어 지원은 lit-html VSCode 확장 프로그램과 vim-jsx-pretty 플러그인을 통해 가능합니다.

최상위 옵션

slots

유형: Slots

export default defineRendererConfig({
  slots: {
    head: (config) => html`<meta name="robots" content="noindex" />`,
    beforeTitle: (config) => html`<p>예제 컴포넌트</p>`,
    afterTitle: (config) => html`<p>예제 컴포넌트</p>`,
    afterStatusByLocale: (config) => html`<p>예제 컴포넌트</p>`,
    afterStatusByFile: (config) => html`<p>예제 컴포넌트</p>`,
  },
});

Slots

type Slots = {
  head?: (config: LunariaConfig) => string;
  beforeTitle?: (config: LunariaConfig) => string;
  afterTitle?: (config: LunariaConfig) => string;
  afterStatusByLocale?: (config: LunariaConfig) => string;
  afterStatusByFile?: (config: LunariaConfig) => string;
};

overrides

유형: Overrides

export default defineRendererConfig({
  overrides: {
    meta: (config) => html`<meta name="robots" content="noindex" />`,
    body: (config, status) => html`<main>예제 컴포넌트</main>`,
    statusByLocale: (config, status) => html`<p>예제 컴포넌트</p>`,
    statusByFile: (config, status) => html`<p>예제 컴포넌트</p>`,
  },
});

Overrides

type Overrides = {
  meta?: (config: LunariaConfig) => string;
  body?: (config: LunariaConfig, status: LocalizationStatus[]) => string;
  statusByLocale?: (config: LunariaConfig, status: LocalizationStatus[]) => string;
  statusByFile?: (config: LunariaConfig, status: LocalizationStatus[]) => string;
};