如何使用Materialize CSS设计基于Node.js的EJS视图页面？

Awesome that your Node.js backend and database functionality are already running smoothly! Let’s break down how to use Materialize CSS to style your EJS views effectively—this will make your app look polished and responsive without too much hassle.

Step 1: Add Materialize CSS & JavaScript to Your EJS Layout #

First, set up your base EJS layout (usually views/layout.ejs) to include Materialize’s files. Using official CDNs keeps things simple, so you don’t have to host the files locally:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= title %></title>
    <!-- Materialize CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Material Icons (required for components like buttons & icons) -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <!-- Page content will be injected here via EJS -->
    <%- body %>

    <!-- Materialize JS (requires jQuery first) -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

All your other EJS pages will extend this layout, so Materialize is loaded globally across your app.

Step 2: Reuse Materialize Components with EJS Partials #

Materialize has pre-built components like navbars, cards, and modals—turn these into EJS partials to reuse them across pages. For example, create views/partials/navbar.ejs:

<nav>
    <div class="nav-wrapper deep-purple">
        <a href="/" class="brand-logo left">MyWebApp</a>
        <ul id="nav-links" class="right hide-on-med-and-down">
            <li><a href="/dashboard">Dashboard</a></li>
            <li><a href="/profile">Profile</a></li>
        </ul>
        <!-- Mobile sidenav trigger -->
        <a href="#" data-target="mobile-nav" class="sidenav-trigger right">
            <i class="material-icons">menu</i>
        </a>
    </div>
</nav>

<!-- Mobile sidenav -->
<ul id="mobile-nav" class="sidenav">
    <li><a href="/dashboard">Dashboard</a></li>
    <li><a href="/profile">Profile</a></li>
</ul>

Then include this partial in any page that needs a navbar:

<%- include('partials/navbar') %>

<div class="container">
    <h1>Welcome to Your Dashboard</h1>
    <!-- Rest of your page content -->
</div>

Step 3: Dynamically Render Database Data with Materialize Styles #

Since you’re working with database data, loop through it and render Materialize-styled elements. For example, if you pass an array of products from your Node.js route to EJS, render them as responsive cards:

<div class="container">
    <h2>Our Products</h2>
    <div class="row">
        <% products.forEach(product => { %>
            <div class="col s12 m6 l4">
                <div class="card hoverable">
                    <div class="card-image">
                        <img src="<%= product.imageUrl %>" alt="<%= product.name %>">
                        <span class="card-title"><%= product.name %></span>
                    </div>
                    <div class="card-content">
                        <p>$<%= product.price %></p>
                        <p><%= product.description %></p>
                    </div>
                    <div class="card-action">
                        <a href="/products/<%= product.id %>">View Details</a>
                    </div>
                </div>
            </div>
        <% }) %>
    </div>
</div>

The col s12 m6 l4 classes make the cards responsive—they stack on mobile, take half the width on tablets, and a third on desktops.

Step 4: Initialize Materialize JavaScript Components #

Some Materialize components (like sidenavs, dropdowns, or modals) need JavaScript initialization. Add this script at the bottom of your layout or specific pages:

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize mobile sidenav
        const sidenavElems = document.querySelectorAll('.sidenav');
        M.Sidenav.init(sidenavElems);

        // Initialize dropdowns if you use them
        const dropdownElems = document.querySelectorAll('.dropdown-trigger');
        M.Dropdown.init(dropdownElems);
    });
</script>

If you prefer jQuery, you can write it like this:

$(document).ready(function(){
    $('.sidenav').sidenav();
    $('.dropdown-trigger').dropdown();
});

Quick Pro Tips #

• Use Materialize’s grid system (row + col classes) to organize content—this handles responsive layouts automatically.
• Customize colors with Materialize’s built-in classes (like deep-purple, teal, amber) or add your own CSS in a separate stylesheet linked in the layout.
• For forms, use Materialize’s form classes to style inputs, checkboxes, and buttons—this keeps your UI consistent.

内容的提问来源于stack exchange，提问作者primo