misc:zola_tips
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
misc:zola_tips [2022/12/24 19:16] – [Sections and _index.md] mithat | misc:zola_tips [2022/12/25 22:57] (current) – [Sections and _index.md] mithat | ||
---|---|---|---|
Line 16: | Line 16: | ||
<WRAP center info 80%> | <WRAP center info 80%> | ||
- | This whole setup seems like it's more complicated than it needs to be. | + | This scheme |
</ | </ | ||
- | When you create a folder for organizing content, think of it as a **section**. A section of your website typically has an index page and a number of sub-pages. In Zola, the content for the section' | + | When you create a folder for organizing content, think of it as a **section**. A section of your website typically has an index page and a number of sub-pages. In Zola, the content for the section' |
'' | '' | ||
+ | |||
+ | You don't need to have a '' | ||
You can nest sections. | You can nest sections. | ||
Line 46: | Line 48: | ||
{% endif %} | {% endif %} | ||
</ | </ | ||
+ | </ | ||
+ | |||
+ | **Better yet**, use the following idiom to set '' | ||
+ | |||
+ | <code twig> | ||
+ | {% set current = section | default(value=page) %} | ||
+ | {{ current.title }} | ||
</ | </ | ||
It looks like the root '' | It looks like the root '' | ||
+ | ===== Custom front matter variables ===== | ||
+ | Custom front matter variables are placed in the '' | ||
+ | |||
+ | <code toml> | ||
+ | [extra] | ||
+ | image = " | ||
+ | </ | ||
+ | |||
+ | In templates, you can access elements using dot notation: | ||
+ | |||
+ | <code twig> | ||
+ | {{ section.extra.image }} | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Kludging content segments ===== | ||
+ | Many CMSes and some SSGs let you define segments of content that are rendered into named portions in a template. | ||
+ | |||
+ | < | ||
+ | --- | ||
+ | title: Home | ||
+ | --- | ||
+ | |||
+ | ---heading--- | ||
+ | Custom made noise | ||
+ | ================= | ||
+ | |||
+ | ---lead--- | ||
+ | I build what fashionable people call boutique amplifiers. | ||
+ | |||
+ | ---body--- | ||
+ | Professionally crafted. With heaps of love and soul. [Take a look.]({{pcurl(' | ||
+ | |||
+ | </ | ||
+ | |||
+ | It doesn' | ||
+ | |||
+ | < | ||
+ | +++ | ||
+ | ... | ||
+ | [extra] | ||
+ | heading = "# Custom made noise" | ||
+ | lead = "I build what fashionable people call _boutique amplifiers_." | ||
+ | +++ | ||
+ | |||
+ | Professionally crafted with heaps of love and soul. [Take a look.](/ | ||
+ | </ | ||
+ | |||
+ | And in the template: | ||
+ | |||
+ | <code twig> | ||
+ | {{ section.extra.heading | markdown(inline=true) | safe }} | ||
+ | <div class=" | ||
+ | {{ section.extra.lead | markdown | safe }} | ||
+ | </ | ||
+ | {{ section.content | safe }} | ||
+ | {{ section.extra.image }} | ||
+ | </ | ||
+ | |||
===== Marking a menu item as active ===== | ===== Marking a menu item as active ===== | ||
+ | There may be a better way to do this, but selectively adding a class if the relative path matches seems to work. | ||
+ | <code twig> | ||
+ | <ul class=" | ||
+ | {# for each of the menu entries, if the relative path leads matches the page, add class=" | ||
+ | {% set current = section | default(value=page) %} | ||
+ | {% set rpath = current.relative_path %} | ||
+ | <li {% if rpath == " | ||
+ | <li class=" | ||
+ | <a href="#" | ||
+ | <ul class=" | ||
+ | <li {% if rpath == " | ||
+ | <li {% if rpath == " | ||
+ | <li {% if rpath == " | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li {% if rpath == " | ||
+ | <li {% if rpath == " | ||
+ | </ul> | ||
+ | </ | ||
+ | No doubt, there are opportunities to stuff some of this into macros and/or partials and/or similar. | ||
===== Breadcrumbs ===== | ===== Breadcrumbs ===== | ||
+ | See this [[https:// | ||
+ | <code twig> | ||
+ | {% block breadcrumb %} | ||
+ | <div class=" | ||
+ | <a class=" | ||
+ | {% set current = section | default(value=page) %} | ||
+ | {% for ancestor in current.ancestors %} | ||
+ | {% if loop.first %} | ||
+ | {% continue %} | ||
+ | {% endif %} | ||
+ | <span class=" | ||
+ | {% set section = get_section(path=ancestor) %} | ||
+ | <a class=" | ||
+ | {% endfor %} | ||
+ | <span class=" | ||
+ | <a class=" | ||
+ | </ | ||
+ | {% endblock breadcrumb %} | ||
+ | </ |
misc/zola_tips.1671909377.txt.gz · Last modified: 2022/12/24 19:16 by mithat