Skip to content

Commit fc6e953

Browse files
CC11001100CC11001100
committed
deploy: bba262b 
1 parent f7b7d5d commit fc6e953

File tree

1 file changed

+148
-83
lines changed

1 file changed

+148
-83
lines changed

‎index.html‎

Lines changed: 148 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -702,67 +702,17 @@
702702
.navbar-links {
703703
display: flex;
704704
align-items: center;
705-
gap: 20px;
705+
gap: 16px;
706706
}
707707

708-
.navbar-link {
708+
/* JSREI 组织按钮样式 */
709+
.jsrei-link {
709710
display: flex;
710711
align-items: center;
711712
gap: 8px;
712713
padding: 10px 18px;
713714
border-radius: 12px;
714715
text-decoration: none;
715-
color: #4a5568;
716-
font-weight: 500;
717-
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
718-
border: 1px solid transparent;
719-
position: relative;
720-
overflow: hidden;
721-
}
722-
723-
.navbar-link:hover {
724-
background: rgba(66, 153, 225, 0.1);
725-
color: #4299e1;
726-
border-color: rgba(66, 153, 225, 0.2);
727-
}
728-
729-
.navbar-link.github {
730-
background: linear-gradient(135deg, #0d1117 0%, #21262d 50%, #30363d 100%);
731-
color: #f0f6fc;
732-
border: 1px solid rgba(240, 246, 252, 0.1);
733-
box-shadow:
734-
0 1px 3px rgba(0, 0, 0, 0.12),
735-
0 1px 2px rgba(0, 0, 0, 0.24),
736-
inset 0 1px 0 rgba(255, 255, 255, 0.1);
737-
}
738-
739-
.navbar-link.github::before {
740-
content: '';
741-
position: absolute;
742-
top: 0;
743-
left: 0;
744-
right: 0;
745-
bottom: 0;
746-
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
747-
opacity: 0;
748-
transition: opacity 0.3s ease;
749-
}
750-
751-
.navbar-link.github:hover {
752-
background: linear-gradient(135deg, #161b22 0%, #30363d 50%, #484f58 100%);
753-
transform: translateY(-2px);
754-
box-shadow:
755-
0 4px 12px rgba(0, 0, 0, 0.15),
756-
0 2px 4px rgba(0, 0, 0, 0.12),
757-
inset 0 1px 0 rgba(255, 255, 255, 0.2);
758-
border-color: rgba(240, 246, 252, 0.2);
759-
}
760-
761-
.navbar-link.github:hover::before {
762-
opacity: 1;
763-
}
764-
765-
.navbar-link.jsrei {
766716
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
767717
color: white;
768718
border: 1px solid rgba(255, 255, 255, 0.2);
@@ -771,9 +721,11 @@
771721
0 1px 2px rgba(102, 126, 234, 0.2),
772722
inset 0 1px 0 rgba(255, 255, 255, 0.2);
773723
position: relative;
724+
overflow: hidden;
725+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
774726
}
775727

776-
.navbar-link.jsrei::before {
728+
.jsrei-link::before {
777729
content: '';
778730
position: absolute;
779731
top: 0;
@@ -785,7 +737,7 @@
785737
transition: opacity 0.3s ease;
786738
}
787739

788-
.navbar-link.jsrei:hover {
740+
.jsrei-link:hover {
789741
background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 50%, #ec4899 100%);
790742
transform: translateY(-2px);
791743
box-shadow:
@@ -795,23 +747,89 @@
795747
border-color: rgba(255, 255, 255, 0.3);
796748
}
797749

798-
.navbar-link.jsrei:hover::before {
750+
.jsrei-link:hover::before {
799751
opacity: 1;
800752
}
801753

802-
.navbar-link svg {
754+
.jsrei-link span {
755+
font-weight: 600;
756+
letter-spacing: 0.025em;
757+
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
758+
}
759+
760+
.jsrei-link svg {
803761
width: 18px;
804762
height: 18px;
805763
fill: currentColor;
806764
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
807765
}
808766

809-
.navbar-link span {
767+
/* GitHub 徽标样式 */
768+
.github-badge {
769+
display: flex;
770+
align-items: center;
771+
text-decoration: none;
772+
background: #24292f;
773+
color: #f0f6fc;
774+
border-radius: 6px;
775+
overflow: hidden;
776+
transition: all 0.3s ease;
777+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
778+
position: relative;
779+
}
780+
781+
.github-badge:hover {
782+
transform: translateY(-1px);
783+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
784+
}
785+
786+
.github-info {
787+
display: flex;
788+
align-items: center;
789+
gap: 6px;
790+
padding: 6px 10px;
791+
background: #24292f;
792+
}
793+
794+
.github-info svg {
795+
width: 16px;
796+
height: 16px;
797+
fill: currentColor;
798+
}
799+
800+
.github-info span {
801+
font-size: 12px;
810802
font-weight: 600;
811-
letter-spacing: 0.025em;
812-
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
813803
}
814804

805+
.github-stars {
806+
display: flex;
807+
align-items: center;
808+
gap: 4px;
809+
padding: 6px 8px;
810+
background: #f6f8fa;
811+
color: #24292f;
812+
border-left: 1px solid #d1d9e0;
813+
}
814+
815+
.github-stars svg {
816+
width: 12px;
817+
height: 12px;
818+
fill: #656d76;
819+
}
820+
821+
.github-stars span {
822+
font-size: 12px;
823+
font-weight: 600;
824+
color: #24292f;
825+
}
826+
827+
.github-badge[title] {
828+
cursor: pointer;
829+
}
830+
831+
832+
815833
/* 为页面内容添加顶部间距 */
816834
body {
817835
padding-top: 60px;
@@ -1170,18 +1188,26 @@
11701188
</a>
11711189

11721190
<div class="navbar-links">
1173-
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="navbar-link github">
1174-
<svg viewBox="0 0 16 16">
1175-
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1176-
</svg>
1177-
<span>GitHub</span>
1178-
</a>
1179-
1180-
<a href="https://jsrei.org/" target="_blank" class="navbar-link jsrei">
1191+
<a href="https://jsrei.org/" target="_blank" class="jsrei-link">
11811192
<svg viewBox="0 0 24 24">
11821193
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="currentColor"/>
11831194
</svg>
1184-
<span>JSREI</span>
1195+
<span>JSREI组织首页</span>
1196+
</a>
1197+
1198+
<a href="https://github.com/JSREI/userscript-template" target="_blank" class="github-badge" title="Star me on GitHub">
1199+
<div class="github-info">
1200+
<svg viewBox="0 0 16 16">
1201+
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
1202+
</svg>
1203+
<span>Star</span>
1204+
</div>
1205+
<div class="github-stars">
1206+
<svg viewBox="0 0 16 16">
1207+
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
1208+
</svg>
1209+
<span id="navbar-star-count">...</span>
1210+
</div>
11851211
</a>
11861212
</div>
11871213
</nav>
@@ -1572,21 +1598,60 @@ <h3>开发调试</h3>
15721598
</div>
15731599

15741600
<script>
1575-
// 获取仓库 star 数并更新到所有显示位置
1576-
fetch('https://api.github.com/repos/JSREI/userscript-template')
1577-
.then(response => response.json())
1578-
.then(data => {
1579-
const starCount = data.stargazers_count.toLocaleString();
1580-
// 更新页面中所有显示 star 数的元素
1581-
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1582-
el.textContent = starCount;
1583-
});
1584-
})
1585-
.catch(() => {
1586-
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1587-
el.textContent = 'N/A';
1588-
});
1601+
// GitHub Star 数缓存管理
1602+
const CACHE_KEY = 'github_stars_cache';
1603+
const CACHE_DURATION = 60 * 60 * 1000; // 1小时缓存
1604+
1605+
function getCachedStarCount() {
1606+
const cached = localStorage.getItem(CACHE_KEY);
1607+
if (cached) {
1608+
const { data, timestamp } = JSON.parse(cached);
1609+
if (Date.now() - timestamp < CACHE_DURATION) {
1610+
return data;
1611+
}
1612+
}
1613+
return null;
1614+
}
1615+
1616+
function setCachedStarCount(starCount) {
1617+
const cacheData = {
1618+
data: starCount,
1619+
timestamp: Date.now()
1620+
};
1621+
localStorage.setItem(CACHE_KEY, JSON.stringify(cacheData));
1622+
}
1623+
1624+
function updateStarCount(starCount) {
1625+
// 更新页面中所有显示 star 数的元素
1626+
document.querySelectorAll('[id$="star-count"]').forEach(el => {
1627+
el.textContent = starCount;
15891628
});
1629+
}
1630+
1631+
// 获取仓库 star 数
1632+
function fetchStarCount() {
1633+
// 先检查缓存
1634+
const cachedStarCount = getCachedStarCount();
1635+
if (cachedStarCount) {
1636+
updateStarCount(cachedStarCount);
1637+
return;
1638+
}
1639+
1640+
// 缓存过期或不存在，从 API 获取
1641+
fetch('https://api.github.com/repos/JSREI/userscript-template')
1642+
.then(response => response.json())
1643+
.then(data => {
1644+
const starCount = data.stargazers_count.toLocaleString();
1645+
updateStarCount(starCount);
1646+
setCachedStarCount(starCount);
1647+
})
1648+
.catch(() => {
1649+
updateStarCount('N/A');
1650+
});
1651+
}
1652+
1653+
// 页面加载时获取 star 数
1654+
fetchStarCount();
15901655

15911656
// 导航栏激活状态
15921657
const navLinks = document.querySelectorAll('nav a');

0 commit comments

Comments
 (0)