Page editing and options
As described in the previous chapter, content pages are simple text files implemented using Markdown syntax, and that have front matter data where is possible to specify the page layout to be used, metadata and other options for the current content.
Example: index.md
---
+} Page editing and options
As described in the previous chapter, content pages are simple text files written using Markdown syntax, and also have front matter data where is possible to specify the page layout, metadata, and other options for the current content.
Example: index.md
---
layout: basic.liquid
tags: blog
group: blog
@@ -531,7 +531,7 @@
# Hello World!
Welcome to my blog about...
-
Front matter data
As shown in the example above, front matter data is enclosed in a block delimited by the sequence: ---. Inside this block, data can be specified in the form <field_name>: <value>, using the YAML syntax.
The following is a list of fields that can be used in the front matter.
layout
Sets the page layout to be used for the current content. Different page layouts are available depending on the starter template that is being used. The base zuix-web-starter includes only one kind of page layout:
basic.liquid (the one used for this page)homepage.liquid (the home page layout)
To see layouts from other starter templates, referrer to the documentation included in the online demos of each template.
Adding a custom layout
Layouts are located in the ./source/_inc/layouts folder.
A layout consists of a .liquid file and, optionally, a folder with the same base name of the layout file, that may contain additional files required for the layout implementation.
So, to create a new layout, add <layout_name>.liquid file to the ./source/_inc/layouts folder.
Then, to use the new layout, specify its name in the layout field of the page's front matter.
The ./source/_inc folder, is also used to place common page's bits that can be reused across different layouts:
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 tagfooter.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 bodyhtml_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" %}
+
Front matter data
As shown in the example above, front matter data is enclosed in a block delimited by the sequence: ---. Inside this block, data can be specified in the form <field_name>: <value>, using the YAML syntax.
The following fields can be used in the front matter:
layout
Sets the page layout to be used for the current content. Different page layouts are available depending on the starter template that is being used. The base zuix-web-starter includes only one kind of page layout:
basic.liquid (the one used for this page)homepage.liquid (the home page layout)
To see layouts from other starter templates, referrer to the documentation included in the online demos of each template.
Adding a custom layout
Layouts are located in the ./source/_inc/layouts folder.
A layout consists of a .liquid file and, optionally, a folder with the same base name of the layout file, that may contain additional files required for the layout implementation.
So, to create a new layout, add <layout_name>.liquid file to the ./source/_inc/layouts folder.
Then, to use the new layout, specify its name in the layout field of the page's front matter.
The ./source/_inc folder, is also used to place common page's bits that can be reused across different layouts:
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 tagfooter.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 bodyhtml_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>
diff --git a/docs/feed/rss.xml b/docs/feed/rss.xml
index 37dfd40..0eecb24 100644
--- a/docs/feed/rss.xml
+++ b/docs/feed/rss.xml
@@ -7,8 +7,8 @@
en
Tue, 30 May 2023 18:14:18 +0200
- Tue, 30 May 2023 18:14:18 +0200
+ Thu, 06 Jul 2023 16:19:22 +0200
+ Thu, 06 Jul 2023 16:19:22 +0200
Web Starter
https://zuixjs.github.io/zuix-web-starter//images/icons/icon-152x152.png
@@ -19,7 +19,7 @@
https://zuixjs.github.io/zuix-web-starter//search/
https://zuixjs.github.io/zuix-web-starter//search/
Search this website
- Tue, 30 May 2023 18:14:18 +0200
+ Thu, 06 Jul 2023 16:19:22 +0200
https://zuixjs.github.io/zuix-web-starter//content/docs/
No description provided.
- Tue, 30 May 2023 18:14:18 +0200
+ Thu, 06 Jul 2023 16:19:22 +0200
https://zuixjs.github.io/zuix-web-starter//
About this web starter and how to get started with it.
- Tue, 30 May 2023 18:14:18 +0200
+ Thu, 06 Jul 2023 16:19:22 +0200
\/\u2028\u2029]/g,i={"<":"\\u003C",">":"\\u003E","/":"\\u002F","\u2028":"\\u2028","\u2029":"\\u2029"};function a(e){return i[e]}e.exports=function(e,i){i||(i={}),"number"!=typeof i&&"string"!=typeof i||(i={space:i});const u=[],s=[];let l;return l=i.isJSON&&!i.space?JSON.stringify(e):JSON.stringify(e,i.isJSON?null:function(e,n){if(!n)return n;const o=typeof n;return"object"===o?(r=n,"[object RegExp]"===Object.prototype.toString.call(r)?"@__R-"+t+"-"+(s.push(n)-1)+"__@":n):"function"===o?"@__F-"+t+"-"+(u.push(n)-1)+"__@":n;var r},i.space),"string"!=typeof l?String(l):(l=l.replace(r,a),0===u.length&&0===s.length?l:l.replace(n,(function(e,t,n){if("R"===t)return s[n].toString();const r=u[n],i=r.toString();if(o.test(i))throw new TypeError("Serializing native function: "+r.name);return i})))}},94:function(e,t,n){const o=n(35),r=n(458),i=n(541);function a(){const e="app.bundle.js",t=zuix.bundle();let n="\n/*";n+="\n * zUIx Application Bundle",n+="\n * ",n+="\n * "+e+" generated by *zuix-bundler*",n+="\n * on "+(new Date).toISOString(),n+="\n * ",n+="\n * Resource list ("+t.length+"):",n+="\n * ";for(let e=0;e` (or `z-field=""`)
+ * attribute matching the given value.
* This method implements a caching mechanism and automatic
* disposal of allocated objects and events.
*
@@ -3214,7 +3214,7 @@ zuix.context('field-test', (ctx) => {
});
*
- * @param {!string} fieldName Value to match in the *z-field* attribute
+ * @param {!string} fieldName The name of the `#` (or `z-field="name"`) attribute of the element(s) to get.
* @return {ZxQuery} A `{ZxQuery}` object wrapping the matching element(s).
*/
ComponentContext.prototype.field = function(fieldName) {
@@ -3334,9 +3334,9 @@ ComponentContext.prototype.style = function(css) {
* @example
```html
-
+
-
+
```
*
- * @param {!string} fieldName Value of *z-field* to look for
+ * @param {!string} fieldName The name of the `#` (or `z-field="name"`) attribute of the element(s) to get
* @param {!Element} [container] Starting DOM element for this search (**default:** *document*)
* @param {object} [context] The context
- * @return {ZxQuery} ZxQuery object with elements matching the given `z-field` attribute.
+ * @return {ZxQuery} A `{ZxQuery}` object wrapping the matching element(s).
* If there's just one matching element, then the returned object will also have the additional method `field(fieldName)`
* to search for fields inside the element itself.
*
@@ -6766,11 +6767,11 @@ Zuix.prototype.unload = function(context) {
- Card 1
+ Card 1
- Card 2
+ Card 2
@@ -6787,10 +6788,10 @@ Zuix.prototype.unload = function(context) {
```
- Card 1
+ Card 1
- Card 2
+ Card 2