blog-astroのファイルとディレクトリの構造

FILE.md について

各ディレクトリ, ファイルの説明

content の説明は除く

ファイル構造

- assets
- components
  - item
    - Blog.astro
    - Nav.astro
    - Tag.astro
  - Footer.astro
  - Header.astro
  - Toc.astro
- content
  - blog
    - [ブログ記事].mdx
  - config.ts
- layouts
  - BaseLayout.astro
  - BlogLayout.astro
  - PageLayout.astro
- pages
  - blog
    - tags
      - [tags].astro
      - index.astro
    - [slug].astro
    - index.astro
  - about.astro
  - index.astro
- script
  - components
    - adjustMainMargin.js
  - blog.js
  - global.js
- styles
  - content
    - blog.css
  - pages
    - about.css
    - blog.css
    - index.css
  - global.css

ディレクトリ

assets

• 画像ファイルなどはここに保存。多分
• 今のところ未使用

components

• コンポーネント
• 共通パーツ
• エレメント

components/item

• item 要素のコンポーネント
• ファイル名だけではなんのコンポーネントなのか分かりづらいため、item ディレクトリを作成した感じ
• Blogs, Navs みたいにしない理由は、item 単位でコンポーネント化する方が design 調整しやすいから

content

• ページ管理ではなくコンテンツ管理
• content collection

content/blog

• ブログの投稿はここで作成

layouts

• 共通レイアウト
• 二つ以上同じレイアウトのページを作成する場合

pages

• ページ追加用
• コンテンツ管理の場合ルーティングさせてあげる

pages/blog

• blog コンテンツを管理

pages/blog/tags

• blog のタグを管理

script

• 共通 script
  • script はコンポーネントに書かないの？

script/components

• script の共通コンポーネント

styles

• 共通 style
• 共通 style より、コンポーネントの style の方が上書きされる？

styles/content

• content 管理の css

styles/pages

• 各ページの css

ファイル

src/components/Footer.astro

• このコンポーネントを使用しているファイル:
  • src/layouts/BaseLayout.astro
• 共通フッター

src/components/Header.astro

• このコンポーネントを使用しているファイル:
  • src/layouts/BaseLayout.astro
  • src/layouts/PageLayout.astro
• 共通ヘッダー

src/components/Toc.astro

• このコンポーネントを使用しているファイル:
  • src/layouts/BlogLayout.astro
• blog コンテンツの 目次
  • 表示する深さは h5 まで

src/components/item/Blog.astro

• このコンポーネントを使用しているファイル:
  • src/pages/blog/index.astro
  • src/pages/blog/tag/[tag].astro
• blog の item
• blog コンテンツをループ処理

src/components/item/Nav.astro

• このコンポーネントを使用しているファイル:
  • src/components/Header.astro
• nav の item
• 各ページへの導線

src/components/item/Tag.astro

• このコンポーネントを使用しているファイル:
  • src/components/item/Blog.astro
  • src/layouts/blogLayout.astro
  • src/pages/blog/tag/index.astro
• tag の item
• blog コンテンツのタグをループ処理

src/layouts/BaseLayout.astro

• このレイアウトを使用しているファイル:
  • src/layouts/BlogLayout.astro
  • src/layouts/PageLayout.astro

src/layouts/BlogLayout.astro

• このレイアウトを使用しているファイル:
  • src/pages/blog/[slug].astro
• このファイル要らないか？

src/layouts/PageLayout.astro

• このレイアウトを使用しているファイル:
  • src/pages/about.astro
  • src/pages/index.astro
  • src/pages/blog/index.astro
  • src/pages/blog/tag/[tag].astro
  • src/pages/blog/tag/index.astro
• とりあえずページの Layout

src/pages/about.astro

• URL: /about/
• プロフィール

src/pages/index.astro

• URL: /
• トップページ

src/pages/blog/[slug].astro

• URL: /blog/[slug]
• ブログ記事ページ

src/pages/blog/index.astro

• URL: /blog/
• ブログ記事一覧ページ

src/pages/blog/tag/[tag].astro

• URL: /blog/tag/[tag]
• ブログタグに関連する記事一覧ページ

src/pages/blog/tag/index.astro

• URL: /blog/tag/
• ブログタグ一覧ページ

src/script/blog.js

• blog ページの共通 js

src/script/global.js

• ページ全体で読み込む js

src/script/components/adjustMainMargin.js

• 使用している js
  • src/script/global.js
• なんとなくコンポーネント化
• main の上部の余白を調整

src/styles/global.css

• 共通 css

src/styles/content/blog.css

• content/blog の css

src/styles/pages/about.css

• pages/about の css

src/styles/pages/blog.css

• pages/blog の css

src/styles/pages/index.css

• pages/index の css