Board logo

标题: [其他] 如何将多个文件夹的图片批量生成单独的网页 [打印本页]
作者: xp3000    时间: 2019-9-20 17:31     标题: 如何将多个文件夹的图片批量生成单独的网页

有多个文件夹，里面有图片jpg,bmp,png格式,如何生成呢？
大概是这样的，需要在图片所在所有的目录内生成index.html

<!DOCTYPE html>
<head>
                <meta name="viewport" content="initial-scale=1.0">
                <meta property="og:title" content="Kaya Yin"/>
                <meta charset="GB2312">
                <meta name="keywords" content="">
                <title>Kaya Yin</title>
                <link rel="stylesheet" href="../res/common.css?v=1.6.3">
</head>
        <body>
               
               
                <div id="carousel" class="carousel full-page">
                        <div id="pictures"></div>
                </div>

               
                <div id="thumbnailCollapse" class="left-bottom">
                        <div id="thumbIcons">
                                <div class="showThumbs"></div>
                                <div class="showThumbs"></div>
                                <div class="showThumbs"></div>
                        </div>
                </div>
               
                <div class="thumbs left-bottom">
                        <div class="thumbs-nav">
                                <div id="prevThumbs" class="icon-prev hidden"></div>
                                <div id="nextThumbs" class="icon-next hidden"></div>
                        </div>
                        <div id="thumbs" style="left: 0px">
                                <img  src="1.jpg" data-href="1.jpg" alt="Photo-1"><img  src="2.jpg" data-href="2.jpg" alt="Photo-2"><img  src="3.jpg" data-href="3.jpg" alt="Photo-3"><img  src="4.jpg" data-href="4.jpg" alt="Photo-4">
                        </div>
                </div>

                <div id="navigation" class="right-top">
                        <nav>
                                <a id="prev" class="icon-prev" title="Previous Image">&nbsp;</a>
                                <a id="next" class="icon-next" title="Next Image">&nbsp;</a>
                        </nav>
                       
                        <div id="fullscreen">
       
                                <div id="fullscreenLogo" title="Go Fullscreen">
                                </div>
       
                        </div>
                        <div id="slideshow">
       
                                <div id="slideshowIcon" >
                                </div>
       
                        </div>
                </div>

                <div id="imageInfo" class="right-bottom">
                       
                                <h2 id="imageCount"></h2>
                       
                </div>
               
               
               
                <div id="sidebar" class="left-top">
                        <div id="folders">
                                <h2><a href="../index.html" class="folderTitle" style="margin-left:16px;" data-folderLevel="1">Home</a></h2>
                                </h2>
                                <h3><a class="folderTitle" style="margin-left:15px;" data-folderLevel="1">Kaya Yin</a></h3>
               
                <div id="links" class="left-bottom">               
                        <div class="sharing">
                        </div>
                <script>window.jQuery || document.write('<script src="../res/jquery-1.10.2.min.js"><\/script>');</script>
                <script src="../res/main.js"></script>
                <script src="../res/jquery.touchSwipe.min.js"></script>               
                <script>
               
                        // Fully version: 1.6.3

                        if( $("html").hasClass("ie8") || $("html").hasClass("ie7") ) {

                                 document.open();

                                 document.body.innerHTML = '';

                                document.write(html);

                                 document.close();
                                
                        }

                        else {
                               
                                $(window).load(function(){
                                        initSkin({
                                                animationInterval: 1000,
                                                amountImages: 4,
                                                wrapAround: true,
                                                fontSize: 13,
                                                showPhotoDataFromStart: false,
                                                slideshowInterval: 3,
                                                opacity: 30,
                                        });
                                });

                        }

                </script>
</body>
</html>


样本太大，分成两部分了

<title>图片目录</title>
amountImages: 图片数量,
有单个文件夹处理的工具太大不让发
作者: WHY    时间: 2019-9-22 18:25

