如何修改Rarebit模板实现每页图片外添加独特HTML内容及多媒体支持

Rarebit是一款开源HTML/JavaScript漫画模板，作者可通过JavaScript在单个HTML文件中管理所有漫画页，页面以子目录中的图片文件（命名如pg1.jpg、pg2.jpg）存储，通过调用writePage函数展示。

当前问题与需求 #

• 希望制作多媒体漫画：部分页面需在图片间/后插入HTML文本元素，部分页面包含或直接使用视频等内容
• 当前模板仅支持单页多图（命名如pg3_1.jpg），添加.gif、.mp4等格式时显示损坏图标，且设置中只有单一扩展名常量const ext = "jpg";，无法支持多格式
• 核心目标：实现图片间/后插入HTML元素，同时兼容多种多媒体格式

以下是原模板中的writePage函数：

function writePage() {
  let partExtension = ""; // Part extension to add to the URL if the image is split into multiple parts
  let altText = ""; // Variable for the alt text
  let path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; //path for your comics made out of variables strung together
  let page = ``;

  if (pgData.length < pg) { // If the array is blank or not long enough to have an entry for this page
    // Debug
    console.log("page code to insert - " + page);
    console.log("alt text to print - " + altText);
    //
    page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
    return page;
  } else if (pgData.length >= pg) { // If the array is not blank, and if it's at least long enough to have an entry for the current page

    altText = pgData[pg - 1].altText; // Set the alt text to the text defined in the array

    if (pgData[pg-1].imageFiles > 1) { //if there’s more than one page segment
    for (let i = 1; i < pgData[pg-1].imageFiles+1; i++) { // 'for' loop to put all the parts of the image on the webpage
      partExtension = imgPart + i.toString();
      path = (folder != "" ? folder + "/" : "") + image + pg + partExtension + "." + ext; // Reinitialise path (there has to be a less dumb way to do this)
      if (i > 1) {page += `<br/>`} // Add a line break
      page += `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`; //add page segment
      }
    } else {
      page = `<img alt="` + altText + `" title="` + altText + `" src="` + path + `" />`;
    }
    // Debug
    console.log("page code to insert - " + page);
    console.log("alt text to print - " + altText);
    //
    return page;
  }
}

具体修改步骤 #

1. 重构pgData数组，支持自定义内容类型 #

原pgData仅存储图片数量和 alt 文本，现在改成每个页面定义content数组，每个元素对应一段内容（图片、视频、HTML文本），示例如下：

const pgData = [
  // 第1页：单张JPG图片
  {
    content: [
      { type: "image", src: "pg1.jpg", alt: "第1页漫画内容" }
    ]
  },
  // 第2页：图片+自定义文本+视频
  {
    content: [
      { type: "image", src: "pg2_1.jpg", alt: "第2页第一段漫画" },
      { type: "html", html: "<p class='comic-text'>这里是插入的剧情文本，可自定义样式</p>" },
      { type: "video", src: "pg2_clip.mp4", alt: "第2页的动画片段", controls: true }
    ]
  },
  // 第3页：多张GIF动图
  {
    content: [
      { type: "image", src: "pg3_1.gif", alt: "第3页动图1" },
      { type: "image", src: "pg3_2.gif", alt: "第3页动图2" }
    ]
  }
];

• type：指定内容类型（image/video/html）
• src：媒体文件的完整文件名（包含扩展名）
• alt：替代文本（可选）
• html：自定义HTML代码（仅html类型需要）
• controls：视频是否显示播放控件（仅video类型需要）

2. 重写writePage函数，适配新的内容结构 #

替换原writePage函数为以下代码，它会根据content数组中的类型生成对应HTML：

function writePage() {
  let page = ``;
  // 获取当前页码对应的页面数据（pg是当前页码，从1开始，索引需减1）
  const currentPageData = pgData[pg - 1];

  // 如果没有定义当前页数据，生成默认图片（兼容原逻辑）
  if (!currentPageData) {
    const defaultPath = `${folder ? folder + "/" : ""}${image}${pg}.jpg`;
    page = `<img alt="未定义的页面" title="未定义的页面" src="${defaultPath}" />`;
    console.log("page code to insert - " + page);
    return page;
  }

  // 遍历当前页的所有内容项
  currentPageData.content.forEach((item, index) => {
    // 非首个内容项添加换行分隔
    if (index > 0) {
      page += `<br/>`;
    }

    // 根据内容类型生成对应HTML
    switch(item.type) {
      case "image":
        const imgSrc = `${folder ? folder + "/" : ""}${item.src}`;
        page += `<img alt="${item.alt || ""}" title="${item.alt || ""}" src="${imgSrc}" />`;
        break;
      case "video":
        const videoSrc = `${folder ? folder + "/" : ""}${item.src}`;
        page += `<video ${item.controls ? "controls" : ""} alt="${item.alt || ""}">
                  <source src="${videoSrc}" type="video/mp4">
                  你的浏览器不支持视频播放
                </video>`;
        break;
      case "html":
        // 直接插入自定义HTML代码
        page += item.html;
        break;
      // 可按需添加更多类型，比如音频<audio>
      default:
        page += `<p>未知内容类型</p>`;
    }
  });

  console.log("page code to insert - " + page);
  return page;
}

3. 移除无用的扩展名常量 #

删除原模板中的const ext = "jpg";，因为现在每个媒体文件都直接指定了完整文件名，不需要统一扩展名。

4. 自定义HTML元素样式（可选） #

如果插入的文本需要样式，在CSS中添加自定义规则，比如：

.comic-text {
  font-size: 16px;
  color: #222;
  text-align: center;
  margin: 12px 0;
  line-height: 1.5;
}

使用说明 #

• 所有媒体文件（jpg、gif、mp4等）直接放在模板指定的folder目录下，或与HTML文件同目录（若folder为空）
• 按照pgData的示例结构，逐个页面定义需要的内容组合即可

内容的提问来源于stack exchange，提问作者marr