astro-notion-blogカスタマイズメモ

Featured image of the post

目次

まえがき

astro-notion-blogを始めてみたものの、学校の授業で習ったのはC言語(もどき)のみ、Arduino言語は趣味と卒研で使い込んだ程度。スプレッドシートとGASを組み合わせた計算ツールとScriptableのウィジェット作りでJavaScriptは触ってみたけどよく分からないまま動作している。こんな状態でCSSとかHTMLとか何も分かりません。カスタマイズの過程で勉強したいです。

ローカルサーバー

ローカルサーバーの起動

ターミナルでnpm run dev

ブラウザでhttp://localhost:3000を開く。

開発サーバーを停止するにはターミナルで Ctrl+Cを押す。

📄Arrow icon of a page linknpm run devで立てたローカルサーバーにスマートフォンからアクセスする

ローカルサーバーの環境設定ファイル

astro-notion-blog\.envに書き込む。改行で足していく。

NOTION_API_SECRET=secret_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
DATABASE_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxx
ENABLE_LIGHTBOX=true
HTML_CONVERSION_TRIGGER=htmlconv

.gitignore.env.env.productionが明記されているため、このファイルはGitHubにアップロードされない。

ℹ️
ローカルサーバーの起動時には読み込まれるが、ローカルでのビルド時には読み込まれない。exportコマンドでシェル変数を登録する必要がある。

ページ設定ファイル

固定ページ設定をしていない場合

  • src\pages\index.astro:ホーム兼記事一覧の1ページ目
  • src\pages\blog\[slug].astro:各記事ページ
  • src\pages\blog\page\[page].astro:記事一覧の2ページ目以降
  • src\pages\blog\tag\[tag].astro:タグごとの記事一覧の1ページ目
  • src\pages\blog\tag\[tag]\page\[page].astro:タグごとの記事一覧の2ページ目以降

固定ページ設定をしている場合

  • src\pages\index.astro:ホーム
  • src\pages\blog\[slug].astro:各記事ページ
  • src\pages\blog\page\index.astro:記事一覧の1ページ目
  • src\pages\blog\page\[page].astro:記事一覧の2ページ目以降
  • src\pages\blog\tag\[tag].astro:タグごとの記事一覧の1ページ目
  • src\pages\blog\tag\[tag]\page\[page].astro:タグごとの記事一覧の2ページ目以降

Gitの使い方

用語

素人にはGitの概念が分からない問題
時間遡行及び平行世界への移動ができるゲームのデータ管理みたい?

cloneリモートリポジトリからのダウンロードサーバーからローカルにデータを複製
commit変更の保存をコメント付きで行うゲームのセーブ(ローカル)
pushローカルリポジトリでの変更内容をリモートリポジトリへアップロードセーブデータをサーバに保存
fetchリモートリポジトリの変更履歴をローカルリポジトリに反映サーバのセーブデータの目録を取得
pullリモートリポジトリからローカルに反映されていない内容のみダウンロードサーバのセーブデータを取得(変更点のみ)
branchファイルの変更履歴の繋がりを分岐平行世界の作成
merge分岐したブランチでの作業内容をメインのブランチに統合する平行世界からの物品や情報の持ち込み
pull requestマージ時のチェック依頼物品や情報の持ち込みにおける検問
conflictマージ時の競合平行世界との競合

astro-notion-blogのアップデート

Forkを更新する

GitHubの自分のリポジトリでSync forkをクリックし、Fetch and mergeが表示されたらクリック。

表示されなかったら最新になってる。

Image in a image block
これは最新の状態
Pullしてローカルリポジトリへ反映する
Image in a image block
VSCodeのGitLensからCommit Graphを開いたところ

ローカルでの変更を反映

push

stage

commit

Image in a image block
Image in a image block

自戒

Image in a image block
pushする前に確認必須

編集をマージで上書きして全部消えた場合

Sourcetree使用

マージ前のコミットで「現在のブランチをこのコミットまでリセット」

設定で強制プッシュを有効化

強制プッシュ

やり直す

カスタマイズ

GASによるデプロイのトリガ作成

デフォルトOG画像の変更

public\にあるdefault-og-image.pngを上書きする。1200px × 630pxにしておいた。

このサイトでどう見えるか確認できる。複数アップロードして矢印キーで素早く見比べられるのは便利。

正方形表示にも対応するのはデザイン上難しい。

ダークモードに対応させる

設定

src\components\Darkmode.astroを新規作成。このコードを丸ごと書き込み保存する。

src\layout\Layout.astroを編集する。

コンポーネントの読み込み 6行目付近に追加

---
import { PUBLIC_GA_TRACKING_ID, ENABLE_LIGHTBOX } from '../server-constants.ts'
import { getDatabase } from '../lib/notion/client.ts'
import { getNavLink, getStaticFilePath, filePath } from '../lib/blog-helpers.ts'
import '../styles/syntax-coloring.css'
import GoogleAnalytics from '../components/GoogleAnalytics.astro'
これを
---
import { PUBLIC_GA_TRACKING_ID, ENABLE_LIGHTBOX } from '../server-constants.ts'
import { getDatabase } from '../lib/notion/client.ts'
import { getNavLink, getStaticFilePath, filePath } from '../lib/blog-helpers.ts'
import '../styles/syntax-coloring.css'
import GoogleAnalytics from '../components/GoogleAnalytics.astro'
import Darkmode from '../components/Darkmode.astro'
こう

