npm を公開しました
@mako-tos/gatsby-transformer-for-microcms という長い名前になります。
こんな人におススメの npm です
- gatsby でブログとか書きたいけど CMS は日本語インタフェースの物がいい
- → microCMS がいいですね
- microCMS のリッチエディタ使いやすくていい ☆ 彡
- 画像も自動でサイズが変わるから PC とスマホの差を意識してない
- でもなんだか画像を記事に一杯貼ったらページが重くなっちゃった 💦
- ブログページ軽くしたいんだけど、自分で html を解析して img タグを変えるのはメンドクサイ
@mako-tos/gatsby-transformer-for-microcms の利点は
@mako-tos/gatsby-transformer-for-microcms ならMicrocmsのテーブルと html が入力されたフィールドを指定するだけ。
それだけでページを軽くし、画像読み込みをスムーズにできます 💪
パッケージの動作
パッケージの動作は
- gatsby-source-microcms で取得した MicrocmsXXX テーブルを指定して
- そのテーブルの html が入力されている field も指定して
- その html に img タグがあり src 属性に microcms の画像サーバが設定されていたら
- その画像を表示領域に応じて拡大縮小することで描画を早くする
もう１つ機能があります。 html の中にコードブロック(css セレクタで書くと pre > code のタグ)が出てきたら Highlight.js を使ってソースコードを見やすく class 設定してくれます。
こっちはプラグインの options に useHljs を `true` で設定します。
gatsby-config.js 設定例
plugins: [
{
resolve: 'gatsby-source-microcms',
options: {
apiKey: process.env.MICRO_CMS_API_KEY,
serviceId: process.env.MICRO_CMS_SERVICE_ID,
endpoint: 'blog',
},
},
// gatsby-source-microcmsの後に書いてください
{
resolve: '@mako-tos/gatsby-transformer-for-microcms',
options: {
mediaType: 'MicrocmsPost', // string
field: 'body', // string
useHljs: true,
},
},
]
Highlight.js に関しては画面側で ↓ の様に css 読み込まないと無駄になりますので注意です。
import 'highlight.js/styles/hybrid.css';以上ご報告でした。
Photo by DESIGNECOLOGIST on Unsplash