部落格新增 RSS 圖示、文章列表修改

新增 RSS 圖示

今天在部落格網站的招牌上新增了 RSS 圖示。

以前曾經想過加在 Menu，但是總覺得有點突兀、不好看，而且長度太長的話，手機上看 Menu 會變成兩行，畫面很怪。

也想過加在 Footer，不過我 Footer 的年份是用 JS 自動產生的（XD），這樣就要改 JS 或是改結構，但最主要還是視覺上怪怪的，可能要全部重新設計過 Footer 才適合放吧。

另外一個點是，我的首頁目前是顯示 「10 篇全文」，這樣要拉到很下面才找得到 RSS，太不友善了。

固定位置 SVG

最後選擇的做法是，先找一個 RSS 的 SVG ，固定放在 Header 右下角的位置。

直接內嵌 SVG 有一個好處，可以透過 CSS 自動調整圖示的大小。

SVG 圖示

<svg width="18" height="18" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-label="RSS 訂閱">
    <rect width="24" height="24" rx="4" fill="#E8730A"/>
    <circle cx="6.5" cy="17.5" r="2.5" fill="white"/>
    <path d="M4 11.5C8.14 11.5 11.5 14.86 11.5 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
    <path d="M4 6C11.18 6 17 11.82 17 19" stroke="white" stroke-width="2.2" stroke-linecap="round" fill="none"/>
</svg>

CSS

.header-rss {
    position: absolute;
    bottom: 10px;
    right: 10px;
    line-height: 0;
}

.header-rss svg {
    width: clamp(18px, 3vw, 20px);
    height: clamp(18px, 3vw, 20px);
}

文章列表

文章列表的部分，最開始是改成年份做區隔，但我發現我發的文章還挺多的，有分跟沒分差不多。

最後受到 Shuyu Pixelart 部落格的排版啟發，決定改成年+月來分類。

截圖