gulp>> gatsby-plugins-themes-ja>> 返回
项目作者： gh640

项目描述 ：
(Japanese) React ベースの静的サイトジェネレーター Gatsby が公式に提供するプラグインとテーマの一覧です。
高级语言：
项目地址: git://github.com/gh640/gatsby-plugins-themes-ja.git
创建时间： 2020-07-01T03:00:08Z
项目社区：https://github.com/gh640/gatsby-plugins-themes-ja
开源协议：
下载


Gatsby 公式のプラグイン・テーマまとめ

Gatsby

React ベースの静的サイトジェネレーター Gatsby が公式に提供するプラグインとテーマについてまとめました。

正確には、公式の monorepo リポジトリ ↓ に含まれているプラグインとテーマの一覧です。

対象の Gatsby のバージョンは gatsby@2 です。

プラグイン

Gatsby プラグインの名前にはルールがあって、おおよそ次のとおりとなっています。

  • gatsby-source-: データソースからコンテンツを取得するもの
  • gatsby-transformer-: 取得したコンテンツをパースしたり変換したりするもの
  • gatsby-plugin-: その他の機能を提供するプラグイン

また、 gatsby-transformer-remark のサブプラグインの先頭は gatsby-remark- になっています。

名前 説明
gatsby-plugin-canonical-urls HTML の <head> 内に canonical リンクを追加するためにプラグインです。
gatsby-plugin-catch-links gatsby-link を使わずに作られたサイト内リンクに gatsby-link の挙動を反映するためのプラグインです。 Markdown ファイルの中でサイト内リンクを使っているとき等に便利です。
gatsby-plugin-coffeescript CoffeeScript と CJSX を利用するためのプラグインです。
gatsby-plugin-create-client-paths 動的に動くパスを持った、動的と静的のハイブリッドな Gatsby アプリを作るためのプラグインです。
gatsby-plugin-cxs css-in-js の cxs を利用するためのプラグインです。
gatsby-plugin-emotion css-in-js の Emotion　を利用するためのプラグインです。
gatsby-plugin-facebook-analytics Facebook Analytics を利用するためのプラグインです。
gatsby-plugin-feed RSS フィードを生成するためのプラグインです。
gatsby-plugin-flow Flow を利用するためのプラグインです。
gatsby-plugin-fullstory 解析サービスの Fullstory を利用するためのプラグインです。
gatsby-plugin-gatsby-cloud Gatsby Cloud 用のプラグインです。 HTTP ヘッダーの追加や _headers.json ・ _redirects.json ファイルの生成を行います。
gatsby-plugin-glamor css-in-js の Glamorを利用するためのプラグインです。
gatsby-plugin-google-analytics Google Analytics を利用するためのプラグインです。
gatsby-plugin-google-gtag Google global site tag （ gtag.js ）を利用するためのプラグインです。
gatsby-plugin-google-tagmanager Google Tag Manager を利用するためのプラグインです。
gatsby-plugin-graphql-config ESLint や IDE などで利用できるように、 Gatsby GraphQL のスキーマやフラグメントや GraphQL Config ファイルを .cache ディレクトリに保存します。
gatsby-plugin-guess-js Guess.js を利用するためのプラグインです。
gatsby-plugin-image サイトのパフォーマンス向上のために、ページの埋め込み画像の最適化（複数のサイズ・フォーマットの画像の生成）を行います。公式サイトでは Gatsby Image Plugin と呼ばれています。前身は gatsby-image というパッケージで、 Gatby の v2.26 で β 版が導入され v3.0 で正式導入されました。
gatsby-plugin-jss css-in-js の JSS を利用するためのプラグインです。
gatsby-plugin-layout ページをまたがって存在するレイアウトコンポーネントを追加するためのプラグインです。 gatsby@2 で Gatsby 本体から削除された gatsby@1 のレイアウトコンポーネントを実装するものです。
gatsby-plugin-less CSS を拡張した LESS を利用するためのプラグインです。
gatsby-plugin-lodash Lodash を利用するための Webpack と Babel のプラグインを提供します。
gatsby-plugin-manifest PWA 仕様を満たすのに必要な web app manifest （ manifest.webmanifest ）をサポートするためのプラグインです。 manifest の生成の他に、複数のサイズのアイコンの生成、 favicon 追加等の機能も備えています。 gatsby-plugin-offline と併用することが推奨されています。
gatsby-plugin-mdx MDX を利用するためのプラグインです。 MDX は JSX の中に Markdown が書けるフォーマットです。
gatsby-plugin-netlify-cms Netlify CMS を利用するためのプラグインです。パス admin/index.html に Netlify CMS を生成します。
gatsby-plugin-netlify Netlify に対応するためのプラグインです。デフォルトでは、 Netlify のヘッダーとリダイレクトの設定のために _headers と _redirects という 2 つのファイルを public フォルダのルートに設置します。
gatsby-plugin-no-sourcemaps ソースマップを生成しないようにするためのプラグインです。 Webpack の設定のためのほんの数行のコードからなるプラグインです。
gatsby-plugin-nprogress Nprogress.js を利用するためのプラグインです。
gatsby-plugin-offline ネットワーク環境が悪い場合でもサイトがなるべく動くようにするためのプラグインです。 Service Worker を追加します。 gatsby-plugin-manifest と併用することが推奨されています。
gatsby-plugin-page-creator 指定されたパスの下の React コンポーネントを含むファイルからページを自動生成するためのプラグインです。 Gatsby 本体が利用しており、デフォルトでは src/pages 以下のファイルが対象になっています。

