JAMStack作成の軌跡Part4
10375 ワード
はじめに
- 前回でTailwindCSSの導入を行った
- 今まではサイトの目的が曖昧だったが、今回は下記を行いテックブログ としての体裁を整えていく
- Contentfulとの連携
- ブログコンポーネント の作成
- TailwindCSS Typographyの導入
- 動的ページの作成
- 完成形はこちら
Contentfulとの連携
- ContentfulはヘッドレスCMSの一種であり、コンテンツを表示するフロント部分は持たない(ヘッドレスの由来)
- コンテンツの作成やモデル管理はContentfulのWebコンソース上から行うことが可能で、コンテンツはAPI経由で取得できるためJAMStackの要素として利用されることが多い模様
- 具体的な連携手順はGatsby入門を参照
- 作成したモデルは以下の通り
ブログコンポーネント の作成
- 色やフォントはそれほど拘らず最小限の配色だけ決めた
- いきなりソースコードを書こうとしても全体像がわからないため、ワイヤーフレームだけ書くことにした
配色の決定
- 色やフォントはこだわるほどのセンスはないため決め手となる色だけ決めた
- 色はtailwindcssにデフォルトで用意されている色を選択した
- 参考: color-palette-reference
- 色のカスタマイズも出来るがデフォルトカラーは濃淡も用意されているため使い勝手が良かった
- 参考: customizing-colors
- (base1, base2はいい名前が思いつかなかった)
項目 | 色 |
---|---|
テーマカラー(primay) | teal[400] |
アクセントカラー(accent) | rose[400] |
文字色(base1) | blueGray[800] |
背景色(base2) | coolGray[100] |
ワイヤーフレームの作成
手軽に作成できるGoogleスライドを利用して作成した
各ページの構成
- トップページのコンポーネント
TailwindCSS Typographyの導入
- 今回はContentful経由で取得したHTMLをそのまま表示するため、取得したHTMLのタグごとにtailwindcssを適用するのが面倒
- そのためプラグインのtailwindcss-typographyを用いることで、プラグインを指定したブロックない全てのタグにスタイリングを適用する
const Layout: React.VFC<LayoutProps> = ({ children }) => {
const data = useStaticQuery<GatsbyTypes.LayoutQuery>(graphql`
query Layout {
site {
siteMetadata {
title
}
}
}
`);
return (
<>
<Header siteTitle={data?.site?.siteMetadata?.title || "Title"} />
<div className="container mx-auto px-16 py-8 max-w-screen-lg prose bg-white"> #
<main>{children}</main>
</div>
<Footer />
</>
);
};
- この例ではLayoutコンポーネント化のh1タグやpタグにスタイリングが適用される
Typographyのカスタマイズ
- tailwind.config.jsでカスタマイズが可能
- h2タグを下図のようにカスタマイズしたかったのでいくつかのタグで設定した
typography: {
DEFAULT: {
css: {
img: {
margin: "0",
},
h1: {
padding: "0.25rem 0rem",
margin: "0.25rem 0rem",
fontWeight: "600",
},
h2: {
padding: "0.25rem 0.5rem",
color: colors.blueGray["800"],
background: "transparent",
borderLeft: `solid 8px ${colors.teal[400]}`,
},
p: {
margin: "0.25rem 0rem",
},
a: {
textDecoration: "none",
},
},
},
},
- 気になる点としては「Typographyを適用したブロックでは、Typographyのスタイリングを上書きすることが出来ない」ということ
- 例えばpタグの
margin
はtailwind.config.jsで0.25rem 0rem
と指定しているが、これをpタグ内でclassName=m-0
としても0.25rem 0rem
のまま替わらない - これは公式のIssuesでもどうにかならない?と言われている(執筆時はOpen)
- 例えばpタグの
動的ページの作成
- 動的ページの作成に関してもGatsby入門の記事を参考にさせていただいた
- また、以下の記事を参考にgatsby-node.jsのTypeScript化を試みたが、Contentfulからデータが取得出来なかったり型が正しく定義出来なかったりとつまづく点が多かったため、今回は断念し今後の課題とした。
残っている課題
- これで最低限ブログとしての体裁を保つまでにはなった。
- 一方で以下のような課題が残っている
- ブログとして
- ブログのタグ付与
- アイキャッチ画像の表示
- 開発環境として
- gatsby-node.jsのTypeScript化
- ブログのデプロイ
- componentsの分割(Atomic Designなど)
- ブログとして
- 今後はこのような課題にも挑戦していきたい
Author And Source
この問題について(JAMStack作成の軌跡Part4), 我々は、より多くの情報をここで見つけました https://qiita.com/krkettle57/items/0b3d57b507745c4c0854著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .