Andrew

What is an EJS file

Andrew Schwabe
2021-02-04
terminal
Boitumelo PhetlaUnsplash

Before getting started with Hexo and poking around at the existing Hexo theme. You could have walked up to me and proposed "Tell me what a *.ejs file is and I will give you a million dollars.". I would have not become a millionaire. I had no clue this file type even existed. Come to find EJS is short for Embedded JavaScript. Okay, now that we have some more insight into EJS. What is the JavaScript embedded into? Seems like HTML is the logical answer, but how is this different from a script tag? Digging further, it's a unique annotation. Then the lightbulb turned on, it's a template file. Where one can create an HTML-like file, using specific annotations (come to find they overload the word "tags"). Putting it all together, when hexo generate executes. EJS is what is under the hood building the static files from the collection of posts and the defined templates.

Of course, Hexo serves a purpose here as well. Otherwise, why would it exist? This may be considered an ignorant take on the problem Hexo is solving. However, at the current state Hexo appears to be CLI tooling, additional template tools, and an opinionated file structure for how a project should be organized. I'm confident this understanding of Hexo will refine as time goes on and this continues to grow.

While reading through some of the EJS documentation, here are the tags that appeared to be the most interesting. As I dig deeper into this world. This list will change. I'm looking at your comment tag, I have an opinion on comments. Leaning away from them, rather than toward them. However, that is a topic for a different post.

EJS Tags

  • <% Scriptlet tag used to control flow
  • <%= HTML escaped output value tag
  • <%- Unescaped output value tag
  • <%# Comment tag
  • %> Closing tag

Scriptlet Tag Example

<% if (enableAnalytics) { %>
   <!-- Global Site Tag (gtag.js) - Google Analytics -->
   <script>...</script>
<% } %>

HTML Escaped Output Value Tag

<div>
    <%= post.date %>
</div>

Unescaped Output Value Tag

<div>
    <%- post.content %>        
</div>

Comment Tag

<%# This comment assists in defining a decision made for some logical reason %>

Next up, it is time to take a shot at creating the most basic of basic themes.

© Andrew Schwabe