From 5884f41015d796b174975d3cb1ac2bebbda2e92a Mon Sep 17 00:00:00 2001 From: Gene Date: Mon, 4 Apr 2022 03:24:23 +0200 Subject: [PATCH] Added logo. Some layout improvements / fixes. --- config/production.json | 2 +- docs/config.js | 2 +- docs/index.bundle.ext.js | 2 +- docs/index.html | 27 ++++++++++++++++--- .../index.bundle.ext.js | 2 +- docs/pages/building-and-publishing/index.html | 25 +++++++++++++++-- docs/pages/liquid-tags/index.bundle.ext.js | 2 +- docs/pages/liquid-tags/index.html | 25 +++++++++++++++-- .../index.bundle.ext.js | 2 +- .../pages/page-editing-and-options/index.html | 23 +++++++++++++++- docs/service-worker.js | 2 +- docs/service-worker.js.map | 2 +- source/_inc/layouts/basic.liquid | 10 +++++-- .../_inc/layouts/basic/page-navigation.liquid | 2 +- source/_inc/layouts/basic/style.css | 16 +++++++++++ source/index.md | 2 +- .../pages/page-editing-and-options/index.md | 25 +++++++++-------- 17 files changed, 138 insertions(+), 33 deletions(-) diff --git a/config/production.json b/config/production.json index 4fec62e6..6f106a9f 100644 --- a/config/production.json +++ b/config/production.json @@ -49,7 +49,7 @@ } }, "app": { - "title": "zuix.js Web Starter", + "title": "Web Starter", "subtitle": "Simple, yet powerful!", "baseUrl": "/zuix-web-starter/", "resourcePath": "{{ app.baseUrl }}app/", diff --git a/docs/config.js b/docs/config.js index 1567a4a0..f85145de 100644 --- a/docs/config.js +++ b/docs/config.js @@ -1,7 +1,7 @@ /* eslint-disable quotes */ (function() { zuix.store('config', { - "title": "zuix.js Web Starter", + "title": "Web Starter", "subtitle": "Simple, yet powerful!", "baseUrl": "/zuix-web-starter/", "resourcePath": "/zuix-web-starter/app/", diff --git a/docs/index.bundle.ext.js b/docs/index.bundle.ext.js index fd5f9da6..531923b0 100644 --- a/docs/index.bundle.ext.js +++ b/docs/index.bundle.ext.js @@ -1 +1 @@ -!function(){zuix.store("config",{title:"zuix.js Web Starter",subtitle:"Simple, yet powerful!",baseUrl:"/zuix-web-starter/",resourcePath:"/zuix-web-starter/app/",libraryPath:{"@lib":"/zuix-web-starter/lib/1.1/","@hgui":"https://genielabs.github.io/homegenie-web-ui/app/","@cdnjs":"https://cdnjs.cloudflare.com/ajax/libs/"},siteMapUrl:"https://zuixjs.github.io/zuix-web-starter/"}),"serviceWorker"in navigator&&window.addEventListener("load",()=>{navigator.serviceWorker.register("/zuix-web-starter/service-worker.js")})}.call(self||window); \ No newline at end of file +!function(){zuix.store("config",{title:"Web Starter",subtitle:"Simple, yet powerful!",baseUrl:"/zuix-web-starter/",resourcePath:"/zuix-web-starter/app/",libraryPath:{"@lib":"/zuix-web-starter/lib/1.1/","@hgui":"https://genielabs.github.io/homegenie-web-ui/app/","@cdnjs":"https://cdnjs.cloudflare.com/ajax/libs/"},siteMapUrl:"https://zuixjs.github.io/zuix-web-starter/"}),"serviceWorker"in navigator&&window.addEventListener("load",()=>{navigator.serviceWorker.register("/zuix-web-starter/service-worker.js")})}.call(self||window); \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index b90d8c45..dfe9b7b4 100644 --- a/docs/index.html +++ b/docs/index.html @@ -75,6 +75,7 @@ overflow-x: auto; } code:not([class*=language-]) { + word-break: break-word; line-height: 140%; } @@ -82,6 +83,21 @@ font-size: 90%; } +.title { + font-size: 110%; + max-width: calc(100vw - 104px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.subtitle { + font-size: 95%; + max-width: calc(100vw - 104px); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + .icon-button { width: 48px; height: 48px; @@ -281,7 +297,12 @@ } .theme-dark [z-context="menu-overlay"] div[z-field="menu_overlay"] { background: radial-gradient(circle at bottom, black, #000000dd, #00000077, transparent)!important; -}

Hello world!

Welcome to zuix-web-starter, code base of a set of ready to use templates based on zuix.js, a library for creating components-based websites and applications.

Getting started

You can use this web-starter even with just basic knowledge about using the command-line shell and a text editor. If you have already some experience in programming, of course, a better choice would be a code editor or IDE.

Prerequisites

npx zuix

Creating a new project

To create a new web-starter project enter the following command:

npx zuix new <project_name> [-t <template_name>]

Where <project_name> is the name of the new project and the optional parameter -t indicates the template to be used.

Available templates

Example:

npx zuix new my-webapp -t news-blog

the new project structure will be created in the folder my-webapp.

Change directory to the new project folder:

cd my-webapp

Starting the development server

The development server will listen by default on port 8080 and serve files from the build folder ./docs. It will also watch for file changes in the ./source folder and build them as required, automatically refreshing the browser page.

npx zuix start

Once started you can open the web browser and load the website using the access URLs given in the console output.

[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.50:8080
 -----------------------------------
[Browsersync] Serving files from: docs
[Browsersync] Watching files...

The main project folder is the ./source folder, where all website files are located. In particular, the ./source/pages folder, contains all website pages' content that are implemented as text files using Markdown syntax, and that will contain just the main content of the page. All other structural and layout parts will be compiled automatically by the development server.

Managing content

Included with web starters you will also find also example pages that can be removed by manually deleting the ./source/pages folder, or using the zuix CLI:

npx zuix wipe-content

Adding a new page

Pages are organized into sections, and can be easily added with the following command:

npx zuix add -s <section_name> -n <page_name> -fm "<field>: <value>"

Where the -s option is used to specify the name of the section under which the new page will be grouped, while the -n option is used to specify the name of the page. Both names must be file-name friendly, the kebab-case convention is adopted here. Optionally it's also possible to specify front matter data using the -fm option.

For example, the following command will add a new page in a section called "blog", and it will enable code highlighting for preformatted code blocks:

npx zuix add -s blog -n my-first-blog-post -fm "options: highlight"

The new content page file will be ./source/pages/blog/my-first-blog-post/index.md, and the blog folder will be automatically created if it doesn't exist. The blog folder will also have an index.liquid file that just contains front matter data of the section, and that can be used to customize the title and the display order in the homepage.

Files structure in brief

Template engine folders:

./source/_data     # data folder
+}
Hello world!
Welcome to zuix-web-starter, code base of a set of ready to use templates based on zuix.js, a library for creating components-based websites and applications.
Getting started
You can use this web-starter even with just basic knowledge about using the command-line shell and a text editor. If you have already some experience in programming, of course, a better choice would be a code editor or IDE.
Prerequisites
npx zuix
Creating a new project
To create a new web-starter project enter the following command:
npx zuix new <project_name> [-t <template_name>]
Where <project_name> is the name of the new project and the optional parameter -t indicates the template to be used.
Available templates
  • zuix-web-starter
    The base starter, coming with a basic template with light/dark modes, collapsible header and FAB menu. It's the one used for this page.
  • news-blog
    A fully immersive template, suitable for publishing feeds of news or blog posts. With "Save for later" and share/print functionality, internal search engine and adaptive design that works very well on desktop screens too.
  • web-app
    A typical mobile app layout, with side drawer, collapsible header, Material Design UI, internal search engine
    and adaptive design that works very well on desktop screens too.
Example:
npx zuix new my-webapp -t news-blog
the new project structure will be created in the folder my-webapp.
Change directory to the new project folder:
cd my-webapp
Starting the development server
The development server will listen by default on port 8080 and serve files from the build folder ./docs. It will also watch for file changes in the ./source folder and build them as required, automatically refreshing the browser page.
npx zuix start
Once started you can open the web browser and load the website using the access URLs given in the console output.
[Browsersync] Access URLs:
 -----------------------------------
    Local: http://localhost:8080
 External: http://192.168.1.50:8080
 -----------------------------------
[Browsersync] Serving files from: docs
[Browsersync] Watching files...
The main project folder is the ./source folder, where all website files are located. In particular, the ./source/pages folder, contains all website pages' content that are implemented as text files using Markdown syntax, and that will contain just the main content of the page. All other structural and layout parts will be compiled automatically by the development server.
Managing content
Included with web starters you will also find also example pages that can be removed by manually deleting the ./source/pages folder, or using the zuix CLI:
npx zuix wipe-content
Adding a new page
Pages are organized into sections, and can be easily added with the following command:
npx zuix add -s <section_name> -n <page_name> -fm "<field>: <value>"
Where the -s option is used to specify the name of the section under which the new page will be grouped, while the -n option is used to specify the name of the page. Both names must be file-name friendly, the kebab-case convention is adopted here. Optionally it's also possible to specify front matter data using the -fm option.
For example, the following command will add a new page in a section called "blog", and it will enable code highlighting for preformatted code blocks:
npx zuix add -s blog -n my-first-blog-post -fm "options: highlight"
The new content page file will be ./source/pages/blog/my-first-blog-post/index.md, and the blog folder will be automatically created if it doesn't exist. The blog folder will also have an index.liquid file that just contains front matter data of the section, and that can be used to customize the title and the display order in the homepage.
Files structure in brief
Template engine folders:
./source/_data     # data folder
 ./source/_filters  # filters
 ./source/_inc      # includes and layouts
 
zuix.js components folders:
./source/app  # user-defined components
@@ -296,10 +317,10 @@
 ./source/robots.njk
 ./source/sitemap.njk            # sitemap generator script
 
Main page:
./source/index.md
-
Content folders
The main content folder is ./source/pages. It's a good practice to have each content page implemented with its own folder and a index.md file in it. In the same folder can be placed other sub-folders for page-local assets, such as images.
./source/pages/travel/my-first-cruise/_inc/example.liquid
+
Content folders
The main content folder is ./source/pages. It's a good practice to have each page implemented with its own folder and a index.md file in it. In the same folder can be placed other sub-folders for page-local assets, such as images.
./source/pages/travel/my-first-cruise/_inc/example.liquid
 ./source/pages/travel/my-first-cruise/images/picture1.png
 ./source/pages/travel/my-first-cruise/index.md
-
same applies also if a different format is used for the index file (.liquid, .njk, .11ty.js, .html, ...).
Also the special sub-folder _inc can be used for page-local includes, that will be processed by the site generator but not copied to the output folder.
 
Next 
Page editing and options
Building for production
The build process will read the default configuration of the web application, from the JSON file ./config/default.json.
This file contains, among the other options, the base url of the application that by default is /:
./config/default.json
{
  "zuix": {
    ...
    ...
    "app": {
      "title": "My web application",
      "baseUrl": "/",
      ...
    }
  }
}
Depending on the hosting service where the application will be published, the base url might not be the root of the website, like it happens for GitHub hosted pages, where the base url is the name of the project, unless custom domain is used:
https://<account_name>.github.io/<project_name>/
-
For this purpose, when building for production, a different configuration file is used with the proper base url set:
./config/production.json
{
  "zuix": {
    ...
    ...
    "app": {
      "title": "My web application",
      "baseUrl": "/my-web-app/",
      ...
    }
  }
}
also, the {{ app.baseUrl }} variable, if used in a template, will be replaced with the proper value depending on the selected configuration.
So, to select the production configuration when building the web application, the environment variable NODE_ENV must be set to production:
NODE_ENV=production npx zuix build
it's also possible to simulate the production hosting when running the development server:
NODE_ENV=production npx zuix start
in which case, the application will be served at the url specified by baseUrl in the production configuration file.
 Previous
Liquid tags and short codes
 
Building for production
The build process will read the default configuration of the web application, from the JSON file ./config/default.json.
This file contains, among the other options, the base url of the application that by default is /:
./config/default.json
{
  "zuix": {
    ...
    ...
    "app": {
      "title": "My web application",
      "baseUrl": "/",
      ...
    }
  }
}
Depending on the hosting service where the application will be published, the base url might not be the root of the website, like it happens for GitHub hosted pages, where the base url is the name of the project, unless custom domain is used:
https://<account_name>.github.io/<project_name>/
+
For this purpose, when building for production, a different configuration file is used with the proper base url set:
./config/production.json
{
  "zuix": {
    ...
    ...
    "app": {
      "title": "My web application",
      "baseUrl": "/my-web-app/",
      ...
    }
  }
}
also, the {{ app.baseUrl }} variable, if used in a template, will be replaced with the proper value depending on the selected configuration.
So, to select the production configuration when building the web application, the environment variable NODE_ENV must be set to production:
NODE_ENV=production npx zuix build
it's also possible to simulate the production hosting when running the development server:
NODE_ENV=production npx zuix start
in which case, the application will be served at the url specified by baseUrl in the production configuration file.
 Previous
Liquid tags and short codes
 
Short codes are custom tags that can be used in JavaScript, Liquid, Nunjucks, Handlebars and also Markdown templates, since Liquid tags are also enabled in .md files.
rawFile
This tag can be used to include normalized HTML fragments inside .md files without further processing from Markdown engine.
{% rawFile "<file_path>" %}
unpre
Sometimes can happen to use HTML code in a Markdown .md file, and this tag can be used to wrap the HTML code inside a preformatted block, so that it will be actually recognized as HTML and the editor will highlight the code correctly. It's just an aesthetic hack to make your eyes happier if the editor is not highlighting the HTML markup.
Example:
{% unpre %}
'''html
<div style="color: purple">Hello World!</div>
'''
{% endunpre %}
layout
This tag outputs a div with the given Flex Layout Attributes. It's mainly intended wrap and format zx shortcode output.
{% layout '<flex_layout_attributes>' ['<element_attr_1>' ... '<element_attr_n>'] %}
    (content)
{% endlayout %}
Example:
{% layout 'row center-center' 'style="gap: 12px"' %}
    {% zx 'button' '#test-link-1' %} Button 1 {% endzx %}
    {% zx 'button' '#test-link-2' %} Button 2 {% endzx %}
{% endlayout %}
zx
The zx shortcode is used to render HTML fragments or components based on dynamically loaded tag templates. Tag templates are loaded from the ./templates/tags folder, and they consist of simple and small JavaScript code that renders the requested tag.
{% zx '<tag_name>' ['<tag_option_1>' ... <tag_option_n>] %}
(optional content)
{% endzx %}
In the previous example the tag button is loaded from ./templates/tags/button.js. The first option for this button tag is the anchor name / URL link to be opened when the button is clicked (#test-link-1 in this case).
Adding custom zx tags
Any custom tag can be implemented by just adding a ./templates/tags/<custom_tag_name>.js file. For example, this is the code of ./templates/tags/button.js used in the previous example:

const template = `
<a class="button" href="{{ linkUrl | safe }}">{{ content | safe }}</a>`;

module.exports = (render, content, linkUrl) => {
  return render(template, {content, linkUrl});
};
wrapDom / wrapCss
These two tags adds to a CSS style and HTML fragment, the required attributes so that the CSS style will be only applied to the given HTML fragment only (scoped CSS). Can also be used together with the include shortcode to load the style and the HTML fragment from external files.
{% wrapDom '<fragment_id>' %}
... HTML fragment ...
{% endwrapDom %}
{% wrapCss '<fragment_id>' <encapsulate> %}
... CSS styles ...
{% endwrapCss %}
Example:
<h3>Global scope H3</h3>

{% wrapDom 'test-fragment' %}
<div>
    <h3>Fragment scope H3</h3>
</div>
{% endwrapDom %}

<style>
{% wrapCss 'test-fragment' %}
:host {
    text-align: center;
}
h3 {
    color: deeppink;
}
{% endwrapCss %}
</style>
Global scope H3
Fragment scope H3
Short codes are custom tags that can be used in JavaScript, Liquid, Nunjucks, Handlebars and also Markdown templates, since Liquid tags are also enabled in .md files.
rawFile
This tag can be used to include normalized HTML fragments inside .md files without further processing from Markdown engine.
{% rawFile "<file_path>" %}
unpre
Sometimes can happen to use HTML code in a Markdown .md file, and this tag can be used to wrap the HTML code inside a preformatted block, so that it will be actually recognized as HTML and the editor will highlight the code correctly. It's just an aesthetic hack to make your eyes happier if the editor is not highlighting the HTML markup.
Example:
{% unpre %}
'''html
<div style="color: purple">Hello World!</div>
'''
{% endunpre %}
layout
This tag outputs a div with the given Flex Layout Attributes. It's mainly intended wrap and format zx shortcode output.
{% layout '<flex_layout_attributes>' ['<element_attr_1>' ... '<element_attr_n>'] %}
    (content)
{% endlayout %}
Example:
{% layout 'row center-center' 'style="gap: 12px"' %}
    {% zx 'button' '#test-link-1' %} Button 1 {% endzx %}
    {% zx 'button' '#test-link-2' %} Button 2 {% endzx %}
{% endlayout %}
zx
The zx shortcode is used to render HTML fragments or components based on dynamically loaded tag templates. Tag templates are loaded from the ./templates/tags folder, and they consist of simple and small JavaScript code that renders the requested tag.
{% zx '<tag_name>' ['<tag_option_1>' ... <tag_option_n>] %}
(optional content)
{% endzx %}
In the previous example the tag button is loaded from ./templates/tags/button.js. The first option for this button tag is the anchor name / URL link to be opened when the button is clicked (#test-link-1 in this case).
Adding custom zx tags
Any custom tag can be implemented by just adding a ./templates/tags/<custom_tag_name>.js file. For example, this is the code of ./templates/tags/button.js used in the previous example:

const template = `
<a class="button" href="{{ linkUrl | safe }}">{{ content | safe }}</a>`;

module.exports = (render, content, linkUrl) => {
  return render(template, {content, linkUrl});
};
wrapDom / wrapCss
These two tags adds to a CSS style and HTML fragment, the required attributes so that the CSS style will be only applied to the given HTML fragment only (scoped CSS). Can also be used together with the include shortcode to load the style and the HTML fragment from external files.
{% wrapDom '<fragment_id>' %}
... HTML fragment ...
{% endwrapDom %}
{% wrapCss '<fragment_id>' <encapsulate> %}
... CSS styles ...
{% endwrapCss %}
Example:
<h3>Global scope H3</h3>

{% wrapDom 'test-fragment' %}
<div>
    <h3>Fragment scope H3</h3>
</div>
{% endwrapDom %}

<style>
{% wrapCss 'test-fragment' %}
:host {
    text-align: center;
}
h3 {
    color: deeppink;
}
{% endwrapCss %}
</style>
Global scope H3
Fragment scope H3
 Previous
Page editing and options
Next 
Building for production
 Previous
Page editing and options
Next 
Building for production
Page editing
Content pages are simple text files implemented using Markdown syntax, and that have front matter data, used to select the page layout and other options.
Example: index.md
---
layout: basic.liquid
tags: blog
group: blog
options: highlight ext-links
order: 2
title: My page title
description: My page description (used for page metadata)
pubDate: 2022-02-12 12:22
keywords:
- Blog
- Lifestyle
- Travel
---

# Hello World!

Welcome to my blog about...
The .md files, are then compiled into a fully working web page by the site generator.
Front matter data
layout
Different page layouts are available depending on the site template that is being used. The zuix-web-starter template includes only one kind of page layout: basic.liquid.
Adding a custom layout
Layouts are located in the ./source/_inc/layouts folder. A layout consist of a .liquid file and, when required, also a folder with the same base name of the layout file, eventually containing additional files required for the layout implementation.
A new layout can be implemented by adding a <layout_name>.liquid file into the layouts folder, it can be then selected, like the other layout templates, by specifying its name in the layout field of page's front matter.
The ./source/_inc folder, is also used to place common page's bits that can be reused across different layout implementations:
  • head_open.liquid
    This file contains the initial part of the HTML document with head section and styles/scripts inclusion.
  • head_close.html
    This file just contains the </head> closing tag, any custom code can be added to the head section in the layout
    template before this closing tag
  • footer.liquid
    The common footer placed at the end of the page's content.
  • body_end.liquid
    This file can be used to place any common content or script before the end of the body
  • html_close.html
    This file contains just the </html> closing tag.
Example of a minimal layout template:
./source/_inc/layouts/my-new-layout.liquid

{% include "head_open.liquid" %}
<style>
{% include "./my-new-layout/style.css" %}
</style>
{% include "head_close.html" %}
<body>

{{ content | safe }}

{% include "body_end.liquid" %}
</body>
{% include "html_close.html" %}
tags
Tags are keywords used to create collections of pages that can then be enumerated using these tags.
group
The group indicates to which content section the page belongs to. For example, pages under the documentation section (like this one), will have documentation value set both on the group and tags field. While the tags field can contain multiple values, the group field can only contain one value. This value is used also to implement navigation between pages belonging to the same content section.
options
In addition to the following options, other options might be available depending on the template that is being used.
  • highlight
    enable code highlighting
  • ext-links
    open external links in a new window
  • no-footer
    do not include common footer
Adding custom options
Custom options can also be added to toggle content blocks, frameworks and utilities.
For example, a bootstrap option can be implemented by adding the following code to the ./source/_inc/head_open.liquid file:
{% if options contains 'bootstrap' %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
{% endif %}
The bootstrap option can then be used to select Bootstrap CSS framework for a page.
order
Set the listing order of the page, that is mainly used for rendering navigation links and content listing menus, like the one in the side drawer menu of this page.
title
The page title.
description
The page description that will also be added to the page's metadata.
pubDate
The date to show as publishing date. This field has the precedence over order field when sorting page collections.
keywords
A list of keywords that identify this page. Keywords are used by internal search and are also added to page's metadata for search engines as some of them might still use meta keywords for indexing.
 Previous
Getting started
Next 
Liquid tags and short codes
Page editing
Content pages are simple text files implemented using Markdown syntax, and that have front matter data that is used to specify the page layout and other options.
Example: index.md
---
layout: basic.liquid
tags: blog
group: blog
options: highlight ext-links
order: 2
title: My page title
description: My page description (used for page metadata)
pubDate: 2022-02-12 12:22
keywords:
- Blog
- Lifestyle
- Travel
---

# Hello World!

Welcome to my blog about...
Front matter data
layout
Different page layouts are available depending on the site template that is being used. The base zuix-web-starter template includes only one kind of page layout: basic.liquid.
Adding a custom layout
Layouts are located in the ./source/_inc/layouts folder. A layout consists of a .liquid file and, when required, also a folder with the same base name of the layout file, and that eventually contains additional files required for the implementation.
So, a new layout can be implemented by creating a <layout_name>.liquid file into the layouts folder. It can be then selected, like the other layout templates, by specifying its name in the layout field of page's front matter.
The ./source/_inc folder, is also used to place common page's bits that can be reused across different layout implementations:
  • head_open.liquid
    This file contains the initial part of the HTML document with head section and styles/scripts inclusion.
  • head_close.html
    This file just contains the </head> closing tag, any custom code can be added to the head section in the layout
    template before this closing tag
  • footer.liquid
    The common footer placed at the end of the page's content.
  • body_end.liquid
    This file can be used to place any common content or script before the end of the body
  • html_close.html
    This file contains just the </html> closing tag.
Example of a minimal layout template:
./source/_inc/layouts/my-new-layout.liquid

{% include "head_open.liquid" %}
<style>
{% include "./my-new-layout/style.css" %}
</style>
{% include "head_close.html" %}
<body>

{{ content | safe }}

{% include "body_end.liquid" %}
</body>
{% include "html_close.html" %}
tags
Tags are keywords used to create collections of pages that can then be enumerated using these tags.
group
The group indicates to which content section the page belongs to. For example, pages under the documentation section (like this one), will have docs value set both on the group and tags fields. While the tags field can contain multiple values, the group field can only contain one value. This value is used, for instance, to implement navigation between pages belonging to the same content section.
options
In addition to the following options, other options might be available depending on the template that is being used.
  • highlight
    enable code highlighting
  • ext-links
    open external links in a new window
  • no-footer
    do not include common footer
Adding custom options
Custom options can also be added to toggle content blocks, frameworks and utilities.
For example, a bootstrap option can be implemented by adding the following code to the ./source/_inc/head_open.liquid file:
{% if options contains 'bootstrap' %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
{% endif %}
The bootstrap option can then be used to select Bootstrap CSS framework for a page.
order
Set the listing order of the page, that is mainly used for rendering navigation links and content listing menus, like the one in the footer of this page.
title
The page title.
description
The page description that will also be added to the page's metadata.
pubDate
The date to show as publishing date. This field has the precedence over order field when sorting page collections.
keywords
A list of keywords that identify this page. Keywords are used by internal search and are also added to page's metadata for search engines as some of them might still use meta keywords for indexing.
 Previous
Getting started
Next 
Liquid tags and short codes