Update images in docs
@ -190,7 +190,7 @@ CMS.registerEditorComponent({
|
||||
|
||||
**Result:**
|
||||
|
||||

|
||||

|
||||
|
||||
## Advanced field validation
|
||||
|
||||
|
@ -50,7 +50,7 @@ gh repo create my-website
|
||||
|
||||
Don't add a license or a .gitignore. Do add an "origin" git remote.
|
||||
|
||||

|
||||

|
||||
|
||||
```bash
|
||||
# 6. Update your remote repository with your staged changes.
|
||||
@ -68,7 +68,7 @@ git push -u origin main
|
||||
4. Choose `yarn build` for your build command.
|
||||
5. Choose `build` for your deployment directory.
|
||||
|
||||

|
||||

|
||||
|
||||
Choose the default option for everything else.
|
||||
|
||||
|
@ -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**
|
||||
|
||||

|
||||
|
||||
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)!
|
||||
|
@ -15,7 +15,7 @@ If you're starting a new project, the fastest route to publishing on a Jekyll we
|
||||
|
||||
This guide will use the blog you get if you follow the [really excellent official Jekyll step by step tutorial](https://jekyllrb.com/docs/step-by-step/01-setup/) as a starting point. If you're new to Jekyll - I recommended you start by following the tutorial so you know your way around your new blog. Otherwise [you can clone this repo](https://github.com/adamwatters/jekyll-tutorial-with-netlify-cms/tree/without-cms) and checkout the `without-cms` branch.
|
||||
|
||||

|
||||

|
||||
|
||||
## Add Static CMS
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
---
|
||||
group: Intro
|
||||
title: Releases
|
||||
weight: 4
|
||||
weight: 10
|
||||
---
|
||||
|
||||
|
||||
|
@ -232,9 +232,9 @@ After clicking one of those buttons, authenticate with GitHub or GitLab and choo
|
||||
## Access Static CMS
|
||||
|
||||
1. The template deploy process sends you an invitation to your new site, sent from `no-reply@netlify.com`.
|
||||

|
||||

|
||||
2. Wait for the deployment to complete, then click the link to accept the invite. Your site will open with a prompt to create a password.
|
||||

|
||||

|
||||
3. Enter a password, sign in, and you'll go to the CMS. (For future visits, you can go straight to `<yoursiteaddress.com>/admin/`.)
|
||||
|
||||
Try adding and editing posts, or changing the content of the Products page. When you save, the changes are pushed immediately to your Git repository, triggering a build on Netlify, and updating the content on your site. Check out the configuration code by visiting your site repo.
|
||||
|
@ -25,6 +25,6 @@ The markdown widget provides a full fledged text editor allowing users to format
|
||||
|
||||
This would render as:
|
||||
|
||||

|
||||

|
||||
|
||||
*Please note:* The markdown widget outputs a raw markdown string. Your static site generator may or may not render the markdown to HTML automatically. Consult with your static site generator's documentation for more information about rendering markdown.
|
||||
|
BIN
website/public/img/build-deployment.webp
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
website/public/img/create-password.webp
Normal file
After Width: | Height: | Size: 29 KiB |
BIN
website/public/img/create-remote-repo.webp
Normal file
After Width: | Height: | Size: 17 KiB |
BIN
website/public/img/email-subject.webp
Normal file
After Width: | Height: | Size: 6.2 KiB |
BIN
website/public/img/hugo_shortcode_gist.webp
Normal file
After Width: | Height: | Size: 1.8 KiB |
BIN
website/public/img/screenshot-jekyll-tutorial-blog.webp
Normal file
After Width: | Height: | Size: 58 KiB |
BIN
website/public/img/widgets-markdown.webp
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
website/public/img/youtube-widget.webp
Normal file
After Width: | Height: | Size: 14 KiB |
@ -5,6 +5,7 @@ const DocsContent = styled('div')(
|
||||
color: ${theme.palette.text.primary};
|
||||
font-weight: 200;
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
padding: 0 40px 0 56px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|