- 00:00:00 I am welcome back to you no chance with
- 00:00:03 you I promise that we would have a look
- 00:00:05 at the different templating engines and
- 00:00:07 I'm going to start with shade which is
- 00:00:10 the default engine that shipped with our
- 00:00:12 what our boiler plate here basically we
- 00:00:15 set up I want to introduce you to that
- 00:00:17 language how it works or how does
- 00:00:19 templating engine works and how we can
- 00:00:22 create our HTML files with it and output
- 00:00:25 type content dynamically there let's
- 00:00:27 start
- 00:00:28 I open the lay out Dutch shade file in
- 00:00:32 our fuse folder and this is the kind of
- 00:00:35 route layout that our earth use are
- 00:00:37 extending and here's the first feature
- 00:00:40 we can well extend layouts and insert
- 00:00:43 content dynamically so here for example
- 00:00:46 in the layout the shape while providing
- 00:00:48 a bicycle basic skeleton for all our
- 00:00:51 layouts this is a basic HTML document
- 00:00:55 skeleton and there we can anomaly enter
- 00:00:58 well the specific content of our other
- 00:01:02 layouts we'll get back to this a second
- 00:01:04 because now you might wonder this is our
- 00:01:06 HTML skeleton it doesn't really look
- 00:01:08 like HTML right that's one of the most
- 00:01:11 important things about Jade we don't use
- 00:01:14 the standard HTML tags there but we use
- 00:01:18 indentation to structure our document so
- 00:01:22 the tag names are the same you have our
- 00:01:25 doctype HTML at the beginning but at a
- 00:01:27 normal HTML probably would have like
- 00:01:29 like days right this would be how it is
- 00:01:32 written a normal HTML type element and
- 00:01:34 yeah document our HTML element might
- 00:01:37 look like this and also we would have
- 00:01:40 closing tags we don't have to some shade
- 00:01:43 we don't have the smaller and greater
- 00:01:46 signs to create our tags which has tag
- 00:01:49 names and we use indentation to make
- 00:01:52 clear in which well level will currently
- 00:01:55 add and how we nest elements so we don't
- 00:01:57 have opening and closing tags we only
- 00:02:00 have the tag name and then you can think
- 00:02:02 of
- 00:02:03 all these tags which are indented one
- 00:02:05 indentation to the right are inside say
- 00:02:08 she melted therefore all these two
- 00:02:12 elements here are inside the head tag
- 00:02:14 and this lot of thing which I will
- 00:02:17 explain the second is inside the body
- 00:02:19 tag so for example if I want to create
- 00:02:23 an unordered list here I would create
- 00:02:25 our run or delays it as the default HTML
- 00:02:28 select your element tag just without
- 00:02:31 well the greater and smaller side
- 00:02:35 operators this is my own route list now
- 00:02:38 I'll hit enter it automatically indents
- 00:02:40 for me otherwise I would have chest you
- 00:02:42 well go one indentation to the right if
- 00:02:45 you read my list item and well now I
- 00:02:48 want to enter some text I want to
- 00:02:50 display with with the opening and
- 00:02:52 closing list item tag I just have its
- 00:02:55 base to have an empty space here and
- 00:02:57 then I enter my my text whenever I want
- 00:03:01 to output just like that normal text now
- 00:03:03 if I save this and reload this page you
- 00:03:07 can see we now get this bullet point
- 00:03:09 here and if I have a look at the source
- 00:03:11 code we can see it's inside this
- 00:03:13 unordered list element this is basically
- 00:03:16 how we structure our code here we were
- 00:03:19 using this indentation and we're
- 00:03:21 outputting text between two elements
- 00:03:23 just by writing it behind the element of
- 00:03:27 an empty space between now if we have
- 00:03:30 more text and we don't want to like
- 00:03:32 enter this all in one line you will say
- 00:03:35 like this it's very very long it can
- 00:03:38 also enter a new line but now we would
- 00:03:41 think of this as a new tag which you
- 00:03:43 would not recognize therefore I enter a
- 00:03:45 dot here indent indent is to the right
- 00:03:49 and now I can have more lines here if I
- 00:03:52 save this and reload you see you get
- 00:03:55 this new list item and all this text is
- 00:03:57 inside this one list item element here
- 00:04:00 even though with multiple lines here if
- 00:04:03 I remove the dot you can see now it's
- 00:04:06 picking this are separate elements can
- 00:04:08 already see you here my editor and if I
- 00:04:10 will
- 00:04:10 well it's kind of broken because we have
- 00:04:14 this DSM whatever element which are
- 00:04:16 obviously not recognized so the start
- 00:04:19 here is important to have a multi-line
- 00:04:21 string following this tag so I hope this
- 00:04:25 is clear we use our HTML tags here how
- 00:04:28 invitation is important for nesting all
- 00:04:32 these elements and that we don't have to
- 00:04:34 open enclosing elements now we can out
- 00:04:36 text there now you might say okay this
- 00:04:41 is very nice
- 00:04:41 but I also might have some CSS classes
- 00:04:45 or some attributes I want to attach
- 00:04:47 right well you sure have so let's go one
- 00:04:52 to the left so that we run the same lab
- 00:04:54 less unordered list and here I want to
- 00:04:58 create an input element and it should be
- 00:05:00 of type text how do I do this we use
- 00:05:05 parentheses for this now in these
- 00:05:08 parentheses we can specify all
- 00:05:10 attributes you want to attach this HTML
- 00:05:13 element Blahnik type equals and then
- 00:05:18 string text let me save this and reload
- 00:05:25 no now we get this input element here
- 00:05:30 and as you can see you got this type
- 00:05:32 text element attached to it now if you
- 00:05:34 also went to want to add a class and
- 00:05:36 let's say an ID we do this a class set
- 00:05:42 by just adding a dot and then the class
- 00:05:44 name so class name this will add the CSS
- 00:05:47 class class name and then if we had a
- 00:05:50 hash tag we can't add an ID saved us
- 00:05:54 know again inspect this as you can see
- 00:05:58 it has the ID Eddie ID and the class
- 00:06:01 class name if you're using a mat which
- 00:06:06 is a plug-in for many editors which you
- 00:06:08 see that the – tool allows you to write
- 00:06:10 kilobyte or an engine or Mille in their
- 00:06:13 HTML tags by just writing dot class name
- 00:06:16 getting tablet
- 00:06:17 if that's a similar syntax here were
- 00:06:21 adding CSS class with a dot in front of
- 00:06:24 the name and IDs with a hashtag in front
- 00:06:27 of the name so that's one important
- 00:06:29 thing now here's another important thing
- 00:06:32 in the title of our layout here you see
- 00:06:35 that I got title equal and not titled
- 00:06:38 space if I remove the equal sign I
- 00:06:41 reload this page watch this tile on the
- 00:06:44 tab here it's now titled if I add the
- 00:06:48 equal sign and reload it's expressed
- 00:06:52 because title if we have an equal sign
- 00:06:56 right after the tag name refers to a
- 00:07:00 variable which is injected so to say
- 00:07:03 into this template which is added and it
- 00:07:06 is done through well known in this case
- 00:07:08 you're in our index wrote here what
- 00:07:11 we're rendering already x-file referring
- 00:07:14 you to our index layout or index jade
- 00:07:18 file we're setting this title variable
- 00:07:20 Express so if it changed this year to
- 00:07:23 cool huh and save this and reload o
- 00:07:29 restart my server and then reload you
- 00:07:34 can see I got cool huh so this is how we
- 00:07:37 insert variables this chava script
- 00:07:41 object already set is the last video of
- 00:07:42 the thing into our template and in the
- 00:07:45 template we cannot output it with this
- 00:07:49 but by using just a variable name we set
- 00:07:52 in this chava script object but this
- 00:07:53 equal sign is important to tell Jade hey
- 00:07:55 don't render the following thing as text
- 00:07:57 use this variable is a variable and use
- 00:08:01 whatever this variable contains now
- 00:08:05 report the feature is we might have if
- 00:08:09 statements here so we might have if
- 00:08:12 let's say condition is true then we want
- 00:08:17 to display just let's say paragraph
- 00:08:20 which says it's true obviously we don't
- 00:08:24 have condition yet and you could either
- 00:08:27 just specify in a row
- 00:08:29 and add another variable you let me do
- 00:08:32 this condition should be let's say it's
- 00:08:35 true restart the server and reload this
- 00:08:38 page now you can see it's true and if I
- 00:08:41 set it to false here and again restarted
- 00:08:46 do this it's gone even though it's still
- 00:08:49 in my shade farm because here we check
- 00:08:53 on this condition very important now
- 00:08:58 this is we can if use if conditions by
- 00:09:02 the way we can also define variables
- 00:09:05 inside this shade template if we need
- 00:09:07 you for any reason we can quickly do
- 00:09:10 this by adding a – a – a den of our
- 00:09:12 condition equals true now this is always
- 00:09:17 true if I and I only does the template
- 00:09:20 that we need to know need to restart my
- 00:09:22 server if I'm not reload we can again
- 00:09:24 see this even though we're still passing
- 00:09:27 it as false here but I'm overwriting it
- 00:09:29 in my layout by well setting it
- 00:09:32 basically as a new variable okay so this
- 00:09:35 is clear we can set variables we can use
- 00:09:37 these control structures we are
- 00:09:39 obviously not classic HTML tags or so
- 00:09:44 tags but added by try and change
- 00:09:46 templating engines
- 00:09:47 we may also loop so let me say I have a
- 00:09:53 number variable oops
- 00:09:55 thank you variable which I will call
- 00:09:59 just any array and this should just be
- 00:10:04 well an array of three numbers now
- 00:10:07 notice that I never have a semicolon
- 00:10:09 anything like this at the end because in
- 00:10:13 Jai templating engine you do everything
- 00:10:16 with indentation there is no need to
- 00:10:18 tell what an end a word when a line ends
- 00:10:21 because what indentation and line breaks
- 00:10:24 are the way how you structure your
- 00:10:26 element or your document so this is my
- 00:10:30 variable and now I want to create a new
- 00:10:37 loop I can say for each value this
- 00:10:40 we'll be dynamically created in my any
- 00:10:43 array here I want to do something let's
- 00:10:48 say I wanted to long after the new
- 00:10:50 paragraph with this value now again
- 00:10:53 using this equal sign make sure I don't
- 00:10:55 want to output a text of value but I
- 00:10:57 want to refer this value variable which
- 00:11:00 I'm creating here so let me save this
- 00:11:03 and reload and now you can see I got one
- 00:11:05 two three here just how we use loose now
- 00:11:08 the last important thing I want to cover
- 00:11:10 this with you is this block thing maybe
- 00:11:13 you already wondered that in this
- 00:11:15 index.js file in our route we're
- 00:11:18 rendering a route or a few called index
- 00:11:20 and we do have an index file here in
- 00:11:23 next shade but I was making all changes
- 00:11:27 in the layout of change file and yet
- 00:11:29 well it appeared here the reason is let
- 00:11:34 me get rid of all of that that as I said
- 00:11:37 at the beginning this layout serves as
- 00:11:40 our basic layout as the skeleton which
- 00:11:42 outer layers reuse and extend and add
- 00:11:45 their content into it and we can provide
- 00:11:48 basic hooks in our skeleton where we
- 00:11:51 want our inheriting layouts or views to
- 00:11:55 be able to insert content we define such
- 00:11:58 hooks with block keyword so we're
- 00:12:02 setting block content here and this
- 00:12:04 means this is a Content block which can
- 00:12:07 be used by our views extending this
- 00:12:10 layout to enjoyed something let's see
- 00:12:14 how this works in the index touch a file
- 00:12:16 here you can see we're having a
- 00:12:20 declaration begin moves as extends
- 00:12:22 layout which just says this view this
- 00:12:25 document is based on this layout of a
- 00:12:29 file it's the same but add something to
- 00:12:31 it it inherits from this file so we're
- 00:12:34 extending the slay out this layout name
- 00:12:37 obviously has to match this layout name
- 00:12:39 here before the dot shade and then we're
- 00:12:42 saying and what we add something
- 00:12:44 document but I can't just write it here
- 00:12:46 right this doesn't not work because this
- 00:12:50 layer Chaffin is closed in itself we
- 00:12:53 only provide these hooks where an
- 00:12:56 extending layout may enter something so
- 00:12:59 recording this blog content here and in
- 00:13:02 here work again having this blog content
- 00:13:05 and by desperate and if I hey I want to
- 00:13:08 enter something into this blog content
- 00:13:11 and this is what I do insert I again
- 00:13:15 insert a title expressed along that's
- 00:13:18 why it's appearing YouTube and then
- 00:13:20 again I have a paragraph with again
- 00:13:22 using this title oh and here we see
- 00:13:25 another notation if we have a mixture of
- 00:13:28 normal text add a variable we enter this
- 00:13:32 variable by using hashtag and then curly
- 00:13:35 braces and the variable name between the
- 00:13:38 curly braces too well basically injure
- 00:13:41 this variable T content of this variable
- 00:13:43 inside a normal text this is how we work
- 00:13:47 with the J templating engine to serve
- 00:13:49 the very basics and I will start working
- 00:13:52 with that in our no chairs projects but
- 00:13:55 I will show our templating language is
- 00:13:57 food out the next week is two so I hope
- 00:14:01 this helps you understand this
- 00:14:04 templating language and of course you
- 00:14:06 will also learn more when we're actually
- 00:14:08 using it in the next videos see you
- 00:14:10 there bye