初心者がastro-notion-blogをカスタマイズしてみた【具体例多数】

まずはGitHubにあるソースを自分のマシンに持ってくる必要がある（ローカルリポジトリの構築）。
【補足】ローカル環境の構築方法
Git初心者のためここで苦戦した🥲
- sourcetreeというGitが簡単に扱えるソフトを使用。
- 以下の手順でローカル環境を構築できた🔰
  - sourcetreeをインストール
  - 自分のGitHubアカウントと連携
  - 「自分のastro-notion-blogのソースがあるリモートリポジトリ」と接続
  - フェッチを実行
  - プルを実行
手順の詳細はsourcetreeの操作方法などでググればOK！

以降の流れは開発者様が解説してくれている。
このとおりやればローカル環境が構築でき、http://localhost:3000でブログが表示されるようになった😊

astro-notion-blog/README.ja.md at main · otoyo/astro-notion-blog

🚀 Begin building your very own Notion Blog with Astro. - otoyo/astro-notion-blog

https://github.com

💡

ここまでできれば準備OK！

ざっくりフォルダ構成の解説

初心者なりに重要そうなところをメモしておく。

/src

主なソースコードはここに書かれているっぽい✅
今のところ、ここしか触っていない。

/src/components/notion-blocks/〇〇.astro

NotionのさまざまなブロックのHTML、CSSが書かれている✅
よくカスタマイズするところ✅

/src/layouts/Layout.astro

ページ全体の構成、CSSを定義している✅
すべてのページ（？）でこのファイルを使っている✅

【補足】ファイル中で出てくるslotタグについて

astro特有の機能っぽい✅
slotタグ＝変数のようなもの。
ページごとに表示内容が変わる。
- 記事ページなら「記事の中身」を表示する。
- トップページなら「記事の一覧」を表示する。など

/src/pages/◯◯.astro

ページごとのHTML、CSSを定義している✅
Layout.astroを使って全体の構成を読み込んでいる✅
ページの具体的な中身はslot="〇〇”の中に書かれている✅

【補足】どのファイルがどのページ？

ファイル名	どのページか	補足
/src/pages/index.astro	トップページ（=記事一覧ページ）	1ページ目
/src/pages/posts/page/[page].astro	記事一覧ページ	2ページ目以降
/src/pages/posts/tag/[tag].astro	タグの記事一覧ページ	1ページ目
/src/pages/posts/tag/page/[page].astro	タグの記事一覧ページ	2ページ目以降
/src/pages/posts/[slug].astro	記事のページ

/src/styles/blog.module.css

Layout.astroのslot部分のCSS（？）
- <div class=”_main_〇〇”>や<div class=”_aside_〇〇”>の部分にCSSを設定したいときに使う。

具体的なカスタマイズ

実際にカスタマイズしたところをいくつかメモしておく。

背景色の変更

やりたいこと

ブログの背景色を変更する。

方法

以下の--bgを変更する✅

/src/layouts/Layout.astro

