Sota Tech Blog.
Astroを使ってみる - Typescriptを利用したブログを作るハンズオン - Vol.2投稿日: 2023年 3月25日
少しずつAstroを知っていく
ナビゲーションを共通化のためのコンポーネントを作成
aboutページで作成していたヘッダー部分をコンポーネント化する
componentsフォルダを作成してNavigation.astroを作る
書き方がしっかりとコードフェンスに慣れていればめちゃ描きやすい！
src/components/Navigation.astro
---
---
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>pages/index.astro
import Navigation from '../components/Navigation.astro';
---
<Navigation />と記述するだけで簡単に利用することができるようになる。
フッターを作っていく
components/Footer.astro
---
const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
<footer>
<p>
My creation Project by: <a
href={`"https://www.${platform}.com/${username}/${projectName}"`}
>{projectName}</a>
</p>
</footer>pages/index.astro
import Footer from '../components/Footer.astro';
---
<Footer />Propsを加える
これもcomponents同様にすごく簡単に実装することができる。
ソーシャルメディアの部分をpropsのあるコンポーネントとして利用する
components/Social.astro
---
interface SocialProps {
[key: string]: string;
}
const { platform, link }: SocialProps = Astro.props;
---
<a href={`${link}`}>{platform}</a>全体像だとこんな感じ。
全てpropsで統一していないけど参考として記述しておく
components/Footer.astro
---
import Social from './Social.astro';
const platform: string = 'github';
const username: string = 'sasaki-sota';
const projectName: string = 'astro-handson';
---
<footer>
<p>
My creation Project by: <a
href={`"https://www.${platform}.com/${username}/${projectName}"`}
>{projectName}</a
>
</p>
<Social platform="instagram" link="https://www.instagram.com/" />
</footer>レイアウト編
ベース部分の作成をする
layoutsファイルを作成
slot ... ここの部分を記述することでBaseLayout内のelementを反映することができるようになっている
src/layouts/BaseLayout.astro
---
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = 'Home Page';
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<h1>{pageTitle}</h1>
<slot />
<Footer />
</body>
</html>pages/index.astro
---
import BaseLayout from '../Layouts/BaseLayout.astro';
const pageTitle = 'Home Page';
---
<BaseLayout>
<h2>My awesome blog subtitle</h2>
</BaseLayout>これ以降の部分について
個人的にこれ以上キャッチアップすることは現段階ではないということを判断することができたのでやりません。
現在、かなり忙しい状態でありあまり時間もないため、とりあえず今後のastroの再会めどは立っていない状況です。
また時間ができた時に残りのAPIの取得部分やデザイン周りにも注力していきたいと思っていますがここまででastroの大まかの雰囲気は掴めたと思います。
このプロジェクト自体はドキュメントと少し違いtypescript中心に開発していきましたが、今後さらにしっかり記述していきたいです。
また、今回のプロジェクトを通してかいつまんで機能を実装したりコードを記述しなければ後からしんどくなるということを学んだので今後はしっかりと重要な部分をみき分けて記述していきます。
このような形になって申し訳ありませんが、今後この記事の更新やプロジェクトの続編などもあるかもしれないので注目してもらえると嬉しいです。
ご迷惑をおかけします🙇♂️