如何從 web 本地構建前端示例？

Question

我正在使用引導輪播為學校項目制作網站。 我希望搜索輸入框突出顯示頁面上的所有文本，因此我在 Google 上搜索並找到mark.js ： https://markjs.io/我查看了Search bar with jump to matches該示例將我帶到這里： https ://jsfiddle.net/bap5uf8e/ So I copied and pasted the html into index.html added all the basic elements like !DOCTYPE html , head and body , copied the css into a test.css and referenced to it in the <head></head>的index.html 。 對於 JS，我克隆了mark.js的 repo 並將其放在我的項目文件夾中，因此樹如下所示：

├── index.html
├── mark.js [9 entries exceeds filelimit, not opening dir]
├── markTest.js
├── package-lock.json
└── test.css

markTest.js是從上面的示例復制的 JS 代碼（再次鏈接： https://jsfiddle.net/bap5uf8e/ ）然后我在開始<body>標記下方引用mark.min.js和markTest.js ：

<body>
        <script src="mark.js/dist/mark.min.js"></script>
        <script src="markTest.js"></script>

接下來，我使用瀏覽器同步（ https://www.browsersync.io/ ）查看突出顯示功能是否有效，但無效。 我將package-lock.json從我的home文件夾復制到了這個文件夾，因為它在其中和 Python 中有一些關於mark.js的內容，我對此感到相當滿意，我會將requirements.txt或 Z6EEDC03A68A69933C763E674F2ZD 文件放在項目文件夾中。 它看起來像這樣：

{
  "requires": true,
  "lockfileVersion": 1,
  "dependencies": {
    "jquery": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
    },
    "mark.js": {
      "version": "8.11.1",
      "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
      "integrity": "sha1-GA8fnr74sOY45BZq1S24eb6y/8U=",
      "dev": true
    }
  }
}

我有npm install 'ed jquery，mark.js 如上所述似乎表明。 有人可以向我指出我缺少什么讓這個例子在本地工作嗎？

Answer 1

這有效：

├── assets
│   ├── brand
│   └── dist
├── biosphere.html
├── clipboard.html
├── comp2680Presentation.odp
├── css
│   ├── biosphere.css
│   ├── bootstrap.css
│   ├── carousel.css
│   ├── dashboard.css
│   ├── famousVegans.css
│   ├── food.css
│   ├── grid.css
│   ├── mental.css
│   ├── parallax.css
│   ├── physicalHealth.css
│   ├── signin.css
│   ├── spiritual.css
│   └── starter-template.css
├── dashboard.html
├── famousVegans.html
├── food.html
├── grid.html
├── index.html
├── js
│   ├── clearButton.js
│   ├── dashboard.js
│   ├── main.js
│   ├── mark.min.js
│   ├── nameValidator.js
│   └── navbarSearch.js
├── js_test
│   ├── basicMarkJS.css
│   ├── index2.html
│   ├── index.html
│   ├── mark.js
│   ├── markTest.js
│   ├── package-lock.json
│   └── test.css
├── markJsTest
│   └── index.html
├── mental.html
├── navbarSearchDemo.png
├── parallax.html
├── physicalHealth.html
├── public
│   ├── fonts
│   └── imgs
├── README.md
├── signIn.html
├── spiritual.html
└── starter.html

您可以在此處查看我的網站： https://nyck33.github.io/ecoWarriors/ mark.js突出顯示作品。

如何從 web 本地構建前端示例？

問題描述

1 個解決方案

解決方案1
0 已采納 2020-09-05 20:23:51

如何從 web 本地構建前端示例？

問題描述

1 個解決方案

解決方案1 0 已采納 2020-09-05 20:23:51

解決方案1
0 已采納 2020-09-05 20:23:51