Alist部分备份

colab编译

代码见博客的文件，上传至Google Colab按提示运行即可。主要是为了方便我自己偶尔修改用(包括提的关于google photos streaming video的pr我也是在这上面测试的)

效果

基于V3的修改

大致如图，需要修改的自行修改(大部分都写了注释，没写的应该也好理解)

自定义头部

我的图标不想用Alist官方的，所以找了wiki上的Google Drive ico。

不知道为啥，我自定义头部东西加多了就显示乱码(悲)，所以只有很少一些内容。

<!-- Video Together脚本 -->
<script src="https://2gether.video/release/extension.website.user.js"></script>
<!-- 异步加载 Polyfill 脚本 -->
<script async defer src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>

<!-- 天气 iframe -->
<iframe allowtransparency="true" frameborder="0" width="290" height="96" scrolling="no" src="https://tianqi.2345.com/plugin/widget/index.htm?s=1&z=1&t=0&v=0&d=2&bd=0&k=&f=&ltf=009944&htf=cc0000&q=1&e=1&a=1&c=54511&w=290&h=96&align=center"></iframe>

<style>
  /* 主列表透明 */
  .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
    background-color: rgba(255, 255, 255, 0.5);
  }
  /* 文字超长自动换行 */
  .name-box .name {
	white-space: unset !important;
	overflow: unset !important;
  }
</style>

去掉天气的版本：

<style>
  /* 主列表透明 */
  .obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css {
    background-color: rgba(255, 255, 255, 0.5);
  }
  /* 文字超长自动换行 */
  .name-box .name {
	white-space: unset !important;
	overflow: unset !important;
  }
</style>

<script async defer>
  // 异步加载 Polyfill 脚本
  var polyfillScript = document.createElement('script');
  polyfillScript.src = 'https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll';
  document.head.appendChild(polyfillScript);

  // 等待页面加载完成
  document.addEventListener('DOMContentLoaded', function() {
    // 设置Video Together容器位置
    var videoTogetherContainer = document.createElement('div');
    videoTogetherContainer.id = 'video-together-container';
    document.body.appendChild(videoTogetherContainer);

    // 创建Video Together脚本
    var videoTogetherScript = document.createElement('script');
    videoTogetherScript.src = 'https://2gether.video/release/extension.website.user.js';
    videoTogetherContainer.appendChild(videoTogetherScript);
  });
</script>

自定义内容

基本上都写了注释，反正符合我个人需求。

<style>
  /*隐藏的部分内容*/

  /*去除搜索栏左边的图标*/
.hope-image.hope-c-PJLV.hope-c-PJLV-iktMgsV-css
{
	display: none!important;
}
  /*去除登录logo*/
.hope-image.hope-c-PJLV.hope-c-PJLV-ibwASZs-css
{
	display: none!important;
}

  /*去掉底部*/
.footer
{
	display: none!important;
}
  /* 底部的样式*/
.copyright .link
{
	padding: 4px;
	background: #26517c;
	border-radius: 0 8px 8px 0;
	color: #fff;
}

.copyright .name
{
	padding: 4px;
	background: #fff;
	border-radius: 8px 0 0 8px;
	color: #000;
}

.copyright
{
	padding: 15px;
}
.runtime
{
	margin-top: 20px;
	color: #fff;
	text-align: center!important;
}
#loadingTime
{
	margin-top: 20px;
	color: #fff;
	text-align: center!important;
}

.about, .state
{
	width: min(99%, 980px);
	text-align: center;
	padding-inline: 2%;
}

.state
{
	margin-top: 20px;
	color: #fff;
	font-weight: bold;
}
  /* 统一白天和黑夜模式背景及毛玻璃效果样式 */
.hope-ui-light
{
	background-image: url(Your IMG URL) !important;
	background-attachment: fixed;
	background-position: 100%;
	background-size: cover;
}
/* 添加 ::before 伪元素 */
/*夜间背景图 黑色毛玻璃遮罩*/
.hope-ui-dark::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 设置黑色半透明背景 */
    backdrop-filter: blur(8px); /* 设置毛玻璃效果 */
    z-index: -1; /* 将 ::before 放在背景图之后 */
}
/*夜间背景图*/
.hope-ui-dark
{
	position: relative; /* 添加相对定位，使得 ::before 伪元素相对于该元素定位 */
	background-image: url(Your IMG URL) !important;
	background-attachment: fixed;
	background-position: 100%;
	background-size: cover;
}

