写一个简单的下载后预览swiper的页面

最新推荐文章于 2023-09-20 21:44:59 发布

闹闹没有闹

最新推荐文章于 2023-09-20 21:44:59 发布

阅读量130

点赞数

分类专栏： html 小demo node 文章标签： css html javascript

本文链接：https://blog.csdn.net/qq_41893686/article/details/129970329

版权

小demo 同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

node

1 篇文章 0 订阅

订阅专栏

该文章描述了一个使用Node.js读取Swiper演示目录中的HTML文件，然后在这些文件上添加a和iframe标签的过程。通过遍历文件和替换模板数据，最终生成一个新的HTML文件。模板文件包含一个左侧的目录列表和右侧的iframe，用于显示所选的Swiper演示。

摘要由CSDN通过智能技术生成

思路：
1.获取swiper所有的html文件，
2.为其添加a,iframe 标签，遍历数据的时候一一对应
3.获取模版数据，最终生成html数据

在这里插入图片描述

目录结构：

在这里插入图片描述

// index.js文件
const fs = require("fs")
const path = require("path")

var temp1 = ''
fs.readdir('./public/demos/', 'utf-8', function (err, data) {
    let temp = ''
    data.forEach(item => {
        if (data == 'images') return
        let a = `<li><a class='catenate' href="./public/demos/${item}" target="swiper_name">${item}</li>`
        temp += a
    })
    fs.readFile('./template.text', 'utf8', function (err, data) {
        let newData = data.replace('link', temp)

        fs.writeFile('./index.html', (newData), function (err) {
            if (err) {
                console.log(err + `----文件写入失败`)

            }
            console.log(err + `----文件写入成功`)
        })
    })
})

// 模版文件
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        
      }
      .box {
        width: 100vw;
        height: 100vh;
        display: flex;
        overflow: hidden;
      }
      .left {
        width: 230px;
        overflow-y: auto;
        background-color: bisque;
      }
      .left .catenate{
        display: inline-block;
        width: 100%;
        color: #4c4c4c;
        padding: 5px 0px;
      }
      .left .catenate:hover,.left .catenate:focus{
        background-color: #409EFF;
      }
      .right {
        width:calc(100vw - 230px);
        height:100vh;
      }

    </style>
  </head>
  <body>
    <div class="box">
      <div class="left">
        <ul>
           link
        </ul>
      </div>
      <div class="right">
        <iframe src="" style="width:calc(100vw - 230px);height:100vh" frameborder="0" name="swiper_name"></iframe>
      </div>
    </div>
     <script>
      window.onload =function(){
         let liFirstDom = document.getElementsByTagName('li')[0]
          liFirstDom.firstChild.click()
          liFirstDom.firstChild.focus()
      }
    </script>
  </body>
</html>