プロジェクト構造

Rino 2はバージョン1と異なります。すべてはプロジェクトディレクトリとファイル構造を自動化するだけです。

つまり、プロジェクト構造について学べば、標準のHTML、CSS、JavaScript、Node.jsでウェブサイトを簡単に作成できるようになります。


- pages
- components
- mds
- public
- scripts
  - export
- styles
  - export
rino-config.js
image-compression.bat
image-compression.sh
image-compression.html
image-compression.js

/pages

/pagesディレクトリは基本的なHTMLファイルを配置するためのものです。 Rinoはこのディレクトリに基づいてウェブページを作成します。ファイルとディレクトリ構造は完全に同じになります。

/components

/componentsディレクトリはコンポーネントのHTMLファイルを配置するためのものです。コンポーネントは他のコンポーネントを含むことができますが、同じコンポーネントで無限ループを引き起こさないように注意してください。コンポーネントは次のような構文で使用できます：

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

@path: この属性はコンポーネントをインポートするために必要です。コンポーネントのパスを指定する必要があります。例えば、@path="/header"や@path="/ko/footer"のように指定します。

@tag: この属性はオプションです。ただし、コンポーネントタグでHTML属性を使用したい場合は、 HTML要素の名前を指定する必要があります。例えば、@tag="div"などです。

<component @path="/button" @tag="button" onclick="myFunction()" />

/mds

/mdsディレクトリはMarkdownファイルを配置するためのものです。 Rinoはこれらすべてを読み込み、リクエストに応じてMarkdownをHTMLに変換します。

<script @type="md" @path="" @tag="" type="text/markdowns"></script>

@type: この属性はMarkdownを使用するために必須です。 mdまたはmarkdown を指定してください。

@path: この属性はMarkdownをインポートするために必要です。 Markdownのパスを指定する必要があります。

@tag: この属性はオプションです。ただし、コンポーネントタグでHTML属性を使用したい場合は、 HTML要素の名前を指定する必要があります。

/public

/publicディレクトリは静的ファイルを配置するためのものです。画像、外部CSS、JavaScriptライブラリ、およびその他のアセットをここに配置できます。

/scripts

/scriptsディレクトリはJavaScriptライブラリを作成するためのものです。 npmパッケージを使用できます。そして、/scripts/export/ディレクトリにJavaScriptファイルを配置することで、エクスポートするものを選ぶことができます。 RinoはJavaScriptをビルドして/scriptsディレクトリにエクスポートします。そのため、エクスポートされたJavaScriptファイルは通常のHTMLで使うように利用できます。バージョン2.1.1から、TypeScriptも使用できるようになりました。

Rinoではスクリプトをimport/exportというモジュール形式で扱います。そのため、ファイル名はスクリプトインスタンスの名前になります。例えば、hello.jsやhello.tsの場合、外部から関数を呼び出す際にはhello.FunctionName()のように呼び出す必要があります。これらをインポートして、javascript/typescriptブラウザー開発標準に基づいて自由に操作することができます。

<script type="text/javascript" src="/scripts/example.js" />

/styles

/stylesディレクトリはCSSライブラリを作成するためのものです。そして、/styles/export/ディレクトリにCSSファイルを配置することで、エクスポートするものを選ぶことができます。 RinoはローカルのCSSファイルをインポートしてCSSライブラリを作成し、/stylesディレクトリにエクスポートします。そのため、エクスポートされたCSSファイルは通常のHTMLで使うように利用できます。

<link rel="stylesheet" href="/styles/example.css" />

ローカルのCSSファイルをインポートする例：


@import "../header.css";
@import "../sidebar.css";
@import "../footer.css";

rino-config.js

rino-config.jsはRinoの設定ファイルです。 npm run generateコマンドのための出力ディレクトリの変更や、 npm run devの開発サーバーのポート番号の変更、サイトURLの設定や、npm run sitemapまたはnpm run generate-sitemapでサイトマップを追加する設定ができます。

image-compressionファイル

image-compressionファイルは画像圧縮アプリを実行するためのものです。他のウェブフレームワークでは画像圧縮問題をうまく扱えないことが分かり、このアプリが開発されました。この画像圧縮アプリを実行して、画像を圧縮し、publicディレクトリに配置することができます。