Learn how to build dynamic website pages using HubDB data.
Create a HubDB table
page_meta
HubL variables rather than content
variables:{{page_meta.meta_description}}
{{page_meta.featured_image_URL}}
{{page_meta.canonical_url}}
{{content.meta_description}}
tag by default. You’ll instead need to use {{page_meta.meta_description}}
.cfo-harlow
, ceo-jeff
, cto-bristow
, and pd-hugo
.Page title | Page path | Role | Name | Bio |
---|---|---|---|---|
CFO Harlow | cfo-harlow | CFO | Harlow | This is Harlow, who is generally pennywise. |
CEO Jeff | ceo-jeff | CEO | Jeff | Jeff is the CEO, which means he usually runs things around here. |
CTO Bristow | cto-bristow | CTO | Bristow | This is our CTO, Bristow, who likes to tinker. |
Chief PD | pd-hugo | CPD | Hugo | Hugo, our Chief Product Designer, enjoys designing products. |
/CEO-Jeff
they will see the same page as /ceo-jeff
instead of a 404 error.Create a template
dynamic_page_hubdb_row
and dynamic_page_hubdb_table_id
variables in the template. For example, for building an executive profile page, the code below demonstrates how you can use fields from dynamic_page_hubdb_row
to display an executive’s info:hs_name
: the associated Page title for the HubDB row.name
: the executive’s name.role
: the executive’s role.elif
block iterates over all the rows in the executive’s table and displays each entry in a list, with a link to their unique path.dynamic_page_hubdb_row
or dynamic_page_hubdb_table_id
variables.{% set dynamic_page_hubdb_table_id = <YOUR_HUBDB_TABLE_ID> %}
Create the dynamic page
/executives
. The URL will be the base URL for your dynamic page.View live pages
/executives
for its dynamic page URL, so in that case you would navigate to: https://www.yourdomain.com/executives
.Add a new table row
Page title | Page path | Role | Name | Bio |
---|---|---|---|---|
CMO Hobbes | cmo-hobbes | CMO | Hobbes | Hobbes is our go-to cat enthusiast. |
/executives
in this example). You should now see the new executive appear on the listing page, and clicking their name will reveal their details page.View dynamic page data