diff --git a/website/site/content/docs/customization.md b/website/site/content/docs/customization.md index fa668dfd..6d56200e 100644 --- a/website/site/content/docs/customization.md +++ b/website/site/content/docs/customization.md @@ -2,7 +2,6 @@ title: Custom Previews position: 50 --- - # Customizing the Preview Pane The NetlifyCMS exposes a `window.CMS` global object that you can use to register custom widgets, previews and editor plugins. The available customization methods are: @@ -29,13 +28,15 @@ CMS.registerPreviewStyle(file); * **file:** css file path **Example:** + ```html // index.html - + ``` + ```css /* example.css */ @@ -49,11 +50,8 @@ body { body { padding: 20px; } - - ``` - ## `registerPreviewTemplate` Registers a template for a collection. @@ -68,11 +66,9 @@ Registers a template for a collection. * widgetFor: Returns the appropriate widget preview component for a given field. * [widgetsFor](#lists-and-objects): Returns an array of objects with widgets and associated field data. For use with list and object type entries. * getAsset: Returns the correct filePath or in-memory preview for uploaded images. - **Example:** - ```html - + ``` - ### Lists and Objects The API for accessing the individual fields of list- and object-type entries is similar to the API for accessing fields in standard entries, but there are a few key differences. Access to these nested fields is facilitated through the `widgetsFor` function, which is passed to the preview template component during render. - **Note**: as is often the case with the NetlifyCMS API, arrays and objects are created with Immutable.js. If some of the methods that we use are unfamiliar, such as `getIn`, check out [their docs](https://facebook.github.io/immutable-js/docs/#/) to get a better understanding. - **List Example:** - ```html ``` - **Object Example:** - ```html ``` - ### Accessing Metadata Preview Components also receive an additional prop: `fieldsMetaData`. It contains aditional information (besides the plain plain textual value of each field) that can be useful for preview purposes. - For example, the Relation widget passes the whole selected relation data in `fieldsMetaData`. - ```js export default class ArticlePreview extends React.Component { render() { const {entry, fieldsMetaData} = this.props; const author = fieldsMetaData.getIn(['authors', data.author]); - + return

{ entry.getIn(['data', 'title']) }

{author &&}
} } - ``` \ No newline at end of file + ```