文法

Rino.js 2 から、文法が標準 HTML ベースになり、 直感的で学習しやすいものになりました。 例えば、コンポーネントは次のように定義できます （詳しくはプロジェクト構造をご参照ください）:

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

このページでは、プロジェクト構造でカバーされていない Rino.js の文法について説明します。

JavaScript/TypeScript

Rino.js は JavaScript または TypeScript を使用した強力なテンプレート機能をサポートしています。 この機能を使用して、npm パッケージの統合、ファイルの読み込み、 またはプログラム的に HTML コンテンツを生成することができます。 静的サイト生成(SSG)でのみ使用できます。

主なポイント:

• @type属性を使用して、言語（js, javascript, ts, typescript）を指定します。
• console.log() を通じて任意のコンテンツを出力します。
• Javascript/Typescript パッケージを使用できます。
• HTML ページ パスはプロセス引数として渡されるため、共有コンポーネントで HTML ページ パスに基づいてページ テンプレートを生成できます。

例:

JavaScript の使用例:

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

TypeScript の使用例:

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

Markdown

Rino.js では、Markdown を HTML ファイル内に直接埋め込むことができます。 これは、@path属性を使用して外部ファイルから Markdown を読み込むオプションを補完します。

主なポイント:

• @type属性に md または markdown の値を使用します。
• 閉じタグ<\/script>は、バックスラッシュ<\/を追加してエスケープ処理を行います。

例:

<script @type="md" type="text/markdown">
# Markdownタイトル
このHTMLファイル内に埋め込まれたMarkdownコンテンツです。
<\/script>