一些關於連結的建議

一些關於連結的建議

目录

內容相關

  • 在分享連結前，可以停下來先想想要不要分享。你的每一次分享都會給連結帶來一定的點擊量，你希望這個連結被傳播嗎？它值得被傳播嗎？有時不分享也許是更好的選擇。

  • 讓連結的文字有意義，即使脫離上下文，連結中的文字也應該能說明該連結會前往何處。

    • 錯誤示範：我的博客是 這個。
    • 正確示範：我的博客是 Taxodium。
    只寫連結，不寫文字，如何？

    最近我還看到一種分享連結的風格，見 Pluralistic，這種風格是直接把連結寫出來，如：

    https://pluralistic.net/

    而不是 Pluralistic。

    這種風格的好处是能直接看到 URL，知道域名、URL 參數，某種程度上讓連結更透明。讀者看到域名，如果是一些不喜歡的網站就可以避免打開。連結往往會單獨一行呈現，複製起來也方便。

    這種風格也是 純文本郵件 中連結的寫法 (純文本沒法用 HTML，也只能這麼寫)：

    HTML 電子郵件允許你建立連結，將網址隱藏在對使用者友善的文字背後。然而，這是網路釣魚攻擊中極為常見的手法：惡意寄件者會製作具有誤導性的連結，將你帶到與預期不同的網站。這些網站通常會仿造你使用的某項服務的登入頁面，誘騙你輸入帳戶密碼。在純文字電子郵件中，網址總是清楚可見，因此你更容易判斷是否要點擊。

    許多網路釣魚郵件還會進一步仔細模仿你可能信任的電子郵件視覺風格，例如 PayPal 郵件的外觀。使用純文字，就更難用這種方式騙你。

    Source

    不過我想提醒讀者的是，這種透明性，在 HTML 頁面上不總是成立的，例如，別有用心的人可以這麼寫：

    <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">https://taxodium.ink<a>

    你看到的是 https://taxodium.ink，但實際跳轉呢，是去到了 YouTube。所以如果出於安全考慮，最保險的作法是在每次點擊連結前檢查實際 URL 是什麼，在桌面瀏覧器上，一般把鼠標悬在連結上就能看到；在手機上，你可以將連結複製出來檢查，相對會麻煩點。一些涉及帳號信息的網站，在你輸入帳號前最好都檢查一下 URL。

    如果一段文字中連結比較多，這種風格也不合適，因為連結多時，關聯文字和連結會變得困難。

    直接顯示連結，對於用屏幕閱讀的人也不那麼友好。顯式的 URL 如 https://taxodium.ink/ 讀起來是這樣的「visited, link, HTTPS colon slash slash taxodium dot ink slash」，如果 URL 再長一點，我懷疑讀者能不能記住 URL。而 Taxodium 讀起來是這樣的「visited, link, Taxodium」，讀出來的文字會相對更好記 (當然，有的文字也可能很長)。

  • 分享時考慮移除多余的參數，例如：

    https://www.bilibili.com/video/BV1854y1h72K/?spm_id_from=333.1387.favlist.content.click

    spm_id_from 是一些追蹤相關的參數，如果想分享連結，https://www.bilibili.com/video/BV1854y1h72K/ 就够了。

  • 考慮加上署名，標明連結的來源。

  • 如果是音頻或視頻，考慮加上時長，例如：

    【4K】方大同「15」Live in HK 2011香港演唱会 (2:25:04) by 德文宝宝

    這樣讀者可以知道這大概率是一個音視頻連結，知道時長，如果讀者覺得長，他可能會選擇晚點有時間再點開看。

