第一步：准备电子书图片（5分钟）
- 把电子书每一页截图或扫描成图片（建议命名：
page1.jpg,page2.jpg…） - 登录 Z-Blog 后台 → 附件管理 → 上传所有图片
- 上传后右键点击图片 → 复制图片地址（形如：
https://你的域名/zb_users/upload/2024/06/page1.jpg），存到记事本备用
📌 第二步：生成你的专属HTML文件（3分钟）
- 点击这个链接 👉 点我打开在线编辑器（安全无广告）
（手机/电脑浏览器都能打开） - 在编辑器中：
- 把
图片地址1换成你复制的第1页图片链接 - 把
章节名1换成“封面”等文字 - 依此类推（删掉不用的行，复制增加新行）
- 左侧HTML框：全选删除 → 粘贴我下面给的【简化代码】
- 按提示替换：
- 把
- 点击编辑器右上角 “Export” → “Export .zip” 下载文件
- 解压得到
index.html文件（这就是你的电子书页面！）
💡 简化代码（复制到在线编辑器左侧HTML框）：
html
预览
1<!DOCTYPE html>2<html>3<head>4 <meta charset="utf-8">5 <title>我的电子书</title>6 <style>7 body{margin:0;font-family:微软雅黑} 8 .box{display:flex; height:100vh} 9 .left{width:200px;overflow-y:auto;background:#f5f5f5;padding:10px} 10 .right{flex:1;display:flex;justify-content:center;align-items:center;padding:20px} 11 .item{padding:8px;cursor:pointer;border-radius:3px} 12 .item:hover{background:#e3f2fd} 13 .item.active{background:#1976d2;color:white} 14 img{max-width:100%;box-shadow:0 2px 10px #ccc}15 </style>16</head>17<body>18 <div class="box">19 <div class="left">20 <!-- 按格式修改下面内容 -->21 <div class="item active" data-src="图片地址1">章节名1</div>22 <div class="item" data-src="图片地址2">章节名2</div>23 <div class="item" data-src="图片地址3">章节名3</div>24 <!-- 需要更多章节？复制上面一行修改即可 -->25 </div>26 <div class="right">27 <img id="show" src="图片地址1">28 </div>29 </div>30 <script>31 document.querySelectorAll('.item').forEach(item=>{32 item.onclick=function(){33 document.querySelector('.active').classList.remove('active');34 this.classList.add('active');35 document.getElementById('show').src=this.dataset.src;36 }37 });38 </script>39</body>40</html>
📌 第三步：上传文件到网站（2分钟）
- 登录你的网站主机控制面板（如宝塔、cPanel）或使用 FTP工具（推荐”FileZilla”免费软件）
- 找到网站根目录（通常叫
wwwroot或public_html） - 新建文件夹 → 命名为
ebook（全小写） - 把第二步下载的
index.html拖进 ebook 文件夹 - 访问测试：浏览器输入
https://你的域名/ebook/（末尾带斜杠！）
✅ 能看到电子书 = 成功！ ❌ 打不开 = 检查文件名是否叫index.html
📌 第四步：在Z-Blog创建入口页面（1分钟）
- Z-Blog后台 → 页面管理 → 新建页面
- 标题填：
📖 电子书阅读（可自定义） - 内容编辑区 → 点击工具栏 “源码”按钮（<>图标）
- 粘贴这行代码（替换你的域名）：
html
预览1<iframe src="/ebook/" width="100%" height="800" frameborder="0" scrolling="auto"></iframe>2<p style="text-align:center;margin-top:10px;color:#666">提示：点击左侧目录切换页面，拖动滚动条查看全文</p>
- 点 “提交” → 完成！
🌈 效果预览
- 访问你刚创建的页面（如：
你的域名/page/ebook/） - 左侧点“封面”“第一章”… → 右侧自动换图！
- 手机打开也自适应（左右变上下布局）
❓ 小白常见问题
表格
| 问题 | 解决方案 |
|---|---|
| 不会用FTP/控制面板？ | 联系你的网站空间商客服，说“请帮我把index.html上传到网站根目录的ebook文件夹”，他们通常免费协助！ |
| 图片显示叉叉？ | 检查第二步：图片地址必须带 http:// 或 https://，且能单独在浏览器打开 |
| 想改颜色/文字？ | 用记事本打开 index.html，搜索“蓝色”“章节”等词直接修改，保存后重新上传覆盖 |
| 需要加更多章节？ | 用记事本打开 index.html，复制 <div class="item"...> 这一行，改文字和图片地址即可 |
| 担心安全？ | 此方案不修改Z-Blog核心文件，删掉 ebook 文件夹即还原，零风险！ |
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
