增加了部落格側邊欄的「最新文章」欄位

這篇文簡單紀錄一下側邊欄的「最新文章」段落是怎麼製作出來的。

原先我的側邊欄是沿用 Owen 的部落格 的架構,分成所有分類、常用連結、標籤三大類,如下圖:

original

但我今天突然想到,我想讓這個側邊欄有更多的連結,例如可以放上最新的文章,或者是未來把電子報也放進來,就可以放入最新幾期的電子報。

有了這個想法以後,就聯想到, Owen 的部落格裡面好像有類似的功能:「以下是我最新的 5 篇文章」。

於是我就開始看他的這個功能是怎麼實現的。

Owen 的 blog

按圖索驥後發現 Owen 的部落格在 index.html 裡面有一個區塊是:

<h2>{{trans(key="label_new_posts_list_title",lang=lang) | markdown(inline=true) | safe}}</h2>
<section class="articles">
{% set all_blog_pages = get_section(path="blog/_index"~file_lang_path~".md") -%}
{% for page in all_blog_pages.pages | slice(start=0,end=5)  %} 
  {{ macro::post_max(page=page) }}   
{% endfor %} 

我的理解是,這一段的白話說明是:

  • 先顯示在 config.toml 裡面的 "label_new_posts_list_title" 對應的字串:「以下是我最新的5篇文章」。
  • 設定 "all_blog_pages" 這個變數成為 "blog" 資料夾裡面的 .md 檔案。
  • (slice 還看不懂,但知道是抓 5 篇)。
  • 然後導入 macro:post_max 這個 macro。

但 Owen 的設定裡面,這段語法是在 index.html ,也就是在首頁出現。我想要的則是在 Sidebar 出現,因此要來找找 Sidebar 的設定在哪。


搜尋了一下關鍵字後,發現 Sidebar 在 Owen 的 blog 裡面是在 base.html 這份文件裡面出現,因此找到對應的段落後,把剛剛那段代碼插入,是順利出現這個「最新文章」的區塊了,但卻顯示成為全文預覽的樣子:

sidebar-1

這時觀察了一下,發現可能是語法裡面這段造成的:

  {{ macro::post_max(page=page) }}   

所以又跑去找這段在寫什麼。


自己改改看

此時在 macros.html 這份文件裡面找到了 {% macro post_max(page) %} 相關的代碼,發現他有些複雜,已經超出了我的理解範圍,此時看到有另外一個 macro 叫做 post_min ,因此就直接把原始語法的 post_max 改成 post_min ,結果還真的發揮作用了:

sidebar-2

此時畫面的感覺已經很像我想要的樣子了,只有那個 "Updated on..." 跟我想的不太一樣,但此時再回去看 macros.html 裡面的 post_min 就相對好懂很多:

{% macro post_min(page) %}
<a href="{{ page.permalink }}">{{ page.title }}</a> <span class="muted text-sm">Updated on {{ page.updated }}</span>
{% endmacro post_min %}

這段代碼的意思應該是指:

{% macro post_min(page) %}
<a href="{{ 頁面連結 }}">{{ 頁面標題 }}</a> <span class="muted text-sm">Updated on {{ 更新時間 }}</span>
{% endmacro post_min %}

所以我想拿掉或想調整的就是後段的字而已,但我又不想要讓網站上其他用到 macro post_min 的段落一起改動,因此我就新增了一個 macro post_side ,並且調整為:

{% macro post_side(page) %}
<a href="{{ page.permalink }}">{{ page.title }}</a>
{% endmacro post_side %}

這時就差不多長成我要的樣子了:

sidebar-3

後來還亂調整了一些小地方,讓這個區塊跟上下能長得更像一點,在這邊就不多提了!


小結

透過這次修改的經驗,更熟悉 Zola 裡面的 base.html 跟 macro.html 是怎麼互動的,覺得很有邏輯,連我這種完全程式外行的人都能改出自己想要的感覺,相當開心!

之後再來試試看製作一個電子報的 section ,並且把最新的電子報內容丟上來!

#Zola


Last modified on