About
This howto will show you how to:
Steps
Page Sql: How to select the pages
With page sql, you can select pages via a select statement.
Page Sql permits to query pages in a lot of fashion.
For this example, we will select the last 5 modified howto with the following sql.
select from pages where path like ':howto%' order by date_modified desc limit 5
This query returns for this website the following pages:
| Date | Page |
|---|---|
| 9/6/23, 8:27 AM | How to create your own theme? |
| 8/23/23, 7:49 AM | How to generate and layout a list of pages with a grid and their image? |
| 5/12/23, 2:06 PM | How to create a top menu bar? |
| 5/3/23, 12:30 PM | How to install Dokuwiki ? |
| 4/28/23, 2:26 PM | How to get started with ComboStrap ? |
Fragment: The markup to generate
When you generate content, you are looping over the same content over and over. This content part in ComboStrap is called a fragment
- For this howto, we will present our pages:
- in a card
- with a page image as illustration
- with a width of 200px
- with the title, description and path variable
- where the description is cut with the head pipeline function
<card width="250px" align="center" clickable>
<page-image/>
<heading 4>$title</heading>
${description | head(100,"...")} [[$path| ]]
</card>
- The output for the actual page is:
Iterator: Iterate over the fragment with the selected pages
The iterator is a component that
- takes the page sql
- and iterates over the fragment
The below example generate a grid that splits the horizontal space in 3 (max-line=3)
<iterator>
<data>select from pages where path like ':howto%' order by date_modified desc limit 5</data>
<grid max-line="3">
<fragment>
<box>
<card width="250px" align="center" clickable>
<page-image/>
<heading 4>$title</heading>
${description | head(100,"...")}
[[$path| ]]
</card>
</box>
</fragment>
</grid>
</iterator>
The output is:
Note that in the fragment, we have wrapped the card in a box. Why ? Because:
- the grid splits the horizontal space inside the box
- and in this space, in this box, the card takes a maximum with of 200 px.
Conclusion
In this howto, you learned about:
- the page sql
- the page image
- the grid layout
That's all, folks.