Storing slug in hidden field

[fabrizziosoares]

I am trying to store the current slug in a hidden field, but it storing the string "{{slug}".
Follow an excerpt of my code:

name: projects
label: Projects
label_singular: Project
folder: 'content/en/project'
path: '{{slug}}/index'
create: true # Allow users to create new documents in this collection
fields: # The fields each document in this collection have
- {label: "Title Slug", name: "titleslug", widget: "hidden", default: "{{slug}}"}

Is it possible to fix it, please?

[erezrokah]

Hi @fabrizziosoares, the default value for fields doesn't support templates at the moment. Regardless default values are applied when creating a new entry, while the slug is calculated when saving the entry.
You should be able to use the preSave event to add the slug to your entries as a field:

CMS.registerEventListener({
  name: 'preSave',
  handler: ({ entry }) => {
    return entry.get('data').set('titleslug', entry.get('slug'));
  },
});

[fabrizziosoares]

Dear @erezrokah

Thanks for your help. I appreciate it.
I tried your suggestion, and I see some advance, but still a problem.
Now, instead of saving "{{slug}}" string, it is storing an empty string. I think I am missing something.
Do you have any idea?

Best!

[erezrokah]

Now, instead of saving "{{slug}}" string, it is storing an empty string. I think I am missing something.
Do you have any idea?

Oh, that's my bad.
On initial save the slug is probably empty.
How about something like this:

CMS.registerEventListener({
  name: 'preSave',
  handler: ({ entry }) => {
   if (entry.get('slug')) {
     return entry.get('data').set('titleslug', entry.get('slug'));
   } else {
     // you can use any relevant field/logic for generating the initial slug
     const titleSlug = entry.getIn(['data', 'title'], '').toLowerCase().replace(/[']/g, '').replace(/[.]/g, '-').replace(/[\s]/g, '-')
     return entry.get('data').set('titleslug', titleSlug);
   }
  },
});

[fabrizziosoares]

Dear @erezrokah,

that works very well. Thank you. That is really cool!
This "slugfying" approach you provided is the same Netlify CMS uses? Did you get from its source code?
I am working multilanguage, so I am concerned with names with accents and other symbols generating a slug different than CMS provides. If it is the same, great. If it is different, maybe I can work on your suggestion and adjust it for my case.

[erezrokah]

This "slugfying" approach you provided is the same Netlify CMS uses?

Very good point. The CMS uses https://github.com/netlify/netlify-cms/blob/2565668130f64dfc209f01128544f8573d8bbae8/packages/netlify-cms-core/src/lib/formatters.ts#L109
which you could import since we export each CMS package as a module.

I actually think it's better if you duplicate the logic as importing a module requires you to have a build step.
The parts that you'll need are prepareSlug and sanitizeSlug (the rest is used for string templating support)

[erezrokah]

Closing, please comment if you have any more questions

[IanVS]

Thanks for the suggestions in this thread. I was able to come up with this approach, which I think works well and avoids the slug from being changed inadvertently if the title changes, while at the same time not requiring the user to create a slug manually. If the slug really does need to be changed, it can be done directly in the generated markdown file by someone who hopefully also knows to set up redirects.

import slugify from "@sindresorhus/slugify";

const blogConfig = {
    name: "blog",
    label: "Blog Posts",
    label_singular: "Blog Post",
    folder: "src/data/posts",
    preview_path: "blog/{{slug}}",
    create: true,
    slug: "{{fields.slug}}",
    fields: [
        { name: "title", label: "Title", widget: "string" },
        { name: "slug", label: "Slug", widget: "hidden" },
        ...
    ]
};

/**
 * Before saving a blog post, create and save a slug based on the title
 * if one does not already exist.
 */
CMS.registerEventListener({
  name: "preSave",
  handler: ({ entry }) => {
    // Only process blog posts
    if (entry.get("collection") !== "blog") return;

    // If there's already a slug, don't change it
    if (entry.getIn(["data", "slug"], "")) return;

    // Slugify the title and save it as the slug
    const title = entry.getIn(["data", "title"], "");
    const slug = slugify(title);
    return entry.get("data").set("slug", slug);
  },
});

const config = /* Put together blogConfig with the rest of the config */

CMS.init({ config });

[iaminamcom]

It doesn't update the corresponding field in UI. Field in UI stays same so it's not practical for common user

[cathelijne]

Now, instead of saving "{{slug}}" string, it is storing an empty string. I think I am missing something.
Do you have any idea?

Oh, that's my bad. On initial save the slug is probably empty. How about something like this:

CMS.registerEventListener({
  name: 'preSave',
  handler: ({ entry }) => {
   if (entry.get('slug')) {
     return entry.get('data').set('titleslug', entry.get('slug'));
   } else {
     // you can use any relevant field/logic for generating the initial slug
     const titleSlug = entry.getIn(['data', 'title'], '').toLowerCase().replace(/[']/g, '').replace(/[.]/g, '-').replace(/[\s]/g, '-')
     return entry.get('data').set('titleslug', titleSlug);
   }
  },
});

I've been searching for the best part of the day for a way to duplicate a yaml field created by the datetime widget as my title field. Tried to get an anchor in there (an anchor: field would be cool!), tried to reference slugs, nothing helped. This did the trick in under five minutes (added a simple test to see if the title field exists). Thanks!