152 EJS Partials and Layouts
Автор: Online Academy
Загружено: 2024-11-03
Просмотров: 129
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!
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
