最近空出來的時間比較多，想多花點時間充實自己。
看了一些關於內容創作的影片¹，也想學習建立起自己的work flow(工作流)用於創作，並善用整合身邊的數位工具(手機、電腦、ipad)。

剛好利用這次部落格介面改版來做練習，除此之外，也順便學習呼叫hugo的自訂變數。

問題描述

一直以來都覺得自己的部落格雖然介面是很精簡，不過標題列實在有點太冗長。
原本分類 | 標題的形式看久了不是很順眼，因為長度不一樣長，如果可以把它固定長度的話，標題看起來會更對齊。(強迫症的me)

而且其實大部分的人應該不太會在意前面的標題分類，尤其又是單純的文字，掃過就看過去了；如果可以用一些生動的方式，或許可以有導引讀者去找同分類文章來看的效果。（個人想像）

一開始是想到設計類似emoji或是line的表情貼，找到了這篇文章²，大致學習了作者設計的方法以及工作流程後，想到我也可以自己來試試看做類似的事情
(就是一個土炮魂被點起XDDD)

最後想到的解法是

使用同樣大小、不同顏色的手寫字卡，置於每篇文章標題的前面，再透過css修飾，讓它視覺上看起來有種分類便條的效果，看起來也比較活潑。

實作方法

解決方式主要分成以下部分：

1. 字卡設計
2. hugo自創變數呼叫
3. 其他細節微調

以下逐一說明

字卡設計

這部分我是使用ipad搭配canvaapp來處理。
在canva中先設定好大小(1786x944)，然後選擇底色，接下來就是用apple pencil手寫囉~ 用canva有個好處，就是有網頁版，所以我在ipad裡面編輯完後就可以直接開啟電腦開瀏覽器把圖檔下載下來。

依據我的需求，我先寫了置頂、越野、行山、跑步、生活、BLOG、HUGO、作品、LIFEHACK、前端…這幾個字卡。

字卡好像有點太多了我知道，不過我的設計想法是：

依循我置頂那篇文章的分類設計，從心、技、體、山，四個大方向去做延伸

• 心：心情、生活相關的，使用紫色字卡，色碼#cb6ce6。
  
• 技：跟網頁、程式、BLOG相關的，使用藍色字卡，色碼#007aff。
  
• 體：跟跑步、訓練相關的，使用紅色字卡，色碼#f65353。
  
• 山：跟爬山、越野相關的，使用綠色字卡，色碼#7ec636。
  
• 其他：色碼#c5a289。

(趕快寫下來，以防自己以後忘記XDDD)
大概4john。

hugo自創變數呼叫

好的，把字卡設計好以後，接下來就是把它們放到我指定要放的地方了（揮汗

目標：　
根據在每篇文章front-matter區塊放的參數不同，去抓取相對應的字卡圖檔放到不同頁面的特定位置。

在hugo這個blog平台裡，每個頁面、文章的結構都是預先定義好的，這樣才可以重複使用。
首先觀察 layouts/list.html 這個檔案，這個檔案定義了在 papermod 這個主題中，首頁的文章如何排列顯示。
（例如我曾經做過把圖片顯示在文章右半邊的更改³，有興趣可以參考文末附錄連結。）

參考下方程式碼，每篇文章區塊的class名是 post-info ，第四行的 {{- .Title | markdownify}}是關鍵， .Title 是系統預設會從front-matter去抓的文章標題的title參數。　

<div class="post-info">
  <header class="entry-header">
    <h2>
      {{- .Title | markdownify}}
    </h2>
  </header>
  ...下略
</div>

💡所以，只要我在front-matter區塊自訂變數，例如 card 然後用類似 {{ .Card }} 的方式就可以抓取到我指定的變數了吧！

問題來了，當我在front-matter自己設定 card 參數時，hugo的解析engine取不到該參數！！

<div class="post-info">
  <header class="entry-header">
    <h2>
      {{- .Card | markdownify}}{{- .Title | markdownify}}
    </h2>
  </header>
  ...下略
</div>

費了一番努力，才在這篇⁴找到答案

While a predefined field like title is accessed simply as .Title, a custom field like author is accessed using .Params.author.

原來自定義的變數要使用 .Params 作為前綴才可以被存取到！！！

<div class="post-info">
  <header class="entry-header">
    <h2>
      {{- .Params.card | markdownify}}{{- .Title | markdownify}}
    </h2>
  </header>
  ...下略
</div>

修改成 .Params.card 就成功了！

值得一提的是，{{- .Params.card | markdownify}} 後面 markdownify 的參數，這個參數的意思是，如果card這個變數的內容符合markdown的語法規則，便會優先視為markdown語法來解析。

所以，當我的 card 用 markdown 插入圖片語法 ![alt](xxx.jpg) 設定時，便會找到路徑中相對應的圖片並插入在指定的位置了！

在我的文章front-matter區塊加入card就可以囉！

---
title: "標題客製化手寫字卡"
date: 2023-08-18T00:02:56+08:00
summary: "使用手寫字卡，為部落格增添一些風格。(hugo自訂變數練習)"
description: "設計手寫字卡，為部落格增添一些活潑的風格。blahblahblah"

# 自定義變數card
card: "![hugo](/hugo.jpg)" # 將字卡圖片放在static資料夾，存取方法不用寫絕對路徑。
---

其他細節微調

知道怎麼存取參數後，剩下的根據不同頁面的排版進行微調了。這部分牽涉到css的功力，就請大家自行發揮了~
我有使用到的大概有這些：

.entry-header img{
    display: inline;
    vertical-align: text-bottom;
    max-height: 26px;
    border-radius: 5px;
    box-shadow: var(--box-shadow);  
}

修改過的地方包含了 list.html、archives.html、single.html…等等，然後針對電腦版跟手機版也要調整。

成果截圖

最後附上成果截圖

1. 網頁版

   

2. 手機版

   

Recap

看完這篇，應該要掌握一點點下列技巧