樣式相關

  • 不要隱藏下劃綫 。

    你可能覺得下劃綫丑，所以隱藏起來，只使用顏色來提示讀者，但這是不够的，有的人可能對色彩不敏感，如果僅用顏色，他是無法區分普通文字和連結的。

    如果你隱藏了下劃綫，有的人看到的是這樣的，你知道下面這行文字的連結在哪嗎？

    有少數人是全色盲，他們完全没有色觉只有灰度知觉，所以沒法通過顏色的不同區分普通文字和連結。

    你也可以故意去隱藏連結，用來藏一些彩蛋 :P

    如果你覺得默認的下劃綫不好看，你可以參考 Jeremy 的 Style your underlines 去美化下劃綫。重點是用頻色之外的視覺元素，讓讀者能簡單明了的知道哪裡有連結，下劃綫不是唯一的選擇，但它是最被廣泛接受的連結樣式。

  • 增加 :hover 樣式。

    悬在連結上面時，可以考慮增加背景色，把 指針形狀 變成 pointer ，用明顯的視覺變化讓讀者知道他當前悬浮在一個連結上。

    在類似手機的設備上是沒有悬浮操作的，大多是點擊和長按，有時悬浮反而變成了干擾。

    你可以把悬浮樣式限制在 @media (pointer: fine) and (hover: hover) {} ，使其只在支持悬浮的設備上生效，如電腦、使用了触控笔的平板等。

    还可以设置 transition，讓樣式變化更緩和。

  • 考慮增加 :visited 樣式。

    :visited 可以給已訪問過的連結添加樣式，例如設置不同的顏色，這樣讀者點擊了頁面上的連結後，他就知道哪些他是訪問過的，哪些他還沒看過。這在我的 Zine 系列文章中就很有用，裡面有大量的連結，設置了 :visited 後，可以方便讀者清楚看到哪些看過、哪些沒看過，避免重複訪問。

    出於隱私安全考慮， :visited 支持設置的樣式是有限制的，見 Privacy restrictions。另外，如果想重置 :visited 標記，清空瀏覧器歷史記录󠄃即可。

    關於樣式，可以看看：

進階樣式

以下的樣式可以讓連結更有趣，但當連結比較多時，我覺得也會造成視覺上的干擾，請慎重使用。這些樣式只是其中一種實現方式，其他實現方式就留結讀者自行探索了。

  • 標記內部連結和外部連結。

    排除一些內部連結後，給其它外部連結添加一個圖標，從而和內部連結區分。

    a[href^='http']:not([href^='http://taxodium.ink']):not([href^='https://taxodium.ink']) {
  &::after {
    /* content: '↗'; */
    content: "​" / " (external)";
    font-size: 1em;
    display: inline-block;
    margin-inline-start: .2em;
    position: relative;
    top: .2em;
    height: 1em;
    width: 1em;
    mask-image: url("/images/common/external-link.svg");
    mask-size: cover;
    mask-repeat: no-repeat;
    color: currentColor;
    background-color: currentcolor;
  }
}

    效果：

    如果你是用的是 Unicode 或 Emoji 符號，要測試一下不同瀏覧器的表現，因為不同系統 (Android、iOS)，不同瀏覧器渲染出來的圖標會有差异，在自己瀏覧器上好看，在讀者的瀏覧器上可不一定。

  • 顯示連結的 favicon。

    可以通過判斷域名 (a[href=<domain>]1) ，結合 ::before、::after 等偽類元素顯示連結的 favicon。 favicon 可以用 Favicon.im 快速获取。

    a[href*="bilibili.com"],
a[href*="youtube.com"],
a[href*="wikipedia.org"],
a[href*="developer.mozilla.org"]
{
  &::before {
    content: '';
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: .2em;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
  }
}

a[href*="developer.mozilla.org"]::before {
  background-image: url("/images/common/favicon/developer.mozilla.org.ico");
}
a[href*="wikipedia.org"]::before {
  background-image: url("/images/common/favicon/wikipedia.org.ico");
}
a[href*="youtube.com"]::before {
  background-image: url("/images/common/favicon/youtube.com.ico");
}
a[href*="bilibili.com"]::before {
  background-image: url("/images/common/favicon/bilibili.com.ico");
}

    效果：

如果你想回應这篇文章，可以在你的文章或社交媒體帖子中連結这篇文章， 然後在 Webmention Endpoint 進行提交， 其中 Source 對應你的文章 URL，Target 對應我的文章 URL，也即你引用的連結。 提交成功後，你的回應就会顯示在此這裡，有任何問題請 郵件聯系我。 (关于 Webmention)