Code on Carrot Bloghttps://carrot.tw/tags/code/Recent content in Code on Carrot BlogCarrot Bloghttps://carrot.tw/share.pnghttps://carrot.tw/share.pngHugozh-twTue, 29 Sep 2026 19:00:00 +0800tagshttps://carrot.tw/posts/tags/Tue, 29 Sep 2026 19:00:00 +0800https://carrot.tw/posts/tags/<p>花了整整一小時，把自己的所有文章通通瀏覽過一遍！加上了我覺得適合的標籤。</p> <p>歡迎到：</p> <p><span style="color: #fff; text-shadow: 0 0 5px #ff7b23, 0 0 10px #ff7b23, 0 0 15px #ff6b0b;"><a href="https://carrot.tw/tags">/tags</a></span></p> <p>去玩玩！目前可能還不夠成熟，留待日後慢慢整理。</p>花了整整一小時，把自己的所有文章通通瀏覽過一遍！加上了我覺得適合的標籤。

歡迎到：

/tags

去玩玩！目前可能還不夠成熟，留待日後慢慢整理。

其實我本來很抗拒 tag 的！因為一旦定義了，就侷限了文章的可能性！我自認為思緒跳脫，常常有意想不到的想法產生，這時就很難用寥寥幾個詞語概括。

本想做一個按鈕，讓讀者可以自行切換，看要不要在每篇貼文上顯示標籤。但我折騰了半小時還是沒有結果！索性直接放棄！反正 Papermod 本來就可以加 tag，附在文末也不至於突兀，看來是我想多了！

以下介紹一些標籤種類：

BBP：所有投稿文章。但因為我 2026 年 6 月才開始更新，因此之前的主題是補好玩的！

code：跟這個網站或程式能沾得上一點關係，就大膽加上去吧！其實我根本不太會寫程式，通通都是我請 AI 修改的。如今終於累積成您看到的這副模樣。

散文：最多的集合！稱之為「廢文」也不是；真正廢的話，連上傳的價值都沒有！還是名為「散文」為好！鬆散自由，隨想隨記。

理財：想要多寫點。

金剛經：佛陀的智慧。

閱讀：一些讀書心得。

料理：吃的。

遊記：好玩！

說理：嘔心瀝血之作，希望各位多看看。

音樂：我的本業，應該要多更新才是！

]]>主視覺https://carrot.tw/posts/key-visual/Sat, 19 Sep 2026 20:00:00 +0800https://carrot.tw/posts/key-visual/<p>我的網站主視覺定調為 <code>#ff8a3d</code>，像這樣： <input type="color" value="#ff8a3d" style="border: none; cursor: pointer;"></p> <p>包括：</p> <div class="note-box"> note </div> <p>以及目錄選單，我都設定成這個顏色。我個人覺得不管在白天或是<a href="https://blog.duckll.tw/blog/DarkModeOrNot/">黑夜模式</a>都很搭！</p> <hr> <p>但是我的 <a href="https://carrot.tw/posts/favicon">Favicon</a> 卻暗了一點！這張是我請 Gemini 設計的。應該夠有個人特色吧？</p>我的網站主視覺定調為 #ff8a3d，像這樣：

包括：

note

以及目錄選單，我都設定成這個顏色。我個人覺得不管在白天或是黑夜模式都很搭！

但是我的 Favicon 卻暗了一點！這張是我請 Gemini 設計的。應該夠有個人特色吧？

這是 #ef883b，長這樣：

前後對比才看得出差別。還是亮一點好，看起來更有活力！

]]>舊文章中的新連結https://carrot.tw/posts/hyperlink-1/Thu, 10 Sep 2026 05:00:00 +0800https://carrot.tw/posts/hyperlink-1/<p>隨著時間過去，我的文章列表只會越來越豐富！最新的文章，往往有最多的貼文可以引用。</p> <p>這就引發了一個問題：以前的文章，能不能附上未來的<a href="https://carrot.tw/posts/hyperlink">超連結</a>呢？</p> <p>若讀者一開始看到的是舊文，那他可能不知道，之後的我已經有更多生活體驗了；我就因此失去了自我推銷的機會。學習要觸類旁通，超連結也要同樣地無限延伸才是。</p>隨著時間過去，我的文章列表只會越來越豐富！最新的文章，往往有最多的貼文可以引用。

這就引發了一個問題：以前的文章，能不能附上未來的超連結呢？

若讀者一開始看到的是舊文，那他可能不知道，之後的我已經有更多生活體驗了；我就因此失去了自我推銷的機會。學習要觸類旁通，超連結也要同樣地無限延伸才是。