本帖最后由 WHY 于 2019-9-28 16:28 编辑 
  1. @echo off

  2. for /f "delims=:" %%i in ('findstr /n "^::::::" "%~f0"') do set "startLine=%%i"

  3. for /f "delims=" %%i in ('dir /b /ad /s * ^| findstr /i /v "\\res$"') do (

  4.     set "img=" & set n=0

  5.     set "fd=%%~nxi"

  6.     pushd "%%i"

  7.     for %%j in (*.jpg *.bmp *.png) do (

  8.         set "f=%%j" & set /a n+=1

  9.         setlocal enabledelayedexpansion

  10.         for /f "delims=" %%k in ("!img!<img src="!f!" data-href="!f!" alt="Photo-!n!">") do (

  11.             endlocal & set "img=%%k"

  12.         )

  13.     )

  14.     popd

  15. 

  16.     if defined img (

  17.         for /f "skip=%startLine% delims=" %%j in ('type "%~f0"') do (

  18.             set "s=%%j"

  19.             setlocal enabledelayedexpansion

  20.             if "!s:<meta property=!" NEQ "!s!" (

  21.                 echo;    ^<meta property="og:title" content="!fd!"/^>

  22.             ) else if "!s:<title>=!" NEQ "!s!" (

  23.                 echo;    ^<title^>!fd!^</title^>

  24.             ) else if "!s:<img src=!" NEQ "!s!" (

  25.                 echo;            !img!

  26.             ) else if "!s:amountImages:=!" NEQ "!s!" (

  27.                 echo;                    amountImages: !n!,

  28.             ) else if "!s:<h3>=!" NEQ "!s!" (

  29.                 echo;            ^<h3^>^<a class="folderTitle" style="margin-left:15px;" data-folderLevel="1"^>!fd!^</a^>^</h3^>

  30.             ) else echo;!s!

  31.             endlocal

  32.         )

  33.     ) > "%%i\index.html"

  34. )

  35. pause & exit

  36. 

  37. :::::: htmlCodeStart ::::::

  38. <!DOCTYPE html>

  39. <head>

  40.     <meta name="viewport" content="initial-scale=1.0">

  41.     <meta property="og:title" content="MyPhotoFolder"/>

  42.     <meta charset="GB2312">

  43.     <meta name="keywords" content=""> 

  44.     <title>MyPhotoFolder</title>

  45.     <link rel="stylesheet" href="../res/common.css?v=1.6.3">

  46. </head>

  47. <body>

  48.     <div id="carousel" class="carousel full-page"><div id="pictures"></div></div>

  49.     <div id="thumbnailCollapse" class="left-bottom">

  50.         <div id="thumbIcons">

  51.             <div class="showThumbs"></div><div class="showThumbs"></div><div class="showThumbs"></div>

  52.         </div>

  53.     </div>

  54.     <div class="thumbs left-bottom">

  55.         <div class="thumbs-nav">

  56.             <div id="prevThumbs" class="icon-prev hidden"></div>

  57.             <div id="nextThumbs" class="icon-next hidden"></div>

  58.         </div>

  59.         <div id="thumbs" style="left: 0px">

  60.             <img src="1.png" data-href="1.png" alt="Photo-1">

  61.         </div>

  62.     </div>

  63.     <div id="navigation" class="right-top">

  64.         <nav>

  65.             <a id="prev" class="icon-prev" title="Previous Image">&nbsp;</a>

  66.             <a id="next" class="icon-next" title="Next Image">&nbsp;</a>

  67.         </nav>

  68.         <div id="fullscreen"><div id="fullscreenLogo" title="Go Fullscreen"></div></div>

  69.         <div id="slideshow"><div id="slideshowIcon" ></div></div>

  70.     </div>

  71.     <div id="imageInfo" class="right-bottom"><h2 id="imageCount"></h2></div>

  72.     <div id="sidebar" class="left-top">

  73.         <div id="folders">

  74.             <h2><a href="../index.html" class="folderTitle" style="margin-left:16px;" data-folderLevel="1">Home</a></h2>

  75.             <h3><a class="folderTitle" style="margin-left:15px;" data-folderLevel="1">MyPhotoFolder</a></h3>

  76.         <div id="links" class="left-bottom">                

  77.         <div class="sharing">

  78.     </div>

  79.     <script>window.jQuery || document.write('<script src="../res/jquery-1.10.2.min.js"><\/script>');</script>

  80.     <script src="../res/main.js"></script>

  81.     <script src="../res/jquery.touchSwipe.min.js"></script>                

  82.     <script>

  83.         // Fully version: 1.6.3

  84.         if( $("html").hasClass("ie8") || $("html").hasClass("ie7") ) {

  85.             document.open();document.body.innerHTML = '';document.write(html); document.close();

  86.         }else {

  87.             $(window).load(function(){

  88.                 initSkin({

  89.                     animationInterval: 1000,

  90.                     amountImages: 4,

  91.                     wrapAround: true,

  92.                     fontSize: 13,

  93.                     showPhotoDataFromStart: false,

  94.                     slideshowInterval: 3,

  95.                     opacity: 30,

  96.                 });

  97.             });

  98.         }

  99.     </script>

  100. </body></html>
复制代码
作者: WHY    时间: 2019-9-22 19:46

