Update Docs “customization”
This commit is contained in:
parent
c8a9607f79
commit
1445a3da71
@ -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
|
||||
<script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script>
|
||||
<script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script>
|
||||
<script>
|
||||
CMS.registerPreviewStyle("/example.css");
|
||||
</script>
|
||||
```
|
||||
|
||||
```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
|
||||
<script src="https://unpkg.com/netlify-cms@^0.7.0/dist/cms.js"></script>
|
||||
<script src="https://unpkg.com/netlify-cms@^1.0.0/dist/cms.js"></script>
|
||||
<script>
|
||||
var PostPreview = createClass({
|
||||
render: function() {
|
||||
@ -90,19 +86,15 @@ Registers a template for a collection.
|
||||
CMS.registerPreviewTemplate("posts", PostPreview);
|
||||
</script>
|
||||
```
|
||||
|
||||
### 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
|
||||
<script>
|
||||
var AuthorsPreview = createClass({
|
||||
@ -144,9 +136,7 @@ Registers a template for a collection.
|
||||
CMS.registerPreviewTemplate("authors", AuthorsPreview);
|
||||
</script>
|
||||
```
|
||||
|
||||
**Object Example:**
|
||||
|
||||
```html
|
||||
<script>
|
||||
var GeneralPreview = createClass({
|
||||
@ -179,12 +169,9 @@ Registers a template for a collection.
|
||||
CMS.registerPreviewTemplate("general", GeneralPreview);
|
||||
</script>
|
||||
```
|
||||
|
||||
### 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() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user