gatsby-plugin-postcss | PostCSS を利用するためのプラグインです。 |
| gatsby-plugin-preact | React の軽量版である Preact を利用するためのプラグインです。 |
| gatsby-plugin-preload-fonts | パフォーマンス改善のために、ページで使われているフォントを <link rel="preload"> で先読みするためのプラグインです。 |
| gatsby-plugin-react-css-modules | React コンポーネント内の styleName を className に変換するプラグインです。 Gatsby は CSS モジュールをデフォルトでサポートしているため、このプラグインは通常必要ありません。 |
| gatsby-plugin-react-helmet | React Helmet を利用するためのプラグインです。 HTML の <head> タグ内に <title> や <meta> 等のタグがかんたんに追加できます。 |
| gatsby-plugin-remove-trailing-slashes | パスの末尾の / （スラッシュ）を削除するためのプラグインです。 Gatsby v4.7 で本体に同じ機能が追加されたため本プラグインは deprecated となりました （ 参考 1 参考 2 ）。 |
| gatsby-plugin-sass | Sass/SCSS を利用するためのプラグインです。 |
| gatsby-plugin-schema-snapshot | GraphQL のスキーマのスナップショットファイルを生成するためのプラグインです。デフォルトで schema.gql という名前のファイルに出力します。 |
| gatsby-plugin-sharp | 画像処理ライブラリの sharp を利用するためのプラグインです。画像をレスポンシブ化する際によく利用されます。 |
| gatsby-plugin-sitemap | マシン向けのサイトマップ（ sitemap.xml ）を生成するためのプラグインです。 |
| gatsby-plugin-styled-components | styled-components を利用するためのプラグインです。 |
| gatsby-plugin-styled-jsx | styled-jsx を利用するためのプラグインです。 |
| gatsby-plugin-styletron | Styletron を利用するためのプラグインです。 |
| gatsby-plugin-stylus | Stylus を利用するためのプラグインです。 |
| gatsby-plugin-subfont | Google fonts 等のウェブフォントの配信を最適化するためのライブラリ Subfont を利用するためのプラグインです。 |
| gatsby-plugin-twitter | Twitter のツイートやタイムラインやシェアボタンをページに埋め込むためのプラグインです。 |
| gatsby-plugin-typescript | TypeScript を利用するためのプラグインです。 Gatsby 本体が利用しています。 |
| gatsby-plugin-typography | タイポグラフィー・フォント周りの設定を行うための Typography を利用するためのプラグインです。 |
| gatsby-remark-autolink-headers | gatsby-transformer-remark のサブプラグインで、 Markdown 内の各見出し（ h1 - h6 ）にリンク付きのアイコンを付けられるプラグインです（ GitHub の README にあるようなものです）。 |
| gatsby-remark-code-repls | gatsby-transformer-remark のサブプラグインで、 Markdown 内でウェブ上で JS コードを試せる Codepen 等のサービスへのリンクを生成できるプラグインです。 |
| gatsby-remark-copy-linked-files | gatsby-transformer-remark のサブプラグインで、 Markdown 内でリンクで参照されているファイルを public フォルダにコピーするプラグインです。 |
| gatsby-remark-custom-blocks | gatsby-transformer-remark のサブプラグインで、 Markdown 内で使えるカスタムブロックを定義して利用できるプラグインです。 remark-custom-blocks を使用します。 |
| gatsby-remark-embed-snippet | gatsby-transformer-remark のサブプラグインで、 Markdown 内でファイルの中身をコードスニペットとして埋め込めるプラグインです。動作には gatsby-remark-prismjs が必要です。 |
| gatsby-remark-graphviz | gatsby-transformer-remark のサブプラグインで、 Markdown 内の Graphviz のコードブロックを SVG 画像に変換してくれるプラグインです。しかし、このプラグインが利用する Viz.js の開発が終了しています。 |
| gatsby-remark-images | gatsby-transformer-remark のサブプラグインで、 Markdown 内の画像をレスポンシブ化するためのプラグインです。 png と jpg をサポートしています。 |
| gatsby-remark-images-contentful | gatsby-transformer-remark のサブプラグインで、 Contentful の Image API を使って Markdown 内の画像をレスポンシブ化するためのプラグインです。 |
| gatsby-remark-katex | gatsby-transformer-remark のサブプラグインで、 Markdown 内に数式を書くためのプラグインです。 |
| gatsby-remark-prismjs | gatsby-transformer-remark のサブプラグインで、 Markdown 内のコードブロックにシンタックスハイライトを追加できるプラグインです。シンタックスハイライト用のライブラリ Prism を使用します。 |
| gatsby-remark-responsive-iframe | gatsby-transformer-remark のサブプラグインで、 Markdown 内の <iframe> タグの縦横比を維持するためのプラグインです。 |
| gatsby-remark-smartypants | gatsby-transformer-remark のサブプラグインで、 Markdown 内のアルファベットの句読点をきれいな形に変換してくれるプラグインです。 |
| gatsby-source-contentful | ヘッドレス CMS （ API ファースト CMS ）の Contentful からコンテンツデータを取得するためのプラグインです。 |
| gatsby-source-drupal | CMS Drupal からコンテンツデータを取得するためのプラグインです。 |
| gatsby-source-faker | フェイクデータ（テストや検証のためのデータ）を生成するライブラリ faker.js を使ってフェイクコンテンツを取得するためのプラグインです。 |
| gatsby-source-filesystem | ローカルのファイルシステムからコンテンツデータを取得するためのプラグインです。 |
| gatsby-source-graphql | 任意の GraphQL API からデータを取得するためのプラグインです。 |
| gatsby-source-hacker-news | Hacker News API からコンテンツデータを取得するためのプラグインです。 |
| gatsby-source-lever | リクルーティング活動支援のウェブサービス Lever からデータを取得するためのプラグインです。 |
| gatsby-source-medium | Medium の非公式の JSON エンドポイントからコンテンツデータを取得するためのプラグインです。ただし取得できる内容・件数がかぎられています。 |
| gatsby-source-mongodb | MongoDB のコレクションからデータを取得するためのプラグインです。 |
| gatsby-source-npm-package-search | Yarn の Algolia の機能を使って npm のパッケージ情報を取得するためのプラグインです。 |
| gatsby-source-shopify | EC サービス Shopify のストアから Shopify Storefront API を使ってデータを取得するためのプラグインです。 |
| gatsby-source-wikipedia | Wikipedia から記事データを取得するためのプラグインです。 |
| gatsby-source-wordpress | WordPress サイトから WordPress REST API を使ってコンテンツデータを取得するためのプラグインです。 |
| gatsby-transformer-asciidoc | AsciiDoc ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-csv | CSV ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-documentationjs | JavaScript のコードから JSDoc のデータを抽出するためのプラグインです。 |
| gatsby-transformer-excel | Excel ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-hjson | Hjson ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-javascript-frontmatter | JavaScript ファイルの exports.frontmatter をコンテンツソースとして抽出するためのプラグインです。 |
| gatsby-transformer-javascript-static-exports | JavaScript ファイルの exports.data をコンテンツソースとして抽出するためのプラグインです。 |
| gatsby-transformer-json | JSON ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-pdf | PDF ファイルのテキストデータをコンテンツソースとして抽出するためのプラグインです。 |
| gatsby-transformer-react-docgen | React のコンポーネントの情報を react-docgen を使ってコンテンツソースとして抽出するためのプラグインです。 |
| gatsby-transformer-remark | Markdown ファイルを remark を使ってコンテンツソースとしてパースするためのプラグインです。 Gatsby のテキストデータを取得する transformer の中で最も多く使われています。 |
| gatsby-transformer-screenshot | AWS Lambda Function を使ってウェブサイトのスクリーンショットを生成するプラグインです。 |
| gatsby-transformer-sharp | 画像処理ライブラリ sharp を使って画像にリサイズ・切り抜き・レスポンシブ化を施してコンテンツソースとして提供するプラグインです。 |
| gatsby-transformer-sqip | 非常に軽量なサムネイル画像を生成するプラグインです。 |
| gatsby-transformer-toml | TOML ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-xml | XML ファイルをコンテンツソースとしてパースするためのプラグインです。 |
| gatsby-transformer-yaml | YAML ファイルをコンテンツソースとしてパースするためのプラグインです。 |

テーマ

テーマは名前が gatsby-theme- で始まります。

名前 説明
gatsby-theme-blog シンプルなブログ作成用のテーマです。 gatsby-theme-blog-core を親テーマとして利用しています。
gatsby-theme-blog-core シンプルなブログ作成用のテーマです。通常は子テーマの gatsby-theme-blog を使うことが想定されています。
gatsby-theme-blog-darkmode gatsby-theme-blog にダークモード機能を追加できるテーマです。利用するときには gatsby-theme-blog といっしょに利用する必要があります。
gatsby-theme-i18n Gatsby サイトを多言語対応（ i18n support ）させるためのテーマです。
gatsby-theme-i18n-lingui 多言語対応サイトを LinguiJS で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-i18n-react-i18next 多言語対応サイトを readct-i18next で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-i18n-react-intl 多言語対応サイトを React Intl で各言語に翻訳（ l10n ）するためのテーマです。
gatsby-theme-notes メモ集サイト用のテーマです。
gatsby-theme-ui-preset 他の公式テーマが使うための Theme UI の設定だけを提供するテーマです（と公式に書かれていますが、他の公式テーマでこれを使っているものは現状無いようです）。