我的网站优化

2026-05-18 14:36:19 +08:00
parent 40278c5d84
commit 47396b88f0
21 changed files with 810 additions and 138 deletions
--- a/index.html
+++ b/index.html
@@ -203,6 +203,9 @@
                        data-i18n-attr="href">知乎</a>
                    <a href="https://space.bilibili.com/403551212" target="_blank" data-i18n="social_link4"
                        data-i18n-attr="href">B站</a>
+                    <a href="https://www.xiaohongshu.com/user/profile/65aabb99000000000e0271f1" target="_blank" 
+                        data-i18n="social_link6"
+                        data-i18n-attr="href">小红书</a>
                    <a href="https://www.52pojie.cn/home.php?mod=space&uid=2059006" target="_blank"
                        data-i18n="social_link5" data-i18n-attr="href">52pojie</a>
                </div>
@@ -234,6 +237,54 @@
            </div>
        </div>

+        <!-- MookNote 作品详情弹窗 -->
+        <div id="mooknote-modal" class="guestbook-full-modal">
+            <div class="full-modal-content solid-modal mooknote-modal-content">
+                <div class="guestbook-header">
+                    <h2>MookNote：为记录而生</h2>
+                    <button id="mooknote-close" class="guestbook-close" title="关闭">&times;</button>
+                </div>
+                <div class="guestbook-body mooknote-body">
+                    <div class="mooknote-banner-carousel">
+                        <div class="carousel-container">
+                            <img src="./static/img/my_work/mooknote/banner.jpg" alt="MookNote Banner" class="carousel-image active" onclick="openMooknoteLightbox(0)">
+                            <img src="./static/img/my_work/mooknote/1.jpg" alt="MookNote Screenshot 1" class="carousel-image" onclick="openMooknoteLightbox(1)">
+                            <img src="./static/img/my_work/mooknote/2.jpg" alt="MookNote Screenshot 2" class="carousel-image" onclick="openMooknoteLightbox(2)">
+                            <img src="./static/img/my_work/mooknote/3.jpg" alt="MookNote Screenshot 3" class="carousel-image" onclick="openMooknoteLightbox(3)">
+                            <img src="./static/img/my_work/mooknote/4.jpg" alt="MookNote Screenshot 4" class="carousel-image" onclick="openMooknoteLightbox(4)">
+                            <img src="./static/img/my_work/mooknote/5.jpg" alt="MookNote Screenshot 5" class="carousel-image" onclick="openMooknoteLightbox(5)">
+                            <img src="./static/img/my_work/mooknote/6.jpg" alt="MookNote Screenshot 6" class="carousel-image" onclick="openMooknoteLightbox(6)">
+                        </div>
+                        <button class="carousel-btn carousel-prev" onclick="prevMooknoteImage()">&#10094;</button>
+                        <button class="carousel-btn carousel-next" onclick="nextMooknoteImage()">&#10095;</button>
+                        <div class="carousel-indicators"></div>
+                    </div>
+                    <div class="mooknote-content">
+                        <p class="mooknote-intro">一款专注于个人记录的极简工具，让每一份感动与思考都有迹可循。</p>
+                        <p>在这个信息爆炸的时代，我们每天都在消费大量的内容——看一部电影、读一本书、产生一个灵感。然而，这些内容往往如流水般逝去，留下的只有模糊的记忆。</p>
+                        <p><strong>MookNote 诞生于对简洁工具的追求。</strong></p>
+                        <p>我相信，好的工具应该像纸笔一样自然，不打扰思考，只记录生活。它不应该有繁琐的注册流程，不应该将你的数据存储在陌生的服务器上，更不应该用花哨的功能分散你的注意力。</p>
+                        <p>我厌烦了一款软件让用户不断地注册来注册去，使用手机号验证来验证去，数据不于自己，甚至自己写的笔记也不属于自己，我不喜欢这样，我想一款优秀的软件应该抛去繁杂的设计，就像太极一般的黑白两色。就像专业的人做专业的事情一样，MookNote主打记录生活一切有迹可循的影视娱乐，想法笔记。</p>
+                        <p>MookNote名字的由来也是让我冥思苦想，Mo取自Movie的前两个字母ok取自book的后两个字母，Note则名为笔记，名字就这么来了。影视，书籍，笔记的三项生活记录，因为热爱，所以记录，因为想法，所以书写。</p>
+                        <p>目前笔记还处于基础功能的版本，希望各位能多给我提提建议，我也会在其中做一些取舍，能与不能我都会一一记录下来的。在此，希望大家能多多帮助我这一个不知名的小开发者。</p>
+                        <p class="mooknote-thanks">最后的最后，感谢阿里千问的通义灵码，让我一个小小的java开发者接触到Android开发，帮了我的大忙，帮了我最纯真的梦想。</p>
+                        <div class="mooknote-download">
+                            <a href="https://mooknote.iletter.top/" target="_blank" class="download-btn">前往下载 / 了解更多</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- MookNote 全屏图片预览 -->
+        <div id="mooknote-lightbox" class="photo-lightbox">
+            <button class="lightbox-close" onclick="closeMooknoteLightbox()">&times;</button>
+            <button class="lightbox-nav lightbox-prev" onclick="prevLightboxImage()">&#10094;</button>
+            <button class="lightbox-nav lightbox-next" onclick="nextLightboxImage()">&#10095;</button>
+            <div class="lightbox-counter"></div>
+            <img src="" alt="MookNote Fullscreen" class="lightbox-img">
+        </div>
+
        <!-- 工具内容 -->
        <div class="tab-content" id="tools-content">
            <div class="content-section">
