Скачать с ютуб 152 EJS Partials and Layouts в хорошем качестве

152 EJS Partials and Layouts

EJS (Embedded JavaScript) supports the use of partials and layouts, which help you organize your templates and avoid redundancy in your web applications. This is especially useful for maintaining consistent design and structure across multiple pages. Here’s how to use EJS partials and layouts effectively. 1. Understanding Partials and Layouts **Partials**: These are reusable template snippets that can be included in other EJS templates. They help you modularize your code, making it easier to manage and maintain. **Layouts**: A layout is a master template that defines the overall structure of your pages (like headers, footers, and main content areas). This allows you to keep a consistent look and feel across your application. 2. Setting Up Your Project If you haven’t already set up an Express app with EJS, you can follow these steps: #### Step 1: Create a New Project ```bash mkdir my-ejs-app cd my-ejs-app npm init -y npm install express ejs ``` #### Step 2: Create Basic Server Setup In your `app.js`, set up a simple Express server: ```javascript const express = require('express'); const app = express(); const port = 3000; // Set EJS as the templating engine app.set('view engine', 'ejs'); // Define a route app.get('/', (req, res) = { res.render('home', { title: 'Home Page' }); }); // Start the server app.listen(port, () = { console.log(`Server is running at http://localhost:${port}`); }); ``` 3. Creating Partials #### Step 1: Create a Partials Directory Inside the `views` folder, create a new directory called `partials`: ```bash mkdir views/partials ``` #### Step 2: Create Partial Files Create a partial for a header (`header.ejs`) and a footer (`footer.ejs`): **header.ejs**: ```html ``` **footer.ejs**: ```html ``` 4. Using Partials in a Layout #### Step 1: Create a Layout File In the `views` directory, create a layout file named `layout.ejs`: ```html 5. Rendering Views with Layouts #### Step 1: Modify Your Route to Use Layouts In your `app.js`, modify the route to render views within the layout: ```javascript app.get('/', (req, res) { res.render('home', { title: 'Home Page', body: 'Welcome to my EJS App!/h2' }); }); ``` #### Step 2: Create the Home View In the `views` folder, create a `home.ejs` file: ```html %- include('layout') %!-- Use the layout file -- ``` 6. Running Your Application To see everything in action, start your server: ```bash node app.js ``` Visit `http://localhost:3000` in your browser, and you should see the header, main content, and footer rendered using the layout and partials. 7. Conclusion Using EJS partials and layouts helps you create a well-structured and maintainable template system in your web applications. By modularizing your code, you can easily manage changes and maintain consistency across different pages. If you have further questions or need examples of specific use cases, feel free to ask!