![](https://raw.githubusercontent.com/zkreations/hamlet/main/dist/images/logo.png)
Development environment for creating Blogger templates with handlebars, which includes an example template with best practices that a true Blogger developer should follow.
- Handlebars as template engine.
- CSS compiler using Sass.
- Stylelint to detect and fix issues in CSS code.
- Autoprefixer for better browser compatibility.
- Clean-css to minify CSS code and reduce file size.
- JavaScript compiler with Babel and Rollup.
- ESLint to find and fix errors in JavaScript code.
- Terser to minify JavaScript code.
- Test to check if your template is valid in Blogger without installing it.
- Browserslist to specify compatible browsers and versions for generated code.
- No dependencies
- Optimized for modern SEO.
- Optimized for AdSense.
- Responsive design.
- Supports multiple languages thanks to Blogger.
- Super optimized with small code size.
- Compatible with Core Web Vitals.
- Comment system with multiple levels.
- Formatted widgets.
- Best practices.
Clone, fork, or download this repository to your PC, and within the root directory of this folder, run in console:
npm install
To start listening to changes and automatically compile, run in console:
npm run dev
To compile only once:
npm run compile
To run tests and check if your template is valid:
npm run test
The recommended structure for your template is as follows:
├── src
│ ├── js
│ │ ├── (files and folders)
│ │ └── main.js
│ ├── scss
│ │ ├── (files and folders)
│ │ └── main.scss
│ └── views
│ ├── (files and folders)
│ └── theme.hbs
└── data.json
You can also add as many files and folders as you want, but the main files are without the prefix _
(underscore).
To compile JavaScript, you must create a file called (for example) main.js
without the prefix _
(underscore) in the src/js
folder. If you want to create modules, create files with the prefix _
, and import them in the your main file or in other modules. For example:
├── src
│ ├── js
│ │ ├── _module1.js
│ │ ├── _module2.js
│ │ └── main.js
Every time you save changes in your JavaScript files, the compiler will automatically compile them and generate a file called main.js
in the dist/js
folder.
To compile Sass, you must create a file called (for example) main.scss
without the prefix _
(underscore) in the src/scss
folder. If you want to create modules, create files with the prefix _
, and import them in the your main file or in other modules. For example:
├── src
│ ├── scss
│ │ ├── _module1.scss
│ │ ├── _module2.scss
│ │ └── main.scss
Every time you save changes in your Sass files, the compiler will automatically compile them and generate a file called main.css
in the dist/css
folder.
To compile Handlebars, you must create a file called (for example) theme.hbs
without the prefix _
(underscore) in the src/views
folder. If you want to create modules, create files with the prefix _
, and import them in the your main file or in other modules. For example:
├── src
│ ├── views
│ │ ├── _module1.hbs
│ │ ├── _module2.hbs
│ │ └── theme.hbs
Every time you save changes in your Handlebars files, the compiler will automatically compile them and generate a file called theme.xml
in the dist
folder. Unlike the previous cases, this file is not minified, so you can see the code in a more readable way, also, you cannot repeat the names of the created modules, because they will be overwritten.
To use data in your template, you must edit the data.json
file in the root directory of the project. This file contains the data that will be used in the template. You can add as many data as you want, but you must follow the structure of the file.
The modules are files that contain code that can be reused in other files. For example, you can create a module that contains the code of a widget, and import it in the theme.hbs
file. To create a module, create a file with the prefix _
(underscore) in the src/views
folder, and import it in the file where you want to use it. For example:
├── src
│ ├── views
│ │ ├── _module-name.hbs
│ │ └── theme.hbs
In the theme.hbs
file, or in any other module, you can import the module with the following code:
You can create any number of modules, and import them in any file, but the name of the module must be unique, because if you create two modules with the same name, the second one will overwrite the first one.
The asset
helper is used to import files. For example, if you want to import the main.css
file in the dist/css
folder, you must use the following code:
If I want to import a file inside a node module, use ~
(tilde) before the name of the module, this is equivalent to node_modules
. For example, if I want to import the main.js
file in the tooltips
module, I must use the following code:
If you want to create a quick wood Blogger variable, you can use the variable
helper. For example, if I want to create a variable called title
with the value Hamlet
, I must use the following code:
The result will be:
<Variable name="example" description="example" type="string" value=""/>
All atributtes are optional, but you can add them if you want. For example, if I want to add the description and the type, I must use the following code:
To see all the available attributes, see the Blogger Code documentation.
You can help maintain this code as long as you take into account the following points:
- Try not to add more CSS styles.
- Do not add more JavaScript functions to the demo template.
- Correct, improve and optimize the environment and demo template.
If you want to help me keep this and more related projects always up to date, you can buy me a coffee ☕. I will be very grateful 👏.
If you used this repository as a template, please, add a star ⭐ and add the following tags in yours:
blogger-hamlet
blogger-handlebars
blogger-hbs
Thanks for using this repository. Happy coding! 🚀
Hamlet is licensed under the MIT License