Gatsbyでモダンブログを構築する 4

グローバルメニューをBulmaでガリガリ変更していきます。

DEMOブランチ

本日のコードは下記のブランチで公開しています。

https://github.com/rv-rescala/gatsby-rescala-blog/tree/demo_global_pulldown

グローバルメニューの更新

今日はグローバルメニューの変更をおこなっていきます。

プルダウンメニューを追加してみましょう。

pull_down

対処のファイルは次のとおりです。

src/components/all.sass
src/components/Navbar.js

Bulmaのnavbarを使う

gatsby-starter-netlify-cmsではテンプルートエンジンにBulmaを使っています。

そこで、Bulmaのnavbarを使ってプルダウンメニューを作ってみましょう。

その前に下準備があります。

本テンプレートはデザインをsrc/components/all.sassに全て記述してありますが、初期段階ではBulmaの一部のテンプレートしか読み込んでいません。

そこで、下記の変更を加えてください。

src/components/all.sass

-@import "~bulma/sass/utilities/initial-variables"
+@import "~bulma/bulma.sass"

*この変更によりビルド時間が大幅に増えます

Navbar.jsの更新

グローバルメニューに関する記述はsrc/components/Navbar.jsにあります。

"navbar-item"およびnavbar-dropdown"を追加するだけです。

src/components/Navbar.js

まとめ

Bulmaを使ってグローバルメニューを追加しました。

今後もBulmaでカスタマイズをどんどんしていきます。