トグルボタンを設置する。サイドバーの場合は136行目付近

        <aside>
          <slot name="aside" />
        </aside>
これを
        <aside>
					<Darkmode />
          <slot name="aside" />
        </aside>
こう

これでダークモード切り替えができるようになった。元の方のサイトでは、ダークモードON時に画像が若干暗くなる処理が入ってるように見えるけどこれとは別物らしい。

配色の変更

Darkmode.astroから色を変える。

:root.darkmode {
  --bg: #191919;
  --fg: #d5d5d5;
  --accents-1: #864C1D;
  --accents-2: #f26000;
  --accents-3: #a5a5a5;;
}
元の配色

背景色・アクセントカラーを変更

:root.darkmode {
  --bg: #272822;
  --fg: #d5d5d5;
  --accents-1: #864C1D;
  --accents-2: #f26000;
  --accents-3: #a5a5a5;;
}
変更後の配色

自動でつくシンタックスハイライトで紺色が絶望的に見づらい問題が生じたのでコードブロックの背景色も変更する。

/* --------------------
Code.astro
-------------------- */
.darkmode .code pre {
  background: #272727 !important;
}
.darkmode .code pre code {
  color: var(--fg);
  background: #272727 !important;
}
.darkmode code {
  background: #2F2F2D;
}

.darkmode .code > div {
  background: #272727;
}

.darkmode .code button.copy {
  background-color: rgba(227,226,224,0.2);
}
元の配色
/* --------------------
Code.astro
-------------------- */
.darkmode .code pre {
  background: #555555 !important;
}
.darkmode .code pre code {
  color: var(--fg);
  background: #555555 !important;
}
.darkmode code {
  background: #2F2F2D;
}

.darkmode .code > div {
  background: #555555;
}

.darkmode .code button.copy {
  background-color: rgba(227,226,224,0.2);
}
変更後の配色

コードブロックを白っぽくすることで多少マシになったけどそれでも酷い色になる。
Notion上ではプレーンテキスト扱いしても自動で色が付く。src\styles\syntax-coloring.cssに存在していない色もある。どうしたらいいんだ。

見出しのスタイルを変更する
(トグル見出しが連動して変な見た目になったので中止)

参考

見出し1についてのコードブロックに見出し2のコードがくっついてるように見える

見出しのサイズはそのままにして、下線と横線を追加する。見出し3はノータッチ。
トグル見出しと見出しはどちらも同じスタイルを参照しているので纏めて変更ができる。

↑これが原因でやっぱやめ

src\layouts\notion-blocks\Heading1.astroHeading2.astroを編集する。

見出し1 Heading1.astroの47行目から

h4 {
    margin: 1.1em 0 0.3em;
    color: var(--fg);
    font-size: 1.8rem;
  }
これを
h4 {
    margin: 1.1em 0 0.3em;
    color: var(--fg);
    font-size: 1.8rem;
    border-bottom: solid 2px #666;
    margin-bottom: 1rem;
  }
こうする

#666のところをvar(--fg)に置き換えると白基調でもダークテーマでも文字色と同じになったが、見た目の違和感がすごかったので#666にした。どちらでも自然に見える灰色。

Image in a image block

見出しのデザインは良くなったけど、トグル見出しだと入れ子構造にされてるから下線の長さが文字の長さだけになってしまって変な見た目になったのでやっぱりやめた。

ヘッダー画像にトップページのリンクを設定
(要らない気がしてやっぱやめた)

astro-notion-blogのアップデートによって若干コードが変わっている。

src\layout\Layout.astroの80行目付近

<div class="container">
      <header>
        {
          coverImageURL && (
            <div class="cover">
              <img src={coverImageURL} />
            </div>
          )
        }
      </header>
これを
<div class="container">
      <header>
        <a href={getNavLink('/')}>
          {
            coverImageURL && (
              <div class="cover">
                <img src={coverImageURL} />
              </div>
            )
          }
        </a>
      </header>
こうする

ちゃんとリンクは貼られたけど、リンク貼るだけの中途半端な変更をするよりブログのレイアウトをもうちょっと思い通りにするのが先だと思ってやめた。

Cloudflare Pagesのドメインからカスタムドメインへリダイレクトさせる

Image in a image block

メニューが日本語になって分かりやすくなっていた。手順は同様。

ローカルサーバーでアイコンとカバー画像が表示されるようにする

ローカルサーバーでページを見ると、Notion上のデータベースで設定したカスタムのカバー画像とアイコンが表示されない。

Image in a image block
Image in a image block

404エラーが出ている。

public\notion内には該当するフォルダもファイルも無かった。

そこで、public\notion内に、エラーで表示されているフォルダを作り、対象のファイルを収めたところ、表示されるようになった。

ℹ️
本来は、ビルド時のみに読み込まれるファイルになっている。ローカルサーバーの起動しか行っておらず、読み込まれないためにこうなっていた。