Html
The pages consist of two parts, thanks to the fileInclude template engine.
-
Default pages that will fall into the folder with the result. Must have
.html
extension. -
Page-components that will not get into the folder with the result, but can be embedded in default pages. Must have
.htm
extension. For convenience, I also recommend defining them with underscores at the beginning of the file, as you can see below. -
@@include ('_block.htm', { "optionName": "value", })
I recommend installing the components in the... Components folder.
📦#src ┣ 📂components ┃ ┣ _header.htm ┃ ┣ _footer.htm ┃ ┗ _yourComponent.htm ┗ index.html
Stylus
And now a little about the rules that are used to work in the template.
-
Style files are divided into default and components.
-
If you want to create a separate .css file in the result folder, create and connect default LikeMe.styl.
-
If you want to create a style file that will not be added to the folder with the result, but it can be connected to other style files - use the underscore prefix _LikeMe.styl.
Scripts
This pack mainly uses TypeScript.
TypeScript is like JavaScript, but better.
(You can also write in JS)
-
Does not allow most of the errors even at the stage of writing code (like the type mismatch error).
-
Has its own useful features (such as enums and generics).
- And in VSCode, hints work great for him! You don't have to guess whether an object has a property or not.
- More about TypeScript
Okay, how to start?
You can look into the folders under the path #src/scripts and #src/scripts/modules.
Note a modules are used here that make it easy to use scripts. Nothing prevents you from writing code as convenient, but still try to try.
There is no special need for you to get into the modules themselves (#src/scripts/modules), you just need
to connect them using files in the #src/scripts folder.
The ones that use the
"Conn" postfix.
In them you will make all the settings, and then connect them to the pages.
📂scripts ┣ 📂modules ┃ ┃ Here you can create an independent script file ┃ ┗ module.ts/js ┃ Here you can create a file in which the module ┃ will be called and configured, and connect it to the html page. ┗ moduleConn.ts/js
What for?
Believe me, it will be easier for a 10-page site with different cases to have files that connect modules to a page separately than to contain several files in which
scripts are connected at random.
By the way, the documentation is here!
Of course it's a bit loud, but you won't stay without comments.
Comments have already been written in ready-made modules using TS Doc, you just need to hover the cursor over some
property.