You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

linking.md 2.3KB

Allow manual specification of header IDs (#685) Justification for this feature is added in the docs. Precedent for the precise syntax: Hugo. Hugo puts this syntax behind a preference named headerIds, and automatic header ID generation behind a preference named autoHeaderIds, with both enabled by default. I have not implemented a switch to disable this. My suggestion for a workaround for the improbable case of desiring a literal “{#…}” at the end of a header is to replace `}` with `&#125;`. The algorithm I have used is not identical to [that which Hugo uses][0], because Hugo’s looks to work at the source level, whereas here we work at the pulldown-cmark event level, which is generally more sane, but potentially limiting for extremely esoteric IDs. Practical differences in implementation from Hugo (based purely on reading [blackfriday’s implementation][0], not actually trying it): - I believe Hugo would treat `# Foo {#*bar*}` as a heading with text “Foo” and ID `*bar*`, since it is working at the source level; whereas this code turns it into a heading with HTML `Foo {#<em>bar</em>}`, as it works at the pulldown-cmark event level and doesn’t go out of its way to make that work (I’m not familiar with pulldown-cmark, but I get the impression that you could make it work Hugo’s way on this point). The difference should be negligible: only *very* esoteric hashes would include magic Markdown characters. - Hugo will automatically generate an ID for `{#}`, whereas what I’ve coded here will yield a blank ID instead (which feels more correct to me—`None` versus `Some("")`, and all that). In practice the results should be identical. Fixes #433. [0]: https://github.com/russross/blackfriday/blob/a477dd1646916742841ed20379f941cfa6c5bb6f/block.go#L218-L234
5 years ago
Allow manual specification of header IDs (#685) Justification for this feature is added in the docs. Precedent for the precise syntax: Hugo. Hugo puts this syntax behind a preference named headerIds, and automatic header ID generation behind a preference named autoHeaderIds, with both enabled by default. I have not implemented a switch to disable this. My suggestion for a workaround for the improbable case of desiring a literal “{#…}” at the end of a header is to replace `}` with `&#125;`. The algorithm I have used is not identical to [that which Hugo uses][0], because Hugo’s looks to work at the source level, whereas here we work at the pulldown-cmark event level, which is generally more sane, but potentially limiting for extremely esoteric IDs. Practical differences in implementation from Hugo (based purely on reading [blackfriday’s implementation][0], not actually trying it): - I believe Hugo would treat `# Foo {#*bar*}` as a heading with text “Foo” and ID `*bar*`, since it is working at the source level; whereas this code turns it into a heading with HTML `Foo {#<em>bar</em>}`, as it works at the pulldown-cmark event level and doesn’t go out of its way to make that work (I’m not familiar with pulldown-cmark, but I get the impression that you could make it work Hugo’s way on this point). The difference should be negligible: only *very* esoteric hashes would include magic Markdown characters. - Hugo will automatically generate an ID for `{#}`, whereas what I’ve coded here will yield a blank ID instead (which feels more correct to me—`None` versus `Some("")`, and all that). In practice the results should be identical. Fixes #433. [0]: https://github.com/russross/blackfriday/blob/a477dd1646916742841ed20379f941cfa6c5bb6f/block.go#L218-L234
5 years ago
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849
  1. +++
  2. title = "Internal links & deep linking"
  3. weight = 50
  4. +++
  5. ## Heading id and anchor insertion
  6. While rendering the Markdown content, a unique id will automatically be assigned to each heading.
  7. This id is created by converting the heading text to a [slug](https://en.wikipedia.org/wiki/Semantic_URL#Slug) if `slugify_paths` is enabled.
  8. if `slugify_paths` is disabled, whitespaces are replaced by `_` and the following characters are stripped: `#`, `%`, `<`, `>`, `[`, `]`, `(`, `)`, \`, `^`, `{`, `|`, `}`.
  9. A number is appended at the end if the slug already exists for that article
  10. For example:
  11. ```md
  12. # Something exciting! <- something-exciting
  13. ## Example code <- example-code
  14. # Something else <- something-else
  15. ## Example code <- example-code-1
  16. ```
  17. You can also manually specify an id with a `{#…}` suffix on the heading line:
  18. ```md
  19. # Something manual! {#manual}
  20. ```
  21. This is useful for making deep links robust, either proactively (so that you can later change the text of a heading
  22. without breaking links to it) or retroactively (keeping the slug of the old header text when changing the text). It
  23. can also be useful for migration of existing sites with different header id schemes, so that you can keep deep
  24. links working.
  25. ## Anchor insertion
  26. It is possible to have Zola automatically insert anchor links next to the heading, as you can see on this documentation
  27. if you hover a title.
  28. This option is set at the section level: the `insert_anchor_links` variable on the
  29. [section front matter page](@/documentation/content/section.md#front-matter).
  30. The default template is very basic and will need CSS tweaks in your project to look decent.
  31. If you want to change the anchor template, it can be easily overwritten by
  32. creating an `anchor-link.html` file in the `templates` directory, which gets an `id` variable.
  33. ## Internal links
  34. Linking to other pages and their headings is so common that Zola adds a
  35. special syntax to Markdown links to handle them: start the link with `@/` and point to the `.md` file you want
  36. to link to. The path to the file starts from the `content` directory.
  37. For example, linking to a file located at `content/pages/about.md` would be `[my link](@/pages/about.md)`.
  38. You can still link to an anchor directly; `[my link](@/pages/about.md#example)` will work as expected.