Skip to content

Latest commit

 

History

History
52 lines (32 loc) · 3.1 KB

dev-note.md

File metadata and controls

52 lines (32 loc) · 3.1 KB
Raw

開発に関わるメモ

構成

基本的にはNuxt 3の標準ディレクトリ構成に従っています。

ページの作成

サイト内のページは

  • /pages以下にvueファイルとして配置
  • /content以下にMarkdownファイルとして配置

されています。いずれの場合でも、フォルダ/ファイル名がURLになります。 (例: /pages/entry/register.vue → /entry/register, /content/event/17th/index.md → /event/17th)

/pages

see: https://nuxt.com/docs/guide/directory-structure/pages

/pages以下にvueファイルを配置することで、そのファイルがページとして認識されます。複雑なロジックを持つページを作成したい場合に向いています。

/content

see:

/content以下にMarkdownファイルを配置することで、そのファイルがページとして認識されます。テキスト/画像のみシンプルなページを作成したい場合に向いています。

お問い合わせページ(/content/contact.md)やプライバシーポリシーページ(/content/about-google-analytics.md)などが該当します。

Important

Markdownファイル内で画像を使用する場合、画像ファイルは/public以下に配置してください。 例えば画像ファイルを/public/img/content/17th/map.pngに配置した場合、Markdown内では![地図](/img/content/17th/map.png)のパスで参照できます(/public部分は不要)。

Tip

/components/content以下に作成されたVueコンポーネントであれば、Markdownファイル内でも使用できます。例えばイベント開催概要ページでのゲーム一覧表示には/components/content/ContentEntryList.vueを使用しています。 <ContentEntryList slug="18th"></ContentEntryList>のように記述することで使用できます。 see: https://content.nuxt.com/usage/markdown#vue-components>

Tip

Markdownファイルの表示に使用される<h1>や<p>をカスタマイズしたい場合、/components/content/XXX.vueを作成してください。どのようなコンポーネントが使えるかはhttps://github.com/nuxt-modules/mdc/tree/main/src/runtime/components/proseを参照してください。 see: https://content.nuxt.com/usage/markdown#prose-components, https://content.nuxt.com/components/prose

/content以下のMarkdownファイルの表示の仕組み

例えば/event/10th/reportへのページアクセスが発生すると、/pages/event/10th/report.vueの存在が確かめられます。このファイルが存在しなかった場合、次にCatch-all Routeとなっている/pages/[...slug].vueが読み込まれます。このファイル内でnuxt/contentによるMarkdownファイルの読み込みを行い、その内容を表示しています。