Hey folks! 👋 As I’m diving deeper into backend development with EJS (Embedded JavaScript), I recently stumbled upon an awesome feature that makes coding more efficient: Partials! In this post, I’ll walk you through how to create partials using EJS, which is a great way to reuse HTML code across multiple views in your web projects.
If you're like me, learning and experimenting with new concepts, this will save you a lot of time and effort! Let's jump in and make coding life easier. 🌟
What are Partials in EJS? 🤔
Partials are simply a way to reuse HTML code across multiple views. Imagine you’re building a portfolio website. You’ve got several views (pages) like About, Projects, Contact, etc. But here’s the thing: all of these pages need the same header and footer.
Now, you wouldn’t want to write the same HTML code for the header and footer in every single view, right? That would be a nightmare to maintain. 😅 That’s where partials come in! Instead of repeating yourself, you can create reusable pieces of HTML (partials) and include them in any view you want.
Here’s how simple it is:
<%- include("headerfile") %>
<!-- Your view-specific code goes here -->
<%- include("footerfile") %>
This include syntax is used to inject the contents of your partial files (like the header and footer) into any view. It’s like copy-pasting the code, but smarter and more maintainable! 🙌
Why Use Partials?
Partials are super useful, especially when:
- You have lots of views: Many websites have several pages, but each page often shares common elements (header, footer, sidebar, etc.).
- Heavy front-end design: Sites with complex designs and large stylesheets benefit from partials since you don’t have to keep duplicating the same code.
- Easy maintenance: Want to update your header or footer across the entire website? Just edit the partial once and it updates everywhere!
Step-by-Step Guide to Creating Partials in EJS
To put things into perspective, let’s walk through a simple example of how I used partials to build a basic portfolio site with multiple views. Here's what I did:
Step 1: Render the Home Page (index.ejs)
Let’s start with the home page. First, you’ll want to set up your server to render your EJS views. Here’s how you can render the home page:
app.get("/", (req, res) => {
res.render("index"); // This renders the index.ejs file
});
Your index.ejs file could look something like this:
<%- include("header") %>
<h1>Welcome to My Portfolio</h1>
<p>Here you can find all my projects, education, and contact information.</p>
<%- include("footer") %>
By using partials for the header and footer, you avoid having to write that code again and again for every page.
Step 2: Link Static Files (CSS, JS)
Make sure you serve static files like CSS and JS to make your site look good! You can serve static files with Express like this:
app.use(express.static('public')); // Link to your static files (like CSS and JS)
Then, in your header.ejs partial, you can link your styles like this:
<head>
<link rel="stylesheet" href="/css/styles.css">
<title>Portfolio</title>
</head>
Step 3: Add Routes for Other Views (About, Contact)
Next, you can add routes for your other pages, like About and Contact:
app.get("/about", (req, res) => {
res.render("about"); // Render about.ejs
});
app.get("/contact", (req, res) => {
res.render("contact"); // Render contact.ejs
});
Step 4: Add Partials to the About and Contact Pages
Now, you can use the same header and footer partials in your about and contact views. For example, here’s how the about.ejs page could look:
<%- include("header") %>
<h1>About Me</h1>
<p>This is the about page, where I share my journey.</p>
<%- include("footer") %>
And the contact.ejs page could look like this:
<%- include("header") %>
<h1>Contact Me</h1>
<p>Feel free to reach out via email or phone!</p>
<%- include("footer") %>
By now, you’ve created reusable partials for the header and footer, and included them in multiple views, saving tons of repetition! 🎉
Challenge: Building a Portfolio with Partials
As part of my learning, I challenged myself to create a simple portfolio site with multiple views. The site includes pages for Home, About, and Contact, and I used partials to keep the header and footer consistent across all the pages.
Here’s the workflow I followed:
- Rendered the home page using EJS (as shown above).
- Linked the static files for CSS.
- Created routes for the About and Contact pages.
- Included the header and footer partials on every page to avoid duplicating the same code across multiple views.
You can check out my full project on GitHub 👉 Portfolio Site with Partials
In a nutshell 🥜
To sum it all up:
- Partials in EJS are a great way to reuse common code (like headers and footers) across multiple views.
- They help make your code cleaner, more maintainable, and easier to update.
- Partials are especially useful when your website has a heavy frontend with lots of reusable components.
So, if you’re working on a project where different pages share similar elements, give EJS partials a try! It’ll save you tons of time and effort. 😊
Happy coding, and let me know if you have any questions or want to share your own experience with EJS! 💻💪
Top comments (0)