ComicGlass如何添加新网站？

核心概念：ComicGlass 插件系统

要明白 ComicGlass 是如何工作的，它本身不直接抓取任何网站的内容，它的核心是一个“阅读器引擎”，而“从哪里获取漫画”这个功能是由“插件”来完成的。

• 插件：本质上是一小段代码，它知道如何与特定的漫画网站进行“沟通”（解析网页、提取漫画列表、获取图片链接等）。
• 插件类型：ComicGlass 支持两种插件：
  1. 官方插件：由 ComicGlass 开发者维护,通常是一些非常流行且稳定的网站。
  2. 自定义插件：由用户自己创建或从社区获取,用于添加官方未支持的网站。

我们将专注于创建一个自定义插件。

第一步：分析您的网站（最重要的一步）

在编写任何代码之前，您必须彻底分析您的网站，这是最关键、最耗时的一步，您需要像一个侦探一样，找出 ComicGlass 需要的所有信息。

请准备好以下信息：

1. 漫画列表页：

   
   （图片来源网络，侵删）
   • URL 格式：https://your-website.com/comics/ 或 https://your-website.com/comics/list。
   • 页面结构：这个页面上是如何展示所有漫画的？是每个漫画都在一个 <div class="comic-item"> 里面，还是每个都在一个 <li> 标签里？用浏览器的“检查元素”功能（右键 -> 检查）来查看 HTML 结构。
   • 关键信息：在列表项中，如何找到漫画的和详情页链接可能在 <h3> 标签里，链接可能是 <a href="/comics/detail/123">。

2. 漫画详情页：

   • URL 格式：详情页的 URL 有没有规律？https://your-website.com/comics/detail/{comic_id}。
   • 章节列表：在详情页上，章节是如何排列的？是在一个 <ul class="chapter-list"> 里吗？每个章节的链接是什么样子的？
   • 关键信息：如何提取章节的和阅读页链接？

3. 漫画阅读页：

   • URL 格式：阅读页的 URL 通常包含章节 ID，https://your-website.com/comics/read/{chapter_id}。
   • 图片容器：最核心的部分！漫画图片是如何加载的？
     • 它是直接在 <img> 标签的 src 属性里吗？（最简单）
     • 还是在一个 <div class="reader-image"> 里面，通过 JavaScript 动态加载？
     • 图片的 URL 是固定的还是需要拼接的？
   • 关键信息：如何定位到包含漫画图片的那个 HTML 元素？如何从这个元素中提取出图片的真实 URL？

工具推荐：

• 浏览器开发者工具：按 F12 打开，使用“元素”和“网络”标签进行分析。
• JSON 提取器：有些网站通过 API 返回 JSON 数据，这会让解析变得非常简单，检查网络请求，看看有没有类似 api/comics/list 的请求。

第二步：选择插件格式并编写代码

分析完网站后，就可以开始写代码了，ComicGlass 支持多种插件格式，最推荐使用 JSON 格式，因为它最简单,不需要懂编程。

使用 JSON 插件（推荐，最简单）

JSON 插件是一个 .json 文件,您只需要按照格式填写您在第一步中分析出的信息即可。

JSON 文件结构示例：

{
  "name": "您的网站名称",
  "version": "1.0",
  "author": "您的名字",
  "description": "一个用于从您的网站获取漫画的插件",
  "baseUrl": "https://your-website.com",
  "comicList": {
    "url": "/comics/",
    "parser": {
      "container": "div.comic-item",
      "title": "h3.title",
      "link": "a"
    }
  },
  "chapterList": {
    "url": "",
    "parser": {
      "container": "ul.chapter-list li",
      "title": "a",
      "link": "a"
    }
  },
  "imageList": {
    "url": "",
    "parser": {
      "container": "div.reader-image img",
      "image": "src"
    }
  }
}

如何填写上面的字段：

• name, version, author, description: 填写您的基本信息。
• baseUrl: 您网站的根域名,不带末尾的斜杠。
• comicList: 定义如何获取漫画列表。
  • url: 漫画列表页的相对路径（相对于 baseUrl）。
  • parser: 定义解析规则。
    • container: 包含单个漫画信息的元素选择器（div.comic-item）。
    • title: 在 container 内部，提取标题的元素选择器（h3.title）。
    • link: 在 container 内部，提取链接的元素选择器（a）。
• chapterList: 定义如何获取章节列表。
  • url: 通常为空，因为详情页的 URL 已经在 comicList 中获取了，如果章节列表页是独立的,就填写。
  • parser: 和上面类似,定义章节的解析规则。
• imageList: 定义如何获取漫画图片。
  • url: 通常为空，因为阅读页的 URL 已经在 chapterList 中获取了。
  • parser: 定义图片解析规则。
    • container: 包含图片的元素选择器（div.reader-image img）。
    • image: 从 container 元素中提取图片 URL 的属性名（通常是 src，也可能是 data-src 或 data-original）。

选择器语法：这是 CSS 选择器,您可以简单理解为：

• div：选择 <div>
• .class-name：选择 class="class-name" 的元素。
• #id-name：选择 id="id-name" 的元素。
• div p：选择 <div> 内部的所有 <p>
• div > a：选择 <div> 的直接子元素 <a>。