Simple-Jekyll-Search 项目教程

2024-09-20 20:09:28作者：董宙帆

1. 项目目录结构及介绍

Simple-Jekyll-Search/
├── _plugins/
│   └── simple_search_filter.rb
├── example/
│   ├── _layouts/
│   ├── _posts/
│   ├── css/
│   ├── js/
│   └── index.html
├── scripts/
├── src/
├── tests/
├── .gitignore
├── CYPRESS.md
├── LICENSE.md
├── README.md
├── WIKI.md
├── cypress.json
├── index.html
├── package-lock.json
├── package.json
└── xscode.png

目录结构介绍

_plugins/: 包含用于处理JSON数据的插件文件 simple_search_filter.rb。
example/: 包含一个示例Jekyll博客的目录结构，用于展示如何集成Simple-Jekyll-Search。
scripts/: 包含项目的脚本文件。
src/: 包含项目的源代码文件。
tests/: 包含项目的测试文件。
.gitignore: Git忽略文件列表。
CYPRESS.md: Cypress测试框架的说明文档。
LICENSE.md: 项目许可证文件。
README.md: 项目的主说明文档。
WIKI.md: 项目的WIKI文档。
cypress.json: Cypress配置文件。
index.html: 项目的主HTML文件。
package-lock.json: npm包锁定文件。
package.json: npm包配置文件。
xscode.png: 项目的图标文件。

2. 项目启动文件介绍

index.html

index.html 是项目的主HTML文件，包含了用于展示搜索功能的DOM元素和JavaScript代码。以下是文件的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple-Jekyll-Search Example</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <input type="text" id="search-input" placeholder="Search blog posts...">
    <ul id="results-container"></ul>

    <script src="https://unpkg.com/simple-jekyll-search@latest/dest/simple-jekyll-search.min.js"></script>
    <script>
        var sjs = SimpleJekyllSearch({
            searchInput: document.getElementById('search-input'),
            resultsContainer: document.getElementById('results-container'),
            json: '/search.json'
        });
    </script>
</body>
</html>

主要功能

搜索输入框: input 元素用于输入搜索关键词。
结果展示容器: ul 元素用于展示搜索结果。
JavaScript库: 通过 script 标签引入 simple-jekyll-search.min.js 库。
初始化代码: 使用 SimpleJekyllSearch 函数初始化搜索功能，并指定搜索输入框、结果容器和JSON数据源。

3. 项目配置文件介绍

package.json

package.json 是npm包配置文件，包含了项目的依赖和脚本命令。以下是文件的主要内容：

{
  "name": "simple-jekyll-search",
  "version": "1.0.0",
  "description": "A JavaScript library to add search functionality to any Jekyll blog",
  "main": "index.js",
  "scripts": {
    "test": "npm run cypress -- run",
    "start": "jekyll serve"
  },
  "dependencies": {
    "simple-jekyll-search": "^1.0.0"
  },
  "devDependencies": {
    "cypress": "^9.0.0"
  }
}

主要配置项

name: 项目名称。
version: 项目版本号。
description: 项目描述。
main: 项目的主入口文件。
scripts: 包含项目的脚本命令，如测试和启动命令。
dependencies: 项目的依赖包，如 simple-jekyll-search。
devDependencies: 开发依赖包，如 cypress。

cypress.json

cypress.json 是Cypress测试框架的配置文件，用于配置测试环境。以下是文件的主要内容：

{
  "baseUrl": "http://localhost:4000",
  "integrationFolder": "cypress/integration",
  "supportFile": "cypress/support/index.js",
  "pluginsFile": "cypress/plugins/index.js",
  "video": false
}