寻求Linux下自动内联第三方资源的HTML独立化工具

我刚好遇到过类似的本地HTML资源依赖问题，给你几个实用的标准化方案，完全匹配你想要的命令行式处理需求：

1. 用现成命令行工具（最省心） #

直接借助成熟的第三方工具处理HTML资源内联，完美实现你想要的$ inlineHtmlResources < existingFile.html > standaloneVersion.html管道式操作。推荐两个常用工具：

inline-source（Node.js生态） #

功能齐全，支持内联CSS、JS、图片等资源，还能精准控制哪些资源需要内联：

• 先安装：npm install -g inline-source
• 使用方式（完全适配管道输入输出）：

  # 直接处理文件
  inline-source --compress false existingFile.html > standaloneVersion.html
  # 或者用管道
  cat existingFile.html | inline-source --compress false > standaloneVersion.html
  

  如果你只想内联特定的Bootstrap和jQuery，只需在HTML标签里加inline属性标记：

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" inline>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js" inline></script>
  

  优点：开箱即用，配置灵活，不用自己写代码。

html-inline（Python生态） #

如果更熟悉Python生态，这个工具轻量好用：

• 安装：pip install html-inline
• 使用命令：

  html-inline existingFile.html > standaloneVersion.html
  

  默认会自动内联所有外部CSS和JS资源，也支持管道输入输出。

2. 自定义可配置脚本（灵活可控，告别硬编码） #

如果现成工具不符合你的特定需求（比如只内联指定版本的Bootstrap/jQuery，过滤其他资源），可以写一个简单的脚本，把需要内联的资源配置在外部文件里，维护时只改配置不用动脚本逻辑。

比如用Python写的示例脚本（依赖requests和beautifulsoup4）：

1. 先装依赖：pip install requests beautifulsoup4
2. 新建resource_config.json配置文件：

   {
     "target_resources": {
       "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css": "style",
       "https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js": "script"
     }
   }
   

3. 编写inline_html_resources.py脚本：

   import sys
   import json
   import requests
   from bs4 import BeautifulSoup
   
   def main():
       # 读取配置文件
       with open('resource_config.json', 'r') as f:
           config = json.load(f)
       target_resources = config['target_resources']
   
       # 读取输入的HTML内容
       html_content = sys.stdin.read()
       soup = BeautifulSoup(html_content, 'html.parser')
   
       # 处理CSS资源，替换为内联style标签
       for link in soup.find_all('link', rel='stylesheet'):
           href = link.get('href')
           if href in target_resources and target_resources[href] == 'style':
               response = requests.get(href)
               response.raise_for_status()
               style_tag = soup.new_tag('style')
               style_tag.string = response.text
               link.replace_with(style_tag)
   
       # 处理JS资源，替换为内联script标签
       for script in soup.find_all('script', src=True):
           src = script.get('src')
           if src in target_resources and target_resources[src] == 'script':
               response = requests.get(src)
               response.raise_for_status()
               script['src'] = None
               script.string = response.text
   
       # 输出处理后的HTML
       print(soup.prettify())
   
   if __name__ == '__main__':
       main()
   

4. 使用方式：

   python inline_html_resources.py < existingFile.html > standaloneVersion.html
   

   以后要更新资源版本或添加新资源，只需要修改resource_config.json即可，彻底摆脱硬编码的维护麻烦。

3. 修改ASV模板（从源头解决问题） #

既然报告是ASV生成的，直接修改它的HTML模板，让生成的报告一开始就是独立的，省去事后处理的步骤：

• 找到ASV的模板目录：通常在ASV的安装路径下，或者你的项目.asv/templates目录（如果自定义过模板）
• 找到报告对应的模板文件（比如base.html），把CDN链接替换成两种形式：
  • 本地资源相对路径：下载Bootstrap和jQuery的本地副本，放在ASV报告的静态资源目录，然后把模板里的href/src改成相对路径，比如<link rel="stylesheet" href="bootstrap.min.css">
  • 直接内联内容：把Bootstrap和jQuery的代码直接粘贴到模板的<style>和<script>标签里（适合固定版本的场景）
• 修改完成后，每次ASV生成的报告都会自带内联资源或本地相对路径，用file://访问完全正常。

方案对比 #

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