Update the note title name on frontmatter properties edit

[Liso]

What I’m trying to do

I’m trying to update the note title whenever I edit the frontmatter properties.

So when I edit the title for example above is Experience With SSG, I change them to Experience With Multiple SSG, the file titlename will be updated to following:

2024-08-12-experience-with-multiple-ssg

Currently is it not automatically updated, I have to edit the title manually to match the frontmatter title.

---

Here is my templater templates file.

<%*
let title = this.app.workspace.getActiveFile().basename
if (title.startsWith("Untitled")) {
    title = await tp.system.prompt("Title") ?? "Untitled";
    newTitle = tp.date.now() + "-" + `${title.replace(/\s+/g, '-').toLowerCase()}`;
    await tp.file.rename(newTitle);
}
-%>
---
title: <% title %>
description: "Enter your description here."
date: <% tp.date.now() %>
taxonomies:
  tags: []
---

How would I do that ? Any suggestion is greatly appreciated

[Liso]

Is there any way to achieve this?

[Rios]

This is the automated method using templater:

<%*
const {app, moment} = this;
const file = app.workspace.getActiveFile();
const frontmatter = app.metadataCache.getFileCache(file).frontmatter;

if (frontmatter && frontmatter.title) {
    const newTitle = `${moment(file.basename, "YYYY-MM-DD").format("YYYY-MM-DD")}-${frontmatter.title.toLowerCase().replace(/ /g, "-")}`;
    await app.fileManager.renameFile(file, `${file.parent.path}/${newTitle}.md`);
}
%>

you can put this in the quick plugin (as a capture choice), then enable capture to an active file, put the script in the capture format and make a command for it, then you can run the command from the command palette with the name of the capture choice where the script is placed when you change the frontmatter or you can install a buttons plugin from community plugins and put this in your note template

```button
type command
name Update the filename
action Quickadd: (the name of the capture choice)
color default
class *[data-mode='source'] .view-action:first-child {     background-color: orange; } *[data-mode='preview'] .view-action:first-child {     background-color: yellow; }

and click on the button to update the filename when you change the frontmatter.