為了與原文本來就有的連結有所區別，補充未來文章的時候，採用註腳形式。例如：1

  1. 2026-09-10 5 : 00 註：請參考某某文章。 ↩︎

]]>Faviconhttps://carrot.tw/posts/favicon/Tue, 08 Sep 2026 05:00:00 +0800https://carrot.tw/posts/favicon/<p>我發現 Eltrac 在他的文章<a href="https://www.geedea.pro/weekly/96/">〈大脑充血 Vol.96〉</a>裡，GitHub 的連結前面，會附上它的小圖示。這就給了我絕佳的靈感：我若是把所有外部連結，都加上它們自己的 <a href="https://zh.wikipedia.org/zh-tw/Favicon">favicon</a>，如此讀者便一目了然，我引用的是哪個網站；沒有圖示的部份，也就知道那是我引用自己。</p>我發現 Eltrac 在他的文章〈大脑充血 Vol.96〉裡，GitHub 的連結前面，會附上它的小圖示。這就給了我絕佳的靈感：我若是把所有外部連結，都加上它們自己的 favicon，如此讀者便一目了然，我引用的是哪個網站；沒有圖示的部份，也就知道那是我引用自己。

提醒讀者，若您使用 RSS 閱讀器，記得把我的部落格設為「直接開啟網站」，以獲得最完整的閱讀體驗喔！

]]>我用 RSShttps://carrot.tw/posts/rss/Thu, 03 Sep 2026 17:00:00 +0800https://carrot.tw/posts/rss/<p>不想每天檢查訊息，更不願被 Google 和 Meta 壟斷！於是我把學校的 Gmail，轉寄到我私人的 ProtonMail，就不用讓超肥的 Gmail app 佔據我的手機容量了！</p> <p>至於音樂系官網，<a href="https://carrot.tw/posts/ut-music">昨天</a>助教有說，在「<a href="https://music.utaipei.edu.tw/blog">最新消息</a>」常有重要通知，有空就上去看看。我才不要那麼麻煩咧！直接用 <a href="https://rss.app/">RSS.app</a> 生成 RSS Feed 連結，丟到我的 Feedly 就好啦！有趣的是，公佈欄的連結 <code>https://music.utaipei.edu.tw/blog</code>，居然是 blog！</p>不想每天檢查訊息，更不願被 Google 和 Meta 壟斷！於是我把學校的 Gmail，轉寄到我私人的 ProtonMail，就不用讓超肥的 Gmail app 佔據我的手機容量了！

至於音樂系官網，昨天助教有說，在「最新消息」常有重要通知，有空就上去看看。我才不要那麼麻煩咧！直接用 RSS.app 生成 RSS Feed 連結，丟到我的 Feedly 就好啦！有趣的是，公佈欄的連結 https://music.utaipei.edu.tw/blog，居然是 blog！

而 Facebook 的社團，也能用 RSS.app 建立連結；我們學生自己還有一個私密社團，感覺還是要加一下，免得遺漏重要資訊或經驗談。因為機器人爬不到私密社團，所以我還在想辦法；也要等審核通過再說。

]]>Cloudflare R2https://carrot.tw/posts/r2/Thu, 06 Aug 2026 07:00:00 +0800https://carrot.tw/posts/r2/<p>之前我都把照片和影片，放在部落格資料夾的 <code>/static</code> 當中。但久而久之，網站就會越來越肥！這樣不是<a href="https://carrot.tw/posts/do-not-compare">長久之計</a>。</p> <p>我的 blog 存檔在 <a href="https://github.com/">GitHub</a>，在我的電腦上寫好文章後，用指令 <code>git push</code> 就能更新。<a href="https://www.cloudflare.com/">Cloudflare</a> 負責託管我的網站，每當更新就會自動部署，如此一來，全世界都看得到我的 blog！步驟簡潔又方便，而且所有功能都是免費的！</p>之前我都把照片和影片，放在部落格資料夾的 /static 當中。但久而久之，網站就會越來越肥！這樣不是長久之計。

我的 blog 存檔在 GitHub，在我的電腦上寫好文章後，用指令 git push 就能更新。Cloudflare 負責託管我的網站，每當更新就會自動部署，如此一來，全世界都看得到我的 blog！步驟簡潔又方便，而且所有功能都是免費的！

Cloudflare 除了管理網站，另一個服務 Cloudflare R2 我覺得更為實用！我是在問了 AI 之後才知道它的存在，R2 就是一種雲端，有 10GB 的免費空間。我主要是放照片，以此豐富 blog 的內容。算一張 1MB 好了（通常只有不到一半），給我 10GB 就可以放一萬張了耶！

不只如此，只要不超過以下的流量限制，儲存的檔案不超過 10GB，那麼永遠都是免費的！

計費項目 免費額度 說明
儲存空間 (Storage) 10 GB / 月 就是雲端硬碟的概念
Class A Operations 1,000 萬次 / 月 (First 10M included) 上傳、編輯、刪除檔案
Class B Operations 1,000 萬次 / 月 (First 10M included) 讀取、下載、檢查檔案
流量 (Egress Traffic) 無限免費 ($0)！ 讀者載入照片產生的流量

