图片转网页本地浏览如何将多级目录也写入index.html？

xp3000 · 发表于 2021-5-4 20:01:18

本帖最后由 xp3000 于 2021-5-7 10:41 编辑

原始代码由论坛WHY编写，因本地浏览来回切换麻烦，
所以想把其他目录添加到<h3>里面去，标签在最下面预留了
子目录index.html正常了，

@echo off&setlocal EnableDelayedExpansion
title 图片重命名生成网页，res文件夹必须和要处理图片文件夹在同一个目录
for /f "delims=:" %%i in ('findstr /n "^::::::" "%~f0"') do set "startLine=%%i"
for /f "delims=" %%i in ('dir /b /ad /s * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (
set "img=" & set n=0 & set Num=1000
set "fd=%%~nxi"
pushd "%%i"
(for %%j in (*.jpg *.bmp *.png) do (
set /a n+=1 & set /a Num+=1
if !Num! LSS 1000 (ren "%%j" "!Num:~-3!%%~xj") else ren "%%j" "!Num:~-3!%%~xj"
setlocal enabledelayedexpansion
for /f "delims=" %%k in ("!img!<img src="!Num:~-3!%%~xj" data-href="!Num:~-3!%%~xj" alt="Photo-!Num:~-3!%%~xj">") do (
endlocal & set "img=%%k"
)
)
popd
if defined img (
for /f "skip=%startLine% delims=" %%j in ('type "%~f0"') do (
set "s=%%j"
if "!s:<meta property=!" NEQ "!s!" (
echo; ^<meta property="og:title" content="!fd!"/^>
) else if "!s:<title>=!" NEQ "!s!" (
echo; ^<title^>!fd!^</title^>
) else if "!s:<img src=!" NEQ "!s!" (
echo; !img!
) else if "!s:amountImages:=!" NEQ "!s!" (
echo; amountImages: !n!,
) else if "!s:<h1>=!" NEQ "!s!" (
echo; ^<h3^>^<div class="style"^>^<a href="./index.html" "javascript:;"^>!fd!^</a^>^<img src="./001.jpg" width="156" height="122" /^>^</div^>^</h3^>
) else echo;!s!
if "!s:<h3>=!" NEQ "!s!" (cd %%i & setlocal
for /f "delims=" %%o in ('dir /a:d /b * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do set fd2=%%~nxo
echo; ^<h3^>^<div class="style"^>^<a href="./!fd2!/index.html" "javascript:;"^>!fd2!^</a^>^<img src="./!fd2!/001.jpg" width="156" height="122" /^>^</div^>^</h3^>
endlocal & popd
)
)
) > "%%i\index.html"
)
cd ..&if not exist "res" md res&copy "%~dp0res" "res"
)
pause & exit
:::::: htmlCodeStart ::::::
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta property="og:title" content="MyPhotoFolder"/>
<meta charset="GB2312">
<title>MyPhotoFolder</title>
<meta name="keywords" content="">
<title>MyPhotoFolder</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.png" data-href="1.png" alt="Photo-1">
</div>
</div>
<div id="navigation" class="right-top">
<nav>
<a id="prev" class="icon-prev" title="Previous Image"> </a>
<a id="next" class="icon-next" title="Next Image"> </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><img style="display: none" src="" /></h2>
<br><br /><br><br />
<h1><a>MyPhotoFolder</a></h1>
<h3>
</div>
</div>
<div id="links" class="left-bottom">
<div class="sharing">
</div>
</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: 1,
wrapAround: true,
fontSize: 13,
showPhotoDataFromStart: false,
slideshowInterval: 3,
opacity: 30
});
});
}
</script>
</body></html>

复制代码

迅雷下载模版：
链接：https://pan.xunlei.com/s/VMZr8JL4ANW63kVQKnb0HuEfA1
提取码：grqh

原贴也有样本下载
http://www.bathome.net/thread-53861-1-1.html

在common.css添加几行就和迅雷下载地址的一样了
.style{ display:block;text-align:center; position:relative;}
.style img{ display:none;}
.style:hover img{ position:absolute; left:50%; top:-122px; margin-left:-75px; padding-top:-50px; display:block;}

xp3000 · 发表于 2021-5-5 15:57:06

38、39、40行删掉，单独用这个
，弄了一个得运行两次BAT才能成功，第一次没检测到输出的index.html第二次检测到index.html才复制res所有文件夹

@echo off&setlocal EnableDelayedExpansion
title 图片重命名生成网页，res文件夹必须和要处理图片文件夹在同一个目录
for /f "delims=" %%a in ('dir /b /ad /s * ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (
pushd %%a&set A=%%a
@for /f "delims=" %%b in ('dir /a:d /B %%a\* ^| findstr /i /v "\\res$"^| findstr /i /v "\\thumbs$"') do (set B=%%b
for /f "delims=" %%c in ('dir /b/a-d/oN "%%b\index.html"') do (
popd
if exist "!A!\!B!\index.html" md "!A!\res" & copy "%~dp0res" "!A!\res"
))
)
pause

复制代码

…………
另有可能用到缩略图转换

@echo off&setlocal enabledelayedexpansion&cd /d %~dp0
if not exist "C:\Windows\System32\nconvert.exe" (
echo 没有nconvert,请前往下面地址或其他网站下载，放入C:\Windows\System32
echo,http://bcn.bathome.net/s/tool/index.html?key=nconvert
pause&exit /b
)
set /p "str=请输入缩略图最大像素："
::排除res、thumbs、slides文件夹
for /f "delims=" %%a in ('dir /ad /b /s * ^| findstr /i /v "\\res$" ^| findstr /i /v "\\thumbs$" ^| findstr /i /v "\\slides$"') do (
for %%i in ("%%a\*.jpg" "%%a\*.png" "%%a\*.bmp") do (
if not exist "%%a\%%~nxi" md "%%a\thumbs")
cd "%%a"&echo.&echo 进入 "%%a" 文件夹查找图片. . .&echo 缩略图将存放于各自文件夹的thumbs内. . .
for /f "delims=" %%b in ('dir /a-d /b "*.jpg" "*.png"') do (
for /f "tokens=1* delims=:" %%i in ('nconvert.exe -info "%%b"^|findstr /i /l /c:"Width"') do set W=%%j&set W=!W: =!
for /f "tokens=1* delims=:" %%k in ('nconvert.exe -info "%%b"^|findstr /i /l /c:"Height"') do set H=%%l&set H=!H: =!
if !W! leq !H! (set W=0&set H=!str!) else (set W=!str!&set H=0)
nconvert -rmeta -quiet -overwrite -out jpeg -ratio -resize !W! !H! -c 8 -o "%%a\thumbs\%%~nb.jpg" "%%~nxb"
)
)
echo.
echo,创建缩略图完成. . .
pause&exit /b

复制代码

		自动登录	找回密码
密码			注册

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

[其他] 图片转网页本地浏览如何将多级目录也写入index.html？