HTML: Preprocessor Pug

Theory: Connecting files

The advantage of Pug over plain HTML is that it allows you to include files. Imagine a project with five static pages. Some sites of this size do not use CMS or other server solutions to manage the site template. Firstly, it is faster because there is no additional processing, and secondly, it lowers the entry threshold for the project.

However, a static solution has a global problem — too many repeated blocks of HTML. These are usually footers, headers, menus, banners, and more. Copying HTML is not the best solution because you end up with different blocks at some point.

It is where Pug comes in. It allows you to create separate files for repeating elements and include them in any file. As we will see in this lesson, it can contain markup and any data, including Markdown and other interpretations of files.

For example, let us create some Pug files with header and footer markup:

//- includes/header.pug
header
  a.logo(href='#') Hexlet
  nav
    a(href='/programs') Programs
    a(href='/courses') Courses
    a(href='/pricing') Pricing
    a(href='/teams') Teams

We can include these files within any other Pug files by using the include construct and giving the path to the file to be included:

//- index.pug
doctype html
html
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    meta(rel='icon' type='image/x-icon' href='favicon.ico')

    title Hexlet

    link(rel='stylesheet' href='./styles/app.css')
  body
    //- Connecting the website header
    include includes/header.pug

    main
      h1 Learn to program and work in an in-demand profession

    //- Connecting the site footer
    include includes/footer.pug

When the interpreter processes index.pug file, it puts all the files in their proper places. In this case, you can compile only the most essential files instead of all. We have already seen a similar structure for linking files in the course on the SASS preprocessor:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta rel="icon" type="image/x-icon" href="favicon.ico">
    <title>Hexlet</title>
    <link rel="stylesheet" href="./styles/app.css">
  </head>
  <body>
    <header>
      <a class="logo" href="#">Hexlet</a>
      <nav>
        <a href="/programs">Programs</a>
        <a href="/courses">Courses</a>
        <a href="/pricing">Pricing</a>
        <a href="/teams">Teams</a>
      </nav>
    </header>
    <main>
      <h1>Learn to program and work in an in-demand profession</h1>
    </main>
    <footer>
      <p>Hexlet Ltd.</p>
    </footer>
  </body>
</html>

Pug allows you to connect any file type. The logic is simple enough — we insert the data of any attached file as it is. In this way, you can link not only templates with Pug syntax but also scripts, CSS code, and text data:

/* Basis Styles */
* {
  box-sizing: border-box;

  margin: 0;
  padding: 0;
}

h1,
h2,
h3 {
  color: #666;
  font: 2em/1.5 'Headers', sans-serif;
}

Additional modules

When working with Pug, you can use the built-in functions extending them with other handlers. You can do this by interacting with jstransformer.

We'll use the addition of markdown files to the markup as an example. Markdown is a text markup language that we can convert to HTML. When we use this type of writing, we make it easier to read. This way, people unfamiliar with layout design can mark up text correctly.

For example, let us convert the following text:

# Hexlet. Learn to code and work in an in-demand profession

We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.

Choose Hexlet if you:

* Want to learn to code but aren't familiar with the development
* Want to enter a new profession
* Want to develop yourself

## How it works

You choose a profession, and we will find you a personal mentor. It will be a programmer working in the field and having teaching experience. The learning of programming within a profession consists of four modules. Each module includes courses on the topic and a practical project.

By the way, Hexlet authors write their text courses in Markdown format, which is automatically converted to HTML markup when uploaded to the server.

The Pug preprocessor uses the package jstransformer-markdown-it to convert Markdown to HTML. We can set it using the command:

npm install jstransformer-markdown-it

To connect a module, we use the syntax :name-module. The script will process everything inside the module:

main
  :markdown-it
    # Hexlet. Learn to code and work in an in-demand profession

    We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.

    Choose Hexlet if you:

    * Want to learn to code but aren't familiar with the development
    * Want to enter a new profession
    * Want to develop yourself

    ## How it works

    You choose a profession, and we will find you a personal mentor. It will be a programmer working in the field and having teaching experience. The learning of programming within a profession consists of four modules. Each module includes courses on the topic and a practical project.

We intentionally format the final HTML code so you can easily read it during the lesson. If you repeat the steps in the tutorial, Pug may give you a slightly different formatting. It isn't a problem or a mistake.

Inside the modules, you can also pass a file to connect. It is a priority option because it is better not to have the text inside the Pug files and store them separately instead. It is a big topic devoted to application architecture, but you should keep the text and the output separate. The less text Pug contains, the easier it is to work with.

To connect a file to a module, we use include again, followed by the module name and the file to be connected:

main
  include:markdown-it main.md

Additional assignment

Create a basic HTML page markup using Pug and add the following markdown text:

# About Hexlet

Hexlet is a platform for hands-on programming courses. We help beginners to become professional programmers and experienced developers to gain new skills and grow professionally.

## Idea and motivation

We believe a real programmer should understand how a computer works and think like a computer. They should see a problem, not a task. They must be able to analyze and reason at the problem level and above, not just at the code level.

The main question for a beginner is not "where to study" but "what to study and in what order," given today's abundance of study materials, courses, and books. There are many opinions on this subject. Some advise starting with mathematics, others with specific languages and technologies.

Hexlet is a ready-made path from absolute beginner to your first job. Each lesson on Hexlet contains up to three steps:

1. **Theory**. It is a short lecture in text or video form. It's task-based. Unlike traditional academic theory, we focus on a specific problem solved by engineers and programmers. Our students follow their steps to understand the solution.
2. **Test**. It is a test of your comprehension. We don't care about memorizing facts, so we design the questions to test your understanding of the concept, not your memory.
3. **Practice**. Programming exercises in a real development environment, accessible through the browser. Not a simulation or a toy, but rather on a real machine with databases, frameworks, servers, and other tools.
NavigationTheory

Completed

0 / 8