放在雲端的好處，就是可以隨時召喚照片：

這是我可愛的蘿蔔！

在 CloudFlare R2 上多一份備份也不錯！GitHub + Cloudflare Pages + Cloudflare R2 簡直就是完美的部落格黃金組合！

]]>30 個常用 HTML + CSS 小技巧https://carrot.tw/posts/html/Sun, 26 Jul 2026 19:00:00 +0800https://carrot.tw/posts/html/<p>本來想寫 markdown 語法的，但官網已經說明得很清楚了，請看 <a href="https://markdown.tw/">https://markdown.tw/</a></p> <p>所有的顏色跟文字都可以自行替換，祝大家玩得開心！</p> <div id="custom-toc"></div> <hr> <h3 id="1-強調打點">1. 強調打點</h3> <pre tabindex="0"><code>&lt;span style=&#34;text-emphasis: filled circle; -webkit-text-emphasis: filled circle;&#34;&gt;關鍵重點&lt;/span&gt; </code></pre><p><span style="text-emphasis: filled circle; -webkit-text-emphasis: filled circle;">關鍵重點</span></p>本來想寫 markdown 語法的，但官網已經說明得很清楚了，請看 https://markdown.tw/

所有的顏色跟文字都可以自行替換，祝大家玩得開心！

1. 強調打點

<span style="text-emphasis: filled circle; -webkit-text-emphasis: filled circle;">關鍵重點</span>

關鍵重點


2. 螢光筆

<span style="background: linear-gradient(to top, rgba(255, 138, 61, 0.4) 40%, transparent 40%);">螢光筆畫線</span>

螢光筆畫線


3. 底線

<span style="text-decoration: underline wavy #ff7675; text-underline-offset: 4px;">波浪底線</span>  
<span style="text-decoration: underline double #0984e3; text-underline-offset: 4px;">雙重底線</span>  
<span style="text-decoration: underline dotted #e17055; text-underline-offset: 4px;">點點底線</span>  
<span style="background: linear-gradient(90deg, #ff7675, #fdcb6e, #00b894); background-size: 100% 3px; background-repeat: no-repeat; background-position: bottom; padding-bottom: 3px;">彩虹條紋底線</span>

波浪底線
雙重底線
點點底線
彩虹條紋底線


4. 拼音標註

<ruby>你<rt>ni</rt>好<rt>how</rt></ruby>

你ni好how

但好像大家都用抱來怨……


5. 鍵盤按鍵

<kbd style="background-color: #eee; border: 1px solid #b4b4b4; border-radius: 3px; box-shadow: 0 1px 1px rgba(0,0,0,0.2), 0 2px 0 0 rgba(255,255,255,0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 6px;">Ctrl</kbd>

Ctrl