1. 加深ipad跟pc的結合，運用在內容創造跟優化工作流程上。
2. hugo裡存取自定義的方法
3. 簡單的css寫法

大概是這樣，謝謝收看~~~

附錄

Hugo部落格系統內建支援Google Analytics的tag標記，只需要在head.html的區塊中塞入GA的追蹤碼即可，非常容易。

但麻煩的是當網站在local server(localhost:1313)下運作時，生成的網頁也會自動載入GA的追蹤碼，導致GA後台會將自己本機的瀏覽行為也計入統計資訊當中，每重新整理一次就會被視為一個新的使用者，於是文章封面首圖那誇張的新使用者跟事件計數就這樣產生了…(汗)

想當然爾，這不是我們想要的…

要解決這個問題其實很簡單，邏輯上就是在 Render / Build 網頁的時候，多執行一個判斷：
如果是在 local server 模式就不要載入 GA 追蹤碼

但自己查了Hugo官方的論壇¹，卻一直摸索不出正確的寫法跟設定。
要我說的話，go語法也太難debug了吧…

最後終於試出成功的方法，記錄在此供未來的自己跟有緣人查閱~

註：網路上搜尋可以找到非常多取得GA追蹤碼的教學，此篇文章預設大家都已經知道如何取得追蹤碼，只記錄如何設定的部分。

Step 1.

在config.yml中加入GA追蹤碼參數。

這部分可能不同主題的寫法不太一樣，以我使用的papermod主題為例，在config.yml中的寫法如下（G-xxxxxxxxxH請替換成你自己的GA追蹤碼代號）

  analytics:
    google:
      SiteVerificationTag: "G-xxxxxxxxxH"

Step 2.

在layouts資料夾下建立_internal資料夾，並新增一個叫做google_analytics_async.html的檔案。

檔案內容則是貼上從GA頁面中複製來的程式碼（大概長得像下面這樣）

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxH"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-xxxxxxxxxH');
</script>

同樣，G-xxxxxxxxxH請替換成你自己的GA追蹤碼代號

Step 3.

在layouts/partials/head.html中加入下面程式碼：

{{ if not .Site.IsServer }}
{{ template "_internal/google_analytics_async.html" . }}
{{ end }}

補充一下.Site.IsServer參數

.Site.IsServer
a boolean to indicate if the site is being served with Hugo’s built-in server. See hugo server for more information.

根據官方doc²，.Site.IsServer是用來判斷現在網站是否運行在hugo預設的server（也就是，Localhost:1313）上，所以我們做的是

當 not .Site.IsServer被判斷為true時，(也就是不在localserver運作時)，載入google_analytics_async.html這個程式碼片段(aka GA的追蹤程式)。

大功告成！

測試：
把網站更新推上github之後，分別開啟localhost:1313跟自己網站的網址

右鍵 ➡️ 檢視網頁原始碼 ➡️ ctrl+F 搜尋: “gtag”

一切正確的話，應該會發現localhost:1313下面是搜尋不到結果的；
而網站domain則可以搜尋到google_analytics_async.html的內容。

附錄

寫在前面

利用hugo來寫部落格有一個好處是，因為所有的更新是基於git來作版本管控，所以任何的更新都會留下commit紀錄。(只要每次更新都有確實寫好commit log的話)

有時候文章發佈後偶爾會有想要修改的打算，可能是文章內容修改、更換圖片、或是分類改動調整…etc。

這篇文章教你抓取最後一次的commit log，如此每次build時都會把最近一次的更新日期跟內容顯示在網站上，讓讀者與作者可以知道做了甚麼改動。

那麼，我們開始吧

前置條件

根據官網說明¹，我們要啟用.GitInfo需要先滿足3個條件：

1. Hugo 網站必須在git-enable的資料夾，換句話說，專案目錄裡不能有.ignore檔案。
2. 系統中必須要安裝git，並將git加入環境變數的path中。
3. config.yml檔案中必須要啟用加入enableGitInfo: true參數。

步驟說明

1. 在config.yml檔案中，加入enableGitInfo: true參數。 根據官網說明²，如此將會啟用每個頁面的.GitInfo物件，並可以更新Lastmod參數。
2. 同樣在config.yml檔案裡，找到params段落，加入GitHubUser參數。例如：

    baseURL: https://yoursite.example.com/
    params:
        AuthorName: Jon Doe
        GitHubUser: your github user id
    ...
   

3. 同樣在config.yml檔案裡，找到frontmatter段落，加入lastmod參數。例如：

    frontmatter:
        date:
        - date
        - publishDate
        - lastmod
        lastmod:
        - :git
        - lastmod
        - date
        - publishDate
    ...
   

   lastmod下面的參數決定了最後編輯資訊的抓取順序:
   
   • gitlog →
     
   • 每篇文章的lastmod參數(如果有設定的話) →
     
   • 每篇文章最上面的date參數 →
     
   • 每篇文章的發佈日期。
4. 一旦設定好config.yml以後，我們找到single.html檔案，客製化自己想要顯示的訊息＆顯示在哪裡。提供我的寫法如下：
   (從參考資料 中修改而來)

   {{ $date := .Date.Format "2006-01-02" }}　
   {{ $lastmod := .Lastmod.Format "2006-01-02" }}
   {{- if $lastmod }}
   <p style="color: gray; border-bottom: dashed 1px gray;width: fit-content;margin-bottom: 1rem;">
   ✏️本文最後更新於 {{ $lastmod }}{{ with .GitInfo }}：{{ .Subject }}({{ .AbbreviatedHash }}){{ end }}
   </p>
   {{- end }}
   

5. 成果截圖：
   可以看到不僅加入了最後更新的時間，還有更新的資訊、以及hash值。

   

參考資料

1. Adding Last Modified Git Status to Pages?
2. Question about implemenattion

附錄

掌握了頁面的排版特性，便可以省略很多重複的工作。

例如我使用的papermod主題，在single.html這個檔案裡面定義了每篇文章的結構，大致如下:

single-post
  | - title 文章標題
  | - description 文章概要
  | - content 文章內容
  | - footer 文末區塊

