如何获取带有对应CSS样式的解析后MediaWiki页面？

核心问题原因 #

action=parse接口返回的text字段仅包含页面主体的裸HTML，未加载站点Star Citizen皮肤的专属CSS；默认返回的headhtml通常只包含基础MediaWiki样式，缺少皮肤核心样式定义，导致页面样式简陋。

解决方案步骤 #

1. 提取站点核心样式资源
   打开目标页面源代码，筛选出<link rel="stylesheet">标签中与Star Citizen皮肤、Dustloop专属样式相关的资源，比如：

   • 皮肤核心样式：/wiki/load.php?modules=skins.starcitizen.styles&only=styles&skin=starcitizen
   • 内容基础样式：/wiki/load.php?modules=mediawiki.skinning.content&only=styles
     这些资源是确保表格、图片、文本排版正常显示的关键。

2. 构建带样式的完整页面结构
   调用现有API接口获取数据后，将返回内容嵌入包含必要样式的HTML框架，同时给<body>添加皮肤对应类名（skin-starcitizen），让样式正确绑定到页面元素：

   // 示例：用JavaScript处理API返回内容
   fetch('https://www.dustloop.com/wiki/api.php?action=parse&format=json&page=GGST&redirects=1&prop=text|displaytitle|headhtml&formatversion=2&skin=starcitizen')
     .then(response => response.json())
     .then(data => {
       // 构建完整HTML，注入样式和主体内容
       const fullHtml = `
         <!DOCTYPE html>
         <html lang="en">
           <head>
             ${data.parse.headhtml}
             <!-- 补充皮肤核心样式 -->
             <link rel="stylesheet" href="https://www.dustloop.com/wiki/load.php?modules=skins.starcitizen.styles|mediawiki.skinning.content&only=styles&skin=starcitizen">
           </head>
           <body class="mediawiki skin-starcitizen mw-body-content">
             <h1 class="firstHeading">${data.parse.displaytitle}</h1>
             <div class="mw-parser-output">${data.parse.text}</div>
           </body>
         </html>
       `;
       // 可将fullHtml写入新页面或保存为本地文件
       document.body.innerHTML = fullHtml;
     });
   

3. 修正图片路径
   API返回的图片使用相对路径（如/wiki/images/xxx），需确保路径正常访问：

   • 本地预览时，将相对路径替换为绝对路径（https://www.dustloop.com/wiki/images/xxx）；
   • Dustloop域名下加载页面则无需修改。

4. 规避冗余内容
   API返回的text仅包含页面主体内容（无侧边栏、顶部导航等冗余元素），只需注入核心样式即可，完全避免完整页面的冗余问题。

额外优化建议 #

在API请求中添加skin=starcitizen参数（如示例URL），可让接口返回的headhtml包含更多皮肤相关样式引用，减少手动补充样式的工作量。

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