Update images in docs

This commit is contained in:
Daniel Lautzenheiser
2022-10-26 09:23:11 -04:00
parent 5dc70fc988
commit fb5c5614dd
19 changed files with 86 additions and 84 deletions

View File

@ -199,48 +199,3 @@ Create a file `layouts/blog/single.html`, and put the following content in there
```
You can see this basic template includes all the fields you've specified in your Static CMS `config.yml` file. You can access any custom front-matter fields with `.Params.<field-name>`!
### Using Hugo shortcodes in the Markdown Editor
Using `registerEditorComponent` we can register a block level component for the Markdown editor. You can use it to add Hugo's inbuilt shortcodes like `gist`,`youtube` and others as block components to the markdown editor.
You can refer to [registering editor components](/docs/custom-widgets/#registereditorcomponent) for a getting started guide or for creating your own editor components.
**Example**
```javascript
CMS.registerEditorComponent({
id: "gist",
label: "Gist",
fields: [{
title: "username",
label: "Github Username",
widget: "string"
},
{
title: "gid",
label: "Gist ID",
widget: "string"
},
],
pattern: /^{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/,
fromBlock: function(match) {
return {
usertitle: match[1],
gid: match[2],
};
},
toBlock: function(obj) {
return `{{< gist ${obj.username} ${obj.gid} >}}`;
},
toPreview: function(obj) {
return '<a href="https://gist.github.com/' + obj.username + '/' + obj.id + '">gist</a>';
},
});
```
**Result**
![Gist](/img/hugo_shortcode_gist.png "Gist")
For getting started quickly you can refer to this amazing prebuilt resource of [hugo shortcodes editor components](https://github.com/sharadcodes/hugo-shortcodes-netlify-cms)!