|
| 1 | +# gridsome-plugin-netlify-cms-paths |
| 2 | + |
| 3 | +This plugin will fix image paths generated by Netlify CMS (i.e. absolute paths |
| 4 | +starting with `public_folder` and relative paths not starting with `./`) to |
| 5 | +work with Gridsome. |
| 6 | + |
| 7 | +For a more general introduction see: |
| 8 | + [https://germano.dev/fix-netlify-cms-paths-on-gridsome][post] |
| 9 | + |
| 10 | +[post]: https://germano.dev/fix-netlify-cms-paths-on-gridsome |
| 11 | + |
| 12 | +## Install |
| 13 | + |
| 14 | +You can install this plugin with either yarn or npm: |
| 15 | + |
| 16 | +```shell |
| 17 | +yarn add gridsome-plugin-netlify-cms-paths |
| 18 | +``` |
| 19 | + |
| 20 | +## How to use |
| 21 | + |
| 22 | +To use this plugin, simply add it to your `gridsome.config.js`: |
| 23 | + |
| 24 | +```javascript |
| 25 | + plugins: [ |
| 26 | + // configure Netlify CMS |
| 27 | + { use: 'gridsome-plugin-netlify-cms' }, |
| 28 | + // fix paths |
| 29 | + { use: 'gridsome-plugin-netlify-cms-paths' } |
| 30 | + ] |
| 31 | +``` |
| 32 | + |
| 33 | +Note that this plugin requires `gridsome-plugin-netlify-cms` to be installed |
| 34 | +and be configured before itself. |
| 35 | + |
| 36 | +Currently this plugin also assumes that [@gridsome/transformer-remark][remark] |
| 37 | +is installed and configured and that you are defining your content types |
| 38 | +with [@gridsome/source-filesystem][fs]. |
| 39 | + |
| 40 | +[remark]: https://gridsome.org/plugins/@gridsome/transformer-remark |
| 41 | + |
| 42 | +## Options |
| 43 | + |
| 44 | +### `contentTypes` |
| 45 | + |
| 46 | +The list of content types you want to be considered when fixing paths. |
| 47 | +For example if you are using [@gridsome/source-filesystem][fs] to create a |
| 48 | +`Post` content type: |
| 49 | + |
| 50 | +```javascript |
| 51 | + plugins: [ |
| 52 | + { |
| 53 | + // Create posts from markdown files |
| 54 | + use: '@gridsome/source-filesystem', |
| 55 | + options: { |
| 56 | + typeName: 'Post', |
| 57 | + path: 'content/posts/*.md', |
| 58 | + route: '/:slug', |
| 59 | + } |
| 60 | + }, |
| 61 | + |
| 62 | + { use: 'gridsome-plugin-netlify-cms' }, |
| 63 | + { |
| 64 | + use: 'gridsome-plugin-netlify-cms-paths', |
| 65 | + options: { |
| 66 | + contentTypes: ['Post'] // Same as declared above |
| 67 | + } |
| 68 | + } |
| 69 | +``` |
| 70 | + |
| 71 | + |
| 72 | +### `coverField` |
| 73 | + |
| 74 | +(*optional*, default: `undefined`) |
| 75 | + |
| 76 | +Instruct the plugin to also fix the path of the *cover image* found in the |
| 77 | +frontmatter field specified by this option. |
| 78 | + |
| 79 | +You can also specify this option for each content type by defining it into |
| 80 | +the [@gridsome/source-filesystem][fs] options. |
| 81 | + |
| 82 | +```javascript |
| 83 | + plugins: [ |
| 84 | + { |
| 85 | + // Create posts from markdown files |
| 86 | + use: '@gridsome/source-filesystem', |
| 87 | + options: { |
| 88 | + typeName: 'Post', |
| 89 | + path: 'content/posts/*.md', |
| 90 | + route: '/:slug', |
| 91 | + coverField: 'post_cover' // Specific for Post, overrides global |
| 92 | + } |
| 93 | + }, |
| 94 | + |
| 95 | + { use: 'gridsome-plugin-netlify-cms' }, |
| 96 | + { |
| 97 | + use: 'gridsome-plugin-netlify-cms-paths', |
| 98 | + options: { |
| 99 | + contentTypes: ['Post'] |
| 100 | + coverField: 'cover_image' // Global definition |
| 101 | + } |
| 102 | + } |
| 103 | +``` |
| 104 | + |
| 105 | +[fs]: https://gridsome.org/plugins/@gridsome/source-filesystem |
0 commit comments