本帖最后由 WHY 于 2019-9-28 16:33 编辑

Test.ps1
  1. $str = @'

  2. <!DOCTYPE html>

  3. <head>

  4.     <meta name="viewport" content="initial-scale=1.0">

  5.     <meta property="og:title" content="MyPhotoFolder"/>

  6.     <meta charset="GB2312">

  7.     <meta name="keywords" content=""> 

  8.     <title>MyPhotoFolder</title>

  9.     <link rel="stylesheet" href="../res/common.css?v=1.6.3">

  10. </head>

  11. <body>

  12.     <div id="carousel" class="carousel full-page"><div id="pictures"></div></div>

  13.     <div id="thumbnailCollapse" class="left-bottom">

  14.         <div id="thumbIcons">

  15.             <div class="showThumbs"></div><div class="showThumbs"></div><div class="showThumbs"></div>

  16.         </div>

  17.     </div>

  18.     <div class="thumbs left-bottom">

  19.         <div class="thumbs-nav">

  20.             <div id="prevThumbs" class="icon-prev hidden"></div>

  21.             <div id="nextThumbs" class="icon-next hidden"></div>

  22.         </div>

  23.         <div id="thumbs" style="left: 0px">

  24.             <img src="1.png" data-href="1.png" alt="Photo-1">

  25.         </div>

  26.     </div>

  27.     <div id="navigation" class="right-top">

  28.         <nav>

  29.             <a id="prev" class="icon-prev" title="Previous Image">&nbsp;</a>

  30.             <a id="next" class="icon-next" title="Next Image">&nbsp;</a>

  31.         </nav>

  32.         <div id="fullscreen"><div id="fullscreenLogo" title="Go Fullscreen"></div></div>

  33.         <div id="slideshow"><div id="slideshowIcon" ></div></div>

  34.     </div>

  35.     <div id="imageInfo" class="right-bottom"><h2 id="imageCount"></h2></div>

  36.     <div id="sidebar" class="left-top">

  37.         <div id="folders">

  38.             <h2><a href="../index.html" class="folderTitle" style="margin-left:16px;" data-folderLevel="1">Home</a></h2>

  39.             <h3><a class="folderTitle" style="margin-left:15px;" data-folderLevel="1">MyPhotoFolder</a></h3>

  40.         <div id="links" class="left-bottom">                

  41.         <div class="sharing">

  42.     </div>

  43.     <script>window.jQuery || document.write('<script src="../res/jquery-1.10.2.min.js"><\/script>');</script>

  44.     <script src="../res/main.js"></script>

  45.     <script src="../res/jquery.touchSwipe.min.js"></script>                

  46.     <script>

  47.         // Fully version: 1.6.3

  48.         if( $("html").hasClass("ie8") || $("html").hasClass("ie7") ) {

  49.             document.open();document.body.innerHTML = '';document.write(html); document.close();

  50.         }else {

  51.             $(window).load(function(){

  52.                 initSkin({

  53.                     animationInterval: 1000,

  54.                     amountImages: 4,

  55.                     wrapAround: true,

  56.                     fontSize: 13,

  57.                     showPhotoDataFromStart: false,

  58.                     slideshowInterval: 3,

  59.                     opacity: 30,

  60.                 });

  61.             });

  62.         }

  63.     </script>

  64. </body></html>

  65. '@

  66. dir . -Include *.jpg, *.png, *.bmp -Recurse|?{$_ -is [IO.FileInfo] -and $_.Directory.Name -ne 'Res'}|group DirectoryName|forEach{

  67.     $n = 0;

  68.     $a = $_.Group | forEach{ '<img src="' + $_.Name + '" data-href="' + $_.Name + '" alt="Photo-'+ ++$n + '">' };

  69.     $s = $str -replace 'MyPhotoFolder', [IO.Path]::GetFileName($_.Name);

  70.     $s = $s -replace '<img src=.*>', ($a -join '');

  71.     $s = $s -replace '(?<=amountImages: )4', $_.Count;

  72.     sc -Path ($_.Name + '\index.html') -Value $s;

  73. }

  74. echo 'Done';

  75. [Console]::ReadKey()
复制代码
作者: xp3000    时间: 2019-9-24 14:18

非常感谢，学习了
作者: xp3000    时间: 2019-9-26 11:21

res文件夹是需要排除的，目录里面没有图片的文件夹也被生成文件了，这个作为本地浏览还是很不错的，图片一个个播放
作者: WHY    时间: 2019-9-28 16:34

回复 5# xp3000


    已修改。



欢迎光临 批处理之家 (http://www.bathome.net/) Powered by Discuz! 7.2