如何使用自定义样式表 express 节点

📌 相关文章

📜 如何使用自定义样式表 express 节点 - Javascript (1)

📅 最后修改于: 2023-12-03 15:08:27.030000 🧑 作者: Mango

在使用 Express 的过程中，我们可以使用自定义样式表来美化页面。本文将介绍如何使用自定义样式表 express 节点来实现。

步骤一：创建样式表文件

首先我们需要创建一个样式表文件，可以将其命名为 style.css。在文件中编写好自己所需的 CSS 样式。

步骤二：设置静态资源目录

在使用 Express 运行应用程序时，我们需要设置静态资源目录（即样式表、图片、JavaScript 等文件所在目录）。

在 app.js 中添加以下代码：

app.use(express.static('public'));

此代码将 public 目录设置为静态资源目录。我们需要确保在 public 目录下存在 style.css 文件。

步骤三：在 HTML 文件中引入样式表

在 HTML 文件的 head 标签内，加入以下代码：

<link rel="stylesheet" href="/style.css">

这将在 HTML 文件中引入 style.css 文件，并使用其中的 CSS 样式。

完整代码示例

const express = require('express');
const app = express();

app.use(express.static('public'));

app.get('/', (req, res) => {
  res.send(`
    <html>
      <head>
        <link rel="stylesheet" href="/style.css">
      </head>
      <body>
        <h1>Hello, World!</h1>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上述代码中，我们将 public 目录设置为静态资源目录，并在 Express 应用程序中设置了根路由 /。在 HTML 文件中，使用 link 标签引入了 style.css 文件。

在浏览器中访问 http://localhost:3000/，即可看到使用了自定义样式的页面。

总结

本文讲解了如何使用自定义样式表 express 节点来美化页面。需要先创建样式表文件，然后设置静态资源目录，并在 HTML 文件中使用 link 标签来引入样式表文件。