httrack 的错误 srcset 属性

Question

我用 httracks 搜索了一个网站，生成了很多不同级别的文件。但是该网站使用 picture / source 带有 srcset 属性的标签，httrack 无法处理，所有这些图片离线时效果不佳。

httrack 如果使用选项 Attempt to detect all links (even in unknown tags/javascript code)（在 winhttrack 中）并将所有图像复制到本地存储，则可以看到链接。但是并没有改变相对路径。

现在我需要一个脚本 (powershell/gnu bash)，它可以编辑所有 html 文件，使 srcset 中的路径适应正确的相对路径.

我的想法是对每个文件夹进行递归，将附加的 ../ 作为参数插入/替换为 sed。

要做什么：

示例文件：

index.html
cat1/product1.html
cat2/option3/product5.html

每个都包含一些图片标签，例如：

<picture>
     <source srcset="/images/img1_low.jpg, /images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="/images/img1_med.jpg, /images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="/images/img1_hi.jpg, /images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../images/img1_hi.jpg" />
</picture>

在图像标签内，路径始终是从 httrack 完成的正确路径：(images/img1_hi.jpg、../images/img1_hi.jpg、../../images/img1_hi.jpg)

但源标记还必须包含匹配的路径：

在index.html中：

<picture>
     <source srcset="images/img1_low.jpg, images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="images/img1_med.jpg, images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="images/img1_hi.jpg, images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="images/img1_hi.jpg" />
</picture>

在 cat1/product1.html:

<picture>
     <source srcset="../images/img1_low.jpg, ../images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="../images/img1_med.jpg, ../images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="../images/img1_hi.jpg, ../images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../images/img1_hi.jpg" />
</picture>

在cat2/option3/product5.html:

<picture>
     <source srcset="../../images/img1_low.jpg, ../../images/img1_low_ret.jpg x2" media="(max-width: 470px)">
     <source srcset="../../images/img1_med.jpg, ../../images/img1_med_ret.jpg x2" media="(max-width: 960px)">
     <source srcset="../images/img1_hi.jpg, ../../images/img1_hi_ret.jpg x2" media="(min-width: 961px)">
     <img src="../../images/img1_hi.jpg" />
</picture>

我的尝试：

#!/usr/bin/bash

function workfolder {
    #  = current folder
    #  = prefix upfolders

    pushd $PWD
    cd 

    for i in $( ls ) ; do
        if [ -d $i ] ; then
            workfolder $i ../
        fi
    done

    for i in $( ls *.html ) ; do
        sed -i 's/srcset="images/srcset="images/g' $i
        sed -i 's/, images/, images/g' $i
    done

    popd

}

workfolder .

除了错误太多之外，sed 替换中的没有解决，而是乱七八糟地替换了。

Answer 1

#!/usr/bin/bash
function workfolder {
    #  = current folder
    #  = prefix upfolders

    pushd $PWD > /dev/null
    cd 
    echo "=====^ $PWD ====="
    for i in $( ls ) ; do
        if [ -d $i ] ; then
            workfolder $i ..\/
        fi
    done
    for i in $( ls *.html ) ; do
        echo " working on: $PWD/$i with "
        sed -i 's/srcset="image/srcset="''image/g' $i
        sed -i 's/\,\ image/\,\ ''image/g' $i
    done
    popd > /dev/null
    echo "=====v $PWD ====="
}

workfolder .

陷阱是：在 sed 命令中完全使用 </code>（第一次尝试未展开）和正确转义 <code>../ 作为 sed 命令中可用形式的第二个参数

Answer 2

安装插件Code Snippets。使用以下代码添加新代码段：

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

按“保存更改并激活”按钮。此代码段将从您的站点中删除 srcset 标记。 Code Source

httrack 的错误 srcset 属性

wrong srcset attributes from httrack

bash

sed

httrack

要做什么：