<![CDATA[三脚猫博客]]> https://www.tycat.cn/ zh-cn emlog邮件模板分享 https://www.tycat.cn/?post=12 emlog邮件模板分享：打造个性化邮件通知体验

在博客运营中，邮件通知是与读者互动的重要方式之一。无论是新评论提醒、用户注册确认，还是密码找回功能，一个设计良好的邮件模板不仅能提升用户体验，还能增强博客的专业感。emlog作为一款轻量级的博客系统，支持用户自定义邮件模板，以满足不同的视觉和功能需求。

邮件模板一：轻盈、偏内容和排版美感

图示

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{mail_site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* 移动端适配：主要控制宽度和字体大小 */
        @media only screen and (max-width: 600px) {
            .wrapper {
                width: 100% !important;
                padding: 0 14px !important;
            }
            .card {
                border-radius: 16px !important;
            }
            .title-text {
                font-size: 22px !important;
            }
            .content-text {
                font-size: 15px !important;
            }
        }
    </style>
</head>
<body style="margin:0;padding:0;background-color:#f4f5fb;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">

    <!-- 预览文本（部分客户端列表预览用） -->
    <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
        来自 {{mail_site_title}} 的新内容
    </div>

    <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0;padding:26px 0;">
        <tr>
            <td align="center">

                <!-- 主体容器 -->
                <table class="wrapper" width="600" cellpadding="0" cellspacing="0" border="0"
                       style="max-width:600px;width:100%;padding:0 10px;">
                    <tr>
                        <td>

                            <!-- 卡片 -->
                            <table class="card" width="100%" cellpadding="0" cellspacing="0" border="0"
                                   style="background-color:#ffffff;border-radius:20px;box-shadow:0 16px 40px rgba(15,23,42,0.10);overflow:hidden;border:1px solid #e5e7f0;">
                                <!-- 顶部渐变条 -->
                                <tr>
                                    <td style="padding:0;">
                                        <div style="height:4px;width:100%;background:linear-gradient(90deg,#f97316,#fbbf24,#34d399,#38bdf8,#a855f7);"></div>
                                    </td>
                                </tr>

                                <!-- 标题区（博客感更强） -->
                                <tr>
                                    <td style="padding:22px 26px 10px 26px;">
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0">
                                            <tr>
                                                <td valign="middle">
                                                    <div class="title-text"
                                                         style="font-size:24px;font-weight:700;color:#111827;line-height:1.4;">
                                                        {{mail_site_title}}
                                                    </div>
                                                    <div style="margin-top:6px;font-size:13px;color:#6b7280;">
                                                        来自你的个人博客的一封小信件
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>

                                <!-- 分割线 -->
                                <tr>
                                    <td style="padding:0 26px;">
                                        <div style="height:1px;width:100%;background:linear-gradient(90deg,rgba(203,213,225,0.1),rgba(203,213,225,0.8),rgba(203,213,225,0.1));"></div>
                                    </td>
                                </tr>

                                <!-- 正文内容 -->
                                <tr>
                                    <td style="padding:20px 26px 22px 26px;">
                                        <div class="content-text"
                                             style="font-size:16px;line-height:1.9;color:#374151;word-break:break-word;">
                                            {{mail_content}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 轻微的“结束语”区（可保持或删掉） -->
                                <tr>
                                    <td style="padding:0 26px 18px 26px;">
                                        <div style="margin-top:4px;font-size:13px;color:#9ca3af;line-height:1.6;">
                                            感谢你抽空阅读这封邮件，祝你今天也有一点点小进步。
                                        </div>
                                    </td>
                                </tr>

                                <!-- 底部分割线 -->
                                <tr>
                                    <td style="padding:0 26px;">
                                        <div style="height:1px;width:100%;background:linear-gradient(90deg,rgba(203,213,225,0.1),rgba(203,213,225,0.6),rgba(203,213,225,0.1));"></div>
                                    </td>
                                </tr>

                                <!-- 页脚 -->
                                <tr>
                                    <td style="padding:12px 26px 18px 26px;text-align:center;">
                                        <div style="font-size:12px;color:#9ca3af;line-height:1.8;">
                                            来自站点：<span style="color:#4b5563;font-weight:600;">{{mail_site_title}}</span><br>
                                            本邮件由博客系统自动发送，请勿直接回复。
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            <!-- 外层版权（可选） -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:12px;">
                                <tr>
                                    <td style="text-align:center;font-size:11px;color:#9ca3af;">
                                        © {{mail_site_title}}
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

邮件模板二：极简博客风（黑白+细线）

图示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{mail_site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @media only screen and (max-width: 600px) {
            .wrapper { width: 100% !important; padding: 0 14px !important; }
            .card { border-radius: 14px !important; }
        }
    </style>
</head>
<body style="margin:0;padding:0;background-color:#f5f5f6;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">

    <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
        来自 {{mail_site_title}} 的新内容
    </div>

    <table width="100%" cellpadding="0" cellspacing="0" style="padding:28px 0;">
        <tr>
            <td align="center">
                <table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 20px;">
                    <tr>
                        <td>
                            <table class="card" width="100%" cellpadding="0" cellspacing="0"
                                   style="background-color:#ffffff;border-radius:18px;border:1px solid #e5e7eb;box-shadow:0 16px 40px rgba(15,23,42,.06);overflow:hidden;">
                                <!-- 上方细线 -->
                                <tr>
                                    <td style="padding:0;">
                                        <div style="height:3px;width:100%;background:linear-gradient(90deg,#111827,#6b7280,#d1d5db);"></div>
                                    </td>
                                </tr>

                                <!-- 标题 -->
                                <tr>
                                    <td style="padding:22px 28px 6px 28px;">
                                        <div style="font-size:22px;font-weight:700;color:#111827;letter-spacing:.02em;">
                                            {{mail_site_title}}
                                        </div>
                                        <div style="margin-top:8px;font-size:12px;color:#9ca3af;text-transform:uppercase;letter-spacing:.16em;">
                                            PERSONAL · BLOG · UPDATE
                                        </div>
                                    </td>
                                </tr>

                                <!-- 分割线 -->
                                <tr>
                                    <td style="padding:0 28px;">
                                        <div style="height:1px;width:100%;background:rgba(209,213,219,.9);margin:14px 0;"></div>
                                    </td>
                                </tr>

                                <!-- 正文 -->
                                <tr>
                                    <td style="padding:0 28px 24px 28px;">
                                        <div style="font-size:15px;line-height:1.9;color:#374151;word-break:break-word;">
                                            {{mail_content}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 页脚 -->
                                <tr>
                                    <td style="padding:14px 28px 18px 28px;border-top:1px solid #e5e7eb;text-align:center;">
                                        <div style="font-size:12px;color:#9ca3af;line-height:1.8;">
                                            来自站点：<span style="color:#4b5563;font-weight:600;">{{mail_site_title}}</span><br>
                                            本邮件由博客自动发送，请勿直接回复。
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            <!-- 外部版权 -->
                            <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:12px;">
                                <tr>
                                    <td style="text-align:center;font-size:11px;color:#a1a1aa;">
                                        © {{mail_site_title}}
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

邮件模板三：质感纸张风（偏写作/日记）

图示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{mail_site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @media only screen and (max-width: 600px) {
            .wrapper { width:100% !important;padding:0 14px !important; }
            .card { border-radius:14px !important; }
        }
    </style>
</head>
<body style="margin:0;padding:0;background:#ede9dd;font-family:'Segoe UI','Microsoft YaHei',Arial,sans-serif;">

    <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
        {{mail_site_title}} 的一则新记事
    </div>

    <table width="100%" cellpadding="0" cellspacing="0" style="padding:28px 0;">
        <tr>
            <td align="center">
                <table class="wrapper" width="640" cellpadding="0" cellspacing="0" style="max-width:640px;width:100%;padding:0 18px;">
                    <tr>
                        <td>

                            <table class="card" width="100%" cellpadding="0" cellspacing="0"
                                   style="background:#fcfbf7;border-radius:18px;border:1px solid #e5decf;box-shadow:0 14px 32px rgba(148,115,84,.28);overflow:hidden;">
                                <!-- 顶部“便签条” -->
                                <tr>
                                    <td style="padding:0;">
                                        <div style="height:28px;background:repeating-linear-gradient(-45deg,#facc15,#facc15 10px,#fef3c7 10px,#fef3c7 20px);border-bottom:1px solid #e5decf;"></div>
                                    </td>
                                </tr>

                                <!-- 标题 -->
                                <tr>
                                    <td style="padding:20px 26px 4px 26px;">
                                        <div style="font-size:23px;font-weight:700;color:#3f3f46;">
                                            {{mail_site_title}}
                                        </div>
                                        <div style="margin-top:6px;font-size:13px;color:#78716c;font-style:italic;">
                                            「来自博客的一封手写风小信」
                                        </div>
                                    </td>
                                </tr>

                                <!-- 横线 -->
                                <tr>
                                    <td style="padding:0 26px 4px 26px;">
                                        <div style="height:1px;background:linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,0.7),rgba(148,163,184,0));margin-top:10px;"></div>
                                    </td>
                                </tr>

                                <!-- 正文（带“稿纸线”效果） -->
                                <tr>
                                    <td style="padding:8px 26px 24px 26px;">
                                        <div style="font-size:16px;line-height:2;color:#44403c;word-break:break-word;
                                                    background-image:linear-gradient(#f5efe2 1px,transparent 1px);
                                                    background-size:100% 28px;padding:10px 12px;border-radius:10px;">
                                            {{mail_content}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 注脚 -->
                                <tr>
                                    <td style="padding:0 26px 18px 26px;">
                                        <div style="font-size:13px;color:#a16207;line-height:1.7;">
                                            谢谢你读到这里。愿你今天的生活里，有一点点温柔和一点点进展。
                                        </div>
                                    </td>
                                </tr>

                                <!-- 底栏 -->
                                <tr>
                                    <td style="padding:10px 26px 18px 26px;border-top:1px solid #e5decf;text-align:center;background:#f7f2e7;">
                                        <div style="font-size:12px;color:#78716c;">
                                            来自站点：<span style="font-weight:600;color:#57534e;">{{mail_site_title}}</span><br>
                                            本邮件自动发送，如需留言请前往博客评论区。
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
                                <tr>
                                    <td style="text-align:center;font-size:11px;color:#a8a29e;">
                                        © {{mail_site_title}}
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

邮件模板四：暗色夜读风（适合技术 / 极客感博客）

图示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{mail_site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @media only screen and (max-width: 600px) {
            .wrapper { width:100% !important;padding:0 14px !important; }
            .card { border-radius:18px !important; }
        }
    </style>
</head>
<body style="margin:0;padding:0;background:#020617;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">

    <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
        {{mail_site_title}} 的夜间来信
    </div>

    <table width="100%" cellpadding="0" cellspacing="0" style="padding:26px 0;">
        <tr>
            <td align="center">
                <table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 16px;">
                    <tr>
                        <td>

                            <table class="card" width="100%" cellpadding="0" cellspacing="0"
                                   style="background:radial-gradient(circle at top,#0f172a,#020617);
                                          border-radius:22px;border:1px solid rgba(148,163,184,.35);
                                          box-shadow:0 24px 60px rgba(15,23,42,.85);overflow:hidden;">
                                <!-- 顶部渐变条 -->
                                <tr>
                                    <td style="padding:0;">
                                        <div style="height:3px;background:linear-gradient(90deg,#22d3ee,#38bdf8,#6366f1,#a855f7,#ec4899);"></div>
                                    </td>
                                </tr>

                                <!-- 标题区 -->
                                <tr>
                                    <td style="padding:22px 26px 6px 26px;">
                                        <div style="font-size:22px;font-weight:700;color:#e5e7eb;">
                                            {{mail_site_title}}
                                        </div>
                                        <div style="margin-top:6px;font-size:12px;color:#9ca3af;letter-spacing:.14em;text-transform:uppercase;">
                                            Blog Update · Night Edition
                                        </div>
                                    </td>
                                </tr>

                                <!-- 正文 -->
                                <tr>
                                    <td style="padding:14px 26px 24px 26px;">
                                        <div style="font-size:15px;line-height:1.9;color:#e5e7eb;word-break:break-word;">
                                            {{mail_content}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 底部说明 -->
                                <tr>
                                    <td style="padding:0 26px 18px 26px;">
                                        <div style="font-size:12px;color:#9ca3af;line-height:1.8;">
                                            来自站点：<span style="color:#f9fafb;font-weight:600;">{{mail_site_title}}</span><br>
                                            如果这封邮件在深夜到达，希望它不会打扰你的休息。
                                        </div>
                                    </td>
                                </tr>

                            </table>

                            <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
                                <tr>
                                    <td style="text-align:center;font-size:11px;color:#64748b;">
                                        © {{mail_site_title}}
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>

邮件模板五：玻璃卡片 + 彩色背景

图示

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{mail_site_title}}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        @media only screen and (max-width: 600px) {
            .wrapper { width:100% !important;padding:0 14px !important; }
            .card { border-radius:18px !important; }
        }
    </style>
</head>
<body style="margin:0;padding:0;
             background:radial-gradient(circle at 0% 0%,#f97316 0,#f97316 12%,transparent 55%),
                        radial-gradient(circle at 100% 0%,#38bdf8 0,#38bdf8 14%,transparent 55%),
                        radial-gradient(circle at 0% 100%,#a855f7 0,#a855f7 12%,transparent 55%),
                        #020617;
             font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',Arial,sans-serif;">

    <div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">
        {{mail_site_title}} 的最新推送
    </div>

    <table width="100%" cellpadding="0" cellspacing="0" style="padding:30px 0;">
        <tr>
            <td align="center">
                <table class="wrapper" width="620" cellpadding="0" cellspacing="0" style="max-width:620px;width:100%;padding:0 18px;">
                    <tr>
                        <td>

                            <table class="card" width="100%" cellpadding="0" cellspacing="0"
                                   style="background:rgba(15,23,42,.82);backdrop-filter:blur(14px);
                                          border-radius:20px;border:1px solid rgba(148,163,184,.4);
                                          box-shadow:0 22px 50px rgba(15,23,42,.85);overflow:hidden;">
                                <!-- 顶部圆角色块 -->
                                <tr>
                                    <td style="padding:18px 22px 6px 22px;">
                                        <table width="100%" cellpadding="0" cellspacing="0">
                                            <tr>
                                                <td valign="middle">
                                                    <div style="display:inline-block;padding:6px 14px;border-radius:999px;
                                                                background:linear-gradient(135deg,#f97316,#facc15);
                                                                font-size:11px;font-weight:600;color:#111827;letter-spacing:.08em;text-transform:uppercase;">
                                                        BLOG UPDATE
                                                    </div>
                                                </td>
                                                <td valign="middle" align="right">
                                                    <div style="font-size:11px;color:#9ca3af;">
                                                        来自 {{mail_site_title}}
                                                    </div>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>

                                <!-- 标题 -->
                                <tr>
                                    <td style="padding:4px 22px 10px 22px;">
                                        <div style="font-size:22px;font-weight:700;color:#f9fafb;line-height:1.4;">
                                            {{mail_site_title}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 正文 -->
                                <tr>
                                    <td style="padding:4px 22px 22px 22px;">
                                        <div style="font-size:15px;line-height:1.9;color:#e5e7eb;word-break:break-word;">
                                            {{mail_content}}
                                        </div>
                                    </td>
                                </tr>

                                <!-- 分割线 -->
                                <tr>
                                    <td style="padding:0 22px;">
                                        <div style="height:1px;background:linear-gradient(90deg,rgba(148,163,184,0),rgba(148,163,184,0.7),rgba(148,163,184,0));"></div>
                                    </td>
                                </tr>

                                <!-- 页脚 -->
                                <tr>
                                    <td style="padding:12px 22px 18px 22px;text-align:center;">
                                        <div style="font-size:12px;color:#9ca3af;line-height:1.8;">
                                            这是一封来自 <span style="color:#e5e7eb;font-weight:600;">{{mail_site_title}}</span> 的自动邮件。<br>
                                            如果你不希望再收到此类内容，可以在站点中调整订阅设置。
                                        </div>
                                    </td>
                                </tr>
                            </table>

                            <table width="100%" cellpadding="0" cellspacing="0" style="margin-top:10px;">
                                <tr>
                                    <td style="text-align:center;font-size:11px;color:#9ca3af;">
                                        © {{mail_site_title}}
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</body>
</html>
]]> Mon, 08 Dec 2025 00:21:23 +0800 sanjm https://www.tycat.cn/?post=12 探索奇幻与冒险的世界 —— 《道诡异仙》与《玩家凶猛》推荐 https://www.tycat.cn/?post=4 推荐两本精彩小说：《道诡异仙》与《玩家凶猛》

最近读了两本非常精彩的小说，分别是《道诡异仙》和《玩家凶猛》。如果你喜欢修真和游戏题材，这两本书绝对值得一读。

《道诡异仙》：修真界的奇幻冒险

《道诡异仙》是由网络小说作家狐尾的笔创作的一部修真小说，首发于起点中文网，于2021年11月30日开始连载，2023年5月22日完结。

📖 核心亮点

  • 世界观
    《道诡异仙》构建了一个光怪陆离的修真世界，融合了东方玄幻和西方克苏鲁元素，呈现出一个既熟悉又陌生的修真界。这个世界中的修真不再是传统的飞升成仙，而是充满了诡异和不可预测的元素。

  • 人物塑造
    主角李火旺是一个病重且精神失常的年轻人，他的意识在现实世界和修真世界之间来回跳跃，分不清孰真孰假。这种独特的设定让角色更加立体，充满了戏剧性和张力。

  • 故事情节
    小说的情节荒诞离奇，充满了烧脑的设定和反转。李火旺在修真世界中面临种种挑战，逐渐揭开修真界的真相，同时也探索了自己的内心世界。

📘 简介

《道诡异仙》讲述了一个病重的李火旺在现实世界和修真世界之间来回撕扯的故事。他无法分辨这两个世界哪个是真实的，哪个是虚幻的。修真世界诡异癫狂，没有传统修真的等级观念，修真依靠信仰，崇拜痛苦、欺骗等。李火旺在这一过程中经历了巨大的认知失调和世界的扭曲，最终揭开了修真界的真相，找到了自己的道路。

《玩家凶猛》：跨维度的真实游戏

《玩家凶猛》是由黑灯夏火创作的一部科幻类型网络小说，连载于起点中文网，已完结。

🎮 核心亮点

  • 世界观
    《玩家凶猛》构建了一个跨越多个维度的游戏世界，参与者深陷诸天万界的激烈竞争。这个世界充满了史诗般的神话和离奇的异界幻想。

  • 人物塑造
    主角和其他玩家各显神通，展现出了各自的智慧和勇气。他们的成长过程充满了挑战和惊喜，让人感同身受。

  • 故事情节
    小说的情节波澜壮阔，充满了紧张和刺激。参与者们在不同的世界中展开激烈的竞争，只有智慧与勇气并存者，才能脱颖而出，书写属于自己的篇章。

📙 简介

《玩家凶猛》讲述了这是一场跨越维度的真实游戏，参与者深陷诸天万界的激烈竞争。史诗神话波澜壮阔，异界幻想离奇曲折，玩家们各显神通，凶猛无匹。在这无尽的挑战中，唯有智慧与勇气并存者，方能脱颖而出，书写属于自己的篇章。

总结

无论是《道诡异仙》中修真界的奇幻冒险，还是《玩家凶猛》中跨维度的游戏挑战，这两本书都以其独特的魅力吸引了无数读者。《道诡异仙》虽然带有更多的奇幻和克苏鲁元素，但仍属于修真小说的范畴，而《玩家凶猛》则是一部科幻类型的小说，两者各有特色，都非常值得推荐。

如果你对修真或游戏题材感兴趣，我强烈推荐你尝试阅读这两本书。相信它们会带给你不一样的阅读体验。

如果你有任何读书推荐或者想分享你的阅读感受，欢迎在评论区留言。让我们一起交流，共同享受阅读的乐趣！

]]> Sun, 10 Nov 2024 19:00:00 +0800 sanjm https://www.tycat.cn/?post=4 怎么用Lighthouse给你的网站打个高分？ https://www.tycat.cn/?post=5 怎么用Lighthouse给你的网站打个高分？

大家好，今天咱们聊聊如何用一个超级实用的小工具——Lighthouse，来给网站做一次全面的“体检”。你可能已经听说过这个东西，它是Chrome浏览器自带的一个性能检测工具，可以帮助我们深入了解网站的表现，从而找出优化的空间。废话不多说，直接进入正题吧！

为什么我们需要Lighthouse？

43921766243887.png

简单来说，Lighthouse就像是网站的健康顾问。它能帮你检查网站的速度、可访问性、最佳实践等方面，让你知道哪些地方做得好，哪些地方还有改进的空间。对于想提升用户体验或是准备上线新项目的开发者来说，这绝对是个不可或缺的好帮手。

如何使用Lighthouse？

  1. 打开Chrome浏览器：首先，确保你使用的是最新版本的Google Chrome浏览器（我这里用的是edge）。

  2. 进入开发者工具：点击右上角的三个点，选择“更多工具”>“开发者工具”，或者直接按F12快捷键。

  3. 切换到Lighthouse标签页：在开发者工具窗口中，你会看到几个不同的选项卡，找到并点击“Lighthouse”。

    536f1766243923.png

  4. 配置你的测试：在这里，你可以选择要测试的类别，比如性能、可访问性、最佳实践等。通常情况下，默认设置就足够用了。

  5. 开始生成报告：点击“生成报告”按钮后，Lighthouse会开始对当前页面进行全面分析。这个过程可能需要几分钟时间，具体取决于网页的复杂程度。

  6. 查看结果：测试完成后，你会看到详细的评分和建议。每个类别的分数都以百分比形式给出，还有具体的改进建议，非常直观易懂。

结语

看完这篇教程，相信你已经掌握了使用Lighthouse的基本方法。其实，给网站打分并不难，难的是如何根据这些反馈持续优化，让我们的网站变得更好。希望Lighthouse能成为你提升网站质量的得力助手。如果你在使用过程中遇到任何问题，欢迎留言交流，我们一起进步！

]]> Sat, 09 Nov 2024 22:22:00 +0800 sanjm https://www.tycat.cn/?post=5 tycat 生存服务器 https://www.tycat.cn/?post=6 31d31766244407.png

欢迎来到 tycat 生存服务器！这里是一个专注于纯生存体验的 Minecraft 1.20.1 服务器，由热心的玩家社区共同打造。

服务器特色

作为一个纯生存服务器，我们致力于营造一个公平、安全、有趣的游戏环境。服务器采用最新的 Minecraft 1.20.1 版本，配合 Tectonic 这款优秀的 mod，为玩家带来全新的探索与生存体验。

在这里，你将体验到最原始、最纯粹的 Minecraft 生存游戏乐趣。从最初的采集资源、建造家园，到后期的探险、战斗，每一步都需要你发挥自己的创造力和生存智慧。无论是独自生存还是与他人合作，都能在这里找到属于自己的方式。玩家们能够互相交流、结交新朋友。

社区与共建

作为一个由玩家自发维护的服务器，我们重视每一位玩家的意见和建议。我们会不断优化游戏平衡，改善服务器性能，为大家带来更好的游戏体验。同时也欢迎大家加入我们的官方 QQ 群 959356303，一起参与服务器的建设和管理。

无论你是新手还是老玩家，tycat 服都将是你探索 Minecraft 世界的最佳选择。加入我们，开启你的全新生存之旅吧！

游戏下载地址

请前往 QQ 群内 获取。

赞助方式

c27d1766244426.png


b5571766244444.png


be9c1766244457.png

]]> Sat, 04 May 2024 15:07:00 +0800 sanjm https://www.tycat.cn/?post=6 用Python编写程序实现通过省份查询对应的城市名称。 https://www.tycat.cn/?post=7 省份与城市查询程序

数据定义

provinces = ['安徽','西藏','浙江']
cities = [['蚌埠','合肥','六安','安庆'],['林芝','拉萨','山南','那曲'],['杭州','金华','台州','温州']]

查询功能实现

findp = input("请输入您要查询省")
ind = provinces.index(findp)
print(cities[ind])

程序说明

该程序实现了以下功能：

  1. 数据存储：

    • provinces 列表存储了3个省份的名称
    • cities 列表是一个嵌套列表，每个子列表对应一个省份的城市名称

  2. 查询逻辑：

    • 用户输入要查询的省份名称
    • 程序通过 index() 方法查找省份在列表中的位置
    • 根据找到的索引位置，输出对应的城市列表

  3. 数据对应关系：

    • 安徽 → 蚌埠、合肥、六安、安庆
    • 西藏 → 林芝、拉萨、山南、那曲
    • 浙江 → 杭州、金华、台州、温州

运行示例

程序运行时会提示用户输入省份名称，输入后程序会显示该省份对应的所有城市。

f9311766244732.png

67991766244720.png

]]> Sun, 28 Apr 2024 18:25:00 +0800 sanjm https://www.tycat.cn/?post=7 羽毛球计分器 https://www.tycat.cn/?post=8 羽毛球计分器

效果图

HTML代码


<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no" />
  <title>羽毛球计分板</title>

  <style>
    :root{
      --bg:#ffffff;
      --card:#ffffff;
      --text:#0f172a;
      --muted:#64748b;
      --line:rgba(15, 23, 42, .10);
      --shadow: 0 10px 30px rgba(15,23,42,.08);
      --radius: 18px;

      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      background: var(--bg);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
      overflow: hidden;
    }

    .hidden{ display:none !important; }

    .app{
      height: 100vh;
      width: 100vw;
      padding: calc(12px + var(--safe-top)) calc(12px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(12px + var(--safe-left));
      display:grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    /* Top bar */
    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: var(--card);
      min-width: 0;
    }
    .brand{
      min-width:0;
      display:flex;
      flex-direction:column;
      gap:2px;
    }
    .brand strong{
      font-size: 14px;
      font-weight: 900;
      letter-spacing: .6px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 72vw;
    }
    .brand span{
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 72vw;
    }

    .actions{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content:flex-end;
    }

    .btn{
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      border-radius: 14px;
      padding: 10px 12px;
      font-size: 13px;
      font-weight: 850;
      cursor:pointer;
      user-select:none;
      white-space: nowrap;
    }
    .btn:active{ transform: translateY(1px); }
    .btn.muted{ color: var(--muted); }

    /* Board */
    .board{
      min-height: 0;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    @media (max-width: 760px) and (orientation: portrait){
      .board{ grid-template-columns: 1fr; }
    }

    .side{
      min-height: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: #fff;
      padding: 12px;
      display:grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    .nameRow{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 10px;
      min-width:0;
    }
    .teamName{
      margin: 0;
      font-size: clamp(16px, 2.2vw, 22px);
      font-weight: 950;
      letter-spacing: .2px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 70%;
    }
    .hint{
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      user-select:none;
    }

    .scoreTap{
      border: 1px solid var(--line);
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.00));
      display:grid;
      place-items:center;
      user-select:none;
      cursor: pointer;
      position: relative;
      overflow:hidden;
    }
    .scoreTap:active{
      background: linear-gradient(180deg, rgba(2,6,23,.04), rgba(2,6,23,.00));
    }
    .score{
      font-size: clamp(84px, 14vw, 180px);
      font-weight: 1000;
      letter-spacing: -2px;
      line-height: 1;
    }
    .tapTip{
      position:absolute;
      bottom: 10px;
      left: 12px;
      right: 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      font-size: 12px;
      color: var(--muted);
      pointer-events:none;
    }

    .controls{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    .smallBtn{
      height: 52px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: #fff;
      font-size: 18px;
      font-weight: 950;
      cursor:pointer;
      user-select:none;
    }
    .smallBtn:active{ transform: translateY(1px); }
    .smallBtn.sub{ color: var(--muted); }

    /* Bottom bar */
    .bottombar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      background: #fff;
      min-width: 0;
    }
    .status{
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 72vw;
    }

    /* Overlay (Name Entry / Rename) */
    .overlay{
      position: fixed;
      inset: 0;
      background: rgba(15,23,42,.38);
      display:grid;
      place-items:center;
      padding: 16px;
      z-index: 50;
    }
    .modal{
      width: min(520px, 100%);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 18px 60px rgba(15,23,42,.14);
      padding: 16px;
    }
    .modal h3{
      margin: 0 0 6px 0;
      font-size: 16px;
      font-weight: 1000;
    }
    .modal p{
      margin: 0 0 14px 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.6;
    }
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    @media (max-width: 520px){
      .grid{ grid-template-columns: 1fr; }
    }
    .row{
      display:flex;
      flex-direction:column;
      gap: 6px;
    }
    .row label{
      font-size: 12px;
      color: var(--muted);
      font-weight: 850;
    }
    .row input{
      height: 42px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background:
]]> Sun, 28 Apr 2024 18:10:00 +0800 sanjm https://www.tycat.cn/?post=8 Akina For Typecho修改版 https://www.tycat.cn/?post=9 Akina For Typecho 稍微修改

Akina For Typecho 是一个很好的 Typecho 模板，原作者为 Fuzzz，是 WordPress 模板，后被“缺乏维生素”移植为 Typecho 模板。我用了一段时间后做了一点点自己的修改，修改的不是很多，整体没有太大的变化。

修改内容

  1. 更换了一些图片。
  2. 模板设置增加了焦点图片设置。
  3. 微博图标换成了 BiliBili 图标，Github 图标换成了网易云音乐图标。
  4. 删除了首页的 V 字样式。
  5. 添加了备份模板数据功能。

模板下载

  • 下载链接：蓝奏网盘
  • 原作者博客：没有找到。。。
  • 移植作者博客：纸盒博客

笔记

首页文章 icon 图调用

84bd1766248614.png

焦点图片设置

$featureimg1 = new Typecho_Widget_Helper_Form_Element_Text('featureimg1', NULL,'/usr/themes/Akina/images/feature/feature1.jpg', _t('聚焦图片1'), _t('请规范填写，需https://，http://或者//</br>默认图：/usr/themes/Akina/images/headerbg.jpg'));
$form->addInput($featureimg1);

$feature1 = new Typecho_Widget_Helper_Form_Element_Text('feature1', NULL,NULL, _t('聚焦内容1'), _t('请规范填写，需https://，http://或者//'));
$form->addInput($feature1);    

$featureimg2 = new Typecho_Widget_Helper_Form_Element_Text('featureimg2', NULL,'/usr/themes/Akina/images/feature/feature2.jpg', _t('聚焦图片2'), _t('请规范填写，需https://，http://或者//</br>默认图：/usr/themes/Akina/images/headerbg.jpg'));
$form->addInput($featureimg2);

$feature2 = new Typecho_Widget_Helper_Form_Element_Text('feature2', NULL,NULL, _t('聚焦内容2'), _t('请规范填写，需https://，http://或者//'));
$form->addInput($feature2);

$featureimg3 = new Typecho_Widget_Helper_Form_Element_Text('featureimg3', NULL,'/usr/themes/Akina/images/feature/feature3.jpg', _t('聚焦图片3'), _t('请规范填写，需https://，http://或者//</br>默认图：/usr/themes/Akina/images/headerbg.jpg'));
$form->addInput($featureimg3);

$feature3 = new Typecho_Widget_Helper_Form_Element_Text('feature3', NULL,NULL, _t('聚焦内容3'), _t('请规范填写，需https://，http://或者//'));
$form->addInput($feature3);

首页 V 字样式（不想要就注释掉）

焦点位于 index.php 不想要就注释掉

首页大图的毛玻璃效果

首页简介框的透明度与角

社交图片阴影

]]> Sun, 28 Apr 2024 18:09:00 +0800 sanjm https://www.tycat.cn/?post=9 网站灰色调教程 https://www.tycat.cn/?post=10 CSS 如下：

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

或者

<link type="text/css" rel="stylesheet" href="https://tycat.cn/ku/hui.css"/>
]]> Mon, 22 Apr 2024 09:56:40 +0800 sanjm https://www.tycat.cn/?post=10 创造学思想录 （经典） https://www.tycat.cn/?post=11 创造学思想录

