2024-02 部落格優化隨記

趁著農曆新年假期，把拖延許久的一些部落格優化給調整了一番，以下隨手記錄一下。

新增主題列表 layout

因為上次寫 tree-shaking 文章時，覺得全部放在同一篇裡當作部落格長文閱讀體驗不太好，比較理想的其實是會像技術文件那樣可以類似卡片盒筆記的方式，去把每個知識點做切分更容易學習，因此新增了主題列表這個 layout，也方便未來開展系列文。

參考了 ExplainThis、jing-tech 這幾個喜歡的系列文 layout 設計，加上研究了一番現成方案所以有了《2024 技術文件及部落格的架站工具選擇》這篇文章。

因為有點懶得切版，在分別啟了 Docusaurus、VitePress 之後發現其實也沒有完全符合自己的需求，而且還是需要熟悉新版的文件架構，因此還是決定回頭來把做到一半的主題頁 layout 完成。

文件結構的部分，因為原本是使用 tailwind-nextjs-starter-blog 這個 template，內建就有用上 Contentlayer 這套方便管理 MDX 文件並根據 contentlayer.config.ts 自動產出 schema 的工具，所以在這部分只需要參考原本 blog 的結構稍微加一些欄位就能無痛完成，詳細介紹也可以參考此篇文章。

而 UI 的部分為了避免重造輪子，原本是想試玩潮潮的 shadcn/ui，但看了看沒有我期待的 sidebar menu 的樣式，最後找到了 daisyUI 這套的 menu 元件簡直就是理想中的樣子，幫助我快速完成 UI 呈現。

有個 TODO 是在 desktop 網頁的右上角理想上是要能有 ToC（Table of Contents）可以隨著捲軸滾動絲滑的切換 active 樣式，但因為我的切版能量已用完，就先停手，先用比較簡單的 Instagram 追蹤 CTA 小卡暫代，歡迎喜歡我的文章可以追蹤支持。

另外在做主題列表的卡片時，因為想在 hover 時能讓背景有漸層搭配 transition 效果，發現原來因為效能問題，原生 CSS 其實是不支援的，參考了這篇文章才了解在 Tailwind 的狀況下，可以透過 backgroundSize 、backgroundPosition 、via- 達成。

也在 Instagram 上分享後與特效大師 this.web 討論後了解到原來用 @property 也可以達成一樣效果，可參考這篇文章與這則貼文，不過參考 MDN 目前此屬性在 firefox 不支援，請小心服用。

Noise background

不曉得 pixel 眼的你有沒有注意到，其實網站的背景有些微的顆粒感，可能螢幕夠好且調亮一些才看得出來。

這是參考之前這篇文章中提到的部落格優化紀錄，其中一點提到他有針對背景加上了一些小巧思，就是加一層極淡的顆粒背景，讓部落格文章看起來像是被寫在紙的紋理上，實作原理其實也蠻簡單的，就是將這張圖片搭配以下這些修改就能達成。

css/global.css

html {
  --noise-opacity: 0.03;
}
 
.noise {
  background-image: url(/static/images/noise.png);
  background-repeat: repeat;
  background-size: 182px;
  opacity: var(--noise-opacity);
}

components/NoiseBackground.tsx

import { twc } from 'react-twc';
 
const NoiseBackground = twc.div`noise pointer-events-none absolute inset-0`;
 
export default NoiseBackground;

app/layout.tsx

import 'css/global.css';
import NoiseBackground from '@/components/NoiseBackground';
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    ...
    <NoiseBackground />
    ...
  };
}

當我完成這個興奮地 Demo 給女友看時，他只冷冷地說了一句「原來你都在糾結這種別人看不到的東西嗎？...。」 😆

更新：後來發現這個背景在較長的文章會斷掉，因此還是先拿掉。

其他微調

• 首頁漸層大標與介紹：小小地參考 leohuynh.dev 這個部落格的原始碼加上了 landing page 的介紹與大頭照。
• 連結樣式一樣參考了 ExplainThis 的樣式，讓連結在 hover 時有像是螢光筆畫線效果。
• 文章內文改成像是 Medium 風格的置中窄版設計，讓閱讀視覺動線更集中。
• 補上 giscus 留言區，方便未來若文章有問題可以直接留言或討論。
• 補上 footer 信箱聯絡資訊
• 原本此模板能在 MDX 中使用的元件有圖片相關，但還是新增一個 <BlogImage /> 元件方便排版文章的圖片，code 可能有點髒但能用：
  • components/BlogImage.tsx

    import NextImage, { ImageProps } from 'next/image';
     
    const BlogImage = ({ width, height, ...rest }: ImageProps) => (
      <div className="flex justify-center">
        <NextImage
          width={width || 600}
          height={height || 400}
          style={{ height: 'auto' }}
          {...rest}
        />
      </div>
    );
     
    export default BlogImage;

  • MDX 範例

    這幾天心血來潮在幫我的部落格新增一個主題區塊，因為自己造輪子造到懷疑人生...。
     
    <BlogImage
      src="/blog/blog-options/01.png"
      alt="custom topic page at my blog"
    />

結語

以上就是近期部落格優化的一些隨記，目前其實還有許多想做：

• 文章導覽 ToC 與可複製段落標題連結
• 文章閱讀時間
• 文章觀看次數
• 程式碼 diff highlight
• 圖片模糊載入
• 電子報訂閱
• 精選資源站
• 首頁 landing page 與 CTA Banner
• 作品集整理
• 線上 resume timeline
• lighthouse 分數調校

但覺得不能再不務正業，該開始來動手改履歷先，畢竟優化這件事本來就是漸進式的，就只能期待下次的心血來潮。