.jpg)
前言
🔗 Openlist 文档 与 下载渠道： 桌面 - OpenList 文档
📌 听说 Alist 的开源作者把项目卖了，以后会闭源，所以，冒出来了个openlist 他们是开源的。
- 这里就用openlist
🟠需要服务器
- 首先 openlist 需要挂靠一个不关机的连着公网的电脑，也就是服务器。
- 服务器关机，也访问不到网盘
🟢路径与文件地址
- 如以下网址 http://localhost:5244 就是服务器地址
- 后边的就是文件路径
http://localhost:5244/d/Hanan_Openlist/PixPi12025-06-19_05-41-58.webp
http://localhost:5244/d/Hanan_Openlist/dist/index.html
⚙️下载 与 安装 可以查看官方文档
🔴Openlist 的使用
❓️Openlist 怎么对接各渠道的网盘和对象存储
🔗 各种渠道的对接方法 都能在官方文档获得 如百度网盘 ：百度网盘 - OpenList 文档需要注意文档说明，这个软件会根据各渠道更新而变化
🔒Openlist 改用户名密码
① 这是安装后的首要任务，在下图这里改
💿Openlist 设置的备份
① 点击备份就会 下载Openlist 的配置文件。
Openlist 的美化
方式一：html 头部和内容
① 在下图这里设置 在自定义头部 和 自定义内容 中填一些html代码 就行
② 代码如下
- 自定义头部
<!-- v4 -->
<!-- 引入自定义字体 -->
<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;
}
/* 在此处的url()里修改背景图片地址 */
/* 加了个深色遮罩，爱护你的眼睛 */
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('图片链接1');
}
/* 在此处的url()里修改背景图片地址 */
body.hope-ui-light {
background-image: url('图片链接1');
}
/* 统一站点公告的样式 */
.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>
<!-- 看板娘 -->
<script src="https://l2d.mmoe.work/dist/autoload.js" async></script>
<script
src="https://s4.zstatic.net/ajax/libs/js-polyfills/0.1.43/polyfill.min.js?features=String.prototype.replaceAll"></script>
- 自定义内容
<!-- v7 -->
<!-- 修正部分区域的透明 -->
<style>
.hope-ui-light,
.hope-ui-dark {
--hope-colors-background: transparent;
}
</style>
<script type="module">
// v7
// 提供用来监听代码控制的 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, .monaco-editor *', // 代码编辑器
'.art-video-player, .art-video-player *', // 视频播放器
'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,0.8)';
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>
方式二 ：图标、主题色
① 样式 图标 主题色
方式三：元数据、markdown
① 在这里添加配置
② 配置如下
顶部说明、底部说明支持markdown 你在这里写的都会在主页呈现
评论区