HUGO

Quartz urls spaces hyphens relative path problem. Replace not working on index

Are you sure about that?

https://github.com/bur3ku/quartz/blob/hugo/layouts/_default/single.html#L13

Does that mean I can make the titles build without spaces, but they would still be kebab-case in obsidian? I wonder if there’s a way to have only the url in kebab-case

It means that {{ .Title }} represents title in the content front matter, and has no relation to the filename. I have no idea how Obsidian plays into this, and I’m not going there.

And remember, when you are testing locally; do this:

hugo-obsidian -input=content -output=data && hugo

or

hugo-obsidian -input=content -output=data && hugo server
1 Like

For future readers:
When using Quartz, your obsidian vault should be in the content folder. Obsidian views and edits the markdown files in that folder.

It seems to work like this:

The links on the built static hugo website are generated from the links in obsidian, and the directories (urls) are generated from the obsidian note names (markdown file names). The thing is, quartz converts all the spaces in the links to hyphens when it creates the url directory structure! But it doesn’t reflect that in the built link hrefs.

One solution is to put all the links (and corresponding note names) in kebab-case. So the resulting urls will be in kebab-case.

Another solution is to tweak the files that generate the static hugo site so that the hrefs are in kebab-case, so they match the kebab-case urls that quartz generated. That way, you can avoid putting the notes (and links) in kebab-case!

Unfortunately, the code to implement the tweak is different for each partial. To fix the links in the note bodies, you need to add this to the top of layouts/_default/single.html:

{{$content := replaceRE `a href="\.\.\/(.+%20.+)+"` `$1` .Content}}

{{$content = replace $content "%20" "-"}}

That uses the hugo’s replaceRE function to use a regular expression to find all the hrefs in the note’s content and replace the spaces with hyphens.

For the backlinks, the tweak is implemented by (in layouts/partials/backlinks.html) replacing everything between {{- range $inbound -}} and {{- end -}} with:

{{$src := index . "source"}}
{{$src = replace $src " " "-"}}
{{$src = replace $src `\` ""}}
<li>
    <a href="../{{$src | safeHTML}}">{{index . "source"}}</a>
</li>

By the way, those lines of code will also fix a more general problem with quartz, which is a relative path problem with the backlinks. I think I set up obsidian and quartz incorrectly somehow, because changing the obsidian settings to absolute link paths doesn’t help. Anyway, I’ll add some keyworks here for future googlers: quartz hugo backlink not working url relative path backslash obsidian.

The solution for the graph is a two line change in layouts/partials/graph.html:
First replace .text((d) => d.id) with .text((d) => d.id.replace("%20", " "))
Then replace:

window.location.href = {{.Site.BaseURL}} + d.id;

with:

window.location.href = {{.Site.BaseURL}} + d.id.replace(" ", "-");

By the way, Quartz generates the title of each note on the built hugo website using the title of the note’s front matter. The front matter should go at the top of each note in obsidian:

---
title: put title here
---

The title always works, regardless of spaces. It needn’t even match the note’s name

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.