罗曼·罗兰

放松

人们对重大的事情态度严肃，但事事都板着脸孔则无此必要。猴子完全可以作出一副俨然像声誉卓著的学者一般的严肃表情，但是猴子之所以看上去严肃，是因为它觉得痒痒。

造就你自己的规则

按照古代寓言书的记载，谁能解开奇异的高尔丁死结，谁就注定成为亚洲王。所有试图解开这个复杂怪结的人都失败了。后来轮到亚历山大来试一试。他想尽办法要找到这个结的线头，结果还是一筹莫展。后来他说：“我要建立我自己的解结规则。”他拔出剑来将结劈为两半。他成了亚洲王。

多问几个假若

经常问自己离奇的问题。如果怎么怎么样，会怎么怎么着。如果动物变得比人的智慧还要高，会怎么怎么样？如果高速公路依不同车速限制分别做成蓝色、红色而不是清一色的黑色怎样呢？如果男人生孩子会怎么样呢？这类问题可以扩展你的思路并导致新的观念。

使用你的想象力

幼年时，不论讲故事，还是做游戏，都在培养激发你的想象力。渐渐地你长大了，人们会说：“你已经长大了，不要再有那么多梦想，要踏踏实实地把双脚放在地上。”正如毕加索所说：“每个孩子都是艺术家，问题在于你长大成人之后如何能够继续保持艺术家的灵性。”

