Gatsby
基本
初期設定
npm install --global gatsby-cli
gatsby new tutorial-part-one
https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-one
gatsby develop
フォルダ構成
layout/index.js
おおもとになるレイアウトpages/***.js
このフォルダに作成した js ファイルが、自動的に個別ページになる。gatsby-config.js
設定ファイル
リンクを張る
import Link from 'gatsby-link';
<Link to="/page-2/">jump to page2</Link>;
プラグインの利用
yarn add gatsby-plugin-typography
gatsby-config.js に利用するプラグインを記載
Typography.js
https://www.gatsbyjs.org/tutorial/part-two/\#typographyjs
- グローバルな CSS のルールを設定するためのツール。
- プラグインとして利用する。
- React や Gatsby とうまく動くように作られている。
- 美しい表示を簡単に 実現できる。例えば、rhythm という概念を使って Line-Height をそろえることなどが簡単にできる。また、既製のテーマもいくつか用意されている。
// gatsby-config.js
const plugins = [
{
resolve: `gatsby-plugin-typography`,
options: {
pathToConfigModule: `src/utils/typography.js`,
},
},
];
// typography.js;
import Typography from 'typography';
import bootstrapTheme from 'typography-theme-bootstrap';
const typography = new Typography(bootstrapTheme);
// or const typography = new Typography({ baseFontSize: "18px" });
export default typography;
CSS
1. CSS-in-JS
JS の中に CSS を書くこと。例えば Glamor プラグインを使うと、css
属性を指定してやるだけで Style 属性と同じように CSS を設定できる。この際、Style 属性と違い、すべての CSS(疑似クラス・疑似要素・メディアクエリを含む)を使うことができる。
2. CSS モジュール
https://www.gatsbyjs.org/tutorial/part-two/#css-modules
Gatsby は標準で CSS モジュールに対応している。拡張子を「.module.css」とした CSS ファイルを作成し、JS ファイルにおいて import することで利用できる。
外部ファイルとして用意した CSS を import すると、自動的に重複しないセレクタ名をつけ、クラス名を参照するためのオブジェクトを生成し、グローバルな CSS に組み込むところまでやってくれる。
オブジェクトを className 属性に指定することで CSS を設定する。