Greasy Fork is available in English.
在图集岛页面中的侧边栏显示标签和带图片的链接
当前为
// ==UserScript==
// @name 图集岛标签侧边栏
// @namespace http://www.tujidao09.com/
// @version 2.1
// @description 在图集岛页面中的侧边栏显示标签和带图片的链接
// @author William Zhou
// @match http://www.tujidao09.com/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
let sidebarVersion = 1.0;
// 每次输出后将版本号增加 0.1
sidebarVersion += 0.1;
console.log(`标签侧边栏版本：${sidebarVersion}`);
// 创建并显示侧边栏的函数
function createSidebar(tagsWithImages, tagsWithoutImages) {
const sidebarContainer = document.createElement('div');
sidebarContainer.style.position = 'fixed';
sidebarContainer.style.top = '50%';
sidebarContainer.style.right = '-140px'; // 初始化位置在屏幕外
sidebarContainer.style.transform = 'translateY(-50%)';
sidebarContainer.style.width = '120px';
sidebarContainer.style.height = '480px';
sidebarContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
sidebarContainer.style.backdropFilter = 'blur(10px)';
sidebarContainer.style.borderRadius = '8px'; // 添加8px圆角
sidebarContainer.style.color = '#ffffff';
sidebarContainer.style.padding = '10px';
sidebarContainer.style.zIndex = '9999';
sidebarContainer.style.overflowY = 'auto';
sidebarContainer.style.transition = 'right 0.5s ease-out'; // 添加动画效果
const tagsList = document.createElement('ul');
tagsList.style.listStyle = 'none';
tagsList.style.margin = '0';
tagsList.style.padding = '0';
tagsWithImages.forEach(tag => {
const tagItem = document.createElement('li');
const tagLink = document.createElement('a');
const tagImage = document.createElement('img');
tagImage.src = `https://picew6d4ew.82pic.com/t/${tag.imageId}.jpg`;
tagImage.style.maxWidth = '100%';
tagImage.style.borderRadius = '20px'; // 添加20px圆角
tagLink.href = tag.link;
tagLink.textContent = tag.name;
tagLink.style.color = '#ffffff';
tagItem.appendChild(tagImage);
tagLink.appendChild(tagItem);
tagsList.appendChild(tagLink);
});
tagsWithoutImages.forEach(tag => {
const tagItem = document.createElement('li');
const tagLink = document.createElement('a');
tagLink.href = tag.link;
tagLink.textContent = tag.name;
tagLink.style.color = '#ffffff';
tagItem.appendChild(tagLink);
tagsList.appendChild(tagItem);
});
sidebarContainer.appendChild(tagsList);
document.body.appendChild(sidebarContainer);
// 将侧边栏移动到显示位置
setTimeout(() => {
sidebarContainer.style.right = '0';
}, 100);
}
// 检查链接是否仅为域名
function isDomainOnly(url) {
const domain = window.location.hostname;
return url === `http://${domain}/` || url === `https://${domain}/`;
}
// 获取图片 ID
function getImageId(url) {
const match = url.match(/\/t\/\?id=(\d+)/);
return match ? match[1] : null;
}
// 页面加载完毕后执行
window.addEventListener('load', () => {
const uniqueLinks = new Set();
const tagsWithImages = [];
const tagsWithoutImages = [];
const tagsElements = document.querySelectorAll('.tags a');
const pElements = document.querySelectorAll('p');
pElements.forEach(pElement => {
const linkElement = pElement.querySelector('a');
if (linkElement && !isDomainOnly(linkElement.href) && !uniqueLinks.has(linkElement.href)) {
const tagName = linkElement.textContent;
const tagLink = linkElement.href;
const imageId = getImageId(tagLink);
if (imageId) {
tagsWithImages.push({ name: tagName, link: tagLink, imageId: imageId });
} else {
tagsWithoutImages.push({ name: tagName, link: tagLink });
}
uniqueLinks.add(tagLink);
}
});
tagsElements.forEach(tagElement => {
const tagName = tagElement.textContent;
const tagLink = tagElement.href;
if (!isDomainOnly(tagLink) && !uniqueLinks.has(tagLink)) {
const imageId = getImageId(tagLink);
if (imageId) {
tagsWithImages.push({ name: tagName, link: tagLink, imageId: imageId });
} else {
tagsWithoutImages.push({ name: tagName, link: tagLink });
}
uniqueLinks.add(tagLink);
}
});
tagsWithImages.sort((a, b) => {
// 带有图片的链接优先靠前显示
return a.imageId ? -1 : b.imageId ? 1 : 0;
});
if (tagsWithImages.length > 0 || tagsWithoutImages.length > 0) {
createSidebar(tagsWithImages, tagsWithoutImages);
}
});
// 为侧边栏添加样式
GM_addStyle(`
/* 添加额外的样式 */
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #888888;
border-radius: 8px;
}
::-webkit-scrollbar-track {
background-color: #ffffff;
border-radius: 8px;
}
`);
})();