> or create your own templates (https://github.com/quarkiverse/quarkus-roq/tree/main/theme/default/src/main/resources/templates[example templates]).
+
+[#install-theme]
+=== Install a theme
+
+To install a theme, simply add the dependency to your pom.xml. Example with Roq's default theme:
+[source,xml]
+----
+
+ io.quarkiverse.roq
+ quarkus-roq-theme-default
+ {cdi:project-info.release.current-version}
+
+----
+
+
+It will provide templates, scripts and styles for your site. To use a theme layout, refer to it with `:theme/` prefix (there is an example in the next part). For advanced usage, refer to the link:{site.url('docs/advanced')}#themes[*Theme section*].
+
+
+=== Site index template
+
+Your site index template is required and should be located in `content/index.html`.
+
+{|
+[source,html]
+.content/index.html
+----
+---
+
+title: Hello Roqers // <1>
+description: It is time to start Roqing 🎸!
+layout: :theme/index //<2>
+
+---
+
+Hello fellow Roqers 🤘
+
+
+ With Roq, it is very easy to a link to another.
+ page. // <3>
+
+
+----
+
+<1> The index.html also describe your `site` information through a FrontMatter header.
+<2> The layout to use (in this case `:theme/index` which refers to the `index` layout from the theme).
+<3> We use the `{site.url(path)}` using Qute to manual resolve other pages urls.
+
+|}
+
+TIP: There are different ways to link your pages as explained in the link:{site.url('docs/advanced')}#links[Links & Urls] section.
+
+=== Variables
+
+{|
+
+You can use Qute to access site and pages data. For this use the `site` and `page` variables:
+
+* The `site` variable allow to access site global info from any page, document, layout or partial.
++
+.Show attributes
+[%collapsible]
+====
+[cols="1,1,1,1", options="header"]
+|===
+| Variable | Type | Description | Example
+
+| `site.url`
+| `RoqUrl`
+| The Roq site URL
+| `http://example.com/my-roq-site/`
+
+| `site.imagesUrl`
+| `RoqUrl`
+| Directory to resolve images URL (e.g. /static/images)
+| `http://example.com/static/images`
+
+| `site.data`
+| `JsonObject`
+| The site FM data (declared in the index.html)
+| `{"title": "My Site", "description": "A description"}`
+
+| `site.pages`
+| `java.util.List`
+| All the pages in this site (without the documents)
+| `[Page1, Page2, Page3]`
+
+| `site.collections`
+| `RoqCollections`
+| All the collections in this site (containing documents)
+| `{"collection1": Collection1, "collection2": Collection2}`
+
+| `site.title`
+| `String`
+| The site title
+| `My Site`
+
+| `site.description`
+| `String`
+| The site description
+| `A description`
+
+| `site.image`
+| `RoqUrl`
+| The site image URL if present
+| `http://example.com/static/images/site.png`
+
+| `site.url(Object path, Object... others)`
+| `RoqUrl`
+| Shortcut for site.url.resolve(path)
+| `site.url.resolve("/about") => http://example.com/my-roq-site/about`
+|===
+====
+
+* The `page` variable is available in pages, documents, layouts, and partials. It contains the info for the page it is used from.
++
+.Show attributes
+[%collapsible]
+====
+[cols="1,1,1,1", options="header"]
+|===
+| Variable | Type | Description | Example
+
+| `page.url`
+| `RoqUrl`
+| The URL to this page
+| `http://example.com/about`
+
+| `page.info`
+| `PageInfo`
+| The page info (file name, ...)
+|
+
+| `page.data`
+| `JsonObject`
+| The FM data of this page
+| `{"title": "About Us", "description": "This is the about us page."}`
+
+| `page.paginator`
+| `Paginator`
+| The paginator if any
+| `Paginator{currentPage=1, totalPages=5}`
+
+| `page.collection`
+| `String`
+| The collection id if this a document
+| `posts`
+
+| `page.title()`
+| `String`
+| The title of the page (shortcut from FM)
+| `About Us`
+
+| `page.description()`
+| `String`
+| The description of the page (shortcut from FM)
+| `This is the about us page.`
+
+| `page.image()`
+| `RoqUrl`
+| The image URL of the page if present
+| `http://example.com/static/images/about.png`
+
+| `page.date()`
+| `ZonedDateTime`
+| The publication date of the page
+| `2023-10-01T12:00:00Z`
+|===
+====
+
+=== Pages
+
+Any directory without the `_` prefix in the site directory will be scanned for pages content.
+
+Let's create your first page and spice things up a bit by using Markdown.
+
+[source,markdown]
+.roq-bottom.md
+----
+---
+
+title: Roq Bottom
+description: When you hit Roq bottom, try Roq to climb back up!
+layout: :theme/page
+link: /climb-back-up <1>
+the-rope: You Roq! <2>
+
+---
+
+# Roq Bottom
+
+If you thought you hit Roq Bottom, take this 🪢 because :
+
+__{page.data.the-rope}!__ <3>
+
+----
+
+<1> you can use `link` to give this page a custom link (by default it will use the file-name).
+<2> you can add other FM data.
+<3> FM data is available through `page.data`.
+
+=== Global data
+
+It is possible to
+
+
+=== Collections
+
+Collections are a great way to group related content such as blog posts, recipes, member of a team or talks at a conference.
+Once created you can easily iterate and link to them.
+
+By default, Roq is configured with a `posts` collection using the `content/posts` directory. Let's create our first post:
+
+[source,markdown]
+.content/posts/2024-10-14-roq-solid.md
+----
+---
+
+title: Roq bad puns
+description: Roq is very good for bad puns 🤭
+layout: :theme/post <1>
+tags: <2>
+ - funny
+ - ai
+img: 2024/10/roq-solid.jpg
+
+---
+
+# {page.title} <3>
+
+Here is a list of puns suggested by Chat GPT:
+1. Roq and Rule – A play on “rock and roll,” implying dominance or success.
+2. Between a Roq and a Hard Place – Classic pun meaning stuck in a difficult situation.
+3. Roq Solid – Something that is extremely reliable or stable.
+4. You Roq! – A compliment, suggesting someone is awesome or does something well.
+5. Roq Bottom – Referring to the lowest possible point, often used metaphorically.
+6. Roq the Boat – To cause trouble or disturb the status quo.
+7. Roq Star – A person who excels or stands out in their field.
+8. Let’s Roq – Slang for getting started or doing something exciting.
+9. Roq On! – An enthusiastic way to say “keep going” or “stay awesome.”
+10. Roqy Road – Could be literal (the type of road) or metaphorical for a difficult journey.
+11. Roq of Ages – A historical reference, often implying something long-standing and unchanging.
+12. Roq the Cradle – Can be literal or a pun about nurturing or starting something new.
+13. Roqy Relationship – A tumultuous or unstable relationship.
+14. Heavy as a Roq – Something burdensome or difficult to manage.
+15. Stone Cold Roq – Referring to something very cool or emotionless.
+
+----
+|}
+<1> This time we use the `post` layout from the theme.
+<2> You can define tags (see link:{site.url('docs/plugins')}#plugin-tagging[Plugins] to create pages for tags).
+<3> You have shortcut on the `page` to access `title` and `description`.
+{|
+
+Then let's edit our index page to show the list of posts:
+
+[source,html]
+.content/index.html
+----
+---
+title: Hello Roqers
+description: It is time to start Roqing 🎸!
+layout: main
+---
+
+Hello fellow Roqers 🤘
+
+
+{#for post in site.collections.posts} // <1>
+
+ {#if post.image}
+ // <2> <3>
+ {/if}
+
+
+
{post.description}
+
{post.date.format('yyyy, MMM dd')} — // <4>
+
+ {post.readTime} minute(s) read <5>
+
+
// <1>
+} "{site.title}")
// <2>
+----
+<1> Will print the site image absolute url.
+<2> Will print `/static/assets/images/something.png`.
+
+or
+
+[source,html]
+----
+---
+layout: :theme/page
+title: Foo
+image: foo.webp // <1>
+---
+
+