--- a/static/css/guestbook.css
+++ b/static/css/guestbook.css
@@ -30,7 +30,7 @@
    position: absolute;
    right: 80px; /* 从容器的左边缘开始 */
    top: 0;
-    width: 200px; /* 15px 间距 + 380px 预览面板宽度 */
+    width: 50px; /* 15px 间距 + 380px 预览面板宽度 */
    height: 80px; /* 与按钮高度一致 */
    background: transparent;
    pointer-events: auto;
@@ -170,6 +170,21 @@
    padding: 0;
    overflow-y: auto;
    max-height: calc(400px - 50px);
+    scrollbar-width: thin; /* Firefox */
+    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Firefox */
+}
+
+.preview-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.preview-body::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.preview-body::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
 }

 .preview-item {
@@ -322,6 +337,100 @@
    pointer-events: none;
 }

+/* 旅途剪影弹窗样式 - iOS 26 风格极致玻璃拟态 */
+.full-modal-content {
+    background: linear-gradient(
+        135deg,
+        rgba(255, 255, 255, 0.12) 0%,
+        rgba(255, 255, 255, 0.06) 50%,
+        rgba(255, 255, 255, 0.1) 100%
+    );
+    backdrop-filter: blur(80px) saturate(250%);
+    -webkit-backdrop-filter: blur(80px) saturate(250%);
+    border: 1px solid rgba(255, 255, 255, 0.45);
+    border-radius: 28px;
+    width: 95%;
+    height: 95vh;
+    max-width: 1400px;
+    overflow: hidden;
+    box-shadow: 
+        0 32px 100px rgba(0, 0, 0, 0.25),
+        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
+        inset 0 1px 1px rgba(255, 255, 255, 0.6),
+        inset 0 -1px 1px rgba(255, 255, 255, 0.15);
+    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+    position: relative;
+    isolation: isolate;
+}
+
+/* 针对旅途剪影弹窗的绝对全屏处理 */
+#photo-album-full-modal .full-modal-content {
+    width: 100vw !important;
+    height: 100vh !important;
+    max-width: none !important;
+    max-height: none !important;
+    border-radius: 0 !important;
+    border: none !important;
+}
+
+#photo-album-full-modal .full-modal-content::before {
+    border-radius: 0 !important;
+}
+
+#photo-album-full-modal .full-modal-content::after {
+    border-radius: 0 !important;
+}
+
+/* 顶部高光反射 - 增强版 */
+.full-modal-content::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 50%;
+    background: linear-gradient(180deg, 
+        rgba(255, 255, 255, 0.5) 0%, 
+        rgba(255, 255, 255, 0.2) 30%,
+        rgba(255, 255, 255, 0.05) 70%,
+        transparent 100%);
+    border-radius: 28px 28px 0 0;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* 底部环境光反射 */
+.full-modal-content::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 10%;
+    right: 10%;
+    height: 80px;
+    background: radial-gradient(ellipse at center bottom, 
+        rgba(255, 255, 255, 0.2) 0%, 
+        transparent 60%);
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* 侧边边缘反光 */
+.full-modal-content .guestbook-header::after {
+    content: '';
+    position: absolute;
+    top: 20%;
+    left: 0;
+    bottom: 20%;
+    width: 2px;
+    background: linear-gradient(180deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.3) 30%,
+        rgba(255, 255, 255, 0.5) 50%,
+        rgba(255, 255, 255, 0.3) 70%,
+        transparent 100%);
+    pointer-events: none;
+}
+
 /* 实心背景弹窗样式（留言板、博客文章专用） */
 .full-modal-content.solid-modal {
    background: #fff;
@@ -457,6 +566,19 @@
    z-index: 2;
 }

+/* 旅途剪影弹窗标题样式优化 */
+#photo-album-full-modal .guestbook-header h2 {
+    color: #1a1a1a;
+    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
+}
+
+/* 旅途剪影弹窗关闭按钮样式优化 */
+#photo-album-full-modal .guestbook-close {
+    background: rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    color: #333;
+}
+
 .guestbook-header h2 {
    margin: 0;
    font-size: 24px;
@@ -977,6 +1099,17 @@
    overflow: hidden;
 }

