Skip to content

clean-commit/decap-cms-widget-permalink

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Decap CMS Permalink Widget

Decap CMS Widget that allows you to create customizable permalinks easily.

Widgets are inputs for the Netlify CMS editor interface. It's a React component that receives user input and outputs a serialized value.

This widget allows you to create custom permalinks that can be used to generate pathnames for Decap CMS based websites. The widget mimics the behaviour of WordPress permalink input field automatically outputting correct slugs.

Permalink widget

Installation

  1. Install the widget
npm install decap-cms-widget-permalink
yarn add decap-cms-widget-permalink
  1. Import the Permalink widget to your Netlify CMS setup file
import { Widget as PermalinkWidget } from 'decap-cms-widget-permalink';
  1. Register the widget for use
CMS.registerWidget(PermalinkWidget);

Usage details

Inside the YML collecitons file you can use permalink as new widget

collections:
  - name: "example"
    label: "Example"
    folder: "/path/to/your/folder"
    create: true
    slug: "{{slug}}"
    fields:
      - label: "Permalink",
        name: "permalink",
        widget: "permalink",
        prefix: 'blog', // This allows to add a prefix to the correct url
        url: 'http://example.com'

You can also use it as a JS object using Netlify CMS Manual Initialization

Example:

{
  label: 'Permalink',
  name: 'permalink',
  widget: 'permalink',
  required: true,
  prefix: 'blog', // This allows to add a prefix to the correct url
  url: 'http://localhost:8000',
  hint: 'The post URL (do not include folder or file extension)',
},

This widget is using 2 custom items: url -> is used to visualize and link to the page prefix -> is used when you want to prefix some pages (i.e. blog will output -> /blog/your-slug/)

Additional guides