Target Audience of This Tutorial
- designers and developers, and advanced users
- some knowledge of HTML, CSS and JavaScript
- comfortable with the developer console of the browser.
Alternatives to Custom Block Template
- define custom CSS classes to style existing elements
- use custom export template to load libraries selectively, and insert elements dynamically using JavaScript
- ask us whether your goal can be achieved by modifying the existing block template. we may make it happen.
Block Template
- a block is a section of the page, and is an app in edit mode
- the content of blocks are stored as meta data of the page
- block templates (also known as partials) are loaded as JavaScript strings and compiled to functions dynamically
- in edit mode, the page is rendered using the functions and data stored in the browser
- the same functions are used to render blocks without editor when the page is exported
- common blocks: header block, content block, and footer block
- arbitrary blocks between header and footer: collection blocks, alternate two column blocks, single column blocks
- each template or partial has a unique name with name space, for example goandtalk/cover/default
- each block has a unique id to track its position on the page
- cloned block will have the same content but a different id
Structure of a Block
- the section element, with app settings. each section is a Mavo app. For details of using Mavo app, please refer to the official Mavo documentation.
- the visible part of the section
- embedded editor form and buttons in some sections
- section settings window, off canvas by default
- section toolbar with buttons to toggle Mavo app on and off, switch edit mode and perform other tasks.
Template Engine - doT
- doT template engine documentation and examples
- custom template delimiters and variable names
- variable for context data: it
- variable for context options: o
Creating a Custom Block Template
- hover on the left edge of the screen to show the vertical toolbar
- click on the globe icon to show site settings window
- go to tab “New Block”, enter a unique name for the new block, and paste your block template code in the text area.
- click on “Save New Block” button to save the new block in site settings.
- the saved template is available for further editing in “Edit Block” tab.
Using Custom Block Template
- once saved, your custom block template will be available in the dropdown list when you add a new section
- you can add a new section by selecting the custom block template
- the custom block template will be compiled into a function to render data
What People Say About It
Love It
Using Custom Block Template
In edit mode, Go and Talk page builder uses a template engine called doT to render blocks(sections) using data stored in browser. Each block is a Mavo app rendering user input dynamically. When the page is done, the same templates are used to render the sections without editor. The exported page is slim and loads faster.
Go and Talk page builder supports custom block template. You can define custom block template in site setting, insert new blocks and manage blocks in the same way.
Before creating your own custom block template, you may want to explore alternative solutions, such as styling existing elements with CSS, or inserting elements dynamically using JavaScript. The templates of Go and Talk page builder are generated automatically with Hugo. You may check with us whether your goal can be achieved by modifying the existing block templates. This way, you will be able to use server side rendering when you need it.
About Go and Talk Page Builders
Go and Talk page builder is a lightweight web design tool running in the browser. It empowers designers and marketers to create presentable pages quickly without coding. It is optimized for running on mobile devices such as tablets. The generated web pages are responsive, lightweight and optimized for search engines.