https://ja.moejue.cn/zh-hant/tags/%E4%BB%A3%E7%A0%81/ Recent content in 代码 on MoeJueのブログ Hugo zh-hant Sun, 02 Nov 2025 10:12:27 +0000 https://ja.moejue.cn/zh-hant/posts/291/ Sun, 02 Nov 2025 10:12:27 +0000 https://ja.moejue.cn/zh-hant/posts/291/ <p>最近，我給個人部落格來了次「大動作」—— 從單語言版本升級到了 <strong>多語言站點</strong>（簡體中文、繁體中文、英語、日語）， 並且全流程實現了自動化。💪</p> <p>主要包括：</p> <ul> <li>自動同步主站文章</li> <li>自動 AI 翻譯內容</li> <li>自動建構與部署多語言站點</li> </ul> <hr> <h2 id="為何選擇-hugo">為何選擇 Hugo？</h2> <p>因為它那句自信的口號：</p> <blockquote class="border-primary bg-muted/30 hover:bg-muted/40 my-6 rounded-r-lg border-l-4 py-4 pr-4 pl-6 italic transition-all duration-200 ease-out hover:translate-x-1"> <div class="prose prose-sm max-w-none"> <p>「The world’s fastest framework for building websites.」</p> </div> </blockquote><script> function toggleAlert(alertId) { const content = document.getElementById(alertId + '-content'); const chevron = document.getElementById(alertId + '-chevron'); const header = content.previousElementSibling; if (content.classList.contains('hidden')) { content.classList.remove('hidden'); chevron.style.transform = 'rotate(0deg)'; header.setAttribute('aria-expanded', 'true'); } else { content.classList.add('hidden'); chevron.style.transform = 'rotate(-90deg)'; header.setAttribute('aria-expanded', 'false'); } } document.addEventListener('DOMContentLoaded', function() { const collapsedAlerts = document.querySelectorAll('.alert-content.hidden'); collapsedAlerts.forEach(function(content) { const alertId = content.id.replace('-content', ''); const chevron = document.getElementById(alertId + '-chevron'); if (chevron) { chevron.style.transform = 'rotate(-90deg)'; } }); }); </script> <p>—— 就這句話，我就決定是它了 😆。</p> https://ja.moejue.cn/zh-hant/posts/288/ Wed, 15 Oct 2025 01:31:22 +0000 https://ja.moejue.cn/zh-hant/posts/288/ <p>還記得那個被你們玩壞的隨機圖接口嗎？今天它更新了！ 在過去的幾年裡，<strong>隨機圖 API</strong> 一直是許多前端開發者、二次元站長、甚至桌面插件愛好者的「小玩具」與「常用工具」。</p> <h3 id="-第一代簡單但笨重的起點">🥇 第一代：簡單但笨重的起點</h3> <p>那時候的隨機圖 API，說實話—— 就是一個 PHP 小腳本 + 一台雲主機。 那時的目標很簡單：<strong>提供一個能返回隨機圖片的接口</strong>。</p> <p><strong>特點如下：</strong></p> <ul> <li>所有請求都集中在一台伺服器上；</li> <li>圖片儲存與 API 服務耦合在一起；</li> <li>無快取，無智能分發，完全依賴單點性能；</li> <li>高峰期 CPU 飆升、502 報錯、訪問慢、費流量佔儲存；</li> </ul> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> PLAINTEXT </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="折りたたむ" aria-label="折りたたむ"> <span class="collapse-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >折りたたむ</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" title="コピー" aria-label="コピー"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >コピー</span > </button> </div> </div> <div class="code-block-content relative" id="code-0"> <pre tabindex="0"><code>[客戶端] ---&gt; [中心伺服器(唯一)] ---&gt; [圖片文件]</code></pre> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> クリックして展開し、詳細を表示 </div> </div> </div> </div> <script> (function() { const codeId = 'code-0'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピーしました'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピー'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = '選択済み'; } setTimeout(() => { if (copyText) { copyText.textContent = 'コピー'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '展開'; } collapseBtn.title = '展開'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '折りたたむ'; } collapseBtn.title = '折りたたむ'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <h3 id="-第二代雲化與快取的過渡時代">🥈 第二代：雲化與快取的過渡時代</h3> <p>進入第二代後，隨機圖 API 邁入了「雲化」階段。 服務遷上雲、引入快取、CDN、負載分發都安排上。</p> https://ja.moejue.cn/zh-hant/posts/280/ Sat, 23 Aug 2025 12:29:01 +0000 https://ja.moejue.cn/zh-hant/posts/280/ <h2 id="-緒山真尋的小窩-">✨ 緒山真尋的小窩 ✨</h2> <p> <figure class="image-figure not-prose my-8" data-lightbox-enabled="false" data-gallery-type="auto"> <div class="image-container"> <img src="https://mahiro.moejue.cn/static/images/onimai.png" alt="緒山まひろ" loading="lazy" decoding="async" data-gallery-src="https://mahiro.moejue.cn/static/images/onimai.png" data-gallery-alt="緒山まひろ" data-gallery-title="" /></div> </figure></p> <h3 id="-歡迎來到緒山真尋的小窩-">🌸 歡迎來到緒山真尋的小窩 🌸</h3> <p> <figure class="image-figure not-prose my-8" data-lightbox-enabled="false" data-gallery-type="auto"> <div class="image-container"> <img src="https://mahiro.moejue.cn/static/images/Mahiro06.png" alt="緒山まひろ" loading="lazy" decoding="async" data-gallery-src="https://mahiro.moejue.cn/static/images/Mahiro06.png" data-gallery-alt="緒山まひろ" data-gallery-title="" /></div> </figure></p> <p>哇！你發現了我的秘密基地！(*≧ω≦)</p> <p>這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～</p> <h3 id="-關於我-">💕 關於我 💕</h3> <p>我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！</p> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> PLAINTEXT </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="折りたたむ" aria-label="折りたたむ"> <span class="collapse-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >折りたたむ</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" title="コピー" aria-label="コピー"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >コピー</span > </button> </div> </div> <div class="code-block-content relative" id="code-0"> <pre tabindex="0"><code> ∩∩ （･ω･） &lt;- 這是我！ ＿|　⊃／(＿＿ ／ └-(＿＿＿／</code></pre> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> クリックして展開し、詳細を表示 </div> </div> </div> </div> <script> (function() { const codeId = 'code-0'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピーしました'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピー'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = '選択済み'; } setTimeout(() => { if (copyText) { copyText.textContent = 'コピー'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '展開'; } collapseBtn.title = '展開'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '折りたたむ'; } collapseBtn.title = '折りたたむ'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <p> <figure class="image-figure not-prose my-8" data-lightbox-enabled="false" data-gallery-type="auto"> <div class="image-container"> <img src="https://mahiro.moejue.cn/static/images/visual_chara_mahiro-mihari.webp" alt="緒山まひろ" loading="lazy" decoding="async" data-gallery-src="https://mahiro.moejue.cn/static/images/visual_chara_mahiro-mihari.webp" data-gallery-alt="緒山まひろ" data-gallery-title="" /></div> </figure></p> https://ja.moejue.cn/zh-hant/posts/269/ Sat, 05 Jul 2025 08:20:55 +0000 https://ja.moejue.cn/zh-hant/posts/269/ <h4 id="多鏈錢包整合的實踐反思">多鏈錢包整合的實踐反思</h4> <p>總算是空閒下來可以整理一下程式碼了，Web3 專案接入多鏈錢包連接功能，主要涉及 Ethereum、Polygon、BSC 和 Solana。乍一聽好像只是「多做幾套相容邏輯」的事，但真正落地後才發現，很多東西其實沒想得那麼簡單。</p> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> PLAINTEXT </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="折りたたむ" aria-label="折りたたむ"> <span class="collapse-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >折りたたむ</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" title="コピー" aria-label="コピー"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >コピー</span > </button> </div> </div> <div class="code-block-content relative" id="code-0"> <pre tabindex="0"><code>this.networkConfigs = { ethereum: { chainId: &#39;0x1&#39;, // 1 chainName: &#39;Ethereum Mainnet&#39;, nativeCurrency: { name: &#39;Ethereum&#39;, symbol: &#39;ETH&#39;, decimals: 18 }, rpcUrls: [&#39;https://eth-mainnet.public.blastapi.io&#39;], blockExplorerUrls: [&#39;https://etherscan.io&#39;] }, polygon: { chainId: &#39;0x89&#39;, // 137 chainName: &#39;Polygon Mainnet&#39;, nativeCurrency: { name: &#39;MATIC&#39;, symbol: &#39;MATIC&#39;, decimals: 18 }, rpcUrls: [&#39;https://polygon-rpc.com&#39;], blockExplorerUrls: [&#39;https://polygonscan.com&#39;] }, bsc: { chainId: &#39;0x38&#39;, // 56 chainName: &#39;BNB Smart Chain&#39;, nativeCurrency: { name: &#39;BNB&#39;, symbol: &#39;BNB&#39;, decimals: 18 }, rpcUrls: [&#39;https://bsc-dataseed.binance.org&#39;], blockExplorerUrls: [&#39;https://bscscan.com&#39;] } }</code></pre> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> クリックして展開し、詳細を表示 </div> </div> </div> </div> <script> (function() { const codeId = 'code-0'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピーしました'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピー'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = '選択済み'; } setTimeout(() => { if (copyText) { copyText.textContent = 'コピー'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '展開'; } collapseBtn.title = '展開'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '折りたたむ'; } collapseBtn.title = '折りたたむ'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <h4 id="多鏈並非簡單的支援多個錢包">多鏈並非簡單的「支援多個錢包」</h4> <p>最大的感受是：鏈不一樣，錢包互動方式也不一樣，連 SDK 的思維方式都不一樣。以太坊生態可以用統一的 Web3.js 處理很多邏輯，而到了 Solana，你會發現它完全是另一套系統：Provider 接入、連接流程、PublicKey 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。</p> https://ja.moejue.cn/zh-hant/posts/260/ Sun, 11 May 2025 11:46:03 +0000 https://ja.moejue.cn/zh-hant/posts/260/ <h3 id="專案概述">專案概述</h3> <p>在當今的 Web 開發領域，使用者體驗和介面設計變得越來越重要。</p> <p>Mac Web Vue Template 是一個受 macOS 設計啟發的現代優雅的 Vue.js Web 模板，它是一個基於 Vue.js 的現代化 Web 應用模板，其設計靈感來源於 macOS 的優雅介面。這個專案不僅提供了美觀的 UI 設計，還包含了完整的專案結構和最佳實踐。</p> <h4 id="線上演示">線上演示</h4> <p>你可以透過造訪 <a href="https://mac.moejue.cn/"target="_blank" class="inline-flex items-center gap-1" >WebAi <svg id="external-link" class="h-3 w-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg> </a> 來體驗這個模板的實際效果。邀請碼(MoeJue)</p> <h3 id="核心特色">核心特色</h3> <ol> <li> <p><strong>macOS 風格的 UI 設計</strong></p> <ul> <li>採用 macOS 的設計語言</li> <li>精緻的毛玻璃效果</li> <li>優雅的動畫過渡</li> </ul> </li> <li> <p><strong>現代化的技術棧</strong></p> <ul> <li>Vue.js 作為核心框架</li> <li>Vite 作為建構工具</li> <li>Pinia 進行狀態管理</li> <li>Vue Router 處理路由</li> <li>SCSS 預處理器</li> <li>ES6+ 現代特性</li> </ul> </li> <li> <p><strong>響應式設計</strong></p> https://ja.moejue.cn/zh-hant/posts/218/ Wed, 16 Oct 2024 11:02:49 +0000 https://ja.moejue.cn/zh-hant/posts/218/ <h2 id="articlesync---多平台文章同步插件">ArticleSync - 多平台文章同步插件</h2> <p>ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。</p> <p>基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險</p> <p>基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求</p> <h3 id="背景">背景</h3> <p>你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章</p> <p>我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。</p> <p>正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢</p> <p>外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~</p> <p>為了不影響我說話，截圖放最後了</p> <p>還有，開源不易，來個 star 吧，嘿嘿嘿~</p> <p>本來想加一點私貨進去的，自動關注我的社群平台</p> <h3 id="功能特色">功能特色</h3> <ul> <li><strong>多平台支援</strong>：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。</li> <li><strong>狀態追蹤</strong>：在外掛程式介面中查看文章的同步狀態。</li> <li><strong>帳號管理</strong>：可查看與外掛程式綁定的各平台帳號資訊。</li> <li><strong>可擴展性強</strong>：支援開發者透過轉接器模式輕鬆擴展到更多平台。</li> <li><strong>安全可靠</strong>：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。</li> </ul> <h3 id="待辦事項">待辦事項</h3> <ul> <li>[ ] 獨立文章編輯器</li> <li>[ ] 圖片一鍵同步</li> <li>[x] Markdown 與 HTML 互轉</li> <li>[ ] 第三方圖床系統</li> <li>[ ] 多帳號管理</li> <li>[ ] 多系統客戶端版本</li> <li>[ ] 一鍵 AI 總結</li> <li>[ ] 影片同步</li> <li>[ ] 標籤、分類的支援</li> <li>[ ] 更友善的錯誤處理</li> <li>[ ] 更多平台的接入</li> </ul> <h3 id="支援管道">支援管道</h3> <p>媒體</p> https://ja.moejue.cn/zh-hant/posts/206/ Thu, 03 Oct 2024 02:48:02 +0000 https://ja.moejue.cn/zh-hant/posts/206/ <h3 id="近況">近況</h3> <p>距離上次的閒言碎語已經兩個多月沒說話了，是時候整理整理我的思緒了。上回是發表了一堆感慨，之後就沒聲了，所以是有一點倉促了，後續的活就跟不上了。</p> <p>又是一年國慶，果然我的國慶堪比雙十一。之前旗下的三個域名(52ecy.cn,moeins.cn,moeins.com)，雖然復活賽是打贏了，但是裝備沒有了。</p> <p>所以只能新購域名了，同時又把部落格給恢復了，可能還是想自己折騰吧，掛靠在部落格園還是不大舒服的樣子。</p> <p>之前一直在用的emlog，這會也來場大動作，直接給系統換到了WordPress，同時也換上了新主題。這款主題是由<a href="https://www.boxmoe.com/"target="_blank" class="inline-flex items-center gap-1" >專收爆米花 <svg id="external-link" class="h-3 w-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg> </a>在21年前後的時候就發布了，那會我在loc看到的時候我就star了，一直在我GitHub裡躺了4年<a href="https://github.com/iAJue/lolimeow"target="_blank" class="inline-flex items-center gap-1" >lolimeow <svg id="external-link" class="h-3 w-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg> </a>，因為那會一直在用emlog，所以就不願意折騰。乘此契機，乾脆一戰到底，所以也是花了一點大功夫，包括數據的遷移，和主題的適配。</p> <p>雖然作者一直以來都在積極推進主題的更新，也正因此我在使用中沒有遇到太大的麻煩，但也有缺少我之前系統的設定，所以我也一併把這個主題做了更新，並且pull到了原倉庫。上面放的GitHub的連結是我更新後的。 <figure class="image-figure not-prose my-8" data-lightbox-enabled="false" data-gallery-type="auto"> <div class="image-container"> <img src="https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/78350c19ly8hu90no7xm8j20w414kdue.jpg" alt="" loading="lazy" decoding="async" data-gallery-src="https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/78350c19ly8hu90no7xm8j20w414kdue.jpg" data-gallery-alt="" data-gallery-title="" /></div> </figure> 最麻煩的數據遷移部分，我在網上兜兜轉轉了半天，只找到exe版本的，先不說exe版本給人一種莫名的不放心的感覺，況且我現在用的還是Mac的系統，根本就不能直接運行。所謂自己動手豐衣足食，所以我只能花點時間給自己寫一個遷移腳本了。GitHub的地址我放在了文章的底部了，可以完美遷移emlog的數據到WordPress系統中。不愧是我！ <figure class="image-figure not-prose my-8" data-lightbox-enabled="false" data-gallery-type="auto"> <div class="image-container"> <img src="https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/78350c19ly8hu86bsccndj21hc0u0gr1.jpg" alt="" loading="lazy" decoding="async" data-gallery-src="https://image.baidu.com/search/down?url=https://tva1.sinaimg.cn/large/78350c19ly8hu86bsccndj21hc0u0gr1.jpg" data-gallery-alt="" data-gallery-title="" /></div> </figure></p> https://ja.moejue.cn/zh-hant/posts/201/ Mon, 17 Jun 2024 12:57:43 +0000 https://ja.moejue.cn/zh-hant/posts/201/ <p>在開始之前，我們先簡單了解一下基本的概念，我大致歸納為以下幾個點 <a href="https://www.cnblogs.com/Ajue/p/18252827"target="_blank" class="inline-flex items-center gap-1" >什麼是Web3.0，和區塊鏈又有什麼關係？ <svg id="external-link" class="h-3 w-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg> </a>（上回的文章不就派上用場了）</p> <p>需求：開發一個基於Python的Web 3.0圖片上傳系統。這個系統將允許用戶上傳圖片，並將圖片儲存在去中心化的網路上，同時記錄交易資訊在區塊鏈上。 本來只是寫著玩的，想過要寫成用戶認證、檔案操作集成全套管理的，讓他「終將成為圖片上傳服務的最終解決方案」。實際下來卻發現不是很實際，就作罷了，奈何我一直以來對圖片這麼執著。</p> <h3 id="步驟概述">步驟概述</h3> <ol> <li><strong>環境設定</strong>：使用Python開發，安裝必要的Python函式庫。</li> <li><strong>IPFS整合</strong>：將圖片上傳到IPFS，取得圖片的CID（內容識別碼）。</li> <li><strong>區塊鏈整合</strong>：將IPFS CID記錄在區塊鏈上。</li> <li><strong>Web介面</strong>：使用Flask建立一個Web介面，允許用戶上傳圖片。</li> </ol> <h3 id="詳細步驟">詳細步驟</h3> <h4 id="1-環境設定">1. 環境設定</h4> <p>安裝所需的Python函式庫：</p> <div class="code-block-container border-border bg-card my-6 overflow-hidden rounded-xl border shadow-sm transition-all duration-200 ease-out hover:-translate-y-0.5 hover:shadow-md"> <div class="code-block-header bg-muted/30 border-border flex items-center justify-between border-b px-4 py-3"> <div class="flex items-center gap-2"> <div class="text-muted-foreground flex-shrink-0"> <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> </svg> </div> <span class="text-muted-foreground text-sm font-medium"> PLAINTEXT </span> </div> <div class="flex items-center gap-2"> <button class="collapse-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" data-default-state="expanded" data-collapsed="false" data-auto-collapse-lines="30" data-auto-collapse-height="400" data-collapsed-height="120" title="折りたたむ" aria-label="折りたたむ"> <span class="collapse-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg> </span> <span class="collapse-text hidden sm:inline" >折りたたむ</span > </button> <button class="copy-code-btn text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-all duration-200 ease-out focus:ring-2 focus:outline-none" data-code-id="code-0" title="コピー" aria-label="コピー"> <span class="copy-icon"> <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" /> </svg> </span> <span class="copy-text hidden sm:inline" >コピー</span > </button> </div> </div> <div class="code-block-content relative" id="code-0"> <pre tabindex="0"><code>pip install flask web3 ipfshttpclient</code></pre> <div class="collapse-overlay to-card/90 pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent opacity-0 transition-opacity duration-300"> <div class="text-muted-foreground bg-card/80 border-border/50 hover:bg-primary/10 hover:text-primary hover:border-primary/30 absolute bottom-4 left-1/2 -translate-x-1/2 cursor-pointer rounded-full border px-3 py-1.5 text-xs backdrop-blur-sm transition-all duration-200"> クリックして展開し、詳細を表示 </div> </div> </div> </div> <script> (function() { const codeId = 'code-0'; const copyBtn = document.querySelector('.copy-code-btn[data-code-id="' + codeId + '"]'); const collapseBtn = document.querySelector('.collapse-code-btn[data-code-id="' + codeId + '"]'); const codeContainer = document.getElementById(codeId); if (!codeContainer) return; if (copyBtn) { const copyIcon = copyBtn.querySelector('.copy-icon'); const copyText = copyBtn.querySelector('.copy-text'); copyBtn.addEventListener('click', async function() { try { let codeText = ''; const codeTableCell = codeContainer.querySelector('.lntd:last-child code'); if (codeTableCell) { codeText = codeTableCell.textContent || codeTableCell.innerText; } else { const codeElement = codeContainer.querySelector('code'); if (codeElement) { const hasInlineLineNumbers = codeElement.querySelector('.ln'); if (hasInlineLineNumbers) { const codeLines = codeElement.querySelectorAll('.cl'); if (codeLines.length > 0) { codeText = Array.from(codeLines) .map(line => { const text = line.textContent || line.innerText; return text.replace(/\n+$/, ''); }) .join('\n') .replace(/\n+$/, ''); } else { const allText = codeElement.textContent || codeElement.innerText; codeText = allText.replace(/^\d+/gm, '').replace(/^\s+/gm, ''); } } else { codeText = codeElement.textContent || codeElement.innerText; } } else { codeText = codeContainer.textContent || codeContainer.innerText; } } codeText = codeText.trim(); await navigator.clipboard.writeText(codeText); copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M5 13l4 4L19 7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピーしました'; } copyBtn.classList.add('text-green-600'); setTimeout(() => { copyIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z\u0022 \/\u003e\n\u003c\/svg\u003e`; if (copyText) { copyText.textContent = 'コピー'; } copyBtn.classList.remove('text-green-600'); }, 2000); } catch (err) { console.error('复制失败:', err); const range = document.createRange(); const codeElement = codeContainer.querySelector('code') || codeContainer; range.selectNodeContents(codeElement); const selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(range); if (copyText) { copyText.textContent = '選択済み'; } setTimeout(() => { if (copyText) { copyText.textContent = 'コピー'; } selection.removeAllRanges(); }, 2000); } }); } if (collapseBtn) { const collapseIcon = collapseBtn.querySelector('.collapse-icon'); const collapseText = collapseBtn.querySelector('.collapse-text'); const collapseOverlay = codeContainer.querySelector('.collapse-overlay'); let codeElement = codeContainer.querySelector('pre.chroma'); if (!codeElement) { codeElement = codeContainer.querySelector('pre'); } const defaultState = collapseBtn.dataset.defaultState || 'expanded'; const isCollapsedAttr = collapseBtn.dataset.collapsed === 'true'; const autoCollapseLines = parseInt(collapseBtn.dataset.autoCollapseLines) || 30; const autoCollapseHeight = parseInt(collapseBtn.dataset.autoCollapseHeight) || 400; const collapsedHeight = parseInt(collapseBtn.dataset.collapsedHeight) || 120; let isCollapsed = false; function initCollapse() { const shouldCollapse = isCollapsedAttr || defaultState === 'collapsed' || shouldAutoCollapse(); if (shouldCollapse) { setCollapsed(true, false); } } function shouldAutoCollapse() { if (codeElement) { const lines = codeElement.querySelectorAll('.line, .cl'); const height = codeElement.offsetHeight; return lines.length > autoCollapseLines || height > autoCollapseHeight; } const containerHeight = codeContainer.offsetHeight; if (containerHeight > autoCollapseHeight) { return true; } const textContent = codeContainer.textContent || codeContainer.innerText || ''; const estimatedLines = textContent.split('\n').length; return estimatedLines > autoCollapseLines; } function setCollapsed(collapsed, animate = true) { if (!collapseOverlay) return; isCollapsed = collapsed; if (collapsed) { codeContainer.style.maxHeight = collapsedHeight + 'px'; codeContainer.style.overflow = 'hidden'; collapseOverlay.style.opacity = '1'; collapseOverlay.style.pointerEvents = 'auto'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 stroke-width=\u00222\u0022 d=\u0022M19 9l-7 7-7-7\u0022 \/\u003e\n\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '展開'; } collapseBtn.title = '展開'; } else { codeContainer.style.maxHeight = ''; codeContainer.style.overflow = ''; collapseOverlay.style.opacity = '0'; collapseOverlay.style.pointerEvents = 'none'; collapseIcon.innerHTML = `\n \u003csvg class=\u0022h-3 w-3\u0022\n fill=\u0022none\u0022\n stroke=\u0022currentColor\u0022\n viewBox=\u00220 0 24 24\u0022\u003e\u003cpath fill=\u0022currentColor\u0022 d=\u0022M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z\u0022\/\u003e\u003c\/svg\u003e`; if (collapseText) { collapseText.textContent = '折りたたむ'; } collapseBtn.title = '折りたたむ'; } if (animate) { codeContainer.style.transition = 'max-height 0.3s ease-out'; setTimeout(() => { codeContainer.style.transition = ''; }, 300); } } function toggleCollapse() { setCollapsed(!isCollapsed, true); } collapseBtn.addEventListener('click', toggleCollapse); if (collapseOverlay) { collapseOverlay.addEventListener('click', () => { if (isCollapsed) { setCollapsed(false, true); } }); } initCollapse(); } })(); </script> <h4 id="2-ipfs整合">2. IPFS整合</h4> <p>IPFS（星際檔案系統）是一種點對點的檔案儲存協定。我們可以使用<code>ipfshttpclient</code>函式庫來與IPFS網路互動。</p>