本文藉由修改post-footer區塊，新增系列文分類
讓讀者可以在閱讀文章後導引到該系列其他文章

看懂結構

先從以下路徑 themes > PaperMod > layouts > _default 找到 single.html 這個檔案。
複製一份後，貼到 layouts > _default > single.html 這個位置(沒有_default這個資料夾的話請自行新增)

建議這樣做的原因是因為，themes資料夾裡面放的就是主題(PaperMod)預設的設定，我們不要直接覆寫資料夾下面的東西，否則要是改不回來就糗了。

💡養成一個習慣，把所有自己客製化的東西都複製一份，再貼到相對應的原本主題的路徑，系統就會優先render客製化的設定，而不是主題模板的設定喔。

原始檔案應該長的類似下面這樣。(只截取post-footer段落)

/* themes > PaperMod > layouts > _default > single.html */
// 找到 post-footer 區塊
 <footer class="post-footer">
    {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
    <ul class="post-tags">
      {{- range ($.GetTerms $tags) }}
      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
    {{- if (.Param "ShowPostNavLinks") }}
    {{- partial "post_nav_links.html" . }}
    {{- end }}
    {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
    {{- partial "share_icons.html" . -}}
    {{- end }}
</footer>

結構很簡單，就是文章標籤、上一篇下一篇、社群分享按鈕三部分。
看不懂程式碼也沒關係，只要看highlight那幾行的關鍵字就好了，基本上就是三個部份組成了post-footer區塊。

post-footer
    | - post-tags
    | - ShowPostNavLinks
    | - ShowSahreButtons 

題外話：如何客製化社群分享按鈕可以參考下面這篇

 新增LINE分享按鈕

這篇教你如何在hugo blog中新增自訂分享按鈕！

實際修改

透過一點html知識，在標籤中加入文字。
比較關鍵的應該是第9行跟第12行(分別對應參考原本的第2行跟第5行)
把.Language.Params.Taxonomies.tag改成.Language.Params.Taxonomies.categories，並設成 $categories變數
然後再藉由14行的$.GetTerms $categories把categories列出來。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<footer class="post-footer">
    {{- $tags := .Language.Params.Taxonomies.tag | default "tags" }}
    <p style="font-size: medium;margin-bottom: 5px;">本文關鍵字:</p>
    <ul class="post-tags">
      {{- range ($.GetTerms $tags) }}
      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
    {{- $categories := .Language.Params.Taxonomies.categories | default "categories" }}
    <p style="font-size: medium;margin-bottom: 5px;">此分類系列文:</p>
    <ul class="post-tags">
      {{- range ($.GetTerms $categories) }}
      <li><a href="{{ .Permalink }}">{{ .LinkTitle }}</a></li>
      {{- end }}
    </ul>
    <br>
    {{- if (.Param "ShowPostNavLinks") }}
    {{- partial "post_nav_links.html" . }}
    {{- end }}
    {{- if (and site.Params.ShowShareButtons (ne .Params.disableShare true)) }}
    {{- partial "share_icons.html" . -}}
</footer>

成果截圖

簡單紀錄一下。

文末碎碎念

不知道你/妳覺得這樣的修改好嗎？ 有達到我文章開頭所述：讓讀者可以在閱讀文章後導引到該系列其他文章的目的嗎？

歡迎留言告訴我你的看法！請多多指教！

btw, 其實我真正想做的是修改postNavLinks，變成顯示針對該分類的上一篇、下一篇。這樣畫面可以更簡潔。

遺憾的是沒研究出來lol，只好就先這樣。

然而，對於無法自主開發部落格主題模板的人來說，有以下問題：

1. 綁定主題衍生問題
   每個主題開發者對於使用習慣、文件層級、頁面生成，都有自己的邏輯，因此當在hugo官方論壇想找某個功能的實作，可能只會得到 「這問題請去該主題開發者的github詢問」 的答案。
   
   

   想要客製化，必須設法搞懂開發者設計邏輯。

   

2. 官方文件說明缺少可重製的範例
   雖然官方文件乍看之下說明的很詳細，可是範例通常都只放最關鍵的部分，而且自定義的專有名詞太多(ex:leaf bundle/branch bundle/pages/list pages/sections/taxonomies)
   根本不知道該寫在哪裡/如何使用，很難系統化歸納出邏輯，常常自己胡亂添加也不知道效果如何。
   

   

嘛，畢竟是免費的東西，其實也不能怪官方/主題開發者。

只好靠自己啦(挽袖💪

滿多地方看起來是用go語言生成的。雖然有時候透過測試大概可以看懂個5、6成，不過基本上都還只是在原作者寫好的框架下改動參數而已，還無法自己創造。

為了讓部落格在整體視覺跟互動上符合我的美感
（謎：這很重要對吧對吧，至少要看得順眼才願意一直寫下去啊）
於是就有了小M平部落格整形手術這個系列文，一點點記錄我為了部落格所做的更動。

就一點一點嘗試吧！

紀錄之餘也希望可以幫助到大家，如果願意交流的話就更好了~😊

社群分享對自媒體或是創作者來說一直是一個很重要的功能。從創作者的角度來說，花費好大的心力寫好一篇文章，當然不希望只是擺在家裡孤芳自賞；而從讀者的角度來說，看到一篇實用、知識量高的文章，也會希望能有快速方便的管道，將文章分享出去，因此一鍵分享的功能可說是引導流量的一個重要關鍵。

Hugo是一個客制化程度很高的靜態部落格系統，內建有社群分享的功能，且有數不清的主題可以套用並修改。 以本站的主題PaperMod為例，當然也有內建社群分享按鈕¹囉！

以台灣來說，LINE大概是最多人使用的社群軟體，很可惜這並沒有整合到PaperMod主題裡面，所幸研究了一下，發現要達成這件事並不困難，以下就手把手跟著我做吧！

1. 啟用ShareButton功能

首先先來看看文章分享按鈕在Hugo/PaperMod中是如何實現的。 找到config.yml檔案，並在params區塊中添加以下參數：

params:
    ShowShareButtons: true # 啟用ShareButton

如此便會啟用社群分享功能，隨便點開一篇文章，滑到最下面應該就可以看到出現各式各樣的社群分享按鈕。

1.1 特定ShareButton

如果只想要特定的 share button(s)，則只要在原本的ShowShareButtons處添加下面這行即可：

params:
    ShowShareButtons: true
    # 從6個內建分享按鈕中，加入欲新增的shareButton(s)，用","隔開
    ShareButtons: ["twitter","facebook", "telegram"] 

2. 新增自定義按鈕

接下來找到share_icons.html檔案。
原始檔案位置在{site name}/themes/PaperMod/layouts/partials/share_icons.html，我們把它複製出來並貼到{site name}/layouts/partials/share_icons.html²

2.1 share_icons.html

share_icons.html裡面有預設六種的社群分享按鈕，隨便取一個出來觀察程式結構：
(大概在62行附近)

62
63
64
65
66
67
68
69
70

{{- if (cond ($custom) (in $ShareButtons "telegram") (true)) }}
<a target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on telegram"
    href="https://telegram.me/share/url?text={{ $title }}&amp;url={{ $pageurl }}">
    <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
        <path
            d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
    </svg>
</a>
{{- end }}

觀察後發現，每個按鈕的結構其實都很類似：

{{- if (cond ($custom) (in $ShareButtons "telegram") (true)) }}　<!-- 頭尾兩個大括號先不管 -->
<a target rel aria-label href > <!-- 這段定義按下icon後的動作 -->
<svg>...</svg> <!-- 其實這裡放的就是icon的圖形 -->
</a>
{{ - end }} <!-- 頭尾兩個大括號先不管 -->

那麼只要土炮一個類似的東西，應該就可以達成目的了吧！

2.2 加入line圖示

先來處理icon的部分，查了一下開發者說明的文件³，提到希望icon盡量參照feathericon simpleicons的設計風格，來去這兩個地方找找吧！

• feathericon
• simpleicons

bingo! 在simpleicons還真的找到了，把它的svg檔下載下來並用vs code開啟。

用文字編輯器打開後，看到這一長串，這就是我們要的！複製起來等等用。

<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LINE</title><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>

2.3 按下按鈕的動作

接下來處理按下按鈕的動作。

觀察a標籤裡面的東西，和其他按鈕比較一下

<a target rel aria-label href > <!-- 這段定義按下icon後的動作 -->

• target="_blank"表示是按下後開啟新分頁
• rel, aria-label　大家都差不多
• 關鍵在href

google 關鍵字 [line 按鈕 分享]，找到「建立line分享按鍵」那篇文章⁴

https://social-plugins.line.me/lineit/share?url=

2.4 組合在一起

按鈕部分的程式碼如下：

{{- if (cond ($custom) (in $ShareButtons "line") (true)) }}
<a target="_blank" 
    rel="noopener noreferrer" 
    aria-label="share {{ $title | plainify }} on line"  
    href="https://social-plugins.line.me/lineit/share?url={{ $pageurl }}" > 
<!-- 以下直接複製line的svg圖形 -->
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LINE</title><path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/></svg>
</a>
{{ - end }} 

注意看 highlight 起來的那兩行
aria-label：只是把 on “telegram” 改成 on “line"
href 的最後面則是加上 {{ $pageurl }}：這樣才會在按下按鈕後自動帶入文章的 url

最後一步了，我們來處理頭尾的雙括號！

2.5 處理頭尾雙括號

{{- if (cond ($custom) (in $ShareButtons "line") (true)) }}

看到關鍵字if in $shareButtons "line"，感覺是必須要把"line按鈕"註冊到　$ShareButtons　列表裡面，才可以正常運作/顯示。

參考上面特定ShareButton段落 ，回到config.yml把line加到列表裡吧!

params:
    ShowShareButtons: true
    ShareButtons: ["twitter","facebook", "telegram","line"] 

大功告成啦!!!

註解&文章連結

持續寫，熟能生巧。
整理blog寫作上我常用的各式語法。這篇就是我的cheatsheet for my blog! (持續新增中)

這裡的語法用法是寫給自己提醒用的，其中不乏自己客制的設定(which means不一定對你有用)，如果想要了解我如何客制化，請參考架站║ Hugo部落格與PaperMod主題 。

 Hugo blog & PaperMod

整理建這個blog遇到的各種踩雷實錄，持續更新中…

常忘記的markdown語法/shortcode

- 於文章中插入部落格其他文章連結

跟一般插入超連結寫法一樣，惟須注意路徑問題！

<!-- 一般超連結: -->
[text](https://xxxxxxx)
<!-- 引用部落格文章 -->
[text](../post_name)
<!--  加..是重點!! -->

- 插入linebreak(br標籤):

註：現在已可以使用br+tab的方式快速新增囉!(參照這裡 )

{{< br >}}

- blockquote

所有詳細用法都寫在這篇 了，超級詳細，需要再參考就好。

- 插入註解(footnote)

xxx[^1]
[^1]: 註解寫在這

- 插入圖片

1. 內建markdown語法
![]("https://imgur.../xxxx.jpg") 
<!-- 可以在.jpg後加上hashtag -->
<!-- ex: .jpg#center 置中, .jpg#left50 置左且50%高度-->
2. shortcode寫法
{{< figure  src="/..." title="..." width="100%" >}}
<!-- src可以是網址、也可以是資料夾路徑(預設是放在static資料夾裡頭) -->
<!-- 斜線是重點!!! -->
<!-- ex: src="https://www.lilmp.com/my-post/cover.jpg" 表示是 static/my-post/cover.jpg -->
<!-- ex: src="https://www.lilmp.com/posts/my-post/cover.jpg" 表示是 posts/my-post/cover.jpg -->

重要：如果是本機圖片的話，`src="https://www.lilmp.com/"`記得要加斜線!!!

- 插入 youtube 影片

{{< youtube videoid >}} <!-- Hugo/PaperMod內建寫法 -->
{{< youtubestartend videoid start end>}} <!-- 如想要指定影片開始/結束秒數 -->

- 插入rawhtml

特別適合用在從其他網站取得iframe後內嵌

{{< rawhtml >}}
html code here...
{{< /rawhtml >}}

- 插入imgur影片

{{< imgur-video id="" width="100%" >}}

- 插入程式碼

用shortcode 搭配參數 {{< highlight syntax "highlight參數">}}

{{< highlight go "linenos=table,hl_lines=8 15-17,linenostart=199" >}}
{{- if (cond ($custom) (in $ShareButtons "telegram") (true)) }}
    <a target="_blank" rel="noopener noreferrer" aria-label="share {{ $title | plainify }} on telegram"
        href="https://telegram.me/share/url?text={{ $title }}&amp;url={{ $pageurl }}">
        <svg version="1.1" xml:space="preserve" viewBox="2 2 28 28">
            <path
                d="M26.49,29.86H5.5a3.37,3.37,0,0,1-2.47-1,3.35,3.35,0,0,1-1-2.47V5.48A3.36,3.36,0,0,1,3,3,3.37,3.37,0,0,1,5.5,2h21A3.38,3.38,0,0,1,29,3a3.36,3.36,0,0,1,1,2.46V26.37a3.35,3.35,0,0,1-1,2.47A3.38,3.38,0,0,1,26.49,29.86Zm-5.38-6.71a.79.79,0,0,0,.85-.66L24.73,9.24a.55.55,0,0,0-.18-.46.62.62,0,0,0-.41-.17q-.08,0-16.53,6.11a.59.59,0,0,0-.41.59.57.57,0,0,0,.43.52l4,1.24,1.61,4.83a.62.62,0,0,0,.63.43.56.56,0,0,0,.4-.17L16.54,20l4.09,3A.9.9,0,0,0,21.11,23.15ZM13.8,20.71l-1.21-4q8.72-5.55,8.78-5.55c.15,0,.23,0,.23.16a.18.18,0,0,1,0,.06s-2.51,2.3-7.52,6.8Z" />
        </svg>
    </a>
    {{- end }}
{{< / highlight >}}

其他問題

- 如何在文章中印出shortcode段落

在shortcode區塊中加入 /* */ 即可讓文章不自動解析該shortcode區塊。REF
ex: {{</* rawhtml */>}}

- 如何下codeblock區塊highlight參數

詳細參數說明
ex: {linenos=inline,hl_lines=["3-10"],linenostart=1}

延伸閱讀：VSCODE cheatcheat

- 設定snippet

file > preference > 設定使用者程式碼片段
可選擇只在 .md 中生效 還是 整個專案的資料夾適用
舉例來說 我在 markdown.json中加入以下片段

"line break": {
    "prefix": ["br", "lb"],
    "body": ["{{< br >}}"],
    "description": "linebreak tag for hugo blog"
}

新增完記得要去 file > preference > 設定 > 啟用tabcompletion > 選擇 onlySnippets

如此之後只要打 keyword br/lb 再按 tab 就會自動插入snippet啦!

https://stackoverflow.com/questions/37863609/vs-code-intellisense-dont-suggest-snippet-at-first

// 我使用於blog寫作的snippet
"line break": {
    "prefix": ["br", "lb"],
    "body": ["{{< br >}}"],
    "description": "linebreak tag for hugo blog"
},
"shortcode": {
    "prefix": ["shortc","shortcode"],
    "body": ["{{< $0 >}}"],
    "description": "snippet for shortcode in hugo"
},
"youtube": {
    "prefix": ["yt","youtube"],
    "body": ["{{< youtube $0 >}}"],
    "description": "snippet for youtube shortcode in hugo"
},
"figure": {
    "prefix": ["figure","img"],
    "body": ["{{< figure src=\"$2\" title=\"$1\" width=\"$0\" >}}"],
    "description": "snippet for figure shortcode in hugo"
}

網路資源很多，先略XD

(記得添加hugo指令到環境變數，才可以在任意資料夾使用hugo相關指令喔)

常用hugo指令

- 建立新blog 
> hugo new site <blog_name> -f yml

- 下載PaperMod主題
> git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

- 建立新文章
> hugo new posts/<new_post>.md
# 記得要改draft: false才會出現在文章列表中(或是在 config.yml中加入 buildDrafts: true )

- 本機端預覽部落格(預設會在localhost:1313)
> hugo server

使用主題

# 在 config.yml 中加入所選主題
> theme: "PaperMod"

PaperMod 主題

• 新增文章時間軸(Archives)

  1. 建立 archive.md 在content資料夾下 content/archive.md

  ---
  title: "文章列表"
  layout: "archives"
  url: "/archives/"
  summary: archives
  ---
  

  https://github.com/adityatelange/hugo-PaperMod/wiki/Features#archives-layout

• 新增搜尋頁面(search page)

  1. 把以下設定加到config.yml

  # for search page
  outputs:
    home:
      - HTML
      - RSS
      - JSON
  

  2. 建立 search.md 在content資料夾下 content/search.md

  ---
  title: "搜尋" # in any language you want
  layout: "search" # is necessary
  # description: "Description for Search"
  summary: "search"
  placeholder: "搜尋文章關鍵字"
  ---
  

  3. 如不希望該文章被搜索到，則添加以下於文章的frontmatter區塊

  ---
  searchHidden: true
  ---
  

• 設定文章模板

  每次新增文章時會自動帶入的部分。參考

  找到 archetypes/default.md 並修改。

  ---
  title: "{{ replace .Name "-" " " | title }}"
  date: {{ .Date }}
  draft: false
  
  # "怎麼重新整理都沒用？這篇教你清除永無止盡的瀏覽器重新轉址(redirection)！"
  # 字數不要超過以上
  summary: "" # 首頁顯示的文字總結段落
  
  categories: 
  - 行山
  - 技術
  - 訓練
  tags: # 自由新增
  - 
  - 
  
  author: ["小M平"]
  
  isCJKLanguage: true # 是否是中文(chinese,japanese,korea) 字數判斷用
  comments: true
  showToc: true # 顯示目錄
  TocOpen: true # 預設打開目錄
  hidemeta: false # 是否隱藏meta訊息(ex:發布日期、作者...etc)
  disableShare: false # 取消社群分享區塊
  showbreadcrumbs: true # 於頂部顯示文章路徑
  ShowWordCounts: true
  ShowReadingTime: true
  ShowLastMod: true
  
  cover:
      image: "" # 封面圖片路径 (ex:clear-301-redirection-cache-chrome/cover.jpg)
      caption: "" # 封面圖片底部描述
      alt: ""
      relative: false
  ---
  

• 社群連結(鑲嵌strava, ig post)

  基本上用rawhtml這個shortcode搭配iframe鑲嵌的方式比較簡單，未來移植性也比較高

  1 2 3 4 5 6 7 8 9 10 11 12 13 14

  // strava activities {{< rawhtml >}} <div class='strava-embed-placeholder' data-embed-type='activity' data-embed-id='7279049209'></div><script src='https://strava-embeds.com/embed.js'></script> {{< /rawhtml >}} // strava recent activities {{< rawhtml >}} <iframe height='454' width='300' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.strava.com/athletes/34128612/latest-rides/f672808af3343beece46ac192ff9a69e41e3d6cd'></iframe> {{< /rawhtml >}} // ig post {{< rawhtml >}} <iframe height='454' width='300' frameborder='0' allowtransparency='true' scrolling='no' src='https://www.instagram.com/p/Ccf9RZKBoN0/embed/'></iframe> {{< /rawhtml >}}

Hugo/PaperMod Shortcode

Shortcode 可以看作是「一小塊 HTML 程式片段」，與 Hugo Template 不同的是，前者通常運用在「插入特定用途」、「重複使用」的片段語法到 markdown 內容中，而後者則是作為 markdown content 的外殼載體、或是佈局規劃等，用以構成我們最後呈現的視圖頁面 (View)。 — 來源:iT邦

有興趣研究更詳細的shortcode設定，可以參考這篇 以及這篇

• figure

  內建shortcode，可直接在文章中內嵌圖片並做寬度/標題設定

  {{< figure  src="..." title="..." width="100%" >}}
  

• imgur

  單純為了放上傳到imgur的影片(如果是單純imgur本身我會用上面figure的方式，還可以指定更多參數)

  新增/layouts/shortcodes/imgur.html

  <div class="embed imgur-video" style="padding: 10px;">
      <video controls="" name="media" style="width: 50%;">
          <source src='https://i.imgur.com/{{ .Get "id" }}.mp4' type="video/mp4">
      </video>
  </div>
  

  新增完後，以後在文章中即可使用{{< imgur id="" >}}語法來嵌入 imgur mp4

  參考自這篇 還有這篇

• youtubestartend

  可指定youtube影片開始跟結束的時間。ref

  ex: {{< youtubestartend siVSC7tZVek 72 82 >}}

  新增/layouts/shortcodes/youtubestartend.html

  <div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
      <iframe src="http://www.youtube-nocookie.com/embed/{{ index .Params 0 }}?start={{ index .Params 1 }}&end={{ index .Params 2}}"
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allowfullscreen frameborder="0" title="YouTube Video"></iframe>
  </div>
  

css 修改

• code 區塊設定max-height assets/css/common/post-single.css

  .post-content pre code {
      max-height: 30em;
  }
  

• 取消 footnote hr分隔線 assets/css/common/post-single.css

  /* 取消footnote的hr分隔線 */
  .footnotes hr {
      display: none;
  }
  /* 取消footnote的hr分隔線 */
  

• 讓tags跟categories頁面的文章也呈現縮圖 assets/css/common/post-entry.css ref

  .tag-entry .entry-cover {
      display: flex;
  }
  

Hugo frontmatter區塊參數說明

• summaries https://gohugo.io/content-management/summaries/

設置評論區/comment systems

hugo 系統自訂性非常高，內建整合老牌的Disqus服務，不過似乎有個資的問題，再加上不是每個人都有github帳號，幾經思量後決定自己host一個comment system。

想看hugo與disqus的設定可看這篇 ，基本上照著做就行。

查照hugo支援的comment system列表請看這裡 。

將文章大綱(TOC, table of content)改到側邊

參考這篇

首頁縮圖調整

參考這篇

自定義post_meta顯示

• 最後編輯(Lastmod)

  會根據frontmatter中的順序取值。官網說明

  • :git：會去抓git提交紀錄的日期，且必須於config.yml中啟用enableGitInfo = true(沒試成功)
  • :fileModTime：根據本機的文件最後修改紀錄
  • lastmod：可以在文章的frontmatter區塊中直接設定
  • date：可以在文章的frontmatter區塊中直接設定
  • publishDate：文章發布的日期

  config.yml

  frontmatter:
      lastmod:
      - :git
      - :fileModTime
      - lastmod
      - date
      - publishDate
  

• 在post_meta塞svg

  iconset: https://package.elm-lang.org/packages/1602/elm-feather/1.0.0/FeatherIcons 參考別人的post_meta.html: https://github.com/reorx/hugo-PaperModX/blob/master/layouts/partials/post_meta.html

• 我的post_meta

  layouts/partials/post_meta.html

  {{ $date := .Date.Format "02.01.2006" }}
  {{ $lastmod := .Lastmod.Format "02.01.2006" }}
  
  {{- $scratch := newScratch }}
  
  
  {{- if not .Date.IsZero -}}
  {{- $scratch.Add "meta" (slice (printf "<span title='%s'>張貼: %s</span>" (.Date) (.Date | time.Format (default "2006-01-02" site.Params.DateFormat)))) }}
  {{- end }}
  
  {{- if ne $lastmod $date -}}
  {{- $scratch.Add "meta" (slice (printf "<span title='%s'>最後編輯: %s</span>" (.Lastmod) (.Lastmod | time.Format (default "2006-01-02" site.Params.DateFormat)))) }}
  {{- end }}
  
  {{- if (.Param "ShowReadingTime") -}}
  {{- $scratch.Add "meta" (slice (i18n "read_time" .ReadingTime | default (printf "%d min" .ReadingTime))) }}
  {{- end }}
  
  {{- if (.Param "ShowWordCount") -}}
  {{- $scratch.Add "meta" (slice (i18n "words" .WordCount | default (printf "%d words" .WordCount))) }}
  {{- end }}
  
  {{- with (partial "author.html" .) }}
  {{- $scratch.Add "meta" (slice .) }}
  {{- end }}
  
  {{- with ($scratch.Get "meta") }}
  {{- delimit . "&nbsp;|&nbsp;" -}}
  {{- end -}}
  

  參考

  1. 這篇
  2. https://github.com/adityatelange/hugo-PaperMod/discussions/775
  3. https://gohugo.io/getting-started/configuration/#:~:text=date%20handlers%20are%3A-,%3AfileModTime,-Fetches%20the%20date
  4. 別人的範本
  5. 官網
  6. https://mertbakir.gitlab.io/hugo/last-modified-date-in-hugo/
  7. https://www.jacksonlucky.net/posts/use-lastmod-with-papermod/

• 我的 config.yml

  # baseURL: "https://thriving-tartufo-c36de5.netlify.app/"
  baseURL: "https://www.lilmp.com"
  languageCode: en-us
  title: LilMP | 小M平
  theme: "PaperMod"
  
  paginate: 5 # 首頁文章筆數
  
  defaultContentLanguage: "zh-tw"
  
  enableGitInfo: true
  
  frontmatter:
  date:
  - date
  - publishDate
  - lastmod
  expiryDate:
  - expiryDate
  lastmod:
  - :git
  - :fileModTime
  - lastmod
  - date
  - publishDate
  publishDate:
  - publishDate
  - date
  
  enableRobotsTXT: true
  buildDrafts: true
  buildFuture: false
  buildExpired: false
  
  googleAnalytics: UA-123-45
  
  minify:
  disableXML: true
  minifyOutput: true
  
  # FOR SEARCH PAGE
  outputs:
  home:
      - HTML
      - RSS
      - JSON
  
  params:
  env: production # to enable google analytics, opengraph, twitter-cards and schema.
  title: ExampleSite
  description: "ExampleSite description"
  keywords: [Blog, Portfolio, PaperMod]
  author: 小M平
  # author: ["Me", "You"] # multiple authors
  images: ["<link or path of image for opengraph, twitter-cards>"]
  DateFormat: "2006-01-02" # "January 2, 2006"
  defaultTheme: auto # dark, light
  disableThemeToggle: false
  
  ShowAllPagesInArchive: true
  mainSections:
      - posts
  
  ShowLastMod: true
  ShowReadingTime: true
  ShowShareButtons: true
  ShowPostNavLinks: true
  ShowBreadCrumbs: true
  ShowCodeCopyButtons: true
  ShowWordCount: true
  VisitCount: true
  ShowRssButtonInSectionTermList: true
  UseHugoToc: true
  disableSpecial1stPost: false
  disableScrollToTop: false
  comments: true
  hidemeta: false
  hideSummary: false
  showtoc: true
  tocopen: true
  
  
  
  # ShareButtons: ["facebook", "telegram"]
  
  
  # Display thumbnail image of each post on index pages (false: disabled, true: enabled)
  # 文章缩略图功能
  thumbnailImage: true
  # 缩略图位置，我觉得放在上面好看，如果用的小图片作缩略图
  # 可以放在（left或者right），设置此项会取代配置文件中默认在下边的设置
  thumbnailImagePosition: top
  # 这个下边默认就好了，暂时不清楚有什么影响
  autoThumbnailImage: yes
  metaAlignment: left
  
  assets:
      # disableHLJS: true # to disable highlight.js
      # disableFingerprinting: true
      # favicon: "<link / abs url>"
      # favicon16x16: "<link / abs url>"
      # favicon32x32: "<link / abs url>"
      # apple_touch_icon: "<link / abs url>"
      # safari_pinned_tab: "<link / abs url>"
  
  label:
      # text: "Home"
      # icon: /apple-touch-icon.png
      # iconHeight: 35
  
  # profile-mode
  profileMode:
      enabled: false
      title: "<Title>" # optional default will be site title
      subtitle: "This is subtitle"
      # imageUrl: "<image link>" # optional
      # imageTitle: "<title of image as alt>" # optional
      # imageWidth: 120 # custom size
      # imageHeight: 120 # custom size
      buttons:
      - name: Archive
          url: "/archive"
      - name: About
          url: "/about"
  
  
  
  # home-info mode
  homeInfoParams:
      Title: "Hi there. 我是小M平 \U0001F44B"
      Content: >
      - ### 心、技、體
  
      - 離開世界之前，一切都是過程。
  
      - Welcome to my blog. Below is where you can reach out to me.    
  
  socialIcons:
      - name: instagram
      url: "https://www.instagram.com/yenzichun"
      - name: strava
      url: "https://www.strava.com/athletes/34128612"
      - name: youtube
      url: "https://www.youtube.com/channel/UCuAlYrRVD7b63WGgcCcR1ww"
      - name: email
      url: "mailto:yenping074@gmail.com"
      - name: buymeacoffee
  
  analytics:
      google:
      SiteVerificationTag: "XYZabc"
      bing:
      SiteVerificationTag: "XYZabc"
      yandex:
      SiteVerificationTag: "XYZabc"
  
  cover:
      linkFullImages: false
      hidden: false # hide everywhere but not in structured data
      hiddenInList: false # hide on list pages and home
      hiddenInSingle: false # hide on single page
  
  # editPost:
  #   URL: "https://github.com/LilMP/LilMP-hugo-site/tree/master/content"
  #   Text: "Suggest Changes" # edit text
  #   appendFilePath: true # to append file path to Edit link
  
  # for search
  # https://fusejs.io/api/options.html
  fuseOpts:
      isCaseSensitive: false
      shouldSort: true
      location: 0
      distance: 1000
      threshold: 0.4
      minMatchCharLength: 0
      keys: ["title", "permalink", "summary", "content"]
  menu:
  main:
      - identifier: categories
      name: 分類
      url: /categories/
      weight: 10
      - identifier: tags
      name: 標籤
      url: /tags/
      weight: 20
      - identifier: archives
      name: 時間軸
      url: /archives/
      weight: 30
      - identifier: projects
      name: 專案
      url: /projects/
      weight: 40
      - identifier: about
      name: 關於
      url: /about/
      weight: 50
      - identifier: search
      name: 搜尋
      url: /search/
      weight: 60
      # - identifier: example
      #   name: example.org
      #   url: https://example.org
      #   weight: 30
  # Read: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma
  # pygmentsUseClasses: true
  # markup:
  #     highlight:
  #         # anchorLineNos: true
  #         codeFences: true
  #         guessSyntax: true
  #         lineNos: true
  #         style: monokai
  

首頁配置

• 個人資訊

  參考 範例網站的設定檔

部屬上線

研究了很久，覺得最無腦的方式就是串接netlify(影片37:11分開始)

其他問題

• 上傳到github後發現theme的css沒有載入

  打開F12檢查錯誤訊息 看是否為Failed to find a valid digest in the 'integrity' attribute for resource

  如果是的話於config.yml裡加上這行即可。來源

  params:
  assets:
      disableFingerprinting: true
  

• blockquote 用法

{{< blockquote  author="..." source="..." link="..." title="..." >}}
some text here
{{< /blockquote >}}

• Normal quote:

  This is a simple quote.

  Flying is learning how to throw yourself at the ground and miss.

• Quote with author

  This is a quote with only an Author named Author2.

• Quote with author and source

  This is a quote from Author3 and source “source.”

• Quote with author and link

  This is a quote from Author4 and links to https://www.google.com .

• Quote with author, link and title

  This is a quote from Author5 and links to https://www.google.com with title “Google.”

• Quote with author and a link longer than 32 characters, string is first cut at 32 characters then everything after the last forward slash is removed

  This is a quote from Author5 and links to https://twitter.com/CryptoGangsta/status/716427930126196737 which is longer than 32 characters. And this is a new line in the quote with the HTML br tag.

• Test from the Octopress blockquote page at: http://octopress.org/docs/plugins/blockquote/

  Over the past 24 hours I’ve been reflecting on my life & I’ve realized only one thing. I need a medieval battle axe.

• 設定文章中的互連 (2023.02.16 update)

  因為之前改動過permalink設定, 將網址統一為/year-month-day/slug/ 的形式。
  所以之前文章中有引用的部分超連結也需要改變

  原本做法: 假設要被連結的文章檔名為 hugo-papermod-blog.md
  原本是類似文件層級，../後面直接輸入"檔名"即可(hugo-papermod-blog.md)

  [架站║ Hugo部落格與PaperMod主題](../hugo-papermod-blog)
  

  不過因為現在網址多了/year-month-day/所以這樣會連不到。

  解決辦法:
  於該文章的front matter中設定aliases

  aliases:
      - /hugo-blog-settings/
  

  修改後: [超連結文字](/hugo-blog-settings) 就會自動連到對應的文章，也不用輸入/year-month-day/的網址前綴

不錯的hugo內容網站

1. https://theryanlin.github.io/posts/2020/11/16/
2. https://aiwlulu.github.io/
3. https://www.odszz.com/
4. https://www.sulvblog.cn/
5. https://freepencil.com/2021/10/hugo-papermod%E8%B8%A9%E5%9D%91%E5%8E%86%E7%A8%8B/
6. https://wenrongdev.com/posts/reflection-blog-1/

參考資料

1. PaperMod features
2. hugo-PaperMod Github
3. hugo shortcodes-官網
4. papermod FAQs
5. hugo新手道場
6. papermod github.io
7. liva hugo
8. PaperModX：這裡 、還有這裡

前幾天設定godaddy網域 ，以及測試各種轉址服務 後，發現原本設定把lilmp.github.io和lilmp.com綁定在一起，可是取消後瀏覽器卻怎麼樣都會自動轉址（不過只要更換為無痕視窗或用其他帳號登入瀏覽器就又一切正常），簡直像鬼打牆一樣！！超奇怪的！！

直到查到這篇 才解決我的問題!

問題排查

1. 確認已在github取消custom domain(卻還是會自動轉址)

   

2. 確認已在godaddy中將lilmp.com網域與其他網域連結。(沒用)

   

3. 有想過可能是快取cookie問題，也於chrome設定中刪除github、godaddy相關cookie快取。(still no luck)

   

4. 查到一篇文章 說可以使用ctrl+f5強迫瀏覽器再抓一次瀏覽器資料。（仍然沒有用）

發現問題

原來問題出現在 request url 時的 status code！

打開devtools->netwok頁籤，檢查header可以發現 301(from disk cache) 的黃燈。

如果你也遇到一樣的問題，可以參考以下的解決辦法。

解決問題

針對不希望轉址網域(ex: lilmp.github.io)點右鍵，執行clear browser cache，如此便會真正刪除原本的快取，重新整理後就不會再鬼打牆自動轉址囉！

文中參考連結列表

1. https://dev.to/epranka/clear-the-301-302-redirection-cache-chrome-4dio (最終解法)
2. https://blog.vvtitan.com/2014/08/%E7%80%8F%E8%A6%BD%E5%99%A8%EF%BC%9Af5%E3%80%81ctrlf5%E5%92%8C%E4%BD%8D%E5%9D%80%E6%AC%84%E8%BC%B8%E5%85%A5%E7%9A%84%E5%8D%80%E5%88%A5/

謝謝看到這裡的你/妳，希望這篇文章有幫助，任何問題或回饋都很歡迎喔！❤️