compile

config.yml

@@ -37,6 +37,9 @@ languages:
       series: series
     menu:
       main:
+        - name: 我的简历
+          url: aboutme/
+          weight: 3
         - name: 记录点滴
           url: article/
           weight: 5
@@ -98,6 +101,8 @@ params:
     # imageWidth: 120
     # imageHeight: 120
     buttons:
+      - name: 👤
+        url: aboutme
       - name: ✎
         url: article
       - name: π

content/aboutme/_index.html

@@ -0,0 +1,218 @@
+<div class="pdf-viewer">
+  <!-- iframe容器 -->
+  <div class="pdf-frame-container">
+    <iframe
+        src="苏默小升初简历-18911763072.pdf#toolbar=0&navpanes=0&view=FitH"
+        width="100%"
+        height="100%"
+        style="border: none;"
+        title="简历预览 - 点击在新窗口全屏查看">
+    </iframe>
+    
+    <!-- 透明覆盖层 -->
+    <div class="click-overlay" onclick="window.open('苏默小升初简历-18911763072.pdf', '_blank')">
+      <div class="tooltip-content">
+        <svg class="fullscreen-icon" viewBox="0 0 24 24" fill="white">
+          <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>
+        </svg>
+        <span>点击全屏查看</span>
+      </div>
+    </div>
+  </div>
+  
+  <!-- 操作按钮 -->
+  <div class="action-buttons">
+    <button onclick="window.open('苏默小升初简历-18911763072.pdf', '_blank')" class="action-btn primary">
+      <svg class="btn-icon" viewBox="0 0 24 24">
+        <path d="M19 19H5V5h7V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+      </svg>
+      新窗口全屏
+    </button>
+    <a href="苏默小升初简历-18911763072.pdf" download class="action-btn secondary">
+      <svg class="btn-icon" viewBox="0 0 24 24">
+        <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+      </svg>
+      下载PDF
+    </a>
+  </div>
+</div>
+
+<style>
+.pdf-viewer {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 2rem 0;
+}
+
+/* iframe容器 - 精确70%宽度 */
+.pdf-frame-container {
+  position: relative;
+  width: 60%; /* 固定70%宽度 */
+  max-width: 800px; /* 最大宽度限制 */
+  height: 600px;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
+  background: #f8f9fa; /* 添加背景色 */
+}
+
+/* PDF参数说明：
+   FitH - 适合高度，确保显示整页
+   toolbar=0 - 隐藏工具栏
+   navpanes=0 - 隐藏导航面板
+*/
+
+/* 透明覆盖层 */
+.click-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: all 0.3s ease;
+  z-index: 2;
+}
+
+.click-overlay:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.tooltip-content {
+  background: rgba(0, 0, 0, 0.85);
+  color: white;
+  padding: 15px 25px;
+  border-radius: 30px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  transform: translateY(10px);
+  transition: transform 0.3s ease;
+  pointer-events: none;
+}
+
+.click-overlay:hover .tooltip-content {
+  transform: translateY(0);
+}
+
+.fullscreen-icon {
+  width: 20px;
+  height: 20px;
+}
+
+/* 操作按钮 */
+.action-buttons {
+  display: flex;
+  gap: 15px;
+  margin-top: 20px;
+  justify-content: center;
+}
+
+.action-btn {
+  padding: 12px 24px;
+  border-radius: 8px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  border: none;
+  font-size: 14px;
+  transition: all 0.3s ease;
+  text-decoration: none;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  color: white;
+}
+
+.action-btn.primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(0, 123, 255, 0.4);
+}
+
+.action-btn.secondary {
+  background: linear-gradient(135deg, #28a745, #1e7e34);
+  color: white;
+}
+
+.action-btn.secondary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
+}
+
+.btn-icon {
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+/* 响应式设计 */
+@media (max-width: 1200px) {
+  .pdf-frame-container {
+    width: 75%;
+  }
+}
+
+@media (max-width: 992px) {
+  .pdf-frame-container {
+    width: 85%;
+    height: 550px;
+  }
+}
+
+@media (max-width: 768px) {
+  .pdf-frame-container {
+    width: 90%;
+    height: 500px;
+  }
+  
+  .action-buttons {
+    flex-direction: column;
+    width: 90%;
+  }
+  
+  .action-btn {
+    justify-content: center;
+  }
+}
+
+@media (max-width: 576px) {
+  .pdf-frame-container {
+    width: 95%;
+    height: 450px;
+  }
+  
+  .tooltip-content {
+    padding: 12px 20px;
+    font-size: 14px;
+  }
+  
+  .action-btn {
+    padding: 10px 20px;
+  }
+}
+
+/* 深色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .pdf-frame-container {
+    background: #2d2d2d;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+  }
+  
+  .tooltip-content {
+    background: rgba(0, 0, 0, 0.9);
+  }
+}
+</style>

content/music/Choir_show/index.md

@@ -1,7 +1,150 @@
 ---
 title: 海淀区合唱团表演
-date: '2025-12-10'
+date: "2025-12-10"
 ---
 
+<div class="lazy-video" data-src="choir_show.mp4">
+  <!-- 预览图 -->
+  <div class="video-preview" onclick="loadAndPlay(this)">
+    <img src="video-thumbnail.jpg" alt="视频预览" class="preview-image">
+    <div class="play-button">▶</div>
+    <div class="video-info-overlay">
+      <span>点击播放视频</span>
+      <small>时长: 3:45</small>
+    </div>
+  </div>
+  
+  <!-- 视频播放器（初始隐藏） -->
+  <div class="video-player" style="display: none;">
+    <video controls>
+      <source src="" type="video/mp4">
+    </video>
+    <button class="close-video" onclick="closeVideo(this)">✕</button>
+  </div>
+</div>
 
-[choir_show.mp4](choir_show.mp4)
+<script>
+function loadAndPlay(element) {
+  const container = element.closest('.lazy-video');
+  const videoSrc = container.getAttribute('data-src');
+  const preview = container.querySelector('.video-preview');
+  const player = container.querySelector('.video-player');
+  const video = player.querySelector('video');
+  const source = video.querySelector('source');
+  
+  // 设置视频源
+  source.src = videoSrc;
+  video.load();
+  
+  // 切换显示
+  preview.style.display = 'none';
+  player.style.display = 'block';
+  
+  // 开始播放
+  video.play();
+}
+
+function closeVideo(button) {
+  const player = button.closest('.video-player');
+  const container = player.closest('.lazy-video');
+  const preview = container.querySelector('.video-preview');
+  const video = player.querySelector('video');
+  
+  // 停止播放
+  video.pause();
+  video.currentTime = 0;
+  
+  // 切换显示
+  player.style.display = 'none';
+  preview.style.display = 'block';
+}
+</script>
+
+<style>
+.lazy-video {
+  max-width: 800px;
+  margin: 2rem auto;
+}
+
+.video-preview {
+  position: relative;
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #000;
+  aspect-ratio: 16/9;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0.8;
+  transition: opacity 0.3s;
+}
+
+.video-preview:hover .preview-image {
+  opacity: 0.6;
+}
+
+.play-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 70px;
+  height: 70px;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
+  color: #007bff;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+}
+
+.video-info-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(transparent, rgba(0,0,0,0.8));
+  color: white;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+
+.video-player {
+  position: relative;
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.video-player video {
+  width: 100%;
+  height: auto;
+  max-height: 600px;
+  display: block;
+}
+
+.close-video {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0,0,0,0.7);
+  color: white;
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

content/music/Choir_show/index.qmd

@@ -1,8 +0,0 @@
----
-title: "海淀区合唱团表演"
-date: "2025-12-10"
----
-
-
-
-{{< video choir_show.mp4 >}}