以不同的方式思考问题

科学家埃尔伯特·森特·格奥尔基说：“创造性思维就是以不同于人的方式看同样的事情。”第一个看到无用的锯末想到可以用它压制成引火燃料的人，获得了与众不同的成功。第一个看到块状焙烧苏打想到用它做冰箱除臭剂的人，也成功了。第一个看到牡蛎就想到吃的人也成功了。

从你的箱子里走出来

每一种文化、工业和机构都有自己看世界的方式。新的观念、好的主意常常来自拦腰截断那些经训练而成的思维疆界，把目光投向新的领域。正如新闻记者罗伯特·怀尔特所说：“任何人都能在商店里看时装，在博物馆里看历史。但是具有创造性的开拓者在五金店里看历史，在飞机场上看时装。”

看到画面之外

1866年，一个衣荷华州的农民望着紧挨他的田边正在修建的横跨美洲大陆的铁路，看见铺好的铁轨和驶过的火车，他想，所谓铁路不过就是铁轨和火车。他没有看见什么呢？他的产品可以更快地得到更多的市场，他们从此就要全力与来自外地的产品竞争，在一星期之内人们就可以从东海岸到达西海岸。人们可以分享知识，不同地域的人们可以相聚，可以结婚。他看见了钢铁和车轮，但是他没有看见随后将会发生的事情。

顺其自然

一位建筑师设计了位于中央绿地四周的办公楼群。竣工后园林管理局的人来问他，人行道应该修在哪里？“在大楼之间的空地上全种上草，”他回答。夏天过后，在大楼之间的草地上踩出了许多小道。这些踩出来的小道优雅自然，走的人多就宽，走的人少就窄。秋天，这位建筑师就让人们沿着这些踩出来的痕迹铺设人行道。这些道路的设计相当优美，同时完全满足了行人的需要。

（著名的思维科学学者本文作者罗吉尔·冯·奥赫，是美国当代著名的思维科学学者，他在2001年2月写的《创造学思想录》，共64条。）（本文选择其中的8条）

站长QQ：2846386410 （转载留版权，谢谢<搬砖所得>）

]]> Sat, 20 Apr 2024 18:34:00 +0800 sanjm https://www.tycat.cn/?post=11