+.blog-post-digest {
+    font-size: 12px;
+    color: #888;
+    margin-bottom: 8px;
+    line-height: 1.6;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
 .blog-post-meta {
    display: flex;
    justify-content: space-between;
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -183,6 +183,325 @@ body {
    text-decoration: underline;
 }

+/* 视图切换文字样式 */
+.website-view-toggle {
+    font-size: 13px;
+    color: #999;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    user-select: none;
+}
+
+.website-view-toggle:hover {
+    color: #333;
+    text-decoration: underline;
+}
+
+/* 卡片视图样式 */
+.website-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.website-card {
+    background: #fff;
+    border: 1px solid #eee;
+    border-radius: 8px;
+    overflow: hidden;
+    cursor: pointer;
+    transition: border-color 0.3s ease;
+}
+
+.website-card:hover {
+    border-color: #333;
+}
+
+.website-card-icon {
+    width: 100%;
+    height: 120px;
+    overflow: hidden;
+    background: #f9f9f9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.website-card-placeholder {
+    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
+    color: #999;
+    font-size: 30px;
+    font-weight: bold;
+    font-family: serif;
+}
+
+.website-card-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.website-card-info {
+    padding: 12px;
+}
+
+.website-card-title {
+    font-weight: bold;
+    color: #333;
+    font-size: 14px;
+    margin-bottom: 6px;
+    line-height: 1.4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.website-card-desc {
+    font-size: 12px;
+    color: #888;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+}
+
+/* MookNote 弹窗样式 */
+.mooknote-modal-content {
+    max-width: 800px;
+    width: 90%;
+}
+
+.mooknote-banner-carousel {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+    border-radius: 8px 8px 0 0;
+}
+
+.carousel-container {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background: #f5f5f5;
+}
+
+.carousel-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    opacity: 0;
+    transition: opacity 0.5s ease;
+    cursor: pointer;
+    pointer-events: none;
+}
+
+.carousel-image.active {
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.carousel-image:hover {
+    filter: brightness(1.1);
+}
+
+.carousel-btn {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 60px;
+    background: rgba(255, 255, 255, 0.3);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    font-size: 28px;
+    transition: background 0.3s ease;
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.carousel-btn:hover {
+    background: rgba(0, 0, 0, 0.1);
+}
+
+.carousel-prev {
+    left: 0;
+}
+
+.carousel-next {
+    right: 0;
+}
+
+.carousel-indicators {
+    position: absolute;
+    bottom: 15px;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    gap: 8px;
+    z-index: 10;
+}
+
+.carousel-indicator {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.5);
+    cursor: pointer;
+    transition: background 0.3s ease;
+}
+
+.carousel-indicator.active {
+    background: #fff;
+}
+
+/* MookNote 全屏预览样式 */
+.photo-lightbox {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.95);
+    z-index: 10000;
+    align-items: center;
+    justify-content: center;
+}
+
+.photo-lightbox.active {
+    display: flex;
+}
+
+.lightbox-img {
+    max-width: 95%;
+    max-height: 95%;
+    object-fit: contain;
+    border-radius: 4px;
+}
+
+.lightbox-close {
+    position: absolute;
+    top: 20px;
+    right: 30px;
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    border: none;
+    font-size: 36px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    z-index: 10001;
+}
+
+.lightbox-close:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.lightbox-nav {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.2);
+    color: #fff;
+    border: none;
+    font-size: 32px;
+    width: 60px;
+    height: 80px;
+    cursor: pointer;
+    transition: background 0.3s ease;
+    z-index: 10001;
+}
+
+.lightbox-nav:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.lightbox-prev {
+    left: 30px;
+}
+
+.lightbox-next {
+    right: 30px;
+}
+
+.lightbox-counter {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: 16px;
+    background: rgba(0, 0, 0, 0.5);
+    padding: 8px 20px;
+    border-radius: 20px;
+}
+
+.mooknote-body {
+    padding: 40px 50px;
+}
+
+.mooknote-content {
+    padding: 40px 35px;
+}
+
+.mooknote-content p {
+    margin-bottom: 15px;
+    line-height: 1.8;
+    color: #444;
+    text-align: justify;
+}
+
+.mooknote-intro {
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 1px solid #eee;
+}
+
+.mooknote-thanks {
+    font-style: italic;
+    color: #666;
+    background: #f9f9f9;
+    padding: 15px;
+    border-left: 4px solid #ddd;
+    border-radius: 4px;
+}
+
+.mooknote-download {
+    text-align: center;
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 1px dashed #eee;
+}
+
+.download-btn {
+    display: inline-block;
+    padding: 12px 30px;
+    background: #333;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 25px;
+    transition: all 0.3s ease;
+}
+
+.download-btn:hover {
+    background: #000;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
 /* 工具和游戏网格 */
 .tools-grid,
 .games-grid {
--- a/static/img/my_work/bitwarden/banner.png
+++ b/static/img/my_work/bitwarden/banner.png
--- a/static/img/my_work/blog_iletter/banner.png
+++ b/static/img/my_work/blog_iletter/banner.png
--- a/static/img/my_work/easyimage2/banner.png
+++ b/static/img/my_work/easyimage2/banner.png
--- a/static/img/my_work/frp_panel/banner.png
+++ b/static/img/my_work/frp_panel/banner.png
--- a/static/img/my_work/ittoolman/banner.png
+++ b/static/img/my_work/ittoolman/banner.png
--- a/static/img/my_work/mooknote/1.jpg
+++ b/static/img/my_work/mooknote/1.jpg
--- a/static/img/my_work/mooknote/2.jpg
+++ b/static/img/my_work/mooknote/2.jpg
--- a/static/img/my_work/mooknote/3.jpg
+++ b/static/img/my_work/mooknote/3.jpg
--- a/static/img/my_work/mooknote/4.jpg
+++ b/static/img/my_work/mooknote/4.jpg
--- a/static/img/my_work/mooknote/5.jpg
+++ b/static/img/my_work/mooknote/5.jpg
--- a/static/img/my_work/mooknote/6.jpg
+++ b/static/img/my_work/mooknote/6.jpg
--- a/static/img/my_work/mooknote/banner.jpg
+++ b/static/img/my_work/mooknote/banner.jpg
--- a/static/img/my_work/openlist/banner.png
+++ b/static/img/my_work/openlist/banner.png
--- a/static/js/blog_posts.js
+++ b/static/js/blog_posts.js
@@ -19,6 +19,7 @@
    const blogPostsClose = document.getElementById('blog-posts-close');
    const blogPostsList = document.querySelector('.blog-posts-list');
    const blogPostsFullBody = document.querySelector('#blog-posts-full-modal .guestbook-body');
+    const previewBody = blogPostsPreview ? blogPostsPreview.querySelector('.preview-body') : null;

    // 初始化
    function init() {
@@ -32,6 +33,20 @@

        // 页面加载时自动加载数据（用于 Hover 预览）
        loadBlogPosts(true);
+
+        // 监听预览面板滚动事件实现触底加载
+        if (previewBody) {
+            previewBody.addEventListener('scroll', handleScroll);
+        }
+    }
+
+    // 处理滚动事件
+    function handleScroll(e) {
+        const { scrollTop, scrollHeight, clientHeight } = e.target;
+        // 距离底部 50px 时触发加载
+        if (scrollHeight - scrollTop - clientHeight < 50) {
+            loadMoreBlogPosts();
+        }
    }

    // 打开完整弹窗
@@ -65,7 +80,7 @@
        }

        try {
-            const response = await fetch(`${BLOG_API_URL}?page=${currentPage}&pageSize=${PAGE_SIZE}&showContent=false&showDigest=excerpt&limit=30`, {
+            const response = await fetch(`${BLOG_API_URL}?page=${currentPage}&pageSize=${PAGE_SIZE}&showContent=false&showDigest=excerpt&limit=60`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
@@ -105,27 +120,35 @@

    // 渲染文章列表
    function renderPosts(posts, isReset = false, totalCount = 0) {
-        let html = '';
+        // 预览面板 HTML（无底部分页按钮，使用无限滚动）
+        let previewHtml = '';
+        // 全屏弹窗 HTML（保留底部分页按钮）
+        let fullHtml = '';
        
        if (!posts || posts.length === 0) {
-            html = '<div class="guestbook-empty">暂无文章</div>';
+            const emptyHtml = '<div class="guestbook-empty">暂无文章</div>';
+            previewHtml = emptyHtml;
+            fullHtml = emptyHtml;
        } else {
-            html = '<div class="blog-posts-container">';
-            posts.forEach(post => {
-                html += renderPostItem(post);
-            });
-            html += '</div>';
-
-            // 只有在还有更多数据时才显示加载更多按钮
+            const containerHtml = '<div class="blog-posts-container">' +
+                posts.map(post => renderPostItem(post)).join('') +
+                '</div>';
+            
+            previewHtml = containerHtml;
+            if (!hasMore) {
+                previewHtml += `<div class="load-complete">已显示全部</div>`;
+            }
+            
+            fullHtml = containerHtml;
            if (hasMore) {
-                html += `<button class="load-more-btn" onclick="window.loadMoreBlogPosts()">点击加载更多</button>`;
+                fullHtml += `<button class="load-more-btn" onclick="window.loadMoreBlogPosts()">点击加载更多</button>`;
            } else {
-                html += `<div class="load-complete">已显示全部</div>`;
+                fullHtml += `<div class="load-complete">已显示全部</div>`;
            }
        }

-        if (blogPostsList) blogPostsList.innerHTML = html;
-        if (blogPostsFullBody) blogPostsFullBody.innerHTML = html;
+        if (blogPostsList) blogPostsList.innerHTML = previewHtml;
+        if (blogPostsFullBody) blogPostsFullBody.innerHTML = fullHtml;
        
        // 更新预览面板标题显示总数
        const previewHeader = document.querySelector('#blog-posts-preview .preview-header h3');
@@ -188,9 +211,13 @@
        const date = new Date(post.created * 1000);
        const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        const category = post.categories && post.categories.length > 0 ? post.categories[0].name : '未分类';
+        const digest = post.digest || '';
        
        let html = `<div class="blog-post-item" onclick="window.open('${post.permalink}', '_blank')">`;
        html += `<div class="blog-post-title">${escapeHtml(post.title)}</div>`;
+        if (digest) {
+            html += `<div class="blog-post-digest">${escapeHtml(digest)}</div>`;
+        }
        html += `<div class="blog-post-meta">`;
        html += `<span>${dateStr}</span>`;
        html += `<span class="blog-post-category">${escapeHtml(category)}</span>`;
--- a/static/js/language/en.js
+++ b/static/js/language/en.js
@@ -33,6 +33,8 @@ const translationsEN = {
  social_link3: "Zhihu",
  social_link4: "Bilibili",
  social_link5: "52pojie",
+  social_link6: "XiaoHongShu",
+  
  // 留言
  leave_message_h3: "Leave a Message",
  leave_message_p:
--- a/static/js/language/zh.js
+++ b/static/js/language/zh.js
@@ -34,6 +34,8 @@ const translationsZH = {
  social_link3: "知乎",
  social_link4: "B站",
  social_link5: "52pojie",
+  social_link6: "小红书",
+  
  // 留言
  leave_message_h3: "留言",
  leave_message_p:
--- a/static/js/photo_album.js
+++ b/static/js/photo_album.js
@@ -185,13 +185,6 @@
            // 点击关闭按钮
            lightbox.querySelector('.photo-lightbox-close').addEventListener('click', closePhotoLightbox);
            
-            // 点击背景关闭
-            lightbox.addEventListener('click', function(e) {
-                if (e.target === lightbox) {
-                    closePhotoLightbox();
-                }
-            });
-
            // 上一张按钮
            lightbox.querySelector('.photo-lightbox-prev').addEventListener('click', function(e) {
                e.stopPropagation();
--- a/static/js/websites_my.js
+++ b/static/js/websites_my.js
@@ -1,96 +1,53 @@
 // ========== 网站链接数据 (包含中英双语) ==========
 const websitesData = [
-    {
-        // 分类标题
-        category_zh: '个人博客',
-        category_en: 'Personal Blogs',
-        items: [
-            {
-                url: 'https://www.ittoolman.top/',
-                linkText_zh: 'ittoolman.top - Github托管',
-                linkText_en: 'ittoolman.top - Github Page'
-            },
-            {
-                url: 'https://blog.iletter.top/',
-                linkText_zh: 'blog.iletter.top - typecho用户的最后坚守',
-                linkText_en: 'blog.iletter.top - Last Stand for Typecho Users'
-            }
-        ]
-    },
-    {
-        category_zh: '私人在线应用',
-        category_en: 'Personal Online Apps',
-        items: [
-            {
-                url: 'https://img.iletter.top/',
-                linkText_zh: 'EsayImage2 - 私人图床工具',
-                linkText_en: 'EsayImage2 - Image Uploader Tool'
-            },
-            {
-                url: 'https://gitea.iletter.top/',
-                linkText_zh: 'Gitea - 私人git托管仓库',
-                linkText_en: 'Gitea - Private Git Repository'
-            },
-            {
-                url: 'http://umami.iletter.top/',
-                linkText_zh: 'Umami - 网站访问分析',
-                linkText_en: 'Umami - Website visit analysis'
-            },
-            {
-                url: 'http://beszel.iletter.top/',
-                linkText_zh: 'Beszel - 服务器监控',
-                linkText_en: 'Beszel - Server Monitoring'
-            },
-            {
-                url: 'https://memos.iletter.top/',
-                linkText_zh: 'Memos - 个人随想',
-                linkText_en: 'Memos - Personal Thoughts'
-            },
-
-            {
-                url: 'http://frp.iletter.top/',
-                linkText_zh: 'FRP - 个人反向代理',
-                linkText_en: 'FRP - Personal Reverse Proxy'
-            },
-            {
-                url: 'https://bitwarden.iletter.top/',
-                linkText_zh: 'Bitwarden - 我的密码库',
-                linkText_en: 'Bitwarden - My Password Library'
-            },
-             {
-                url: 'http://docmost.iletter.top/',
-                linkText_zh: 'Docmost - 在线笔记',
-                linkText_en: 'Docmost - Online Notes'
-            },
-            {
-                url: 'http://openlist.iletter.top/',
-                linkText_zh: 'OpenList - 在线云盘合集',
-                linkText_en: 'OpenList - Online Cloud Disk Collection'
-            },
-            // {
-            //     url: 'http://py.iletter.top/en-de-code',
-            //     linkText_zh: 'Base64在线加密解密 - 自写demo',
-            //     linkText_en: 'Base64 Online Encryption and Decryption - My Demo'
-            // },
-        ]
-    }
-    // 如果你想添加新分类，可以仿照上面的格式：
-    /*
-    {
-        category_zh: '新的分类名',
-        category_en: 'New Category Name',
-        items: [
-            {
-                url: 'https://example.com/',
-                linkText_zh: '示例网站',
-                linkText_en: 'Example Site'
-            }
-        ]
-    }
-    */
+    { category_zh: '我的作品', category_en: 'My Works', items: [
+        { url: 'https://mooknote.iletter.top/#/', 
+            linkText_zh: 'MookNote - 观影阅读笔记管理', 
+            linkText_en: 'MookNote - Movie & Reading Note Manager', 
+            desc_zh: '用于记录观影、阅读及笔记的个人知识管理应用。', 
+            desc_en: 'Personal knowledge management app for movies, reading, and notes.', 
+            img: './static/img/my_work/mooknote/banner.jpg' 
+        }
+    ]},
+    { category_zh: '个人博客', category_en: 'Personal Blogs', items: [
+        { url: 'https://www.ittoolman.top/', 
+            linkText_zh: 'ittoolman - Github托管', 
+            linkText_en: 'ittoolman - Github Page', 
+            desc_zh: '基于 GitHub Pages 搭建的个人技术站点。', 
+            desc_en: 'Personal tech site based on GitHub Pages.',
+            img: './static/img/my_work/ittoolman/banner.png'
+        },
+        { url: 'https://blog.iletter.top/', 
+            linkText_zh: 'iletter - typecho极简与高效并存', 
+            linkText_en: 'iletter - typecho Minimalism and Efficiency', 
+            desc_zh: '记录日常开发与生活点滴的 Typecho 博客。', 
+            desc_en: 'A Typecho blog recording daily development and life.',
+            img: './static/img/my_work/blog_iletter/banner.png'
+        }
+    ]},
+    { category_zh: '私人在线应用', category_en: 'Personal Online Apps', items: [
+        { img: './static/img/my_work/easyimage2/banner.png',
+            url: 'https://img.iletter.top/', linkText_zh: 'EsayImage2 - 私人图床工具', linkText_en: 'EsayImage2 - Image Uploader Tool', desc_zh: '稳定高效的图片上传与托管服务。', desc_en: 'Stable and efficient image hosting service.' },
+        { url: 'https://gitea.iletter.top/', linkText_zh: 'Gitea - 私人git托管仓库', linkText_en: 'Gitea - Private Git Repository', desc_zh: '轻量级自托管 Git 代码管理平台。', desc_en: 'Lightweight self-hosted Git code management platform.' },
+        { url: 'http://umami.iletter.top/', linkText_zh: 'Umami - 网站访问分析', linkText_en: 'Umami - Website visit analysis', desc_zh: '简洁、隐私友好的网站流量统计工具。', desc_en: 'Simple, privacy-friendly website analytics tool.' },
+        { url: 'http://beszel.iletter.top/', linkText_zh: 'Beszel - 服务器监控', linkText_en: 'Beszel - Server Monitoring', desc_zh: '实时监控服务器资源占用情况。', desc_en: 'Real-time monitoring of server resource usage.' },
+        { url: 'https://memos.iletter.top/', linkText_zh: 'Memos - 个人随想', linkText_en: 'Memos - Personal Thoughts', desc_zh: '碎片化知识管理与灵感记录空间。', desc_en: 'Fragmented knowledge management and inspiration space.' },
+        { url: 'http://frp.iletter.top/', linkText_zh: 'FRP - 个人反向代理', 
+            linkText_en: 'FRP - Personal Reverse Proxy', desc_zh: '用于内网穿透的高性能反向代理。', 
+            desc_en: 'High-performance reverse proxy for intranet penetration.',
+            img: './static/img/my_work/frp_panel/banner.png'
+        },
+        { img: './static/img/my_work/bitwarden/banner.png',
+            url: 'https://bitwarden.iletter.top/', linkText_zh: 'Bitwarden - 我的密码库', linkText_en: 'Bitwarden - My Password Library', desc_zh: '安全可靠的开源密码管理方案。', desc_en: 'Secure and reliable open-source password management solution.' },
+        { url: 'http://docmost.iletter.top/', linkText_zh: 'Docmost - 在线笔记', linkText_en: 'Docmost - Online Notes', desc_zh: '支持协作的实时在线文档编辑平台。', desc_en: 'Real-time online document editing platform supporting collaboration.' },
+        { img: './static/img/my_work/openlist/banner.png',
+            url: 'http://openlist.iletter.top/', linkText_zh: 'OpenList - 在线云盘合集', linkText_en: 'OpenList - Online Cloud Disk Collection', desc_zh: '聚合多种网盘服务的文件列表管理。', desc_en: 'File list management aggregating various cloud storage services.' }
+    ]}
 ];

 // ========== 渲染网站链接的函数 ==========
+let currentViewMode = localStorage.getItem('website_view_mode') || 'card'; // 'list' or 'card'
+
 function renderWebsites(websitesArray) {
    const container = document.getElementById('dynamic-website-links');
    if (!container) {
@@ -109,39 +66,227 @@ function renderWebsites(websitesArray) {

    const currentLang = localStorage.getItem("preferred_language") || "zh";

-    // 清空容器
-    container.innerHTML = '';
+    // 清空容器并添加切换按钮
+    const toggleText = currentViewMode === 'list' ? '切换为卡片视图' : '切换为列表视图';
+    container.innerHTML = `
+        <div style="text-align:right;margin-bottom:10px;">
+            <span class="website-view-toggle" onclick="switchWebsiteView('${currentViewMode === 'list' ? 'card' : 'list'}')">${toggleText}</span>
+        </div>
+        <div id="website-content-area"></div>
+    `;
+    
+    const contentArea = container.querySelector('#website-content-area');

-    arrayToRender.forEach(categoryObj => {
-        // 根据当前语言选择分类标题
-        const categoryName = currentLang === 'en' ? categoryObj.category_en : categoryObj.category_zh;
+    if (currentViewMode === 'list') {
+        arrayToRender.forEach(categoryObj => {
+            const categoryName = currentLang === 'en' ? categoryObj.category_en : categoryObj.category_zh;
+            const heading = document.createElement('h3');
+            heading.textContent = categoryName;
+            contentArea.appendChild(heading);

-        // 创建分类标题
-        const heading = document.createElement('h3');
-        heading.textContent = categoryName;
-        container.appendChild(heading);
+            const linksDiv = document.createElement('div');
+            linksDiv.className = 'category-links';

-        // 创建一个 div 来包裹该分类下的所有链接
-        const linksDiv = document.createElement('div');
-        linksDiv.className = 'category-links'; // 可选，方便 CSS 样式化
-
-        categoryObj.items.forEach(item => {
-            const linkElement = document.createElement('a');
-            linkElement.href = item.url;
-            linkElement.target = '_blank';
-
-            // 根据当前语言选择链接文本
-            const linkText = currentLang === 'en' ? item.linkText_en : item.linkText_zh;
-            linkElement.textContent = linkText;
-
-            linksDiv.appendChild(linkElement);
-
-            // 添加一个间隔（例如空格或换行符，取决于你的 CSS 布局）
-            const space = document.createTextNode(' ');
-            linksDiv.appendChild(space);
+            categoryObj.items.forEach(item => {
+                const linkElement = document.createElement('a');
+                linkElement.href = '#';
+                linkElement.textContent = currentLang === 'en' ? item.linkText_en : item.linkText_zh;
+                
+                if (item.url === 'https://mooknote.iletter.top/#/') {
+                    linkElement.onclick = (e) => {
+                        e.preventDefault();
+                        openMookNoteModal();
+                    };
+                } else {
+                    linkElement.onclick = (e) => {
+                        e.preventDefault();
+                        window.open(item.url, '_blank');
+                    };
+                }
+                
+                linksDiv.appendChild(linkElement);
+                const space = document.createTextNode(' ');
+                linksDiv.appendChild(space);
+            });
+            contentArea.appendChild(linksDiv);
        });
+    } else {
+        arrayToRender.forEach(categoryObj => {
+            const categoryName = currentLang === 'en' ? categoryObj.category_en : categoryObj.category_zh;
+            const heading = document.createElement('h3');
+            heading.textContent = categoryName;
+            contentArea.appendChild(heading);
+            
+            const gridDiv = document.createElement('div');
+            gridDiv.className = 'website-card-grid';
+            
+            categoryObj.items.forEach(item => {
+                const card = document.createElement('div');
+                card.className = 'website-card';
+                if (item.url === 'https://mooknote.iletter.top/#/') {
+                    card.onclick = () => openMookNoteModal();
+                } else {
+                    card.onclick = () => window.open(item.url, '_blank');
+                }
+                
+                const title = currentLang === 'en' ? item.linkText_en : item.linkText_zh;
+                const desc = currentLang === 'en' ? (item.desc_en || '') : (item.desc_zh || '');
+                
+                const imgSrc = item.img;
+                const placeholderText = item.linkText_zh.split(' - ')[0];
+                const imgHtml = imgSrc 
+                    ? `<div class="website-card-icon"><img src="${imgSrc}" alt="${placeholderText}" onerror="this.style.display='none';this.parentNode.classList.add('website-card-placeholder');this.parentNode.textContent='${placeholderText}'"></div>`
+                    : `<div class="website-card-icon website-card-placeholder">${placeholderText}</div>`;
+                
+                card.innerHTML = `
+                    ${imgHtml}
+                    <div class="website-card-info">
+                        <div class="website-card-title">${title}</div>
+                        <div class="website-card-desc">${desc}</div>
+                    </div>
+                `;
+                gridDiv.appendChild(card);
+            });
+            
+            contentArea.appendChild(gridDiv);
+        });
+    }
+}

-        container.appendChild(linksDiv);
+window.switchWebsiteView = function(mode) {
+    currentViewMode = mode;
+    localStorage.setItem('website_view_mode', mode);
+    renderWebsites();
+};
+
+// MookNote 弹窗逻辑
+let currentImageIndex = 0;
+const mooknoteImages = document.querySelectorAll('.carousel-image');
+const totalImages = mooknoteImages.length;
+
+// 全屏预览相关变量
+let lightboxImageIndex = 0;
+const lightboxImgUrls = [
+    './static/img/my_work/mooknote/banner.jpg',
+    './static/img/my_work/mooknote/1.jpg',
+    './static/img/my_work/mooknote/2.jpg',
+    './static/img/my_work/mooknote/3.jpg',
+    './static/img/my_work/mooknote/4.jpg',
+    './static/img/my_work/mooknote/5.jpg',
+    './static/img/my_work/mooknote/6.jpg'
+];
+
+// 初始化指示器
+function initCarouselIndicators() {
+    const indicatorsContainer = document.querySelector('.carousel-indicators');
+    if (!indicatorsContainer) return;
+    
+    indicatorsContainer.innerHTML = '';
+    for (let i = 0; i < totalImages; i++) {
+        const indicator = document.createElement('div');
+        indicator.className = 'carousel-indicator' + (i === 0 ? ' active' : '');
+        indicator.onclick = () => goToMooknoteImage(i);
+        indicatorsContainer.appendChild(indicator);
+    }
+}
+
+// 切换到指定图片
+function goToMooknoteImage(index) {
+    if (index < 0) index = totalImages - 1;
+    if (index >= totalImages) index = 0;
+    
+    mooknoteImages.forEach((img, i) => {
+        img.classList.toggle('active', i === index);
+    });
+    
+    const indicators = document.querySelectorAll('.carousel-indicator');
+    indicators.forEach((indicator, i) => {
+        indicator.classList.toggle('active', i === index);
+    });
+    
+    currentImageIndex = index;
+}
+
+// 上一张图片
+window.prevMooknoteImage = function() {
+    goToMooknoteImage(currentImageIndex - 1);
+};
+
+// 下一张图片
+window.nextMooknoteImage = function() {
+    goToMooknoteImage(currentImageIndex + 1);
+};
+
+// 全屏预览功能
+window.openMooknoteLightbox = function(index) {
+    lightboxImageIndex = index;
+    const lightbox = document.getElementById('mooknote-lightbox');
+    const img = lightbox.querySelector('.lightbox-img');
+    const counter = lightbox.querySelector('.lightbox-counter');
+    
+    img.src = lightboxImgUrls[index];
+    counter.textContent = `${index + 1} / ${lightboxImgUrls.length}`;
+    lightbox.classList.add('active');
+};
+
+window.closeMooknoteLightbox = function() {
+    const lightbox = document.getElementById('mooknote-lightbox');
+    lightbox.classList.remove('active');
+};
+
+window.prevLightboxImage = function() {
+    lightboxImageIndex = (lightboxImageIndex - 1 + lightboxImgUrls.length) % lightboxImgUrls.length;
+    updateLightboxImage();
+};
+
+window.nextLightboxImage = function() {
+    lightboxImageIndex = (lightboxImageIndex + 1) % lightboxImgUrls.length;
+    updateLightboxImage();
+};
+
+function updateLightboxImage() {
+    const lightbox = document.getElementById('mooknote-lightbox');
+    const img = lightbox.querySelector('.lightbox-img');
+    const counter = lightbox.querySelector('.lightbox-counter');
+    
+    img.src = lightboxImgUrls[lightboxImageIndex];
+    counter.textContent = `${lightboxImageIndex + 1} / ${lightboxImgUrls.length}`;
+}
+
+// 键盘事件支持
+document.addEventListener('keydown', (e) => {
+    const lightbox = document.getElementById('mooknote-lightbox');
+    if (!lightbox.classList.contains('active')) return;
+    
+    if (e.key === 'Escape') {
+        closeMooknoteLightbox();
+    } else if (e.key === 'ArrowLeft') {
+        prevLightboxImage();
+    } else if (e.key === 'ArrowRight') {
+        nextLightboxImage();
+    }
+});
+
+function openMookNoteModal() {
+    const modal = document.getElementById('mooknote-modal');
+    if (modal) {
+        modal.classList.add('active');
+        document.body.style.overflow = 'hidden';
+        // 重置轮播到第一张
+        currentImageIndex = 0;
+        initCarouselIndicators();
+        goToMooknoteImage(0);
+    }
+}
+
+const mooknoteClose = document.getElementById('mooknote-close');
+if (mooknoteClose) {
+    mooknoteClose.addEventListener('click', () => {
+        const modal = document.getElementById('mooknote-modal');
+        if (modal) {
+            modal.classList.remove('active');
+            document.body.style.overflow = '';
+        }
    });
 }