「ブログを改造してプログラミングの勉強頑張ろう」

いざふたを開けてみるとびっくり( ﾟдﾟ)ﾊｯ!

ファイルありすぎです。

蜘蛛の巣のように

絡みに絡み合ってブログが作られています。

astro-notion-blog【だから】

ではなく、

私たちが使っている便利なアプリケーションの中身はこんな状態なんだそうです。

今日は、

開設してまず改造したくなる

• Homeのテキスト
• ブログタイトル

この２ヶ所を改造するために必要な部分を解説しながら、

他の場所でも応用できる見方を解説します。

簡単な場所から見ていきましょう＼(^o^)／

今後改造していく時に欠かせないのが

公式ドキュメント。

https://docs.astro.build/ja/getting-started/

ここに全てのルールが明記されています。

Homeテキストはどこのディレクトリに収納されているのかを調べてみると….

https://docs.astro.build/ja/core-concepts/project-structure/

srcディレクトリにある

https://docs.astro.build/ja/core-concepts/project-structure/#src

astro-notion-blogのsrcディレクトリ を見てみると…

４つのディレクトリと２つのファイルが収納されています。

公式ドキュメントに戻ると、

pagesが特に必須だということが分かります。

https://docs.astro.build/ja/core-concepts/project-structure/#srcpages

赤文字【ページ】をクリックして、ページについてもう少し詳しく見てみます。

https://docs.astro.build/ja/core-concepts/astro-pages/

画面上で見えているページを処理する役割だということが分かります。

VSCodeに戻って見てみると….

いろいろ出てきました….( ﾟдﾟ)ﾊｯ!

試しにfeed.tsの真下にあるindex.astroを開いてみます。

どこかで見覚えないですか？？？？(´◠ω◠`)

Homeのテキスト＼(^o^)／

Homeのテキストを修正したい場合は

src/index.astro をいじってください！

テキストを修正する際に必要なのはhtmlです。

こちらの記事がオススメです(*´ω`*)(*´ω`*)

このタイトル、Home以外のページも表示されています👀

似たような部分を公式ドキュメントで探してみます

https://docs.astro.build/ja/core-concepts/project-structure/#srclayouts

赤字の【レイアウト】をクリックして、もう少し詳しく見てみます

https://docs.astro.build/ja/core-concepts/layouts/

ページ間で共有される

これですね(*´ω`*)(*´ω`*)💖

VSCodeに戻ってsrc/layoutsディレクトリを確認してみましょう

なんだか難しそう＼(^o^)／＼(^o^)／

こういう時は、検証画面から手がかりを探します。

右クリックして【検証】

👇

トグルを開きながらブログのタイトルの部分を見つけ出します

よく覚えておいてください👀

<h1>

<a>astro-notion-blog</a>

</h1>

同じコードをLayout.astroから探します

PUBLIC_SITE_TITLE はどこから来ているのかをたどります

上に上にたどっていくと….

import { PUBLIC_SITE_TITLE } from ’ ../server-contents.ts ’

import = 輸入！？

どこからか取り入れているのかな？？？

といった雰囲気が伝わってきます。

どこから(from)かというと../server-contents.ts

一旦ディレクトリの外へ出て(../)

server-contents.ts を開いてみましょう✫

👇

ありましたーーーー＼(^o^)／

yarn dev で表示される開発画面を手がかりに

公式ドキュメントや検証画面を使いながら

Forkしたastro-notion-blogのコードを改造してみてくださいねッ＼(^o^)／

探せば探すほど

ファイル同士のつながりも見えてきます✫

easy-notion-blogの改造でも

応用できるので、

こちらのページの改造解説記事も参考に取り組んでみてください(*´ω`*)(*´ω`*)