anian/halo-theme-pix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增嵌入式代码块；优化通知书推送时机

Browse Source
This commit is contained in:
anian
2026-03-10 17:24:50 +08:00
parent 6810791637
commit b387ea885c
24 changed files with 3793 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files
embed-code/page/calendar.html
+332
View File
@@ -0,0 +1,332 @@
<div class="year-gallery">
<!-- Tabs -->
<div class="yg-tabs">
<button class="yg-tab active" data-target="yg-2025">2025</button>
<button class="yg-tab" data-target="yg-2026">2026</button>
</div>
<!-- ================= 2025 ================= -->
<div class="yg-panel active" id="yg-2025">
<!-- 封面：像 2026 一样两个独立卡片 -->
<div class="yg-2025-hero-row">
<div class="yg-2025-hero">
<img src="/upload/2025-0-1.png">
</div>
<div class="yg-2025-hero">
<img src="/upload/2025-0-2.png">
</div>
</div>
<!-- ========= 12 个月：4 行 3 列 ========= -->
<div class="yg-grid-2025-3col">
<div class="yg-card">
<img src="/upload/2025-1-1.png">
<img src="/upload/2025-1-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-2-1.png">
<img src="/upload/2025-2-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-3-1.png">
<img src="/upload/2025-3-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-4-1.png">
<img src="/upload/2025-4-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-5-1.png">
<img src="/upload/2025-5-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-6-1.png">
<img src="/upload/2025-6-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-7-1.png">
<img src="/upload/2025-7-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-8-1.png">
<img src="/upload/2025-8-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-9-1.png">
<img src="/upload/2025-9-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-10-1.png">
<img src="/upload/2025-10-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-11-1.png">
<img src="/upload/2025-11-2.png">
</div>
<div class="yg-card">
<img src="/upload/2025-12-1.png">
<img src="/upload/2025-12-2.png">
</div>
</div>
</div>
<!-- ================= 2026（完全未改动） ================= -->
<div class="yg-panel" id="yg-2026">
<div class="yg-hero-row">
<div class="yg-hero">
<img src="/upload/2026.jpg">
</div>
<div class="yg-hero">
<img src="/upload/2026-0.png">
</div>
</div>
<div class="yg-grid-2026">
<div class="yg-2026-month"><img src="/upload/2026-1.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-2.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-3.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-4.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-5.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-6.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-7.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-8.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-9.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-10.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-11.png"></div>
<div class="yg-2026-month"><img src="/upload/2026-12.png"></div>
</div>
</div>
</div>
<style>
.year-gallery {
width: 100%;
max-width: 1200px;
margin: 50px auto;
}
/* ---------------- Tabs ---------------- */
.yg-tabs {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.yg-tab {
padding: 10px 25px;
margin: 0 5px;
border-radius: 999px;
border: 1px solid #9ad1a1;
background: #e9f7ec;
cursor: pointer;
transition: .3s;
color: #2c6e3f;
}
.yg-tab.active {
background: #4caf50;
color: #fff;
border-color: #4caf50;
}
.yg-panel {
display: none;
}
.yg-panel.active {
display: block;
}
/* ================= 2025 ================= */
/* 封面像 2026 一样：两个独立卡片 */
.yg-2025-hero-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin-bottom: 18px;
}
.yg-2025-hero {
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
padding: 8px;
}
.yg-2025-hero img {
width: 100%;
display: block;
border-radius: 12px;
}
/* 3 列 × 4 行 月份布局 */
.yg-grid-2025-3col {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.yg-card {
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
padding: 8px;
}
.yg-grid-2025-3col .yg-card img {
width: 100%;
border-radius: 12px;
display: block;
}
/* 月份双图之间：只加一点点 */
.yg-card img+img {
margin-top: 6px;
}
/* ================= 2026 =================（未改） */
.yg-hero-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-bottom: 18px;
}
.yg-hero {
background: #fff;
border-radius: 16px;
box-shadow: 0 6px 22px rgba(76, 175, 80, .18);
overflow: hidden;
}
.yg-hero img {
width: 100%;
aspect-ratio: 1185/1775;
object-fit: cover;
}
.yg-hero:first-child img {
object-position: top;
}
.yg-grid-2026 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.yg-2026-month {
background: #fff;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(76, 175, 80, .18);
padding: 8px;
}
.yg-2026-month img {
width: 100%;
aspect-ratio: 1185/1775;
object-fit: cover;
border-radius: 12px;
}
/* 手机优化 */
@media(max-width:900px) {
.yg-2025-hero-row,
.yg-grid-2025-3col {
gap: 10px;
}
.yg-hero-row,
.yg-grid-2026 {
gap: 10px;
}
.yg-card,
.yg-2026-month {
padding: 6px;
box-shadow: 0 4px 12px rgba(76, 175, 80, .15);
}
}
@media(max-width:600px) {
.year-gallery {
margin: 25px auto;
}
.yg-card,
.yg-2026-month {
padding: 5px;
}
.yg-2025-hero-row,
.yg-grid-2025-3col,
.yg-grid-2026,
.yg-hero-row {
gap: 8px;
}
}
</style>
<script>
function initYearGallery() {
document.querySelectorAll(".yg-tab").forEach(btn => {
btn.onclick = () => {
document.querySelectorAll(".yg-tab").forEach(b => b.classList.remove("active"));
document.querySelectorAll(".yg-panel").forEach(p => p.classList.remove("active"));
btn.classList.add("active");
document.getElementById(btn.dataset.target).classList.add("active");
};
});
}
document.addEventListener("DOMContentLoaded", initYearGallery);
document.addEventListener("pjax:complete", initYearGallery);
</script>