How to add your own template ?

[kvirtu]

I understand that you need to add to your template theme.php .
How to configure it correctly ?

[givanz]

A theme in Vvveb cms is made up of regular html files, you don't need to use a template language, for dynamic components you only need to declare some html attributes for example data-v-component-products where products from database should be displayed.

There is only one php file, theme.php that must contain at the beginning a comment with theme details like name, author, description etc and return a php array with some configuration.

The default landing theme has a complete list of supported values

/*
Name: Landing
URI: https://vvveb.com
Author: Vvveb
Author URI: https://vvveb.com
Description: Default theme
Version: 2.0
License:  Apache 2.0
License URI: https://vvveb.com/licence/
Tags: blog, ecommerce
Text Domain: landing
*/

The returned array must contain configuration settings for the theme, currently only settings for editor are used like pages, components and inputs and they are optional a theme can return an empty array [], if the theme does not provide them then the defaults will be used.

components - must declare what components to load into the editor, if the theme uses bootstrap then it can declare the boostrap components (that are available by default in the editor) and it can also add custom components file that is shipped with the theme.
All js files inside /components/ folder will also be loaded as components files (in this case you can skip the configuration for the file), the format is the one used in VvvebJs https://github.com/givanz/VvvebJs/wiki/Components

'components' => [
	['title' => 'Bootstrap 5', 'name' =>  'bootstrap5'],
	['title' => 'Landing theme components', 'name' =>  'essence', 'file'=> 'landing-components.js'],
],

The same with inputs where a theme can include custom inputs used in it's own components.
All js files inside /inputs/ folder will also be loaded as input files, the format is the one used in VvvebJs https://github.com/givanz/VvvebJs/wiki/Inputs

'inputs' => [
	['title' =>  'Slider inputs', 'name' =>  'slider', 'file'=> 'slider-inputs.js'],
],

pages contains a list of theme templates, all html files inside theme folder will be loaded in the file manager anyway but the advantage of providing the list in php is that the theme can change the names or provide a better title and description for new templates than the one generated from the filename for theme unique templates like a custom homepage for black friday etc.

'pages' => [
	'index' => [
		'name'        => 'index',
		'file'        => 'index.html',
		'url'         => '/themes/landing/index.html',
		'title'       => 'Home page',
		'folder'      => '',
		'description' => 'Website homepage',
	],
	'contact' => [
		'name'        => 'contact',
		'file'        => 'contact.html',
		'url'         => '/themes/landing/contact.html',
		'title'       => 'Contact us page',
		'folder'      => '',
		'description' => 'Contact us page',
	],
	'black-friday-homepage' => [
		'name'        => 'black-friday-homepage',
		'file'        => 'black-friday-index.html',
		'url'         => '/themes/landing/black-friday-index.html',
		'title'       => 'Black friday homepage',
		'folder'      => '',
		'description' => 'Homepage for black friday sales',
	],
	'product-promo-slider' => [
		'name'        => 'product-promo-slider',
		'file'        => 'product/product-slider-index.html',
		'url'         => '/themes/landing/product/product-slider-index.html',
		'title'       => 'Product promo big slider',
		'folder'      => '',
		'description' => 'Product page with a big slider for image gallery',
	],
	'blank' => [
		'name'        => 'blank',
		'file'        => 'blank.html',
		'url'         => '/themes/landing/blank.html',
		'title'       => 'Blank page',
		'folder'      => '',
		'description' => 'Template page used for new pages',
	],
]			

The default theme landing that ships with Vvveb has all development files included like html part files and scss files and it also has custom sections and a gulp.js file that generates all html, sections etc including screenshots used for sections in the editor.

You can start your own theme by using it as a base, the theme is still in development and has some pages and features missing mostly in the ecommerce area where most features are not yet implemented.

To use the theme run npm i in console in the theme folder.

Then you can use the following commands.

• npm run gulp - generate html and css files.
• npm run gulp watch - used for development to automatically regenerate html/css files when a file is changed.
• npm run gulp sections - generate a section.js file that will be used in the editor (the editor will load the file automatically because is written in /sections/sections.js) from all the html files in the /sections/ folder
• npm run gulp screenshots - generate screenshots for all sections in the /sections/ folder and put them in /screenshots/ folder, they will load automatically in the editor.