Hugo的anatole模板修改
原本的版型很美，但是無法一眼就看出部落格文章有哪些分類以及有哪些標籤，因此在側邊欄新增「分類」和「標籤」區塊讓大家更好找想要的文章唷。
分類Category
原本的版型就有文章分類的功能，因此只要把分類項目顯示在頁面上就可以完成了。
打開layouts資料夾內的partials資料夾，找出想放的頁面的html檔，我是想放在側邊欄，所以打開sidebar，將以下程式碼放至在想要的位置上，個人是放在這個版型的社群平台(socialIcons)區塊後面。
修改的小重點：
- 有class標籤的部分，請使用該樣板中已有的css樣式名稱，頁面整體會較為一致
- 在style的部分調整想要的位置，最好是使用
%的絕對位置版型較不會跑掉 - 在寫文章的標題時，記得寫上
categories分類的名稱，文章才會有分類唷
<!-- category -->
<div class="sidebar__list" style="width:80%;margin-left:10%;">
<h4 class="widget-title">Category</h4>
{{- if isset .Site.Taxonomies "categories" }}
{{- if not (eq (len .Site.Taxonomies.categories) 0) }}
<ul class="list-unstyled">
{{- range $name, $items := .Site.Taxonomies.categories }}
<li class="category"><a
href="{{ `categories/` | relLangURL }}{{ $name | urlize | lower }}/">{{ $name | title | humanize }}</a>
</li>
{{- end }}
</ul>
{{- end }}
{{- end }}
</div>
標籤Tag
原本的版型就有在文章標上標籤的功能，因此只要把標籤項目顯示在頁面上就可以完成了。
打開layouts資料夾內的partials資料夾，找出想放的頁面的html檔，我是想放在側邊欄，所以打開sidebar，將以下程式碼放至在想要的位置上，個人是放在剛剛新增的分類(category)區塊後面。
修改的小重點：
- 有class標籤的部分，請使用該樣板中已有的css樣式名稱，頁面整體會較為一致，所以也有用到category class的樣式
- 在style的部分調整想要的位置，最好是使用
%的絕對位置版型較不會跑掉，這邊我也是設定跟category一樣的位置 - 在寫文章的標題時，記得寫上
tags標籤的名稱，文章上才會有標籤唷
<!-- Tags -->
<div class="widget" style="width:80%;margin-left:10%;">
<h4 class="widget-title">Tag</h4>
{{- if isset .Site.Taxonomies "tags" }}
{{- if not (eq (len .Site.Taxonomies.tags) 0) }}
<ul class="list-inline">
{{- range $name, $items := .Site.Taxonomies.tags }}
<li class="category"><a class="tag"
href="{{ `tags/` | relLangURL }}{{ $name | urlize | lower }}/">{{ $name | humanize }}</a></li>
{{- end }}
</ul>
{{- end }}
{{- end }}
</div>
小結
感覺內容寫的有點偷懶，哈哈…
Hugo的是使用Go語法，第一次接觸滿不習慣的，不過也是滿快就可以知道大致上的架構，所以就從有設定分類和標籤的樣式參考要怎麼添加。
平常在網路上在找資料的時候，由於不確定搜尋下的關鍵字是否正確，所以文章的分類和標籤對我來說都是滿重要的功能，希望以上的內容有幫到大家的忙。
參考資料：
- liva-hugo樣式 https://github.com/gethugothemes/liva-hugo