Alist简单使用指南

一 Alist 简介

一款支持多种存储的目录文件列表程序,支持 web 浏览与 webdav,后端基于gin,前端使用react。
下面使用 docker和caddy(主要用来支持https)来部署

效果

35f76c44b0af7cef6708e3f11bb51a62.png

二 docker部署

  1. 配置docker-compose.yml

    version: "3.7"
    
    services:
        alist:
          image: xhofe/alist:v2
          container_name: alist
    #      ports:
    #        - "5244:5244"
          volumes:
            - "./:/opt/alist/data"
          network_mode: "host"
        caddyd:
          image: caddy
          container_name: caddy
          restart: unless-stopped
    #      ports:
    #        - "80:80"
    #        - "443:443"
          network_mode: "host"
          volumes:
            - $PWD/Caddyfile:/etc/caddy/Caddyfile
            - $PWD/caddy/certs:/etc/caddycerts
    
  2. 配置 Caddyfile 文件

    		cloud.**.** {
    			 tls  fafaffafaf@qq.com
    	   		 reverse_proxy 127.0.0.1:5244
    		}
    
  3. 启动项目

    docker-compose up -d
    

三 配置信息

本地服务器的文件 对应 网盘根目录

游客上传文件夹 有密码,可以让其他人上传文件

6b0302b64848fac077daee091d1418e5.jpg

19b92e6048a5600e453cf2f6e3cfa461.png

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,以下是一个简单的关于广州旅游的网站设计示例: ``` <!DOCTYPE html> <html> <head> <title>广州旅游指南</title> <style> /* 导航栏样式 */ nav { background-color: #333; overflow: hidden; } nav a { float: left; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav a:hover { background-color: #ddd; color: black; } /* 标题样式 */ h1 { text-align: center; margin-top: 50px; } /* 特色景点样式 */ .spot { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 50px; } .spot .item { margin: 20px; text-align: center; } .spot img { width: 200px; height: 150px; object-fit: cover; border-radius: 10px; } .spot h3 { margin-top: 10px; } /* 旅游路线样式 */ .route { margin-top: 50px; } .route h2 { text-align: center; } .route ul { list-style-type: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; } .route li { margin: 20px; text-align: center; } .route img { width: 200px; height: 150px; object-fit: cover; border-radius: 10px; } .route h3 { margin-top: 10px; } /* 联系表单样式 */ form { margin-top: 50px; text-align: center; } input[type=text], textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; margin-top: 6px; margin-bottom: 16px; resize: vertical; } input[type=submit] { background-color: #333; color: white; padding: 12px 20px; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #ddd; color: black; } </style> </head> <body> <!-- 导航栏 --> <nav> <a href="#">首页</a> <a href="#">特色景点</a> <a href="#">旅游路线</a> <a href="#">联系我们</a> </nav> <!-- 标题 --> <h1>广州旅游指南</h1> <!-- 特色景点 --> <div class="spot"> <div class="item"> <img src="img/spot1.jpg" alt="珠江夜游"> <h3>珠江夜游</h3> </div> <div class="item"> <img src="img/spot2.jpg" alt="白云山"> <h3>白云山</h3> </div> <div class="item"> <img src="img/spot3.jpg" alt="陈家祠"> <h3>陈家祠</h3> </div> <div class="item"> <img src="img/spot4.jpg" alt="沙面"> <h3>沙面</h3> </div> <div class="item"> <img src="img/spot5.jpg" alt="上下九步行街"> <h3>上下九步行街</h3> </div> <div class="item"> <img src="img/spot6.jpg" alt="黄埔军校"> <h3>黄埔军校</h3> </div> </div> <!-- 旅游路线 --> <div class="route"> <h2>旅游路线推荐</h2> <ul> <li> <img src="img/route1.jpg" alt="珠江夜游"> <h3>珠江夜游</h3> </li> <li> <img src="img/route2.jpg" alt="白云山"> <h3>白云山</h3> </li> <li> <img src="img/route3.jpg" alt="陈家祠"> <h3>陈家祠</h3> </li> <li> <img src="img/route4.jpg" alt="沙面"> <h3>沙面</h3> </li> <li> <img src="img/route5.jpg" alt="上下九步行街"> <h3>上下九步行街</h3> </li> <li> <img src="img/route6.jpg" alt="黄埔军校"> <h3>黄埔军校</h3> </li> </ul> </div> <!-- 联系表单 --> <div class="form"> <h2>联系我们</h2> <form> <label for="name">姓名</label> <input type="text" id="name" name="name" placeholder="请输入你的姓名"> <label for="email">电子邮件</label> <input type="text" id="email" name="email" placeholder="请输入你的电子邮件"> <label for="message">留言</label> <textarea id="message" name="message" placeholder="请输入你的留言"></textarea> <input type="submit" value="提交"> </form> </div> </body> </html> ``` 你可以将这段代码保存为一个 `.html` 文件,并在浏览器中打开它,就可以看到一个简单的关于广州旅游的网站了。请注意,这只是一个示例,你可以根据自己的需要进行修改和扩展。如果需要更多的页面和功能,可以添加更多的HTML代码和CSS样式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值