来自httrack的错误srcset属性

Question

我已经添加了一个带有have的网站，并生成了许多不同级别的文件。但该网站使用picture / source标签和srcset属性，而httrack不处理这些属性，所有这些图片都不能脱机工作。

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

现在，我需要一个脚本(powershell/gnu )，它可以编辑所有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 1/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 2/option3 3/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 {
    # $1 = current folder
    # $2 = prefix upfolders

    pushd $PWD
    cd $1

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

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

    popd

}

workfolder .

除了有太多的错误外，sed替换中的$2没有得到解决，而是很少被替换。

Answer 1

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

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

workfolder .

陷阱是:在sed命令中使用$2 (第一次尝试没有扩展)和正确转义../作为第二个参数，形式可以在sed命令中使用。

Answer 2

安装插件代码段。使用以下代码添加一个新的代码段：

add_filter( 'wp_calculate_image_srcset_meta', '__return_null' );

按“保存更改和活动”按钮。此片段将从您的站点中删除srcset标记。码源