From 2114fe1857deff90d506676523906e77b22602f6 Mon Sep 17 00:00:00 2001 From: SHARAD RAJ <36638057+sharadcodes@users.noreply.github.com> Date: Sun, 7 Jun 2020 18:34:06 +0530 Subject: [PATCH] =?UTF-8?q?docs:=20Update=20Docs:=20Guides=20=E2=80=9Chugo?= =?UTF-8?q?=E2=80=9D=20(#3863)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- website/content/docs/hugo.md | 47 ++++++++++++++++++++- website/static/admin/config.yml | 2 +- website/static/img/hugo_shortcode_gist.png | Bin 0 -> 11232 bytes 3 files changed, 47 insertions(+), 2 deletions(-) create mode 100644 website/static/img/hugo_shortcode_gist.png diff --git a/website/content/docs/hugo.md b/website/content/docs/hugo.md index 1724222b..26cf7501 100644 --- a/website/content/docs/hugo.md +++ b/website/content/docs/hugo.md @@ -198,4 +198,49 @@ 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 Netlify CMS `config.yml` file. You can access any custom front-matter fields with `.Params.`! \ No newline at end of file +You can see this basic template includes all the fields you've specified in your Netlify CMS `config.yml` file. You can access any custom front-matter fields with `.Params.`! + +### 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](https://www.netlifycms.org/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: [{ + name: "username", + label: "Github Username", + widget: "string" + }, + { + name: "gid", + label: "Gist ID", + widget: "string" + }, + ], + pattern: /{{< gist ([a-zA-Z0-9]+) ([a-zA-Z0-9]+) >}}/, + fromBlock: function(match) { + return { + username: match[1], + gid: match[2], + }; + }, + toBlock: function(obj) { + return `{{< gist ${obj.username} ${obj.gid} >}}`; + }, + toPreview: function(obj) { + return `{{< gist ${obj.username} ${obj.gid} >}}`; + }, +}); +``` + +**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)! \ No newline at end of file diff --git a/website/static/admin/config.yml b/website/static/admin/config.yml index 47996f4a..558646d5 100644 --- a/website/static/admin/config.yml +++ b/website/static/admin/config.yml @@ -11,7 +11,7 @@ site_url: https://www.netlifycms.org publish_mode: editorial_workflow media_folder: website/static/img -public_folder: img +public_folder: /img docs_collection: &docs_collection folder: website/content/docs diff --git a/website/static/img/hugo_shortcode_gist.png b/website/static/img/hugo_shortcode_gist.png new file mode 100644 index 0000000000000000000000000000000000000000..0d5bd7f5a594e6b8fbc4010f5dd2d93a82988c15 GIT binary patch literal 11232 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