DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Code_Regina
Code_Regina

Posted on

|HTML| HTML: Creating Dynamic HTML with Templating

          -What is Templating
          -Setting the Views Directory
          -Conditionals in EJS 
          -Loops in EJS 
Enter fullscreen mode Exit fullscreen mode

What is Templating

Templating allows us to define a preset "pattern" for a webpage, that we can dynamically modify.
It is possible to define a single "search" template that displays all the results for a given search term. We don't know what the term is or how many results there are ahead of time. The webpage is created on the fly.

EJS is embedded JavaScript templating engine that is used with node JS.
<%= EJS %>

https://ejs.co/


{% extends "base.html" %}
{% block header %} 
<h1>{{ title }}</h1> 
{% endblock %}

{% block content %} 
<ul> 
{% for name, item in items %} 
<li>{{ name }}: {{ item }}</li> 
{% endfor %} 
</ul>
{% endblock %}

Enter fullscreen mode Exit fullscreen mode

EJS Interpolation Syntax

These are taken from the website.

Alt Text

Alt Text

Alt Text

Conditionals in EJS

Alt Text

Loops in EJS

Alt Text

Top comments (0)

In defense of the modern web

I expect I'll annoy everyone with this post: the anti-JavaScript crusaders, justly aghast at how much of the stuff we slather onto modern websites; the people arguing the web is a broken platform for interactive applications anyway and we should start over;

React users; the old guard with their artisanal JS and hand authored HTML; and Tom MacWright, someone I've admired from afar since I first became aware of his work on Mapbox many years ago. But I guess that's the price of having opinions.