[新手上路]批处理新手入门导读[视频教程]批处理基础视频教程[视频教程]VBS基础视频教程[批处理精品]批处理版照片整理器
[批处理精品]纯批处理备份&还原驱动[批处理精品]CMD命令50条不能说的秘密[在线下载]第三方命令行工具[在线帮助]VBScript / JScript 在线参考
返回列表 发帖

[其他] 如何将多个文件夹的图片批量生成单独的网页

有多个文件夹,里面有图片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-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.     if defined img (
  16.         for /f "skip=%startLine% delims=" %%j in ('type "%~f0"') do (
  17.             set "s=%%j"
  18.             setlocal enabledelayedexpansion
  19.             if "!s:<meta property=!" NEQ "!s!" (
  20.                 echo;    ^<meta property="og:title" content="!fd!"/^>
  21.             ) else if "!s:<title>=!" NEQ "!s!" (
  22.                 echo;    ^<title^>!fd!^</title^>
  23.             ) else if "!s:<img src=!" NEQ "!s!" (
  24.                 echo;            !img!
  25.             ) else if "!s:amountImages:=!" NEQ "!s!" (
  26.                 echo;                    amountImages: !n!,
  27.             ) else if "!s:<h3>=!" NEQ "!s!" (
  28.                 echo;            ^<h3^>^<a class="folderTitle" style="margin-left:15px;" data-folderLevel="1"^>!fd!^</a^>^</h3^>
  29.             ) else echo;!s!
  30.             endlocal
  31.         )
  32.     ) > "%%i\index.html"
  33. )
  34. pause & exit
  35. :::::: htmlCodeStart ::::::
  36. <!DOCTYPE html>
  37. <head>
  38.     <meta name="viewport" content="initial-scale=1.0">
  39.     <meta property="og:title" content="MyPhotoFolder"/>
  40.     <meta charset="GB2312">
  41.     <meta name="keywords" content="">
  42.     <title>MyPhotoFolder</title>
  43.     <link rel="stylesheet" href="../res/common.css?v=1.6.3">
  44. </head>
  45. <body>
  46.     <div id="carousel" class="carousel full-page"><div id="pictures"></div></div>
  47.     <div id="thumbnailCollapse" class="left-bottom">
  48.         <div id="thumbIcons">
  49.             <div class="showThumbs"></div><div class="showThumbs"></div><div class="showThumbs"></div>
  50.         </div>
  51.     </div>
  52.     <div class="thumbs left-bottom">
  53.         <div class="thumbs-nav">
  54.             <div id="prevThumbs" class="icon-prev hidden"></div>
  55.             <div id="nextThumbs" class="icon-next hidden"></div>
  56.         </div>
  57.         <div id="thumbs" style="left: 0px">
  58.             <img src="1.png" data-href="1.png" alt="Photo-1">
  59.         </div>
  60.     </div>
  61.     <div id="navigation" class="right-top">
  62.         <nav>
  63.             <a id="prev" class="icon-prev" title="Previous Image">&nbsp;</a>
  64.             <a id="next" class="icon-next" title="Next Image">&nbsp;</a>
  65.         </nav>
  66.         <div id="fullscreen"><div id="fullscreenLogo" title="Go Fullscreen"></div></div>
  67.         <div id="slideshow"><div id="slideshowIcon" ></div></div>
  68.     </div>
  69.     <div id="imageInfo" class="right-bottom"><h2 id="imageCount"></h2></div>
  70.     <div id="sidebar" class="left-top">
  71.         <div id="folders">
  72.             <h2><a href="../index.html" class="folderTitle" style="margin-left:16px;" data-folderLevel="1">Home</a></h2>
  73.             <h3><a class="folderTitle" style="margin-left:15px;" data-folderLevel="1">MyPhotoFolder</a></h3>
  74.         <div id="links" class="left-bottom">               
  75.         <div class="sharing">
  76.     </div>
  77.     <script>window.jQuery || document.write('<script src="../res/jquery-1.10.2.min.js"><\/script>');</script>
  78.     <script src="../res/main.js"></script>
  79.     <script src="../res/jquery.touchSwipe.min.js"></script>               
  80.     <script>
  81.         // Fully version: 1.6.3
  82.         if( $("html").hasClass("ie8") || $("html").hasClass("ie7") ) {
  83.             document.open();document.body.innerHTML = '';document.write(html); document.close();
  84.         }else {
  85.             $(window).load(function(){
  86.                 initSkin({
  87.                     animationInterval: 1000,
  88.                     amountImages: 4,
  89.                     wrapAround: true,
  90.                     fontSize: 13,
  91.                     showPhotoDataFromStart: false,
  92.                     slideshowInterval: 3,
  93.                     opacity: 30,
  94.                 });
  95.             });
  96.         }
  97.     </script>
  98. </body></html>
复制代码
1

评分人数

TOP

本帖最后由 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()
复制代码
1

评分人数

TOP

非常感谢,学习了

TOP

res文件夹是需要排除的,目录里面没有图片的文件夹也被生成文件了,这个作为本地浏览还是很不错的,图片一个个播放

TOP

回复 5# xp3000


    已修改。
1

评分人数

TOP

返回列表