Skip to content

Commit

Permalink
图片上传
Browse files Browse the repository at this point in the history
  • Loading branch information
@yixiu001
yixiu001 committed Jul 8, 2024
1 parent a5d5db7 commit 454556a
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 52 deletions.
125 changes: 99 additions & 26 deletions .theme/template.html.temp
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,99 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一休github简易图床系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<h1>目录</h1>
<div id="directory"></div>
</div>
<div class="content">
<h1>图片信息</h1>
<table id="image-table">
<tr>
<th>缩略图</th>
<th>HTTPS 访问地址</th>
<th>jsdelivr CDN 加速地址</th>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
var githubUsername = 'GITHUB_USERNAME';
var githubRepository = 'GITHUB_REPOSITORY';

fetch('files.json')
.then(response => response.json())
.then(fileStructure => {
function populateDirectory(data, parentElement = document.getElementById('directory'), path = '') {
for (const key in data) {
if (typeof data[key] === 'object' && !data[key].https_url) {
const folder = document.createElement('div');
folder.innerHTML = `<button class="collapsible" data-path="${path}/${key}">${key}</button>`;
parentElement.appendChild(folder);
const contentSection = document.createElement('div');
contentSection.className = 'content-section';
contentSection.style.display = 'none';
folder.appendChild(contentSection);
populateDirectory(data[key], contentSection, path + '/' + key);
}
}

var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var active = document.querySelector('.collapsible.active');
if (active && active !== this) {
active.classList.remove('active');
active.nextElementSibling.style.display = 'none';
}
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
populateTable(this.getAttribute("data-path"));
});
}
}

function populateTable(directory) {
var imageTable = document.getElementById("image-table");
while (imageTable.rows.length > 1) {
imageTable.deleteRow(1);
}
var images = getImagesFromDirectory(fileStructure, directory);
images.forEach(function(item) {
var row = imageTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<img src="' + item.https_url + '" alt="' + item.name + '">';
cell2.innerHTML = '<span class="link" onclick="copyToClipboard(\'' + item.https_url + '\')">' + item.https_url + '</span>';
cell3.innerHTML = '<span class="link" onclick="copyToClipboard(\'' + item.cdn_url + '\')">' + item.cdn_url + '</span>';
});
}

function getImagesFromDirectory(data, directory) {
var images = [];
var dirParts = directory.split('/').filter(part => part);

function traverse(currentData, currentPath = '') {
for (const key in currentData) {
if (typeof currentData[key] === 'object' && !currentData[key].https_url) {
if (dirParts[0] === key) {
dirParts.shift();
traverse(currentData[key], currentPath + '/' + key);
}
} else if (typeof currentData[key] === 'object' && currentData[key].https_url) {
if (currentPath === directory) {
images.push({
name: key,
https_url: currentData[key].https_url,
cdn_url: currentData[key].cdn_url
});
}
}
}
}

traverse(data);
return images;
}

function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
alert('链接已复制: ' + text);
}, function(err) {
console.error('复制失败: ', err);
});
}

populateDirectory(fileStructure);
if (Object.keys(fileStructure).length > 0) {
populateTable(Object.keys(fileStructure)[0]);
}
});
});
125 changes: 99 additions & 26 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,99 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一休github简易图床系统</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sidebar">
<h1>目录</h1>
<div id="directory"></div>
</div>
<div class="content">
<h1>图片信息</h1>
<table id="image-table">
<tr>
<th>缩略图</th>
<th>HTTPS 访问地址</th>
<th>jsdelivr CDN 加速地址</th>
</tr>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
document.addEventListener("DOMContentLoaded", function() {
var githubUsername = 'GITHUB_USERNAME';
var githubRepository = 'GITHUB_REPOSITORY';

fetch('files.json')
.then(response => response.json())
.then(fileStructure => {
function populateDirectory(data, parentElement = document.getElementById('directory'), path = '') {
for (const key in data) {
if (typeof data[key] === 'object' && !data[key].https_url) {
const folder = document.createElement('div');
folder.innerHTML = `<button class="collapsible" data-path="${path}/${key}">${key}</button>`;
parentElement.appendChild(folder);
const contentSection = document.createElement('div');
contentSection.className = 'content-section';
contentSection.style.display = 'none';
folder.appendChild(contentSection);
populateDirectory(data[key], contentSection, path + '/' + key);
}
}

var coll = document.getElementsByClassName("collapsible");
for (var i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
var active = document.querySelector('.collapsible.active');
if (active && active !== this) {
active.classList.remove('active');
active.nextElementSibling.style.display = 'none';
}
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
populateTable(this.getAttribute("data-path"));
});
}
}

function populateTable(directory) {
var imageTable = document.getElementById("image-table");
while (imageTable.rows.length > 1) {
imageTable.deleteRow(1);
}
var images = getImagesFromDirectory(fileStructure, directory);
images.forEach(function(item) {
var row = imageTable.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = '<img src="' + item.https_url + '" alt="' + item.name + '">';
cell2.innerHTML = '<span class="link" onclick="copyToClipboard(\'' + item.https_url + '\')">' + item.https_url + '</span>';
cell3.innerHTML = '<span class="link" onclick="copyToClipboard(\'' + item.cdn_url + '\')">' + item.cdn_url + '</span>';
});
}

function getImagesFromDirectory(data, directory) {
var images = [];
var dirParts = directory.split('/').filter(part => part);

function traverse(currentData, currentPath = '') {
for (const key in currentData) {
if (typeof currentData[key] === 'object' && !currentData[key].https_url) {
if (dirParts[0] === key) {
dirParts.shift();
traverse(currentData[key], currentPath + '/' + key);
}
} else if (typeof currentData[key] === 'object' && currentData[key].https_url) {
if (currentPath === directory) {
images.push({
name: key,
https_url: currentData[key].https_url,
cdn_url: currentData[key].cdn_url
});
}
}
}
}

traverse(data);
return images;
}

function copyToClipboard(text) {
navigator.clipboard.writeText(text).then(function() {
alert('链接已复制: ' + text);
}, function(err) {
console.error('复制失败: ', err);
});
}

populateDirectory(fileStructure);
if (Object.keys(fileStructure).length > 0) {
populateTable(Object.keys(fileStructure)[0]);
}
});
});

0 comments on commit 454556a

Please sign in to comment.