chicrobot/mainPage
1
0 Fork 0
mirror of http://junepve.top:3000/chicrobot/mainPage.git synced 2026-10-30 06:51:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改跳转为新窗口跳转

Browse Source
This commit is contained in:
chicrobot committed 2025-11-14 23:22:10 +08:00
1 parent 5b79e9e733
commit d31d35f81a
2 files changed
+73 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+32 -24
View File
@@ -59,42 +59,42 @@
<h3>Portainer</h3> <h3>Portainer</h3>
<p>容器管理平台</p> <p>容器管理平台</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a id="portainerLink" href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a id="portainerLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
<div class="service-card glass-card"> <div class="service-card glass-card">
<div class="service-icon"><i class="fas fa-code-branch"></i></div> <div class="service-icon"><i class="fas fa-code-branch"></i></div>
<h3>Gitea</h3> <h3>Gitea</h3>
<p>代码托管平台</p> <p>代码托管平台</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a id="giteaLink" href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a id="giteaLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
<div class="service-card glass-card"> <div class="service-card glass-card">
<div class="service-icon"><i class="fas fa-chart-line"></i></div> <div class="service-icon"><i class="fas fa-chart-line"></i></div>
<h3>Grafana</h3> <h3>Grafana</h3>
<p>数据可视化工具</p> <p>数据可视化工具</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a id="grafanaLink" href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a id="grafanaLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
<div class="service-card glass-card"> <div class="service-card glass-card">
<div class="service-icon"><i class="fas fa-cogs"></i></div> <div class="service-icon"><i class="fas fa-cogs"></i></div>
<h3>Jenkins</h3> <h3>Jenkins</h3>
<p>持续集成/持续部署</p> <p>持续集成/持续部署</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a id="jenkinsLink" href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a id="jenkinsLink" href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
<div class="service-card glass-card"> <div class="service-card glass-card">
<div class="service-icon"><i class="fas fa-database"></i></div> <div class="service-icon"><i class="fas fa-database"></i></div>
<h3>PostgreSQL</h3> <h3>PostgreSQL</h3>
<p>关系型数据库</p> <p>关系型数据库</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
<div class="service-card glass-card"> <div class="service-card glass-card">
<div class="service-icon"><i class="fas fa-shield-alt"></i></div> <div class="service-icon"><i class="fas fa-shield-alt"></i></div>
<h3>Traefik</h3> <h3>Traefik</h3>
<p>反向代理与负载均衡</p> <p>反向代理与负载均衡</p>
<span class="status online"><i class="fas fa-circle"></i> 运行中</span> <span class="status online"><i class="fas fa-circle"></i> 运行中</span>
<a href="#" class="service-link">访问 <i class="fas fa-arrow-right"></i></a> <a href="#" class="service-link" target="_blank">访问 <i class="fas fa-arrow-right"></i></a>
</div> </div>
</div> </div>
</div> </div>
@@ -151,25 +151,25 @@
<div class="tool-icon"><i class="fas fa-code"></i></div> <div class="tool-icon"><i class="fas fa-code"></i></div>
<h3>VS Code</h3> <h3>VS Code</h3>
<p>集成开发环境</p> <p>集成开发环境</p>
<a href="#" class="tool-link">启动 <i class="fas fa-play"></i></a> <a href="#" class="tool-link" target="_blank">启动 <i class="fas fa-play"></i></a>
</div> </div>
<div class="tool-card glass-card"> <div class="tool-card glass-card">
<div class="tool-icon"><i class="fas fa-terminal"></i></div> <div class="tool-icon"><i class="fas fa-terminal"></i></div>
<h3>终端</h3> <h3>终端</h3>
<p>命令行工具集</p> <p>命令行工具集</p>
<a href="#" class="tool-link">打开 <i class="fas fa-terminal"></i></a> <a href="#" class="tool-link" target="_blank">打开 <i class="fas fa-terminal"></i></a>
</div> </div>
<div class="tool-card glass-card"> <div class="tool-card glass-card">
<div class="tool-icon"><i class="fas fa-database"></i></div> <div class="tool-icon"><i class="fas fa-database"></i></div>
<h3>数据库管理</h3> <h3>数据库管理</h3>
<p>数据库可视化工具</p> <p>数据库可视化工具</p>
<a href="#" class="tool-link">启动 <i class="fas fa-play"></i></a> <a href="#" class="tool-link" target="_blank">启动 <i class="fas fa-play"></i></a>
</div> </div>
<div class="tool-card glass-card"> <div class="tool-card glass-card">
<div class="tool-icon"><i class="fas fa-server"></i></div> <div class="tool-icon"><i class="fas fa-server"></i></div>
<h3>服务管理</h3> <h3>服务管理</h3>
<p>开发服务控制面板</p> <p>开发服务控制面板</p>
<a href="#" class="tool-link">打开 <i class="fas fa-cogs"></i></a> <a href="#" class="tool-link" target="_blank">打开 <i class="fas fa-cogs"></i></a>
</div> </div>
</div> </div>
@@ -219,7 +219,7 @@
<div class="container" data-parallax="0.2"> <div class="container" data-parallax="0.2">
<h2 class="section-title"><span class="text-cyan">最新思路</span></h2> <h2 class="section-title"><span class="text-cyan">最新思路</span></h2>
<div class="thoughts-grid"> <div class="thoughts-grid">
<article class="thought-card glass-card" onclick="window.location.href='/blog/post1'"> <article class="thought-card glass-card" onclick="window.open('/blog/post1', '_blank')">
<div class="thought-image" style="background-image: url('./static/code1.avif');"></div> <div class="thought-image" style="background-image: url('./static/code1.avif');"></div>
<div class="thought-content"> <div class="thought-content">
<h3>赛博朋克时代的前端架构思考</h3> <h3>赛博朋克时代的前端架构思考</h3>
@@ -228,7 +228,7 @@
<span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span> <span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span>
</div> </div>
</article> </article>
<article class="thought-card glass-card" onclick="window.location.href='/blog/post2'"> <article class="thought-card glass-card" onclick="window.open('/blog/post2', '_blank')">
<div class="thought-image" style="background-image: url('./static/code2.avif');"></div> <div class="thought-image" style="background-image: url('./static/code2.avif');"></div>
<div class="thought-content"> <div class="thought-content">
<h3>从0到1搭建个人技术栈</h3> <h3>从0到1搭建个人技术栈</h3>
@@ -237,7 +237,7 @@
<span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span> <span class="read-more">继续阅读 <i class="fas fa-arrow-right"></i></span>
</div> </div>
</article> </article>
<article class="thought-card glass-card" onclick="window.location.href='/blog/post3'"> <article class="thought-card glass-card" onclick="window.open('/blog/post3', '_blank')">
<div class="thought-image" style="background-image: url('./static/code3.avif');"></div> <div class="thought-image" style="background-image: url('./static/code3.avif');"></div>
<div class="thought-content"> <div class="thought-content">
<h3>未来界面：玻璃拟态与全息效果</h3> <h3>未来界面：玻璃拟态与全息效果</h3>
@@ -259,20 +259,28 @@
<div class="lab-icon"><i class="fas fa-robot"></i></div> <div class="lab-icon"><i class="fas fa-robot"></i></div>
<h3>AI 实验</h3> <h3>AI 实验</h3>
<p>探索机器学习与深度学习的前沿应用</p> <p>探索机器学习与深度学习的前沿应用</p>
<a href="#" class="lab-link">进入实验室 <i class="fas fa-flask"></i></a> <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
</div> </div>
<div class="lab-card glass-card"> <div class="lab-card glass-card">
<div class="lab-icon"><i class="fas fa-microchip"></i></div> <div class="lab-icon"><i class="fas fa-microchip"></i></div>
<h3>边缘计算</h3> <h3>边缘计算</h3>
<p>研究在边缘设备上的高效计算方案</p> <p>研究在边缘设备上的高效计算方案</p>
<a href="#" class="lab-link">进入实验室 <i class="fas fa-flask"></i></a> <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
</div> </div>
<div class="lab-card glass-card"> <div class="lab-card glass-card">
<div class="lab-icon"><i class="fas fa-vr-cardboard"></i></div> <div class="lab-icon"><i class="fas fa-vr-cardboard"></i></div>
<h3>XR 技术</h3> <h3>XR 技术</h3>
<p>探索虚拟现实与增强现实的开发</p> <p>探索虚拟现实与增强现实的开发</p>
<a href="#" class="lab-link">进入实验室 <i class="fas fa-flask"></i></a> <a href="#" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
</div> </div>
<!-- 添加聊天实验室 -->
<div class="lab-card glass-card">
<div class="lab-icon"><i class="fas fa-comment-dots"></i></div>
<h3>实时通信</h3>
<p>基于WebSocket的聊天系统实现</p>
<a href="#chat-app" class="lab-link" target="_blank">进入实验室 <i class="fas fa-flask"></i></a>
</div>
<!-- 其他实验室 -->
</div> </div>
</div> </div>
</section> </section>
@@ -287,8 +295,8 @@
<h3>摄影师</h3> <h3>摄影师</h3>
<p>独立摄影 | 数字游民</p> <p>独立摄影 | 数字游民</p>
<div class="friend-social"> <div class="friend-social">
<a href="#"><i class="fab fa-instagram"></i></a> <a href="#" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a> <a href="#" target="_blank"><i class="fab fa-twitter"></i></a>
</div> </div>
<button class="glow-button">了解详情</button> <button class="glow-button">了解详情</button>
</div> </div>
@@ -297,8 +305,8 @@
<h3>开发者</h3> <h3>开发者</h3>
<p>全栈开发 | 技术作家</p> <p>全栈开发 | 技术作家</p>
<div class="friend-social"> <div class="friend-social">
<a href="#"><i class="fab fa-github"></i></a> <a href="#" target="_blank"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-dev"></i></a> <a href="#" target="_blank"><i class="fab fa-dev"></i></a>
</div> </div>
<button class="glow-button">了解详情</button> <button class="glow-button">了解详情</button>
</div> </div>
@@ -307,8 +315,8 @@
<h3>设计师</h3> <h3>设计师</h3>
<p>UI/UX设计 | 创意大师</p> <p>UI/UX设计 | 创意大师</p>
<div class="friend-social"> <div class="friend-social">
<a href="#"><i class="fab fa-behance"></i></a> <a href="#" target="_blank"><i class="fab fa-behance"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a> <a href="#" target="_blank"><i class="fab fa-dribbble"></i></a>
</div> </div>
<button class="glow-button">了解详情</button> <button class="glow-button">了解详情</button>
</div> </div>
@@ -317,8 +325,8 @@
<h3>音乐人</h3> <h3>音乐人</h3>
<p>音频工程 | 音乐制作人</p> <p>音频工程 | 音乐制作人</p>
<div class="friend-social"> <div class="friend-social">
<a href="#"><i class="fab fa-soundcloud"></i></a> <a href="#" target="_blank"><i class="fab fa-soundcloud"></i></a>
<a href="#"><i class="fab fa-spotify"></i></a> <a href="#" target="_blank"><i class="fab fa-spotify"></i></a>
</div> </div>
<button class="glow-button">了解详情</button> <button class="glow-button">了解详情</button>
</div> </div>
script.js
+41 -13
View File
@@ -51,11 +51,28 @@ window.addEventListener('load', function() {
const giteaUrl = `${window.location.protocol}//${currentHost}:3000`; const giteaUrl = `${window.location.protocol}//${currentHost}:3000`;
const grafanaUrl = `${window.location.protocol}//${currentHost}:3001`; const grafanaUrl = `${window.location.protocol}//${currentHost}:3001`;
const jenkinsUrl = `${window.location.protocol}//${currentHost}:9095`; const jenkinsUrl = `${window.location.protocol}//${currentHost}:9095`;
// 设置链接的href属性 // 设置链接的href属性和target属性，确保在新标签中打开
document.getElementById('portainerLink').href = portainerUrl; const portainerLink = document.getElementById('portainerLink');
document.getElementById('giteaLink').href = giteaUrl; const giteaLink = document.getElementById('giteaLink');
document.getElementById('grafanaLink').href = grafanaUrl; const grafanaLink = document.getElementById('grafanaLink');
document.getElementById('jenkinsLink').href = jenkinsUrl; const jenkinsLink = document.getElementById('jenkinsLink');
if (portainerLink) {
portainerLink.href = portainerUrl;
portainerLink.target = '_blank';
}
if (giteaLink) {
giteaLink.href = giteaUrl;
giteaLink.target = '_blank';
}
if (grafanaLink) {
grafanaLink.href = grafanaUrl;
grafanaLink.target = '_blank';
}
if (jenkinsLink) {
jenkinsLink.href = jenkinsUrl;
jenkinsLink.target = '_blank';
}
}); });
// 粒子背景效果 // 粒子背景效果
@@ -358,13 +375,20 @@ serviceCards.forEach(card => {
}); });
}); });
// 平滑滚动 // 平滑滚动和链接处理
document.querySelectorAll('a[href^="#"]').forEach(anchor => { document.querySelectorAll('a').forEach(anchor => {
anchor.addEventListener('click', function (e) { anchor.addEventListener('click', function (e) {
const targetId = this.getAttribute('href'); const href = this.getAttribute('href');
// 检查是否是有效的ID选择器（以#开头且不是URL） const target = this.getAttribute('target');
if (targetId && targetId.startsWith('#') && targetId.length > 1 && !targetId.includes('://')) {
const targetElement = document.querySelector(targetId); // 如果已经设置了target="_blank"，让浏览器正常处理跳转
if (target === '_blank') {
return;
}
// 检查是否是有效的页面内ID选择器（以#开头且不是URL）
if (href && href.startsWith('#') && href.length > 1 && !href.includes('://')) {
const targetElement = document.querySelector(href);
if (targetElement) { if (targetElement) {
// 只在找到目标元素时阻止默认行为 // 只在找到目标元素时阻止默认行为
e.preventDefault(); e.preventDefault();
@@ -373,7 +397,7 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
}); });
} }
// 如果找不到目标元素，不阻止默认行为 // 如果找不到目标元素，不阻止默认行为
} else if (targetId === '#') { } else if (href === '#') {
// 处理 href="#" 的情况，滚动到页面顶部 // 处理 href="#" 的情况，滚动到页面顶部
e.preventDefault(); e.preventDefault();
window.scrollTo({ window.scrollTo({
@@ -381,7 +405,11 @@ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
behavior: 'smooth' behavior: 'smooth'
}); });
} }
// 对于URL链接等其他情况，不调用e.preventDefault()，允许浏览器正常跳转 // 对于URL链接等其他情况，如果没有设置target="_blank"，添加它
else if (href && !href.startsWith('#') && (href.includes('://') || href.startsWith('//'))) {
// 不阻止默认行为，让浏览器处理带target="_blank"的跳转
this.target = '_blank';
}
}); });
}); });