登录 / 注册
约 2400 字
8 分钟

Openlist部署教程

2026年2月22日
2026年3月7日
科技

文章摘要

Openlist 是 Alist 的理想替代方案，具有共享家庭相册、团队协作、个人备份、跨平台观影和学习资料库等功能。用户可以通过 Zeabur 部署 Openlist，并获得每月 5 美元的额度。部署步骤包括打开模板、注册账号、选择部署方式、绑定域名、获取默认密码和登录并改密。同时，Openlist 支持美化和自定义，用户可以添加音乐播放器、烟花特效和一言 API 等功能。

自 Alist 项目被收购后，为了延续其开源精神，Openlist 应运而生，成为 Alist 的理想替代方案。

更棒👍的是，Zeabur每月赠送 5刀💵额度，恰好足够运行 Openlist！因此，强烈推荐大家部署一套 Openlist 🤓。

以下是关于Openlist的介绍:

Openlist
Openlist

仓库: [OpenListTeam/OpenList](https://github.com/OpenListTeam/OpenList)

为什么选择openlist?

Openlist 适合普通人的使用场景：

1. 共享家庭相册：生成一次性的外链，朋友点开就能看照片，不用担心被压缩或流量不够。

2. 团队协作：大家共用一个“云文件夹”，统一管理权限，不用为每个平台单独注册账号。

3. 个人备份：把重要文件同时备份到阿里云盘和 Google Drive，万一出问题，一键就能恢复。

4. 跨平台观影：电影、剧集上传到网盘，播放器直接读取链接，播放流畅不卡顿。

5. 学习资料库：教材、PDF 等大文件上传一次，手机电脑随时能看或下载，方便又省事。

部署教程:

1.先在Zeabur上打开Openlist的[template(模版)](https://zeabur.com/zh-CN/templates/Y3CSXM)

2.注册Zeabur账号(需要+86手机号)

3.选择共享容器部署(这里推荐腾讯云的US,晚高峰表现优秀)

4.自己按照教程添加一个域名

5.在日志中查找密码,用户名为admin,登入账号

6更改密码！！！(*3)

恭喜你的网站上线🎉

2.24提醒:zeabur将于3/15关闭创建,抓紧上车

日期

变更

2026/2/21

创建项目时默认导向专属主机选项，仍可切换回共享集群

2026/3/15

停止在共享集群上创建新项目

2026/4/1

停止在共享集群的既有项目中创建新服务

关于美化:

Openlist美化
Openlist美化

自定义头部:

HTML
<!-- 引入自定义字体 -->

<link rel="stylesheet" href="https://s4.zstatic.net/ajax/libs/lxgw-wenkai-webfont/1.7.0/lxgwwenkai-regular.min.css">

<style>

    /* 移除原生视频控件 */

    video::-webkit-media-controls {

        display: none;

    }

    /* 设置背景图片样式 */

    body {

        background-repeat: no-repeat;

        background-size: cover;

        background-attachment: fixed;

        background-position: center;

    }

      /* 加了个深色遮罩，爱护你的眼睛 */

    body.hope-ui-dark {

        background-color: rgb(32, 36, 37);

        background-image: linear-gradient(rgba(32, 36, 37, 0.7), rgba(32, 36, 37, 0.7)), url('https://i.pximg.org/img-original/img/2025/08/16/19/18/16/133961035_p0.jpg');

    }

    /* 在此处的url()里修改背景图片地址 */

    body.hope-ui-light {

        background-image: url('https://i.pximg.org/img-original/img/2025/08/16/17/30/08/133957035_p0.png');

    }

    

    /* 统一站点公告的样式 */

    .hope-ui-light .hope-c-PJLV-ikJQsXT-css {

        background: rgba(255, 255, 255, 0.8) !important;

        backdrop-filter: blur(0) !important;

    }

    

    .hope-ui-dark .hope-c-PJLV-ikJQsXT-css {

        background: rgb(32, 36, 37) !important;

        backdrop-filter: blur(0) !important;

    }

    

    /* 自定义字体 */

    * {

        font-family: "LXGW WenKai", sans-serif;

    }

</style>

<!-- Font6，自定义底部使用的图标和字体文件-->

<link href="https://npm.elemecdn.com/font6pro@6.0.1/css/all.min.css" rel="stylesheet">

自定义内容

HTML
<!-- 修正部分区域的透明 -->

<style>
    .hope-ui-light,
    .hope-ui-dark {
        --hope-colors-background: transparent;
    }
</style>


<script type="module">
    // v6


    // 提供用来监听代码控制的 url 变化的事件
    (() => {
        const wrapHistoryMethod = (type) => {
            const orig = history[type];
            return function (...args) {
                const rv = orig.apply(this, args);
                const event = new CustomEvent(type, { detail: args });
                window.dispatchEvent(event);
                return rv;
            };
        };
        history.pushState = wrapHistoryMethod('pushState');
        history.replaceState = wrapHistoryMethod('replaceState');
    })();
    
    class Beautifier {
        /**
            * Beautifier 类用于美化页面背景色
            * 
            * 其提供了3个方法：
            * - observe: 开始监听页面变化并美化背景色
            * - disconnect: 停止监听页面变化
            * - undo: 恢复页面背景色到默认状态
            *
            * 可以通过window.beautifier访问实例对象
            * 
         */
        static ignoredSelectors = [
            '.hope-tooltip', // 提示小标签及其装饰
            '.hope-tooltip__arrow',
            '.hope-checkbox__control',// 复选框
            '.hope-modal__overlay', // 模态框遮罩 
            '.hope-drawer__overlay', // 抽屉遮罩
            '.hope-select__option', // 下拉选项
            '.monaco-editor *', // 代码编辑器
            'button:not(.hope-menu__trigger)', // 除目录外按钮
            'svg' // SVG 图标
        ];
    
        static getSelector(mainSelector) {
            return `${mainSelector} :not(${Beautifier.ignoredSelectors.join('):not(')})`;
        }
    
        static lightSelector = Beautifier.getSelector('.hope-ui-light');
        static darkSelector = Beautifier.getSelector('.hope-ui-dark');
    
        static lightBgColor = 'rgba(255, 255, 255, 0.8)';
        static darkBgColor = 'rgb(32, 36, 37)';
    
        static specificPrefix = 'rgba(132, 133, 141,';
    
        constructor() {
            this.observer = null;
        }
    
        /**
         * @param {'light'|'dark'} theme
         */
        #rewriteStyle(theme) {
            let selector = theme === 'light' ? Beautifier.lightSelector : Beautifier.darkSelector;
            let bgColor = theme === 'light' ? Beautifier.lightBgColor : Beautifier.darkBgColor;
    
            document.querySelectorAll(selector).forEach(element => {
                const computedStyle = getComputedStyle(element);
    
                if (computedStyle.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
                    !computedStyle.backgroundColor.startsWith(Beautifier.specificPrefix)) {
                    element.style.backgroundColor = bgColor;
    
                    element.setAttribute('data-beautified', 'true');
                }
            });
        }
    
        #beautify() {
            if (!location.pathname.startsWith('/@manage') && !location.pathname.startsWith('/@login')) {
                this.#rewriteStyle('light');
                this.#rewriteStyle('dark');
            }
        }
    
        observe() {
            this.observer = new MutationObserver(this.#beautify.bind(this));
            this.observer.observe(document.body, {
                childList: true,
                subtree: true
            });
    
            this.#beautify();
        }
    
        disconnect() {
            if (this.observer) {
                this.observer.disconnect();
            }
        }
    
        undo() {
            this.disconnect();
    
            document.body.querySelectorAll('[data-beautified]').forEach(element => {
                element.style.backgroundColor = '';
    
                element.removeAttribute('data-beautified');
            });
        }
    }
    
    const beautifier = new Beautifier();
    window.beautifier = beautifier;
    
    beautifier.observe();
    
    // 一个愚蠢到有点无敌的修复机制，不过工作良好
    (() => {
        function fixLogin(pathname) {
            if (pathname.startsWith('/@login')) {
                beautifier.undo();
            }
            else {
                beautifier.disconnect();
                beautifier.observe();
            }
        }
    
        ['popstate', 'pushState', 'replaceState'].forEach(eventType => {
            addEventListener(eventType, () => {
                fixLogin(location.pathname);
            });
        });
    })();

</script>
 <!--音乐播放器-->
        <!--网易云-->
        <meting-js fixed="true" volume=0.2 autoplay="true" theme="#409EFF" list-folded="true" server="netease" type="playlist"  id="17523884381"></meting-js>
<br />
            </div>
<!--一言API-->

    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

<!-- 烟花特效 -->

<script src="https://cdn.jsdelivr.net/gh/kamanfaiz/Nezha-Dash-UI@main/js/fireworks.js"></script>

<!-- 网页音乐播放优化 -->

<script>
  window.initMuscPlus = false;
  window.initMuscEle = false;
  window.$q = window.$q || function(val) { return document.querySelector(val) }
  window.$qa = window.$qa || function(val) { return Array.from(document.querySelectorAll(val)) }
  ;(function(){
    let style = document.createElement('style')
    style.innerHTML = `.music-plus .aplayer-lrc-current { font-weight: bold; transform: scale(0.95) !important; }
    .music-plus .aplayer .aplayer-lrc { position: fixed; top: 20px; left: 0; right: 0; width: 88%; max-width: 1000px; margin: 0 auto; background: #fff; padding: 50px 0; transform: scale(1.3);z-index: 999; }
    .music-plus .aplayer .aplayer-lrc p { color: #333; opacity: 0.8;  transform: scale(0.9); }
    .music-control { position: absolute; right: 4px; top: 4px; display: flex; align-items: center; }
    .music-control i { cursor: pointer; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 14px; border-radius: 50%; background: #ccc; margin-left: 4px; font-style: normal; }
    @media screen and (min-width: 1600px) {
      .music-plus .aplayer .aplayer-lrc { left: 0; right: auto; width: 400px; height: 80px; padding: 100px 0; top: 120px; } 
    }
    `
    document.body.appendChild(style)
  })();


  let intIns = setInterval(() => {
    console.log('setInterval initMuscEle...')
    if (!window.initMuscEle) {
      initData()
    } else {
      console.log('setInterval initMuscEle success...')
      clearInterval(intIns)
      intIns = null
    }
  }, 500)

  function initData() {
    let stack = document.querySelector('.footer .hope-stack')
    if (!stack) return;
    window.initMuscEle = true;
    let span = document.createElement('span')
    span.innerHTML = '|'
    stack.appendChild(span)
    let a = document.createElement('a')
    a.style = `padding: var(--hope-space-1_5); cursor: pointer; `
    a.innerHTML = '音乐加强'
    a.onclick = changeMusic
    stack.appendChild(a)

    document.addEventListener('keydown', function(e) {
      if (e.ctrlKey) {
        const type = ['4', '['].includes(e.key) ? 1 : ['6', ']'].includes(e.key) ? 3 : ['5', '\\'].includes(e.key) ? 2 : null
        if (type) {
          e.preventDefault()
          e.stopPropagation()
          musicMove(type)
        }
      }
    })

  }

  function changeMusic() {
    let lrcWarp = document.querySelector('.aplayer .aplayer-lrc')
    if (!lrcWarp) return alert('没有找到歌词容器')
    if (!window.initMuscPlus || !$q('.music-control')) {
      let control = document.createElement('div')
      control.className = 'music-control'
      control.innerHTML = `<i onclick="musicMove(1)" title="CTRL+[ 上一曲">◄</i>
      <i onclick="musicMove(2)" title="CTRL+] 上一曲">◼</i>
      <i onclick="musicMove(3)" title="CTRL+\\ 暂停">►</i>`
      document.querySelector('.aplayer-body').append(control)
    }
    window.initMuscPlus = true
    let cls = document.body.className
    if (cls.includes('music-plus')) {
      document.body.className = document.body.className.replace(' music-plus', '')
    } else {
      document.body.className += ' music-plus'
    }
  }

  function musicMove(type) {
    if (type == 2) {
      return $q('.aplayer-pic').click()
    }
    let list = $qa(`.aplayer-list li`)
    let ind = list.findIndex(item => item.classList.contains('aplayer-list-light'))
    let index = type == 1 ? ind - 1 : type == 3 ? ind + 1 : ind
    index = index < 0 ? list.length - 1 : index > list.length - 1 ? 0 : index
    list[index].click()
    
  }
</script>
 <!--去掉底部Powered by Openlist--->

 <style>
 .footer span,.footer a:nth-of-type(1){
   display:none;
 }
 </style>

元信息

HTML
<div style="text-align: center; margin: 0 auto; max-width: 800px; padding: 20px;">
  <!-- 图片：强制居中 -->
  <img 
    src="https://images2018.cnblogs.com/blog/1475041/201809/1475041-20180911162634872-512854858.gif" 
    alt="小猫编程动图" 
    style="display: block; margin: 10px auto; max-width: 80%; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);"
  >


  <!-- 社交图标：增强型居中方案 -->

  <div style="
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 30px auto;
    padding: 0 10px;
    width: 100%;
  ">
    <a href="https://twitter.com/LunarGossip" target="_blank" rel="noopener noreferrer" style="flex-shrink: 0;">
      <img src="https://img.shields.io/badge/💬_LunarGossip-1DA1F2?style=flat-square&logo=x&logoColor=white" alt="Twitter" style="max-height: 28px;">
    </a>
    <a href="https://www.youtube.com/@hetw24" target="_blank" rel="noopener noreferrer" style="flex-shrink: 0;">
      <img src="https://img.shields.io/badge/🎬_He–TW-FF0000?style=flat-square&logo=youtube&logoColor=white" alt="YouTube" style="max-height: 28px;">
    </a>
    <a href="https://fuwari.hetw24.dpdns.org/post/openlist%E9%83%A8%E7%BD%B2%E6%95%99%E7%A8%8B" target="_blank" rel="noopener noreferrer" style="flex-shrink: 0;">
      <img src="https://img.shields.io/badge/📚_OpenList教程-00A1E9?style=flat-square&logo=feishu&logoColor=white" alt="飞书文档" style="max-height: 28px;">
    </a>
    <a href="https://github.com/hetw24" target="_blank" rel="noopener noreferrer" style="flex-shrink: 0;">
      <img src="https://img.shields.io/badge/✍🏻_hetw24-181717?style=flat-square&logo=github&logoColor=white" alt="GitHub" style="max-height: 28px;">
    </a>
  </div>


  <!-- 文艺文字：居中优雅显示 -->

  <p style="
    font-family: 'Ma Shan Zheng', 'Noto Sans SC', sans-serif;
    font-size: 1.4rem;
    color: #5c5c5c;
    margin: 30px 0;
    line-height: 1.8;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  ">
<strong><span style="color: Cyan;">淡看云烟随风去,笑拥晨光自怡然</span></strong>
</p>​
<div id="customize" style="">
                        </a >
                    </span>
                </span>
        <center class="dibu">
            <div style="font-size: 13px; font-weight: bold;">
                             <span class="nav-item">
                    <a class="nav-link" href="https://fuwari.hetw24.dpdns.org/" target="_blank">
                        <i class="fas fa-edit" style="color:#409EFF" aria-hidden="true">
                        </i>
                        He-TWの博客 |
                    </a >
                </span>
                <span class="nav-item">
                    <a class="nav-link" href="https://panel.hetw24.dpdns.org/" target="_blank">
                        <i class="fa-solid fa-folder-gear" style="color:#409EFF" aria-hidden="true">
                        </i>
                        He-TWの导航 
                    </a >
                </span>
                 </p>
                <!--备案-->
                <span class="nav-item">
                    <a class="nav-link" href="https://zh.moegirl.org.cn/%E7%BB%AB%E5%9C%B0%E5%AE%81%E5%AE%81">
                        <i class="fa-solid fa-shield-check" style="color:#409EFF;" aria-hidden="true">
                        </i>
                        ICP备0721号
                    </a >
                </span>
                 </p>
                 <center class="dibu">
            <div style=" line-height: 20px;font-size: 11pt;font-weight: bold;">
                <span>
                    <span style="color: rgb(13, 109, 252); font-weight: bold;" id="hitokoto">
                        <a href="#" id="hitokoto_text">
                            "人生最大的遗憾,就是在最无能为力的时候遇到一个想要保护一生的人."
                        </a>
                    </span> 
                </span>
                <p style="margin-left: 10rem;font-size: 10pt; color: #eda3ff;">
                    <small>
                        —— He-TW
                    </small>

总结:

1. 打开模板

2. 注册账号

3. 选择部署方式

4. 绑定域名

5. 获取默认密码

6. 登录并立即改密

END

相关文章

优选CF教程-提速

2026年3月13日1 分钟

Xserver游戏机指南🎮

2026年2月25日2 分钟

哪吒面板美化分享

2026年2月22日2 分钟

如何移除哪吒探针(备用)

2026年2月22日1 分钟
© 2026 He-TW. All Rights Reserved. / RSS / Sitemap
Powered by Tanstack Start & Flare Stack Blog