在 index.ejs 中引用 jQuery & Bootstrap CDN 作为源

Question

我是网络开发的新手'，在我的学期中，我们被要求使用 node-js & express 构建一个网站，我们（我的团队和我）得到这个网站模板只是为了节省设计和工作关于功能，它带有 bootstrap.min.js, bootstrap.min.css & jquery-2.1.1.js 个文件。

现在在我的 index.ejs 文件中，它们被引用到本地目录，如：

<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>JSAS</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
...
...
...
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

但是我看不出有任何理由在本地安装它们，因为我可以在使用 npm.[=25= 安装它们之后从 Bootstrap & jQuery CDN 引用它们]

当我尝试时，例如，我现在将 jQuery src 更改为（并删除本地 jQuery 文件）

<script>src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

它仍然按预期工作，只有当我从 bootstrapCDN 添加 link ref & sec 时，功能似乎中断了（在 css 级别和 jQuery 上）。

这是我在index.ejs中的尝试：

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>JSAS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
...
...
...
    <!-- script tags
    ============================================================= -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
        integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF"
        crossorigin="anonymous"></script>
    <!-- <script src="js/jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>  -->
    <script src="js/custom.js"></script>
    <script src="js/smoothscroll.js"></script>

</body>
</html>

index.js:

const express = require('express')
const appPort = process.env.PORT || 4000
const app = express()
var path = require('path')

//Setting up Handlebars
app.set('view engine', 'ejs')
app.use(express.static(path.join(__dirname, '/views/')))
app.set('views', __dirname + '/views/')
app.use('/css', express.static(__dirname + '/css'))
app.use('/fonts', express.static(__dirname + '/fonts'))
app.use('/js', express.static(__dirname + '/js'))
app.use('/img', express.static(__dirname + '/img'))


//routing
app.get('/', (req, res) => {
    res.render('index', { title: 'Home Page' })
})
/* other pages
app.get('/login', function (req, res) {
    res.render('login', { title: 'login' })
})


app.use(function (req, res, next) {

    // you can do what ever you want here
    // for example rendering a page with '404 Not Found'
    res.status(404)
    res.render('404', { error: 'Not Found' })

})
*/

//Creating a connection
app.listen(appPort, () => {
    console.log(`App is running. serve at port: ${appPort}`)
    console.log(`http://127.0.0.1:${appPort}`)
})

这是它坏掉后的样子 - https://imgur.com/7FlMuXr

这是预期的外观和感觉 - https://imgur.com/ZdySJIT

如果您还需要什么，尽管问。

谢谢！

顺便说一句，有什么方法可以避免每个 ejs 文件中有重复的 src 引用吗？喜欢从单个导入它。

Answer 1

好的，我让它工作了，我认为 Bootstrap 是向后兼容的，我使用的是版本 4 而不是版本 3。

在 index.ejs 中引用 jQuery & Bootstrap CDN 作为源

Referencing jQuery & Bootstrap CDN as source in index.ejs

jquery

ejs

node.js

express

bootstrap-4