我将如何动态克隆站点并将自定义 css 应用于它？答案

【问题标题】：How would I dynamically clone a site and apply custom css to it?我将如何动态克隆站点并将自定义 css 应用于它？
【发布时间】：2021-08-22 04:34:08
【问题描述】：

所以我的学校有一个“门户”；一个为学生和教师提供大量资源的网站。唯一的缺点是它的设计非常非常糟糕，并且在 HTML4 上运行。我有一些不错的网页设计技能，我想尝试并改进它。我问过我是否可以直接编辑它，我很快就被关闭了。那么在应用自定义 CSS 的同时如何克隆网站呢？

虽然一开始做 iframe 似乎是个好主意，但它很快就被 CORS 阻止了。您不能将自定义 CSS 应用于具有不同域来源的 iframe。
我可以下载该站点的源代码并为此编写自定义 CSS，但这样在更新新内容时它不会更新。
如果需要，我很乐意使用 django/flask，因为我对 python 有很多经验，如果它有效，我可以使用 react 或其他东西创建一个可下载的应用程序。

有人有什么想法吗？

【问题讨论】：

克隆整个网站？为什么不从一个页面开始——我是一个 php 人，它是 $homepage = file_get_contents('http://www.example.com/'); 的 1 行代码，然后你可以使用 dom 解析器做任何事情，从你自己的 css 定义中的鞋拔到挑选和重组内容。
这不是一项简单的任务。你可以实现一个反向代理，或者只是开发一个浏览器扩展或一个用户脚本来“现代化”相关的网站。
@Kinglish 你认为 PHP 是要走的路吗？我可能可以通过网页抓取 URL 将相同的过程应用于每个页面。但是你能告诉我一些关于使用 PHP 克隆页面的资源吗？
浏览器的自定义扩展或者现有的扩展会更好吗？从我在这里可以看到，您只想将一些 css 注入特定的 url 模式。 Google search: browser extension css injector

标签： javascript php html css django

【解决方案1】：

只需转到您要克隆的网站
右键单击
检查元素
复制整个html代码
将其粘贴到您的代码编辑器中
添加标签<style>
输入Css，针对html代码的标签进行自定义
你完成了！！！快乐编码:)

【讨论】：

我很欣赏这个尝试，但问题是它不会更新。由于这是一个资源丰富且更新频繁的网站，因此这种方法只能在一周左右有效。

【解决方案2】：

如果我想克隆别人糟糕的网站，我会使用 PHP 和 DOM 解析。

https://codingreflections.com/php-parse-html/

在一个完美的世界中，他们的代码将遵循某种模式，并且使用 DOM 解析器，您将能够挑选出他们的导航和内部 href 链接，并将它们重写为指向您的网站，例如 http://terriblewebsite.com/aboutus.phtml => http://imborrowingyourwebsite.com?page=http://terriblewebsite.com/aboutus.phtml .

我会将我所有的 css 写在一个文件中，删除它们的 <link 标签并插入我自己的 css 文件链接——但尽可能使用它们的类。

你的 index.php 文件基本上是（这是一个粗略的草图）

<?php
$url = "http://terriblewebsite.com";
if ($_GET['url']) $url = urldecode($_GET['url']);
$dom = new DomDocument();
@ $dom->loadHTML($url);

// change nav
$nav = $dom->getElementById('navbar'); //DOMElement
$nav_links = $nav->getElementsByTagName('a'); //DOMNodeList
foreach($nav_links as $item) {
 $item->setAttribute('href', 'http://imborrowingyourwebsite.com?page='.$item->getAttribute('href'));
}

// ... other transformations...
// finally

echo $dom->saveHTML();
?>

【讨论】：