インストールディレクトリです。https://example.com/[mt-path]/mt-data-api.cgi/v4/これをベースに、各データをリクエストするためのパスを足していきます。下記のような感じですね。あれば、下記のように。なり、あとは取得したいデータに合わせて少し条件を足します。パラメータを付け加えましょう。下記のようになります。環境変数として指定しておきます。後述するファイル内で後から指定するので一旦保留しておいてください。環境変数に関しては、下記に公式ドキュメントがあります。Documentation設定した環境変数は下記のように呼び出すことができます。import.meta.env.SECRET_MT_ENDPOINT_URLここまで来たら下準備は完了です。実際のページを作っていきましょう。配下に各ページを作成していきます。共通レイアウトまずは各ページの作成を楽にするため、全体の共通レイアウトを作ってしまいましょう。全ページ共通のヘッダやフッタはここに記述します。ファイルを新規作成します。ページとして書き出される内容を記述するのが基本になります。ファイルのコンポーネントスクリプトは下記のような感じになります。記述がありますが、これが、前のセクションで導入したカスタムフォントの読み込みになります。ここに記述しておくと便利です。コンポーネントテンプレートは下記のように記述しました。わかりやすいと思います。部分に、別途作成する各ページの内容が挿入されます。データを取得してくる部分を作っておきましょう。ファイルを新規作成します。ベースを読み込みます。import.meta.env.SECRET_MT_ENDPOINT_URL;エンドポイントに対して、データをリクエストする部分を下記のように。モジュールを作成しておきます。data;}↑とりあえず記事の一覧を取得するやつ。引数で件数を指定可能に。data;}↑カテゴリの一覧を取得するやつ。件数を引数にして、カテゴリ別の記事一覧を取得するやつ。しておけば、あとで下記のようにして簡単に使い回せます。"lib/api.js";トップページ(新着記事一覧)まずはトップページを作ってみましょう。簡単な記事一覧ページです。ファイルを新規作成します。ディレクトリ内に作っていくことになります。ソースコードは下記の通りです。"サンプルブログのトップページです。やってることは単純名のでわかりやすいと思いますが、これでトップページは完成です。カテゴリ別記事一覧ページ次にカテゴリごとの記事一覧ページを作ってみましょう。ファイルを新規作成します。ソースコードは下記の通りです。関数をエクスポートしてパスを指定していきます。はじめ、このページで使用するページタイトルなどの情報もセットしておきましょう。5);これで、カテゴリ別の一覧ページも完成です。個別記事ページここまできたらあとは記事の個別ページを作成すればほぼ終わりです。ファイルを新規作成します。ソースコードは下記の通りです。使用して動的ルーティングを行います。件分の記事しか個別ページを生成しないようにしていますが、実際には全ページリストを取得して、パスを指定しないといけません。ソースコードはあくまで参考として。ページ分割の仕組みも用意されているので、比較的簡単に実装できます。サンプルソースに含めておきました。${page.lastPage})ページです。件ごとにページ分割しています)。下記のように作成します。"サンプルブログです。フィードが生成されます。動作確認さて、ここまできたら、再度開発サーバを立ち上げて、各ページが正しく表示されるかを確認してみましょう。トップページに記事一覧が表示され、記事をクリックした時にきちんと記事のページに遷移できれば成功です。エラーが出る場合はエラーメッセージを確認して修正しましょう。ディレクトリに静的なファイルが書き出されます。各サービスへのデプロイガイドは下記に公式ドキュメントがありますので参考まで。したい場合のアダプタも用意されています。便利なのでオススメです。最後に補足情報を少し。ファイルを作っておけばそれが利用されます。詳しくは公式ドキュメントを参照してください。サイトを公開する場合は使えないので、別の方法を考える必要があります。Documentation記事をここまで御覧頂きありがとうございます。この記事が気に入ったらサポートしてみませんか?サーバ代の足しにさせて頂きます。観戦、インターネット、音楽鑑賞、筋トレ、腕時計収集が趣味。好物はゼリー、グミ、お酒、ラーメン。(yoshiki.kato@gmail.com)。