Nice Permalinks In Eleventy AND Nice Filenames in Obsidian
A while ago I made a post about how to change (part of) the permalink that Eleventy generates from the filename. Since I am using Obsidian as my blog editor I had a little problem:
- On the one hand: I wanted to have nice, readable filenames - with spaces and everything - so that I can link between entries more easily
- On the other: If I use readable filenames - with spaces and everything - they get not slugified correctly, meaning that spaces in the filename are just urlencoded instead of replaced by dashes, etc. (see this post for an example)
- On yet another, secret, third hand: Without a title in the frontmatter, posts do not get a title in my blog and Wikilinks won't work.
The Solution For Hands One And Two
We replace the permalink
of our blog.11ydata.js
:
"permalink": "{{page.filePathStem.slice(5).replace(page.fileSlug, '')}}{{page.fileSlug|slugify}}/index.html"
This is a little convoluted as Eleventy doesn't seem to expose the path without the filename. So we have to cut the file name off and then re-add a slugified version.[1]
The Solution For The Secret Third Hand (that is actually many hands...)
Since a title is mandatory in all kinds of templates and feeds and whatnot and Wikilinks won't work reliably without a title in the frontmatter of the post, the best solution for this is to use an Obsidian-Plugin. I tried out two options.
- Obsidian Linter - which has a rule for inserting a title based on the filename into the frontmatter.
- File Title Updater - which can "synchronize" filename and frontmatter
I personally landed on using File Title Updater for this, because:
- I still have - and always will have - files, where the title and the filename are not the same. But because the linter's rule is just one of many - and I do actually use the linter for a bunch of other things - there is no way for me to specify when I want to have the title updated and when I don't if, I'd use the linter.
- File Title Updater furthermore has a setting to handle illegal characters, like colons (these things:
:
). I do have some files Mini Review: Let Them Theory, where the linter would be unable to handle these cases gracefully. As the "sync direction" would be filename (colon not allowed) -> title and not title -> filename.
So writing a new post and publishing it means that I run File Title Updater: Sync titles using frontmatter as source
at least once.
And there you have it! Now we can have nice permalinks that are based on the filename and those filenames do not need to be "permalink" friendly (i.e. all small caps, dashes instead of spaces, etc.) and we still can adjust this on an individual basis by specifying a permalink and/or a title in the yaml frontmatter of individual posts.
A Couple Of Small Caveats To Be Aware Of
As I said above: File Title Updater has an option to handle illegal characters. But that means that when you synchronize title and filename, you may end up with something like this:
- Frontmatter: Mini Review: Let Them Theory
- Filename: Mini Review- Let Them Theory
Which will show up in Obsidian with the slightly awkward dash right after "Review" as in the filename. I think this is not a huge deal, as only you as the writer will ever see this and it is very unlikely that you would not find the note you're looking for because of this. I first had hoped that we could use Obsidian Linter's YAML-Title-Alias rule to set an alias based on the title, but sadly - and surprisingly - that's not what it does. You can still add that Alias by hand, but, personally, I wouldn't bother.
The other caveat is that when you start writing a new note, Obsidian is going to ask for a file name. And you won't be able to add illegal characters to that filename. Again, as soon as you sync the title once - from filename first and henceforth from frontmatter - you are good to go. This is still much nicer and more ergonomic than having to write a permalink by hand if you ask me. :)
It doesn't help that the unslugified filename is called
fileSlug
for some reason... ↩︎
-
← Previous
DailyDogo 1317 🐶 -
Next →
DailyDogo 1318 🐶