.hope-c-PJLV-igScBhH-css,
  .hope-c-PJLV-ikSuVsl-css,
  .hope-c-PJLV-iigjoxS-css,
  .hope-c-PJLV-iiuDLME-css
{
	background-color: rgba(255, 255, 255, 0.8) !important;
	backdrop-filter: blur(8px);
}
/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css
{
	background-color: rgba(255,255,255,0.2)!important;
	backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled
{
	background-color: rgba(255,255,255,0.2)!important;
	backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css
{
	background-color: rgba(255,255,255,0.2)!important;
	backdrop-filter: blur(10px)!important;
	padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css
{
	background-color: rgb(0 0 0 / 10%)!important;
	backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled
{
	background-color: rgb(0 0 0 / 10%)!important;
	backdrop-filter: blur(10px)!important;
}

/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css
{
	background-color: rgb(0 0 0 / 10%)!important;
	backdrop-filter: blur(10px)!important;
	padding: var(--hope-space-1)!important;
}
/*主列表白天模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-igScBhH-css
{
	background-color: rgba(255, 255, 255, 0.5)!important;
}
/*主列表夜间模式透明*/
.obj-box.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-iigjoxS-css
{
	background-color: rgb(0 0 0 / 50%)!important;
}

/*readme白天模式透明*/
.hope-c-PJLV.hope-c-PJLV-ikSuVsl-css
{
	background-color: rgba(255, 255, 255, 0.5)!important;
}
/*readme夜间模式透明*/
.hope-c-PJLV.hope-c-PJLV-iiuDLME-css
{
	background-color: rgb(0 0 0 / 50%)!important;
}

/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button
{
	background-color: rgba(255, 255, 255, 0.3)!important;
}

.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button
{
	background-color: rgb(0 0 0 / 10%)!important;
}

/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css
{
	background-color: rgba(255, 255, 255, 0.5)!important;
}

.hope-ui-dark .hope-c-PJLV-ijgzmFG-css
{
	background-color: rgb(0 0 0 / 50%)!important;
}

/*白天模式代码块透明*/
.hope-ui-light pre
{
	background-color: rgba(255, 255, 255, 0.1)!important;
}
/*夜间模式代码块透明*/
.hope-ui-dark pre
{
	background-color: rgba(255, 255, 255, 0)!important;
}

  /* Top center position for running time */
#runningTime
{
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255, 255, 255, 0.8);
	padding: 10px;
	border-radius: 5px;
	font-size: 16px;
	z-index: 9999;
}
</style>
<div class="copyright" align="center">
<div class="about"><p>
<span class="name">管理</span><span class="link"><a href="/@manage" target="_blank" rel="noopener">链接</a></span>
</p>
<div class="runtime">
<span id="runtime_span"></span>
<script type="text/javascript">
    function show_runtime()
{
	window.setTimeout("show_runtime()", 1000);
		/*你的页面开始时间*/
        X = new Date("09/15/2023 00:00:00");
        Y = new Date();
        T = (Y.getTime() - X.getTime());
        M = 24 * 60 * 60 * 1000;
        a = T / M;
        A = Math.floor(a);
        b = (a - A) * 24;
        B = Math.floor(b);
        c = (b - B) * 60;
        C = Math.floor((b - B) * 60);
        D = Math.floor((c - C) * 60);
        runtime_span.innerHTML = "<span class=\"name\">本站稳定运行" + "</span><span class=\"link\">" + A + "天" + B + "时" + C + "分" + D + "秒</span>"
}

show_runtime();
</script>
</div>

<div id="loadingTime"><p>
<span class="name">页面加载时间:</span><span class="link">加载中</a></span>
</p>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取页面加载开始时间
            var startTime = Date.now();

            // 在页面加载完成后执行
            window.onload = function() {
                // 获取页面加载结束时间
                var endTime = Date.now();

                // 计算加载时间
                var loadTime = endTime - startTime;

                // 将加载时间显示在页面上
                document.getElementById("loadingTime").innerHTML = '<p><span class="name">页面加载时间:</span><span class="link">' + loadTime + '毫秒</span></p>';
            };
        });
    </script>
</div>
<div class="state"><p>免责声明：本站为个人网盘，网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p></div>
</div>

<script>
  // 爱心点击特效
  !function (e, t, a)
{
	function r() {
      for (var e = 0; e < s.length; e++)
        s[e].alpha <= 0 ? (t.body.removeChild(s[e].el), s.splice(e, 1)): (s[e].y--, s[e].scale += .004, s[e].alpha -= .013,
          s[e].el.style.cssText = "left:" + s[e].x + "px;top:" + s[e].y + "px;opacity:" + s[e].alpha + ";transform:scale(" + s[e].scale +
          "," + s[e].scale + ") rotate(45deg);background:" + s[e].color + ";z-index:99999");
	requestAnimationFrame(r)
}

function n()
{
	var t = "function" == typeof e.onclick && e.onclick;
      e.onclick = function (e) {
        t && t(), o(e)
}
    }

function o(e)
{
	var a = t.createElement("div");
      a.className = "heart", s.push({
        el: a,
        x: e.clientX - 5,
        y: e.clientY - 5,
        scale: 1,
        alpha: 1,
        color: c()
}),t.body.appendChild(a)
}

function i(e)
{
var a = t.createElement("style");
      a.type = "text/css";
      try {
        a.appendChild(t.createTextNode(e))
}

catch (t)
{
a.styleSheet.cssText = e
}

t.getElementsByTagName("head")[0].appendChild(a)
}

function c()
{
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}

var s = [];
    e.requestAnimationFrame = e.requestAnimationFrame || e.webkitRequestAnimationFrame || e
      .mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function (e)
{
setTimeout(e, 1e3 / 60)
},i(
        ".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
      ), n(), r()
}(window, document);

</script>