<kbd>Ctrl</kbd> 通常可以直接渲染。或者直接用前後的 ` 也有同樣框起來的效果。


6. 漸層文字色

<span style="background: linear-gradient(45deg, #f39c12, #e74c3c); -webkit-background-clip: text; color: transparent; font-weight: bold;">漸層色彩文字</span>

漸層色彩文字


7. 發亮效果

<span style="color: #fff; text-shadow: 0 0 5px #ff7b23, 0 0 10px #ff7b23, 0 0 15px #ff6b0b;">🥕</span>

🥕


8. 自訂字距行距

<p style="letter-spacing: 2px; line-height: 1.8;">這是一段字距寬，<br>閱讀舒適的文字。</p>

這是一段字距寬，
閱讀舒適的文字。

<br>是換行，以免有人不知道。


9. 對齊文字

<p style="text-align: left;">這是一段置左的文字</p>

<p style="text-align: center;">這是一段置中的文字</p>

<p style="text-align: right;">這是一段置右的文字</p>

這是一段置左的文字

這是一段置中的文字

這是一段置右的文字


10. 防雷效果

<span style="filter: blur(4px); transition: 0.3s;" onmouseover="this.style.filter='none'" onmouseout="this.style.filter='blur(4px)'">不要看啦</span>

不要看啦

註：手機點擊可獲得效果，點擊空白處即可恢復。

11. 摺疊內容

<details style="border: 1px solid #ccc; padding: 10px; border-radius: 6px;">
  <summary style="font-weight: bold; cursor: pointer;">點擊展開詳細說明</summary>
  <p>哈囉！</p>
</details>
點擊展開詳細說明

哈囉！


12. 警告方塊

<div style="background: #ffebee; border-left: 5px solid #ef5350; color: #c62828; padding: 12px 16px; border-radius: 4px;">
  ⚠️ <b>警告：</b> 請看完本篇文章！
</div>
⚠️ 警告： 請看完本篇文章！

13. 圓角標籤

<span style="background: #ff8a3d; color: white; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: bold;">新手教學</span>

新手教學


14. 漂浮卡片

<div style="display:inline-block; padding:20px; border-radius:12px; background:#fff; color:#ff8a3d; font-weight:bold; border:1px solid rgba(255,138,61,0.3); box-shadow:0 4px 12px rgba(255,138,61,0.15); transition:.3s; cursor:pointer;"
 onmouseover="this.style.transform='translateY(-8px)';this.style.boxShadow='0 12px 25px rgba(255,138,61,0.35)'"
 onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 12px rgba(255,138,61,0.15)'">✨ 滑鼠移過來看看</div>

✨ 滑鼠移過來看看

註：手機點擊可獲得效果，點擊空白處即可恢復。


15. 分隔線加文字

<div style="display: flex; align-items: center; text-align: center; color: #888; margin: 20px 0;">
  <div style="flex: 1; border-bottom: 1px solid #ccc;"></div>
  <span style="padding: 0 10px;">分隔文字</span>
  <div style="flex: 1; border-bottom: 1px solid #ccc;"></div>
</div>
分隔文字

16. 兩欄並排

<div style="display: flex; gap: 15px;">
  <div style="flex: 1; background: rgba(255, 138, 61, 0.08); padding: 12px; border-radius: 6px;">左欄內容</div>
  <div style="flex: 1; background: rgba(255, 138, 61, 0.08); padding: 12px; border-radius: 6px;">右欄內容</div>
</div>
左欄內容
右欄內容

17. 毛玻璃卡片

<div style="background:rgba(255,138,61,0.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); 
border:1px solid rgba(255,138,61,0.25); border-radius:12px; padding:20px; 
color:#ff8a3d; font-weight:bold; box-shadow:0 8px 32px rgba(255,138,61,0.1);">✨ bling bling</div>
✨ bling bling

18. 日期選擇器

HTML

<label>選擇日期：<input type="date" style="padding: 6px; border-radius: 4px; border: 1px solid #ccc;"></label>


19. 顏色選擇器

<label>挑選顏色：<input type="color" value="#ff8a3d" style="border: none; cursor: pointer;"></label>


20. 進度條

<label>寫作進度：<progress value="70" max="100" style="width: 200px; accent-color: #ff8a3d;"></progress> 70%</label>


21. 建議清單

<input list="browsers" placeholder="選擇瀏覽器...">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

22. 延遲載入

<img src="https://carrot.tw/share.png" alt="範例圖" loading="lazy">
範例圖

lazy 的效果是快滾到下面才載入，適合圖片很多的文章，但實際是否生效仍取決於瀏覽器與網站設定。


23. 限制圖片大小

<img src="https://carrot.tw/share.png" style="width: 200px; height: 200px; object-fit: cover; border-radius: 8px;">

裁切圖片以維持比例，不會拉伸變形。


24. 懸停放大圖片

<div style="overflow: hidden; border-radius: 8px; width: 300px;">
  <img src="https://carrot.tw/share.png" style="width: 100%; transition: transform 0.3s;" onmouseover="this.style.transform='scale(1.08)'" onmouseout="this.style.transform='scale(1)'">
</div>

25. 跑馬燈

<div style="overflow: hidden; white-space: nowrap; background: rgba(255, 138, 61, 0.1); color: #ff8a3d; padding: 10px 0; border-radius: 6px; border: 1px solid #ff8a3d;">
  <div style="display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite;" onmouseover="this.style.animationPlayState='paused'" onmouseout="this.style.animationPlayState='running'">
    🚀 歡迎來到我的部落格！感謝您看到這裡！
  </div>
</div>
<style>
@keyframes marquee {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}
</style>

🚀 歡迎來到我的部落格！感謝您看到這裡！

26. 一鍵複製文字

<div style="display: inline-flex; align-items: center; border: 1px solid #ff8a3d; border-radius: 6px; overflow: hidden;">
  <span id="copy-text" style="padding: 6px 12px; background: rgba(255, 138, 61, 0.08); color: #ff8a3d; font-weight: bold;">CARROT2026</span>
  <button onclick="navigator.clipboard.writeText('CARROT2026'); alert('已複製！');" style="border: none; background: #ff8a3d; color: white; padding: 6px 12px; cursor: pointer; font-weight: bold;">
    📋 複製
  </button>
</div>

CARROT2026



我的網站本身用 ``` ``` 包起來就可以複製內文了。


27. 脈衝呼吸燈

<span style="display: inline-flex; align-items: center; gap: 6px; background: #ffe3e3; color: #e03131; padding: 4px 10px; border-radius: 20px; font-weight: bold; font-size: 0.85em;">
  <span style="width: 8px; height: 8px; background-color: #e03131; border-radius: 50%; animation: pulse 1.5s infinite;"></span>
  這個名字很酷吧
</span>

<style>
@keyframes pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 49, 49, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(224, 49, 49, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 49, 49, 0); }
}
</style>

這個名字很酷吧



28. 提示文字

<style>
.tooltip{
    position:relative;
    display:inline-block;
    cursor:help;
}

.tooltip .tip{
    visibility:hidden;
    opacity:0;

    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:140%;

    background:#333;
    color:#fff;

    padding:6px 10px;
    border-radius:6px;

    white-space:nowrap;

    transition:.25s;
}

.tooltip:hover .tip{
    visibility:visible;
    opacity:1;
}
</style>

<span class="tooltip">
    滑鼠移過來
    <span class="tip">
        喵！
    </span>
</span>

滑鼠移過來 喵！

註：手機點擊可獲得效果，點擊空白處即可恢復。



29. 卡片標籤

<div style="position: relative; width: 320px; padding: 20px; border:1px solid #ddd; border-radius:10px;">
  我是一張卡片

  <span style="
    position:absolute;
    top:12px;
    right:-30px;
    background:#ff4d4f;
    color:white;
    padding:4px 35px;
    font-size:12px;
    font-weight:bold;
    transform:rotate(45deg);
    box-shadow:0 2px 6px rgba(0,0,0,.2);
  ">
    NEW
  </span>
</div>

我是一張卡片

NEW


30. 打字機

<h2 class="typing">歡迎來到我的部落格！</h2>

<style>
.typing{
    width: 18ch;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ff8a3d;

    animation:
        typing 2s steps(10),
        blink .7s infinite;
}

@keyframes typing{
    from{ width:0;}
    to{ width:18ch;}
}

@keyframes blink{
    50%{ border-color:transparent;}
}
</style>

歡迎來到我的部落格！

註：已經跑出來的話請重新整理。

參考資料：
Markdown 語法說明
HTML語法大全 - HackMD
善用 MarkDown / HTML+CSS | KAI BLOG
社群媒體不讓你用的那些格式 | Wiwi.Blog

]]>知識圖譜https://carrot.tw/posts/graph-view/Sun, 26 Jul 2026 12:00:00 +0800https://carrot.tw/posts/graph-view/<p>早上做了一個模仿 <a href="https://carrot.tw/posts/backlink">Obsidian 的 graph view</a>，不只我自己能看到連結，讀者有興趣也可以玩玩看。有種站在全知視角觀察自己思考的感覺。</p> <div class="mini-graph-card" style="margin: 2.5rem 0; border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; background: var(--entry); box-shadow: 0 4px 12px rgba(0,0,0,0.05);"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem;"> <span style="font-weight: 700; font-size: 1rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem;"> 我的知識圖譜 (Graph View) </span> <a href="https://carrot.tw/graph/" style="font-size: 0.85rem; color: var(--primary); opacity: 0.8; text-decoration: underline;"> 進入全螢幕模式 → </a> </div> <div id="mini-graph-container" style="width: 100%; height: 260px; border-radius: 8px; background: rgba(0,0,0,0.15); overflow: hidden; position: relative;"></div> </div> <script src="https://d3js.org/d3.v7.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { const container = document.getElementById('mini-graph-container'); if (!container) return; fetch('/index.json') .then(res => res.json()) .then(data => { const nodes = data.map(d => ({ id: d.id, title: d.title })); const links = []; data.forEach(source => { if (!source.content) return; const hrefMatches = [...source.content.matchAll(/href=["']([^"']+)["']/g)].map(m => m[1]); data.forEach(target => { if (source.id !== target.id) { const targetRel = target.id.replace(/\/$/, ""); const targetFull = target.permalink ? target.permalink.replace(/\/$/, "") : ""; const isLinked = hrefMatches.some(url => { const cleanUrl = url.replace(/\/$/, ""); return cleanUrl.includes(targetRel) || (targetFull && cleanUrl.includes(targetFull)); }); if (isLinked) { links.push({ source: source.id, target: target.id }); } } }); }); const width = container.clientWidth || 600; const height = 260; const svg = d3.select("#mini-graph-container") .append("svg") .attr("width", width) .attr("height", height); const g = svg.append("g"); const zoom = d3.zoom() .scaleExtent([0.3, 3]) .on("zoom", (event) => g.attr("transform", event.transform)); svg.call(zoom); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(80)) .force("charge", d3.forceManyBody().strength(-100)) .force("center", d3.forceCenter(width / 2, height / 2)) .force("x", d3.forceX(width / 2).strength(0.1)) .force("y", d3.forceY(height / 2).strength(0.1)) .force("collide", d3.forceCollide().radius(20)); const link = g.append("g") .selectAll("line") .data(links) .enter().append("line") .attr("stroke", "var(--primary)") .attr("stroke-opacity", 0.2) .attr("stroke-width", 2); const nodeGroup = g.append("g") .selectAll("g") .data(nodes) .enter().append("g") .style("cursor", "pointer") .call(d3.drag() .on("start", (e, d) => { if (!e.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; }) .on("drag", (e, d) => { d.fx = e.x; d.fy = e.y; }) .on("end", (e, d) => { if (!e.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; })); nodeGroup.append("circle") .attr("r", 5) .attr("fill", "var(--primary)"); nodeGroup.append("text") .text(d => d.title) .attr("x", 8) .attr("y", 3) .attr("font-size", "11px") .attr("fill", "var(--primary)") .style("pointer-events", "none"); nodeGroup.on("click", (e, d) => { window.location.href = d.id; }); nodeGroup.on("mouseover", (event, d) => { link.attr("stroke-opacity", 0.05); nodeGroup.style("opacity", 0.2); d3.select(event.currentTarget).style("opacity", 1); link.filter(l => l.source.id === d.id || l.target.id === d.id) .attr("stroke-opacity", 1) .each(l => { nodeGroup.filter(n => n.id === l.source.id || n.id === l.target.id).style("opacity", 1); }); }); nodeGroup.on("mouseout", () => { link.attr("stroke-opacity", 0.2); nodeGroup.style("opacity", 1); }); simulation.on("tick", () => { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y); nodeGroup.attr("transform", d => `translate(${d.x},${d.y})`); }); }) .catch(err => console.error("Mini Graph Error:", err)); }); </script> <p>大概長這樣，它有自己專屬的頁面：<a href="https://carrot.tw/graph">點我</a></p>早上做了一個模仿 Obsidian 的 graph view，不只我自己能看到連結，讀者有興趣也可以玩玩看。有種站在全知視角觀察自己思考的感覺。

我的知識圖譜 (Graph View) 進入全螢幕模式 →

大概長這樣，它有自己專屬的頁面：點我

很想把各種奇奇怪怪的功能都加進我的網站。若有任何建議，歡迎來信指教！

]]>網站功能介紹https://carrot.tw/posts/blog-intro/Thu, 23 Jul 2026 11:00:00 +0800https://carrot.tw/posts/blog-intro/<h3 id="首頁">首頁</h3> <p><a href="https://carrot.tw/posts/minimalism">極簡風</a>，只留一句話。我是故意預設<strong>黑暗模式</strong>的，因為這樣才不會刺眼，也可以省電。反正按鈕也在上面，可以自行調整。</p> <br> <h3 id="選單">選單</h3> <p>右上角的功能列表。最多有到八個，但我發現在 iPhone 上，六個以上就會自動換行，版面很醜！只好減少到六個。</p> <table> <thead> <tr> <th>🥕</th> <th>📝</th> <th>📚</th> <th>🎹</th> <th>👤</th> <th>💡</th> <th>🎲</th> <th>🔍</th> </tr> </thead> <tbody> <tr> <td>首頁</td> <td>列表</td> <td>索引</td> <td>頻道</td> <td>about</td> <td>now</td> <td>隨機</td> <td>搜尋</td> </tr> <tr> <td></td> <td>✅</td> <td>✅</td> <td>✅</td> <td>✅</td> <td>✅</td> <td>✅</td> <td></td> </tr> </tbody> </table> <p>🥕：最左上角，最下方 <em>Carrot Blog</em> 都可以回到首頁，沒必要多一個按鈕。</p>首頁

極簡風，只留一句話。我是故意預設黑暗模式的，因為這樣才不會刺眼，也可以省電。反正按鈕也在上面，可以自行調整。


選單

右上角的功能列表。最多有到八個，但我發現在 iPhone 上，六個以上就會自動換行，版面很醜！只好減少到六個。

🥕 📝 📚 🎹 👤 💡 🎲 🔍
首頁 列表 索引 頻道 about now 隨機 搜尋
✅ ✅ ✅ ✅ ✅ ✅

🥕：最左上角，最下方 Carrot Blog 都可以回到首頁，沒必要多一個按鈕。

🔍：功能不強，不要佔一個位子。

註：不過搜尋功能一樣還在，若讀者想要使用，到 /search 這個網址就可以了！


目錄

僅限長篇文章，方便導引，可以直接按超連結過去。這個就不另外寫腳本了，我的程式只貼在需要目錄的文章。


字數統計

ShowReadingTime = true
ShowWordCount = true   
ShowCodeCopyButtons = true
ShowBreadCrumbs = true
ShowShareButtons = false

閱讀時間、字數、程式碼複製鈕，以及 BreadCrumbs（完整網站路徑，方便機器人抓取）都有開。但分享我關掉了，因為我希望讀者直接貼網址給別人就好，不需要透過社群媒體。


前後文章

文章末尾有上下一篇文，如果讀者有幸進來我的 blog 逛逛，可以無限讀下去。有些網站就沒有加入這個功能，只能到全文清單一篇篇點出來（還不會自動另開新視窗），我覺得很麻煩！


報紙排版

<figure class="newspaper-figure align-left">
  <img src="你的圖片網址.jpg" alt="圖片描述">
  <figcaption class="newspaper-caption">圖一：這是一段置於圖片下方的報紙風格說明文字。</figcaption>
</figure>

在《深度學習的技術》一文，我仿效了報紙，圖文並列。放照片預設就是滿版，把整張照片直接貼在讀者臉上好像不太好！不只版面擠，上下文若被隔開，還會影響閱讀的流暢體驗！目前還在摸索更一目了然的形式，照片下方的說明文字也讓我很苦惱！

（要空一行寫，再空一行放照片；還是用 > 隔出一個句子，在視覺上有所留白？目前傾向後者）

更新日曆

在 /about 有放，學 Github 的，如下所示：

無文章
已發布
預寫排程 (下月)
今天
]]>引用語法最佳化https://carrot.tw/posts/backlink/Wed, 15 Jul 2026 05:00:00 +0800https://carrot.tw/posts/backlink/<p><img alt="無法載入" loading="lazy" src="https://pub-cbe0ce0485dd4255ac47a58d28e50e0d.r2.dev/backlink.jpg"></p> <p>把引用語法修改，對 Hugo 主機不影響，但在 Obsidian 內讀取，就能直接連結！</p> <pre tabindex="0"><code>before: [範例]({{&lt; relref &#34;example.md&#34; &gt;}}) after: [範例](/posts/example) </code></pre><p>以往的 <code>[範例]({{&lt; relref &quot;example.md&quot; &gt;}})</code> Obsidian 都以為是純文字，自動建立名為 &ldquo;{{&lt;&rdquo; 的檔案。現在改成絕對路徑，不只 backlink 能直接瀏覽，連 graph 都能一目了然！</p>無法載入

把引用語法修改，對 Hugo 主機不影響，但在 Obsidian 內讀取，就能直接連結！

before: [範例]({{< relref "example.md" >}})

after: [範例](/posts/example)

以往的 [範例]({{< relref "example.md" >}}) Obsidian 都以為是純文字，自動建立名為 “{{<” 的檔案。現在改成絕對路徑，不只 backlink 能直接瀏覽，連 graph 都能一目了然！

用看的就能知道誰跟誰最有關聯，也可以藉此檢查有沒有尚未建立的雙向連結。比如本篇跟超連結，前後呼應，這段寫完回頭去補網址，就算觀眾看到舊文，也有機會看到我的最新進度！

無法載入

如此便實現上週的圖表願望！看著密密麻麻的線連來連去，感覺自己腦內的神經也變得四通八達（？

2026-07-26 的我：我也畫出自己的知識圖譜了！
]]>📚＆🎹https://carrot.tw/posts/button/Thu, 09 Jul 2026 12:00:00 +0800https://carrot.tw/posts/button/<p>今天早上我又加了兩個按鈕。<a href="https://carrot.tw/series">📚</a>把閱讀心得單獨列出來，希望以後能加入「千本好書」，羅列我這輩子看過的所有好書。<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p> <p><a href="https://www.youtube.com/@carrot603">🎹</a>則是我的 YouTube 頻道，中午剛上傳我彈的巴哈 Sinfonia No. 3。為什麼突然想拍影片呢？因為我要讀音樂系了，這個 blog 應該也要多點音樂氣息，否則只是紙上談兵罷了！</p>今天早上我又加了兩個按鈕。📚把閱讀心得單獨列出來，希望以後能加入「千本好書」，羅列我這輩子看過的所有好書。1

🎹則是我的 YouTube 頻道，中午剛上傳我彈的巴哈 Sinfonia No. 3。為什麼突然想拍影片呢？因為我要讀音樂系了，這個 blog 應該也要多點音樂氣息，否則只是紙上談兵罷了！

好啦其實是因為我想找主修老師，除了之前表演2的影片，老師說要多錄古典的東西，好讓教授清楚我的學習狀況。

光一首一分半的 sinfonia 我就錄了至少五次！練習時得心應手，可鏡頭一打開，不該錯的地方都錯了！簡直比上台還要緊張。本人下定決心，痛定思痛，以後練習多錄幾首曲子，建立表演的心態。把每次練習當表演一樣認真，才能把每次表演當練習一樣放鬆！

老師說趁早經營自己的平台，以後辦音樂會才有聽眾。再說了，我練這麼多，還不是為了向大家分享音樂的美好？

不知道現在發布會不會有觀眾？看 blog 的人就不多了，想看我彈琴的人又有多少？不過我知道的是，自己很樂在其中，反正我是不會被數字綁架的！

  1. 7/23 的我：千本好書持續更新中！而現在書的按鈕變成「文章索引」了！但閱讀心得一樣羅列在其中。 ↩︎

  2. 112 全國賽鋼三
    113 市賽鋼五
    𝟮𝟬𝟮𝟰 成發：《𝗥𝗮𝗰𝗵𝗺𝗮𝗻𝗶𝗻𝗼𝗳𝗳: 𝗥𝗵𝗮𝗽𝘀𝗼𝗱𝘆 𝗼𝗻 𝗮 𝗧𝗵𝗲𝗺𝗲 𝗼𝗳 𝗣𝗮𝗴𝗮𝗻𝗶𝗻𝗶, 𝗢𝗽. 𝟰𝟯, 𝗩𝗮𝗿𝗶𝗮𝘁𝗶𝗼𝗻 𝗫𝗩𝗜𝗜𝗜》
    𝟮𝟬𝟮𝟰 成發：《𝗔𝗿𝗲𝗻𝘀𝗸𝘆: 𝗣𝗶𝗮𝗻𝗼 𝗧𝗿𝗶𝗼 𝗡𝗼, 𝗜 𝗶𝗻 𝗗 𝗺𝗶𝗻𝗼𝗿, 𝗢𝗽. 𝟯𝟮, 𝗜𝗜𝗜 𝗺𝗼𝘃.》- 臺中一中 𝐗 臺中女中弦樂團
    2025 成發：The Beginning of the Journey A Town with an Ocean View Joe Hisaishi ↩︎

]]>部署文章捷徑https://carrot.tw/posts/lns/Thu, 09 Jul 2026 05:01:00 +0800https://carrot.tw/posts/lns/<p>我都用 <a href="https://obsidian.md/">Obsidian</a> 收集寫作素材。軟體內建的 markdown 語法會自動幫你設定好，讓編輯過程變得有效率許多。</p> <p>昨天睡前我在想，要怎麼讓部署也更快速？我原本會跑到檔案總管 Obsidian 的資料夾，把文章剪下來，然後貼在 blog 的資料夾裡面。這樣有點麻煩，但我想藉由<a href="https://carrot.tw/posts/personal-ritual">這個過程</a>，留時間讓自己好好想想，確保每篇貼文都是堪讀的。</p>我都用 Obsidian 收集寫作素材。軟體內建的 markdown 語法會自動幫你設定好，讓編輯過程變得有效率許多。

昨天睡前我在想，要怎麼讓部署也更快速？我原本會跑到檔案總管 Obsidian 的資料夾，把文章剪下來，然後貼在 blog 的資料夾裡面。這樣有點麻煩，但我想藉由這個過程，留時間讓自己好好想想，確保每篇貼文都是堪讀的。

也許是因為睡前一刻，耐心也用盡了！我下定決心要添加一個任意門在 Obsidian 裡面，寫好就直接丟進去，部署指令一下，一切便功德圓滿！

問 Gemini 他說很簡單，給我這一行指令：

ln -s "/home/你的用戶名/HugoSite/content/posts" "/home/你的用戶名/ObsidianVault/部落格發布門"

多麼簡潔有力！我不懂程式，但我很佩服自己能想到如此解方！有絕妙點子比會敲鍵盤重要（自誇）。我測試過了，丟進去真的會瞬間轉移，而且我點開 blog 的資料夾，也能直接編輯以前的貼文。看來暫時用不到 VS Code 了！雖然一行一行密密麻麻的，看起來很厲害。

]]>超連結https://carrot.tw/posts/hyperlink/Thu, 09 Jul 2026 05:00:00 +0800https://carrot.tw/posts/hyperlink/<p>文章中的超連結會讓人分心嗎？一定會的，因此我們要抗拒點進去的欲望，先好好把文章看過一次，再回頭點開所有的連結，最後把吸收到的分支內容嵌入文脈中再讀一遍。這樣不只能彰顯作者知識之廣博，如果作者連結到自己的其他文章，更能大大增加其觸及率！最重要的，一篇文章至少就被讀了三次，也算是把價值發揮到極致了！</p>文章中的超連結會讓人分心嗎？一定會的，因此我們要抗拒點進去的欲望，先好好把文章看過一次，再回頭點開所有的連結，最後把吸收到的分支內容嵌入文脈中再讀一遍。這樣不只能彰顯作者知識之廣博，如果作者連結到自己的其他文章，更能大大增加其觸及率！最重要的，一篇文章至少就被讀了三次，也算是把價值發揮到極致了！

我有時寫作會連結到其它文章，更多時候是引用書籍內容。在一篇貼文當中，我盡量不要嵌入太多超連結，不只版面亂，讀者也會疲乏。

若是新文章跟舊文所提過的主題有關，我大概會補上連結。但長此以往好像也不是辦法，如果有一百篇講到《金剛經》，那我不就要貼一百次了嗎？想到這裡直接原地放棄！看來只能隨緣了，有想到就補，每天加一點，總有一天會變得四通八達、無遠弗屆（？

我目前的寫作模式，是類似的主題會集中幾天發布，互相連結的文章可能就是固定那幾篇。可惜這裡沒有像 Obsidian 的 backlink 功能，畫成圖表就方便多了！

延伸閱讀：
超連結 | Wiwi.Blog
超連結｜王則倫 Jaron Wong

]]>