<style is:global>
  :root {
    --gap-quarter: 0.25rem;
    --gap-half: 0.5rem;
    --gap: 1rem;
    --gap-double: 2rem;

		👇--bgが背景色
    --bg: #F1F1F1;          /* 背景色で使われている */
		--accents-1: #666;      /* aタグで使われている */
    --accents-2: #666;      /* 何も使われていない */
    --accents-3: #666;      /* Todo, キャプションで使われている */

💡

ここでアクセントカラーも変更できる

トグルを開いた状態にしておく

やりたいこと

ページを開いたとき、トグルブロックは閉じた状態になっている。
これを開いた状態に変える。

これを開いた状態にしておく

方法

detailsタグにopenをつける✅

通常のトグルブロック

/src/components/notion-blocks/Toggle.astro

<details class={`toggle ${snakeToKebab(block.Toggle.Color)}`} open>

トグル見出し1

/src/components/notion-blocks/Heading1.astro

<details class={`toggle`} open>

トグル見出し2

/src/components/notion-blocks/Heading2.astro

<details class={`toggle`} open>

トグル見出し3

/src/components/notion-blocks/Heading3.astro

<details class={`toggle`} open>

記事のトップにアイキャッチを表示

やりたいこと

記事の冒頭にアイキャッチを表示する。
- アイキャッチとはNotionブログのデータベースにある「featured image」プロパティのこと。

方法

importを追加✅
アイキャッチ表示処理を追加✅

/src/pages/posts/[slug].astro

importを追加

import PostRelativeLink from '../../components/PostRelativeLink.astro'
import BlogPostsLink from '../../components/BlogPostsLink.astro'
import BlogTagsLink from '../../components/BlogTagsLink.astro'
import styles from '../../styles/blog.module.css'

// 👇importを追加
import PostFeaturedImage from '../../components/PostFeaturedImage.astro'

export async function getStaticPaths() {
  const posts = await getAllPosts()
  return posts.map((post: interfaces.Post) => ({ params: { slug: post.Slug } }))
}

/src/pages/posts/[slug].astro

importを追加

<div slot="main" class={styles.main}>
    <div class={styles.post}>
      <PostDate post={post} />
      <PostTags post={post} />
      <PostTitle post={post} enableLink={false} />

      <!-- 👇アイキャッチ表示処理 -->
      <PostFeaturedImage post={post} />

      <PostBody blocks={blocks} />
      <PostTags post={post} />

全体的なHTML構成の修正

やりたいこと

全体的なHTML構成を変更する

方法

Layout.astroのHTMLを編集する✅

例：

ヘッダーをメインカラムの外に出す

/src/layouts/Layout.astro

<body>
    <GoogleAnalytics trackingId={PUBLIC_GA_TRACKING_ID} />
  
		👇headerをbodyタグの直下に移動してくる
    <header>
      <h1>
        <a href={getNavLink('/')}>
          {
            database.Icon && database.Icon.Type === 'emoji' ? (
              <>
                <span>{database.Icon.Emoji}</span>
                {database.Title}
              </>
            ) : database.Icon && database.Icon.Type === 'external' ? (
              <>
                <img src={database.Icon.Url} />
                {database.Title}
              </>
            ) : database.Icon && database.Icon.Type === 'file' ? (
              <>
                <img src={customIconURL} class="custom-icon" />
                {database.Title}
              </>
            ) : (
              database.Title
            )
          }
        </a>
      </h1>
      <div class="description">
        {database.Description}
      </div>
    </header>
		👆

    <div class="container">

全体的なデザインの修正

やりたいこと

CSSを編集してデザインを変える

方法

Layout.astroまたはblog.module.cssのCSSを編集する✅
- 基本はLayout.astroのCSSを編集すればOK
- slotタグのCSSのみblog.module.cssのCSSを編集する（？）
  - 理由：slotタグはクラス名に固有の値が割り振られるため普通のCSSを当てることができない

例：<slot name="main" />と<slot name="aside" />のスタイルを調整する。

/src/styles/blog.module.css

/* <slot name="main" />のCSS */
.main{
  background: var(--bg);
  padding: 2vw;
}

/* <slot name="aside" />のCSS */
.aside{
  background: var(--bg);
  padding: 2vw;
}

さまざまなNotionブロックのデザインを修正

やりたいこと

Notionのあらゆるブロックのデザインを修正する。

💡

見出しのサイズを大きくしたりできる

方法

/src/components/notion-blocks/〇〇.astroを編集する✅
- カスタマイズしたいNotionブロックに対応するファイルを編集すればOK。

例：見出し2のデザインを変更する

/src/components/notion-blocks/Heading2.astro

h5 {
    /* マージン調整 */
    margin: 3em 0 1em;

    color: var(--fg);
    font-size: 1.5rem;

    /* パディング指定 */
    padding: 10px 0 10px 16px;
		/* ボーダー指定 */
    border-left: 4px solid #5c9ee7;
  }

その他のカスタマイズ

公式でもいくつかカスタマイズが紹介されている。

Home

🚀 Begin building your very own Notion Blog with Astro. - otoyo/astro-notion-blog

https://github.com

注意

あくまで初心者がカスタマイズしたときの備忘録なので正確でない説明もあるかも⚠️
astro-notion-blogのバージョンは0.4.0時点の情報⚠️