前言

本篇介紹如何修改 PaperMod 主題文章列表卡片式呈現。

預設 PaperMod：僅能看到一個大縮圖。

old

修改 PaperMod 後，一次可以查看三篇文章標題。

modify

實現方法

透過 CSS 的 Grid 樣式使文章排列成表格，本篇示範 3 x 2 排列方式。

修改首頁文章數量

編輯 Hugo 目錄下的 config.yml 或 config.toml。

新版 Hugo 修改 pagerSize
pagination:
  pagerSize: 6 #修改數量改成 6
  
舊版 Hugo 修改 paginate
paginate: 6

修改 CSS

正常來說修改 .main 成為 Grid 樣式就可以看到效果，但是 PaperMod 主題它的 .main 和瀏覽文章裡的 .main 效果一樣。所以首頁修改成功，但文章也會變成 Grid 排版，導致版面錯亂。

修改思路：首頁的 .main 與其他頁面的 .main 分不同名稱。

修改 /themes/PaperMod/layouts/_default/baseof.html。

加上判斷式：main {{ if .IsHome }}home{{ end }}。

如果在首頁則 .main 變成 .main.home，這樣和文章中的 .main 不同名稱就可以分開定義樣式。

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

<body class="
{{- if (or (ne .Kind `page` ) (eq .Layout `archives`) (eq .Layout `search`)) -}}
{{- print "list" -}}
{{- end -}}
{{- if eq site.Params.defaultTheme `dark` -}}
{{- print " dark" }}
{{- end -}}
" id="top">
    {{- partialCached "header.html" . .Page -}}
    <main class="main {{ if .IsHome }}home{{ end }}">
        {{- block "main" . }}{{ end }}
    </main>
    {{ partialCached "footer.html" . .Layout .Kind (.Param "hideFooter") (.Param "ShowCodeCopyButtons") -}}
</body>

Grid 排版

修改 /themes/PaperMod/assets/css/common/main.css。

配合手機瀏覽，我們要定義當寬度變小時，從 3 x 2 變成 2 x 3 ，再變成 1 x 6。提升閱讀體驗。

使用 @media screen and (max-width: 寬度) 可以實現不同寬度使用不同 CSS。

.main.home {
	display: grid;
    grid-template-columns: repeat(3, auto); /* 改為三欄 */
	max-width: calc(var(--main-width) + var(--gap) * 15); /*增加原來寬度*/
}

@media screen and (max-width: 1200px) {
  .main.home {
    grid-template-columns: repeat(2, auto); /* 寬度小於1200改為兩欄 */
  }
} 

@media screen and (max-width: 900px) {
  .main.home {
    grid-template-columns: repeat(1, auto); /* 寬度小於900改為一欄 */
  }
}

自訂位置

由於 .main.home 底下包含首頁標題 .first-entry.home-info 和頁數切換 .page-footer，我們要再定義它們的位置。

修改 /themes/PaperMod/assets/css/common/post-entry.css，自訂位置和動態調整。

.first-entry.home-info{
	grid-column-start: 1;
	grid-column-end: 4;
}

.page-footer{
    grid-column-start: 1;
	grid-column-end: 4;
	margin: 10px;
}

@media screen and (max-width: 1200px) {
  .first-entry.home-info{
    grid-column-start: 1;
	grid-column-end: 3;
  }

  .page-footer{
    grid-column-start: 1;
	grid-column-end: 3;
  }

} 

@media screen and (max-width: 900px) {
  .first-entry.home-info{
    grid-column-start: 1;
	grid-column-end: 2;
  }
  .page-footer{
    grid-column-start: 1;
	grid-column-end: 2;
  }
}

微調樣式

1
2
3
4
5
6
7
8
9

.post-entry {
    position: relative;
    padding: var(--gap);
    background: var(--entry);
    border-radius: var(--radius);
    transition: transform 0.1s;
    border: 1px solid var(--border);
    margin: 10px;
}

以上調整可以修改排版，適合文章有縮圖的部落格使用，邏輯掌握好可以實現九宮格等任何組合。

另外 Hugo 有一個主題本身就提供卡片式預覽，名為 BlowFish，有興趣的朋友可以去體驗看看。

參考連結

格線佈局的基本概念

Responsive grid in 2 minutes with CSS Grid Layout