post-4

2022-07-01

This is the first post of my new Astro blog.

Written by: Astro Learner

tags

The Astro logo on a dark background with a pink glow.

astroの書き方!!

配列

// 定義
---
const skills = ["HTML", "CSS", "JavaScript", "PHP", "Astro"];
---

// 出力
{skills.map((skill) => <p>{skill}</p>)}

条件分岐

// 定義
---
const happy = true;
const finished = false;
const goal = 3;
---

// happyがtrueかどうか
{happy && <p>I am happy to be learning Astro!</p>}

// finishedがtrueかどうか
{finished && <p>I finished this tutorial!</p>}

// goalが3かどうか。これもしや、型も判定してる？
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}

style!

個々のページのスタイルを設定する場合

スタイルを適用させたいページの style タグ内に書くっぽい

フロントマターで css の変数も定義できちゃう

define:vars={ {...} }ディレクティブとかいうのを使用できる 少しだるいけどまあまあ使えそう scssとかいらなくね？

// フロントマター部分
const skillColor = "navy";

/* CSS */
<style define:vars={{ skillColor }}>

.skill {
  color: var(--skillColor);
}

知らんプロパティでてきた

グローバルスタイルシートを追加する

// フロントマタースクリプトで読み込み
---
import '../styles/global.css';
---

レスポンシブスタイルを追加する

フロントマタースクリプトって何やねん

多分、astroファイルの上部で記述できるJavaScriptのことやな

コンポーネントきましたぁ

ナビゲーションをコンポーネント化

フッターのソーシャルメディアをコンポーネント化

// Social.astro
---
const { platform, username } = Astro.props;
---

<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

// Footer.astro
---
import Social from "./Social.astro";
---

<footer>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

---
const { platform, username } = Astro.props;
---

<a href={`https://www.${platform}.com/${username}`}>{platform}</a>

<style>
  a { // aタグがファイル内にないと適用されない
    padding: 0.5rem 1rem;
    color: white;
    background-color: #4c1d95;
    text-decoration: none;
  }
</style>

---
import Social from "./Social.astro";
---

<style>
  footer {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
  }
</style>

<footer>
  <Social platform="twitter" username="astrodotbuild" />
  <Social platform="github" username="withastro" />
  <Social platform="youtube" username="astrodotbuild" />
</footer>

最初の script をブラウザに送信する

<script>
  import "../scripts/Hamburger.js";
</script>

レイアウト!!

---
import Header from '../components/Header.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>
    <Header />
    <h1>{pageTitle}</h1>
    <Footer />
    <script>
      import "../scripts/menu.js";
    </script>
  </body>
</html>

---
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Home Page";
---

<BaseLayout>
  <h2>My awesome blog subtitle</h2>
</BaseLayout>

カスタムブログレイアウト？つくてみる

レイアウトにもレイアウトがつかえるっぽい