该怎么做：

Question

我用 httracks 抓住了一个网站，生成了不同级别的很多文件。但是，该网站使用picture / source个标记，其中 httrack 无法处理srcset个属性，所有这些图片都无法正常离线工作。

如果使用选项Attempt to detect all links (even in unknown tags/javascript code)（在winhttrack中）并将所有图像复制到本地存储，

httrack 可以看到链接。但它没有改变相对的道路。

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

我的想法是对每个文件夹进行递归，并附加../作为参数来插入/替换为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）

但源标记也必须包含匹配的pathes：

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 {
    # $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命令中可用的表单中正确转义../作为第二个参数

来自httrack的错误的srcset属性

该怎么做：

1 个答案: