↓ 快轉到主要內容
yoz.log
  1. 全部文章/

Hugo Blowfish主題｜添加連結圖標

·1693 字·4 分鐘
分類: 網站架設
標籤: Hugo Hugo Blowfish 主題
目錄
Hugo Blowfish 主題客製化 - 本文屬於一個選集。
§ 1: Hugo Blowfish主題｜外觀功能修改日誌
§ 2: 本文
§ 3: Hugo Blowfish 主題｜程式碼區塊樣式與折疊
§ 4: Hugo 動畫背景｜3D網格加代碼瀑布風格

前言
#

首先我參考了 Blog｜自定義Hugo Blowfish主題 這篇文章，而該作者是參考另一篇文章 Hugo Stack主题装修笔记 去修改，在文章開始前先感謝這兩位作者的分享。

我在上述的基礎上做了一點小更改，礙於 Markdown 格式本身的限制，我也新增了一個 shortcode 可以直接使用 HTML 的元素及屬性。

場景說明
#

我有些文章篇幅較長，為了不重複提到同樣的內容，會使用錨點方便讀者快轉到對應的段落。

舉「我個人的軟體工具及服務推薦大全 」這篇文章來說：

我先用表格簡短介紹了多個軟體，更詳細的介紹在下面的段落才會提到。

一般來說，我先在表格中使用 Markdown 連結語法 [該軟體名稱](#ID)，接著在下方要詳細介紹該軟體時，先在該段落標題使用HTML錨點元素 <a id"前面提到的ID" href="該軟體的外部連結（官網、Github或下載連結） title="滑鼠懸停時顯示的提示">該軟體名稱</a>。

這樣點擊表格中的連結就會跳轉到下方段落，讓讀者可先閱讀介紹，如果有興趣的話再點擊該段落標題就會跳到外部網站。

代碼更改
#

修改 Markdown 連結渲染模板
#

但是原先上述兩篇的作者是修改 render-link.html 檔案，它只對 Markdown 語法有效，且如是網站內部連結就不會顯示圖示，也就是說雖然我在表格中使用的 [該軟體名稱](#ID)是 Markdown 語法，但它是指向網站內部連結，因此使用了也不會看到任何變化。

所以我修改了上述作者們提供的代碼，首先是/layouts/_default/_markup/路徑下的render-link.html。
原版可參考Blog｜自定義Hugo Blowfish主題 ，作者加上了圖標並且設定了鼠標懸停變色的樣式。

而我將它修改成「先判別連結為外部還是內部連結」，如果是外部連結就套用跟原作者一樣的樣式，如果是內部連結就套用另外一個圖標。

{{- $isExternal := or (strings.HasPrefix .Destination "http://") (strings.HasPrefix .Destination "https://") -}}

<a class="{{- if $isExternal }}external-link{{- else }}internal-link{{- end }}" href="{{ .Destination | safeURL }}"
  {{- with .Title }} title="{{ . }}"{{- end }}
  {{- if $isExternal }} target="_blank" rel="noopener"{{ end }}>
  {{- .Text | safeHTML }}
  {{- if $isExternal }}
    <span class="external-icon">
      <svg class="external-icon-svg" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z"/>
        <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"/>
      </svg>
    </span>
  {{- else }}
    <span class="internal-icon">
      <svg class="internal-icon-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M5 15H4L0 11L4 7H5V10H11C12.6569 10 14 8.65685 14 7C14 5.34315 12.6569 4 11 4H4V2H11C13.7614 2 16 4.23858 16 7C16 9.76142 13.7614 12 11 12H5V15Z"/>
      </svg>
    </span>
  {{- end }}
</a>

修改 CSS
#

接著再到/assets/css/路徑下修改custom.css。

原先只有指定外部連結的樣式，我複製了相同的樣式，只是把external-link替換為internal-link。

/* 修改 外部連結及 icon 相關顏色 */
/* 外部連結整體樣式 */
.external-link {
    text-decoration: none;
  }
  .external-link:hover {
    color: rgb(var(--color-neutral-300));/* 淺色模式 */
  }
  html.dark .external-link:hover {
    color: rgb(var(--color-neutral-200));/* 深色模式 */
  }

  /* 外部連結圖標本體對齊 + 間距 */
  .external-icon {
    display: inline-block;
    margin-left: -0.08em; /* 控制圖標和外部連結的間距 */
    line-height: 1;
  }

  /* SVG 大小和顏色自動適配文字 */
  .external-icon-svg {
    width: 0.8em;
    height: 0.8em;
    fill: currentColor;
    transition: fill 0.2s ease;
  } 

/* 修改 內部連結及 icon 相關顏色 */
/* 內部連結整體樣式 */
.internal-link {
    text-decoration: none;
  }
  .internal-link:hover {
    color: rgb(var(--color-neutral-300));/* 淺色模式 */
  }
  html.dark .internal-link:hover {
    color: rgb(var(--color-neutral-200));/* 深色模式 */
  }

 /* 內部連結圖標本體對齊 + 間距 */
  .internal-icon {
    display: inline-block;
    margin-left: -0.08em; /* 控制圖標和外部連結的間距 */
    line-height: 1;
  }

  /* SVG 大小和顏色自動適配文字 */
  .internal-icon-svg {
    width: 0.8em;
    height: 0.8em;
    fill: currentColor;
    transition: fill 0.2s ease;
  }

結果看起來會像是這樣：

新增 Shortcode
#

但是上面修改完 Markdown 連結渲染模板與 CSS 後，也只是讓內部連結也能顯示圖標。詳細說明段落使用的HTML錨點元素即便指向外部連結也不會顯示圖標。

因此我在/layouts/shortcodes下新增了link.html，樣式都跟上述一模一樣，只是可以使用 HTML 錨點元素，並且添加屬性id、href及、title。

模板代碼
# 

{{- $href := .Get "href" -}}
{{- $title := .Get "title" -}}
{{- $id := .Get "id" -}}
{{- $text := .Inner -}}
{{- $isExternal := or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") -}}

<a class="{{- if $isExternal }}external-link{{- else }}internal-link{{- end }}" href="{{ $href | safeURL }}"
  {{- with $id }} id="{{ . }}"{{- end }}
  {{- with $title }} title="{{ . }}"{{- end }}
  {{- if $isExternal }} target="_blank" rel="noopener"{{ end }}>
  {{- $text | safeHTML }}
  {{- if $isExternal }}
    <span class="external-icon">
      <svg class="external-icon-svg" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="m13 3l3.293 3.293l-7 7l1.414 1.414l7-7L21 11V3z"/>
        <path d="M19 19H5V5h7l-2-2H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-5l-2-2v7z"/>
      </svg>
    </span>
  {{- else }}
    <span class="internal-icon">
      <svg class="internal-icon-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M5 15H4L0 11L4 7H5V10H11C12.6569 10 14 8.65685 14 7C14 5.34315 12.6569 4 11 4H4V2H11C13.7614 2 16 4.23858 16 7C16 9.76142 13.7614 12 11 12H5V15Z"/>
      </svg>
    </span>
  {{- end }}
</a>

使用方法
# 

{{< link id="自訂" href="連結" >}}顯示文字{{< /link >}}

如此一來如果是要新增 ID 元素的場景便能使用此 shortcode 顯示連結圖標。

透過郵件回覆
YoZ 柚子
作者
YoZ 柚子
韓國實用音樂系留學生／FOSS Nerd／ISTJ／襯衫、墨鏡愛好者
Hugo Blowfish 主題客製化 - 本文屬於一個選集。
§ 1: Hugo Blowfish主題｜外觀功能修改日誌
§ 2: 本文
§ 3: Hugo Blowfish 主題｜程式碼區塊樣式與折疊
§ 4: Hugo 動畫背景｜3D網格加代碼瀑布風格

相關文章