?傚?姗熻?灏嶈┍璩囩敘 - Line Bot MVP 绯诲? - Luke?勪???/title> <meta name="description" content="娣卞叆瑙?? Line Bot MVP ?勬??夋??熻兘锛氬?浣曢€忛???Supabase ?勬暣?堬?瀵︾従灏嶈┍璩囩敘?勬案涔呭?浠姐€侀浂淇′换璩囧??囨サ?寸??滃?楂旈???> <link rel="canonical" href="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:type" content="website"> <meta property="og:url" content="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:title" content="?傚?姗熻?灏嶈┍璩囩敘 - Line Bot MVP 绯诲? - Luke?勪???> <meta property="og:description" content="娣卞叆瑙?? Line Bot MVP ?勬??夋??熻兘锛氬?浣曢€忛???Supabase ?勬暣?堬?瀵︾従灏嶈┍璩囩敘?勬案涔呭?浠姐€侀浂淇′换璩囧??囨サ?寸??滃?楂旈???> <meta property="og:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg"> <meta property="og:site_name" content="Luke Hou"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="?傚?姗熻?灏嶈┍璩囩敘 - Line Bot MVP 绯诲? - Luke?勪???> <meta name="twitter:description" content="娣卞叆瑙?? Line Bot MVP ?勬??夋??熻兘锛氬?浣曢€忛???Supabase ?勬暣?堬?瀵︾従灏嶈┍璩囩敘?勬案涔呭?浠姐€侀浂淇′换璩囧??囨サ?寸??滃?楂旈???> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg">  <meta property="og:url" content="https://lukehou.com/projects/line-bot-search.html"> <meta property="og:description" content="娣卞叆瑙?? Line Bot MVP ?勬??夋??熻兘锛氬?浣曢€忛???Supabase ?勬暣?堬?瀵︾従灏嶈┍璩囩敘?勬案涔呭?浠姐€侀浂淇′换璩囧??囨サ?寸??滃?楂旈???> <meta property="og:locale" content="zh_TW">  <meta name="twitter:title" content="?傚?姗熻?灏嶈┍璩囩敘 - Line Bot MVP 绯诲?"> <meta name="twitter:image" content="https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg">  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "TechArticle", "headline": "?傚?姗熻?灏嶈┍璩囩敘 - Line Bot MVP 绯诲?", "description": "娣卞叆瑙?? Line Bot MVP ?勬??夋??熻兘锛氬?浣曢€忛???Supabase ?勬暣?堬?瀵︾従灏嶈┍璩囩敘?勬案涔呭?浠姐€侀浂淇′换璩囧??囨サ?寸??滃?楂旈???, "image": "https://lukehou.com/images/line-ai-bot-mvp/og-search-cover.jpg", "author": { "@type": "Person", "name": "Luke Hou", "url": "https://lukehou.com" }, "publisher": { "@type": "Person", "name": "Luke Hou" }, "datePublished": "2025-12-25", "keywords": ["Supabase", "Line Bot", "Data Backup", "Zero Trust", "Search UX"], "articleSection": "Technology", "inLanguage": "zh-TW" } </script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"> <link rel="stylesheet" href="../css/style.css">  <script async src="https://www.googletagmanager.com/gtag/js?id=G-0V2L1DQVPY"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-0V2L1DQVPY'); </script> <style> :root { /* Christmas Palette */ --xmas-red: #D42426; --xmas-green: #165B33; --xmas-gold: #F8B229; --xmas-snow: #F0F2F5; --xmas-dark: #0F0F0F; } /* ?? ?辫??插害姊?*/ .reading-progress { position: fixed; top: 0; left: 0; width: 0%; height: 5px; background: linear-gradient(90deg, var(--xmas-green), #90EE90); z-index: 9999; transition: width 0.1s ease-out; } /* ?? 杩斿??傞儴?夐? */ .back-to-top-btn { position: fixed; bottom: 30px; left: 30px; width: 50px; height: 50px; background: linear-gradient(135deg, var(--xmas-green), #90EE90); border: none; border-radius: 50%; color: white; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); z-index: 1000; } .back-to-top-btn.visible { opacity: 1; visibility: visible; transform: translateY(0); } .back-to-top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(22, 91, 51, 0.4); } /* ?柤锔??栫?绺斁?曠暙 */ .article-content img { transition: transform 0.3s ease, box-shadow 0.3s ease; } .article-content img:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } /* ?摫 ?嬫??堝??ㄥ???*/ .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); border-top: 3px solid rgba(22, 91, 51, 0.6); padding: 0.75rem 1rem; z-index: 1000; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } .mobile-nav::-webkit-scrollbar { display: none; } .mobile-nav a { display: inline-block; padding: 0.6rem 1rem; margin-right: 0.4rem; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 0.85rem; font-weight: 500; border-radius: 20px; background: rgba(255, 255, 255, 0.15); transition: all 0.2s ease; } .mobile-nav a:hover, .mobile-nav a.active { background: rgba(22, 91, 51, 0.4); color: #90EE90; } @media (max-width: 992px) { .mobile-nav { display: block; } .back-to-top-btn { bottom: 80px; } } body { background-color: var(--xmas-dark); background-image: radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 3px), radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 2px), radial-gradient(white, rgba(255, 255, 255, .1) 2px, transparent 3px); background-size: 550px 550px, 350px 350px, 250px 250px; background-position: 0 0, 40px 60px, 130px 270px; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0 0, 40px 60px, 130px 270px; } 100% { background-position: 550px 1000px, 400px 400px, 300px 300px; } } .project-hero { background: linear-gradient(rgba(22, 91, 51, 0.9), rgba(15, 15, 15, 0.8)); padding: 5rem 0; color: white; border-bottom: 2px solid var(--xmas-gold); } .glass-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(248, 178, 41, 0.2); border-radius: 16px; transition: transform 0.3s ease; } .glass-card:hover { border-color: var(--xmas-gold); } .article-content h2 { color: var(--xmas-gold); margin-top: 2rem; margin-bottom: 1.5rem; font-weight: 700; } .article-content h3 { color: white; margin-top: 1.5rem; margin-bottom: 1rem; border-left: 4px solid var(--xmas-red); padding-left: 1rem; } .tech-note { background: rgba(22, 91, 51, 0.2); border-left: 4px solid var(--xmas-green); padding: 1rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.8); } .feature-section { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(5px); border: 1px solid rgba(22, 91, 51, 0.4); border-radius: 12px; padding: 1.5rem 2rem; margin-bottom: 2.5rem; } .feature-section:hover { border-color: rgba(22, 91, 51, 0.6); box-shadow: 0 0 20px rgba(22, 91, 51, 0.15); } .feature-section h2 { margin-top: 0; } /* 娴?灏庤埅娆?*/ .floating-nav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(22, 91, 51, 0.4); border-radius: 12px; padding: 1rem; max-width: 200px; transition: all 0.3s ease; } .floating-nav:hover { border-color: rgba(22, 91, 51, 0.7); box-shadow: 0 0 20px rgba(22, 91, 51, 0.2); } .floating-nav-title { font-size: 0.75rem; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(22, 91, 51, 0.5); } .floating-nav ul { list-style: none; padding: 0; margin: 0; } .floating-nav li { margin-bottom: 0.5rem; } .floating-nav a { color: rgba(255, 255, 255, 0.85); text-decoration: none; font-size: 0.85rem; display: block; padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .floating-nav a:hover { color: #90EE90; background: rgba(144, 238, 144, 0.15); } .floating-nav a.active { color: #90EE90; background: rgba(144, 238, 144, 0.2); font-weight: 600; } .floating-nav .back-to-top { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(22, 91, 51, 0.4); } .floating-nav .back-to-top a { color: var(--xmas-red); } .floating-nav .back-to-top a:hover { color: #ff6b6b; background: rgba(212, 36, 38, 0.1); } @media (max-width: 992px) { .floating-nav { display: none; } } </style> </head> <body>  <div class="reading-progress" id="readingProgress"></div> <header> <nav class="navbar navbar-expand-lg navbar-dark bg-dark border-bottom border-danger"> <div class="container"> <a class="navbar-brand text-danger fw-bold" href="../index.html">?? Luke Hou 2025 ?栬??硅集 ??</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link" href="line-bot-mvp.html">?? ?炵郴?楅???/a></li> </ul> </div> </div> </nav> </header> <main> <section class="project-hero text-center"> <div class="container"> <span class="badge bg-warning text-dark mb-2">Series Ep.1</span> <h1 class="display-5 fw-bold mb-3">Line Bot ?傚?姗燂?灏嶈┍璩囩敘绠＄?</h1> <p class="lead text-white-50">濡備??忛????栬?璩囧??舵?锛屾??滀???LINE 璁婃??夊??勪?妤??€€?/p> </div> </section> <section class="container mt-5"> <div class="row justify-content-center"> <div class="col-lg-9 article-content">  <div class="glass-card p-4 mb-5"> <p class="lead text-white"> ???屾锛屼??嬫?瀹㈡埗?崇???嫉?忛????ㄥ摢锛熴€?br> ?屾?妗堝凡?庢?...?? </p> <p class="text-white-50"> 涓嶇?湪杌熼??嬬櫦?勬槸?崇当?㈡キ锛屾??嶈泊?勫?寰€涓嶆槸?囦欢锛岃€屾槸?????惤?ㄩ€氳?杌熼?瑁＄??岀??囧?婧濋€氥€嶃€? ?欎?绡囷??戞兂?嗕韩?戞槸濡備???Vibe Coding 浜烘??斾??瑰?锛屾??犱??拌??橀??ㄦ??藉?婧??哥??屾??夋??嶃€? </p> </div>  <div class="feature-section" id="section-1"> <h2>1. 姹虹??呯??版??€琛ㄦ澘 (Dashboard)</h2> <p class="text-white-50"> 涓€?插埌绯荤当锛屼??嬪埌?勪???浜傜?瑷婃伅?楄〃锛岃€屾槸涓€?嬭?浣犮€屼??兼??″叏灞€?嶇??版??€琛ㄦ澘?? ?欒！?嗙?浜嗘??変??€瑕佸揩?熸焙绛栫??滈嵉?告??? </p> <h3>?? ?滈嵉绺炬??囨? (KPIs at a Glance)</h3> <p class="text-white-50"> ?€琛ㄦ澘涓婇?灞曠ず浜嗗叾浠栭??垫暩?氾?浠婃棩瑷婃伅?忋€佹椿韬嶇兢绲勬暩?佸??曠?宸ュ柈?佷互??Line 瑷婃伅??Jira ?勮??涚??? 灏囨娊璞＄??屾?瑕哄?蹇欍€嶈??栫偤?稿?锛屾??轰?璺熻€侀???璩囨??佸尟?遍€插害?勬?寮峰?姘?€? </p> <div class="row align-items-center my-4"> <div class="col-md-12">  <img src="../images/line-ai-bot-mvp/kpi-dashboard-overview.jpg" alt="?€琛ㄦ澘??锛氬?绀哄?剁兢绲勬?绶掓韩搴﹁??囬??电妇?堟?妯?(KPIs)" class="img-fluid rounded shadow border border-warning mb-2 w-100"> <p class="text-center text-muted small">?€琛ㄦ澘涓€瑕斤??呯?婧害瑷堣?浣犲嵆?傛??℃??嬪?剁兢绲勭??ュ悍?€?嬨€?/p> </div> </div> </div>  <div class="feature-section" id="section-2"> <h2>2. 姘镐?淇濆??勯洸绔??夋? (Auto-Backup)</h2> <p class="text-white-50"> Line ?勩€屾?妗堥??熴€嶆??舵槸?€??PM ?勬儭澶€€傚湪?欏€嬬郴绲变腑锛屾?瑷?浜嗕?濂楄嚜?曞??勬????躲€? ?忛? Cloud Run + Webhook锛岀郴绲辨??虫???伣姣忎??囪???涓﹀??惧埌璩囨?搴腑锛屽?炬案涔呭??插??? </p> <div class="row align-items-center my-4"> <div class="col-md-12">  <img src="../images/line-ai-bot-mvp/supabase-storage-backup.jpg" alt="Supabase Storage Dashboard 灞曠ず?€?夎嚜?曞?浠界??栫??囧奖?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <p class="text-center text-muted small">?€?夐€忛? Line ?抽€佺??栫?锛岄兘?冭嚜?曞?姝ュ埌瀹夊叏?插?妗躲€?/p> </div> </div> <div class="tech-note"> <strong>??锔??€琛撶窗绡€锛?/strong> 寰楃???<strong>Supabase (PostgreSQL)</strong> ?勫挤澶ф暣?堬??戜??槸?欎唤妾旀?锛岄?灏囩櫦?佹??撱€佺兢绲勪?婧愮? Metadata 涓€浣电储寮曘€? ?欐??宠?锛屽嵆浣?Line ?熸?澶辨?锛屼??ㄦ??借兘?炲埌寰屽彴?滃?涓︿?杓夈€? </div> </div>  <div class="feature-section" id="section-3"> <h2>3. 姣斿叡浜 ??欏ぞ?村??ㄧ??岄浂淇′换?嶆灦妲?/h2> <p class="text-white-50"> 浼佹キ璩囨?涓婇洸锛屾??曠?灏辨槸澶栨穿?傚湪?欒！?＄敤浜嗘洿?存牸??<strong>?曟?绨藉? (Dynamic Signed URL)</strong> 姗熷埗?? </p> <h3>浠€楹兼槸 Signed URL锛?/h3> <p class="text-white-50"> ?冲?涓€涓嬶??崇当?勫??囬€??灏卞?涓€?娿€屽??ㄩ懓?欍€嶏?瑾版捒?伴兘?介??€?? ??Signed URL ?囧???寮点€岄??傞€氳?璀夈€嶃€傜暥?夐懓?欑?绠＄??￠??婇?瑕芥?锛屽?绔??冨嵆?傜??愪??嬪彧??60 绉掓??堟??勯€???? ?傞?涓€?帮??????浣滃虎?傚氨绠楅€??琚 ??冲嚭?伙?澶栭潰?勪汉涔熶?楹奸兘?嬩??般€? </p> <div class="row align-items-center my-4"> <div class="col-md-12"> <img src="../images/line-ai-bot-mvp/zero-trust-architecture.jpg" alt="Zero-Trust 瀹夊叏?舵??栵?灞曠ず X-Line-Signature 椹楄???Signed URL 娴佺?" class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <p class="text-center text-muted small">寰炴帴?惰???绨界?椹楄?锛屽埌瀛樺??栫??勫??嬫?娆婏??ㄧ??村??茶??/p> </div> </div> </div>  <div class="feature-section" id="section-4"> <h2>4. ?嬭??熷?勪汉 (Human-Centric Data)</h2> <p class="text-white-50"> 寰堝?寰屽彴绯荤当?’绀虹?纭? User ID (`U1s2f...`)锛岄€欒??告?璁婂?寰堟?婧害?? ?戠浉淇★?姣忎???ID ?屽??芥槸涓€浣嶅姫?涘伐浣滅?澶ヤ即?? </p> <h3>琛屽収绶ㄨ集 (Inline Edit)</h3> <p class="text-white-50"> ?ㄥ??板?琛ㄤ腑锛屾?瀵︿?浜嗐€岄??婂嵆绶ㄨ集?嶇??熻兘?傚??滃?朵娇?ㄤ?濂囨€??辩ū锛岀?嗗摗?互?存帴榛炴??嶅?淇敼?愩€岀?缍撶??嶃€? 姝ゅ?锛屾??勫??ヤ?涓€?嬭布蹇冪?灏忓??斤?<strong>?岀当瑷堟??ゃ€?/strong>?? </p> <p class="text-white-50"> ?変?缇ょ?瑁℃??夈€屽尟?囨??ㄤ汉?嶆??岀郴绲卞叕?婂赋?熴€嶏??欎?涓嶈┎绠楅€层€屽??婂伐浣滈??嶃€? ???鹃伕?掗櫎锛岀当瑷堝?琛ㄥ氨?冪灛?撹?寰椾咕娣ㄦ?纰恒€? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center">  <img src="../images/line-ai-bot-mvp/inline-user-edit-exclude.jpg" alt="灞曠ず琛屽収绶ㄨ集浣跨敤?呭?绋憋?浠ュ??鹃伕?屾??ょ当瑷堛€嶇?浠嬮潰?勬?浣滅暙?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">灞曠ず琛屽収绶ㄨ集浣跨敤?呭?绋憋?浠ュ??鹃伕?屾??ょ当瑷堛€嶇?浠嬮潰?勬?浣滅暙??/small> </div> </div> <h3>?? Jira ?€?嬪嵆?傞€?? (Live Jira Status)</h3> <p class="text-white-50"> ?朵??囪??杞夋? Jira 宸ュ柈寰岋?瑷婃伅?楄〃涓婃??存帴椤ず瑭插伐?? <strong>?虫??€??/strong>?? 浣犲彲浠ョ??扮エ??(渚嬪? XS-1544)?佺洰?嶇???(In Review / Done / To Do) 浠ュ?璨犺铂浜虹府瀵€? </p> <p class="text-white-50"> 榛炴?绁ㄨ??冲彲璺宠???Jira ?侀潰锛屼??€瑕佸???Jira ?滃??岄€欏嫉?埌搴曢??ㄥ摢瑁°€嶃€? ?欒??戝€戝彲浠ュ湪?屼??嬩??㈣拷韫ゅ?瑭遍€插害?囧伐?€插害锛屽ぇ骞呮?灏戝??涜?绐楃?娆℃暩?? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/jira-status-link.jpg" alt="Jira ?€?嬪嵆?傞€??锛氶’绀虹エ?熴€佺??嬫?绫よ?璨犺铂浜? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">Jira ?€?嬪嵆?傞€??锛氶’绀虹エ?熴€佺??嬫?绫よ?璨犺铂浜?/small> </div> </div> <h3>?敶 ?滈嵉瀛楅?浜?(Keyword Highlighting)</h3> <p class="text-white-50"> ?ㄨ尗? ??捣涓?濡備?蹇€熸?浣忛?榛烇??忛? <strong>?滈嵉瀛楅?浜?/strong> ?熻兘锛? ?嶈?瑷婃伅?冧互 <strong>绱呰壊绮楅?</strong> 妯欒?锛岃?浣犱??煎氨?界??板摢浜涜???瑕佹敞?忋€? </p> <ul class="text-white-50"> <li><strong>?敶绱呰壊璀︽?锛?/strong>濯掑??般€岄??靛??楄〃?嶄腑?勯??靛?锛屾?浠ョ??茬?楂旀?瑷?/li> </ul> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/keyword-highlight.png" alt="?滈嵉瀛楅?浜??滈嵉瀛楁?浠ョ??茬?楂旀?瑷? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?滈嵉瀛楅?浜??滈嵉瀛楁?浠ョ??茬?楂旀?瑷?/small> </div> </div> <h3>?? 涓€?靛偓????(Quick Follow-up)</h3> <p class="text-white-50"> ?夋??欐??戦?瑕佽???浜涗换?欙?浣嗛?瑕佽嚜宸辨?涓€?嗗?瓒呴夯?╋??欐??欍€屼??靛偓?€嶅氨娲句??ㄥ牬浜嗐€? ?濆? <strong>??瑷婃伅</strong>锛屼??互?存帴榛炴??屽偓?€嶆??曪?绯荤当?冭嚜?曡?瑁芥?瀛楋?涓﹁??勪????欏?瑷婃伅?? </p> <p class="text-white-50"> 宸插偓?庣?瑷婃伅?冮’绀?<strong>?屽凡??(Xh Xm)??/strong>锛岃?浣犱??煎氨?ラ?璺濋洟涓婃?柈?庝?澶氫??? ?欐槸杓曢?绱氱?杩借工姗熷埗锛岄仼?堥偅浜涖€岃?寰楀???涓€涓嬨€嶇?浜嬮??? </p> <p class="text-muted small"> ?挕 <em>濡傛??€瑕侀?灏嶅??囪????呭偓?甫?熸?绂??柈?囨?锛岃??冭€冧?涓€绡囥€屽?浣滄?姊佺??嶇? AI ?柈?╂??熻兘??/em> </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/quick-follow-up-button.jpg" alt="涓€?靛偓???斤?椤ず?柈?夐??囧凡???? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">涓€?靛偓???斤?椤ず?柈?夐??囧凡????/small> </div> <div class="col-md-12 text-center"> <img src="../images/line-ai-bot-mvp/quick-follow-up-copy.jpg" alt="涓€?靛偓???斤??存帴?熸??柈?у涓﹁嚜?曡?瑁? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">涓€?靛偓???斤??存帴?熸??柈?у涓﹁嚜?曡?瑁?/small> </div> </div> </div>  <div class="feature-section" id="section-5"> <h2>5. 妤佃嚧娴佹殺?勬?灏嬮?椹?/h2> <p class="text-white-50"> ?轰?骞??戠?涓嬫?涓€绉掞??戝湪?滃??熻兘涓婁?瓒充??熷か?? ?犲叆浜?<strong>?叉? (Debounce)</strong> 瑷?锛岀暥浣犻??ㄦ?瀛楃???锛岀郴绲卞氨宸茬??嬪??ㄨ??公浣犻?婵惧嚭绲愭??? 涓嶉?瑕佹? Enter锛屼??€瑕佺?寰呮?杞夊??堬?涓€?囬兘?偅楹艰嚜?舵??€€? </p> <div class="row align-items-center my-4"> <div class="col-md-12 text-center">  <img src="../images/line-ai-bot-mvp/search-interface-highlight.jpg" alt="?滃?浠嬮潰??锛氬?绀洪??靛?楂樹寒 (Highlighting) ?囧?缍害绡╅伕?? class="img-fluid rounded shadow-lg border border-2 border-warning mb-2 d-block mx-auto"> <small class="text-white-50">?滃?浠嬮潰??锛氬?绀洪??靛?楂樹寒 (Highlighting) ?囧?缍害绡╅伕??/small> </div> </div> </div> <hr class="my-5 border-secondary"> <div class="d-flex justify-content-between align-items-center"> <a href="line-bot-mvp.html" class="btn btn-outline-secondary"> <i class="bi bi-arrow-left me-2"></i>?炵郴?楅??? </a> <a href="line-bot-workflow.html" class="btn btn-warning"> Ep.2 ?斾?姗嬫?绡?<i class="bi bi-arrow-right me-2"></i> </a> </div>  <div class="glass-card p-4 mt-5"> <h4 class="text-warning mb-4"><i class="bi bi-book me-2"></i>?搁??辫?</h4> <div class="row g-3"> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?郴?楀叾浠栫?绔?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="line-bot-workflow.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-success"></i>Ep.2 ?斾?姗嬫?锛氳嚜?曞?宸ュ柈</a></li> <li><a href="line-bot-ai.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-danger"></i>Ep.3 AI 瀹堣?咃?涓诲?娌荤?</a></li> </ul> </div> <div class="col-md-6"> <h6 class="text-white-50 small mb-2">?? ?搁??€琛撳?妗?/h6> <ul class="list-unstyled mb-0"> <li class="mb-2"><a href="n8n-line-bot-jira-automation.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>n8n Line Bot ??Jira ????/a></li> <li><a href="golive-jira-automation.html" class="text-white text-decoration-none"><i class="bi bi-arrow-right-circle me-2 text-info"></i>Go-Live ?╁櫒锛歋heet to Jira</a></li> </ul> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-dark mt-5 py-4 border-top border-secondary-subtle"> <div class="container text-center"> <p class="text-white-50 mb-0">© 2025 Luke Hou. All rights reserved. ?? Merry Christmas!</p> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>  <div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" style="max-width: 95vw;"> <div class="modal-content bg-dark border-warning border-2"> <div class="modal-header border-0 pb-0"> <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body text-center p-2"> <img id="lightboxImage" src="" alt="" class="rounded" style="max-width: 100%; max-height: 85vh;"> </div> </div> </div> </div> <script> // Lightbox: 榛炴??栫?椤ず澶у? document.querySelectorAll('.article-content img').forEach(img => { img.style.cursor = 'pointer'; img.addEventListener('click', () => { document.getElementById('lightboxImage').src = img.src; document.getElementById('lightboxImage').alt = img.alt; new bootstrap.Modal(document.getElementById('lightboxModal')).show(); }); }); </script>  <nav class="floating-nav"> <div class="floating-nav-title">?? ??灏庤 <span id="progressPercent" style="float:right; font-weight:600;">0%</span></div> <ul> <li><a href="#section-1">1. ?版??€琛ㄦ澘</a></li> <li><a href="#section-2">2. ?茬?傚?姗?/a></li> <li><a href="#section-3">3. ?朵俊浠绘灦妲?/a></li> <li><a href="#section-4">4. 浜烘€у??告?</a></li> <li><a href="#section-5">5. ?滃?楂旈?</a></li> </ul> <div class="back-to-top"> <a href="#top">猬嗭? ?炲埌?傜</a> </div> </nav> <script> // 骞虫?婊惧? document.querySelectorAll('.floating-nav a').forEach(link => { link.addEventListener('click', function (e) { const href = this.getAttribute('href'); if (href.startsWith('#')) { e.preventDefault(); const target = href === '#top' ? document.body : document.querySelector(href); if (target) { window.scrollTo({ top: href === '#top' ? 0 : target.offsetTop - 80, behavior: 'smooth' }); } } }); }); // 婊惧??傞?浜暥?嶅?濉? const sections = document.querySelectorAll('.feature-section[id]'); const navLinks = document.querySelectorAll('.floating-nav a[href^="#section"]'); window.addEventListener('scroll', () => { let current = ''; sections.forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); navLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); </script>  <button class="back-to-top-btn" id="backToTopBtn" title="?炲埌?傜"> <i class="bi bi-arrow-up"></i> </button>  <nav class="mobile-nav" id="mobileNav"> <a href="#section-1">1. ?版??€琛ㄦ澘</a> <a href="#section-2">2. ?茬?傚?姗?/a> <a href="#section-3">3. ?朵俊浠绘灦妲?/a> <a href="#section-4">4. 浜烘€у??告?</a> <a href="#section-5">5. ?滃?楂旈?</a> </nav> <script> // ?? ?辫??插害姊? window.addEventListener('scroll', () => { const scrollTop = window.scrollY; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = (scrollTop / docHeight) * 100; document.getElementById('readingProgress').style.width = progress + '%'; // ?存柊娴?灏庤埅?惧?姣? const percentEl = document.getElementById('progressPercent'); if (percentEl) percentEl.textContent = Math.round(progress) + '%'; }); // ?? 杩斿??傞儴?夐? const backToTopBtn = document.getElementById('backToTopBtn'); window.addEventListener('scroll', () => { if (window.scrollY > 300) { backToTopBtn.classList.add('visible'); } else { backToTopBtn.classList.remove('visible'); } }); backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // ?摫 ?嬫?灏庤埅 const mobileNavLinks = document.querySelectorAll('.mobile-nav a'); window.addEventListener('scroll', () => { let current = ''; document.querySelectorAll('.feature-section[id]').forEach(section => { const sectionTop = section.offsetTop - 150; if (window.scrollY >= sectionTop) { current = section.getAttribute('id'); } }); mobileNavLinks.forEach(link => { link.classList.remove('active'); if (link.getAttribute('href') === '#' + current) { link.classList.add('active'); } }); }); mobileNavLinks.forEach(link => { link.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' }); } }); }); </script> </body> </html>