部落格優化1
7/6/2025, 1:18:11 PM2yh9S
我發現我完全沒有發任何跟軟體開發相關的部落格，
超級對不起當初辛苦建的highlight.js。
這應該是第一篇，
講一下關於這個部落格的優化。
優化內容
這次優化的是/blog對於每篇文章的預覽，
原本的實現方法非常粗糙，
可以說是其爛無比——把<Post />直接貼上來。
這樣做只有一個好處，
就是我可以少寫幾行程式碼💩。
壞處有很多，
但主要是使用者載入頁面的時候要花很多時間和網路流量，
相對的我伺服器的壓力也會很大，
而造成這個現象的主要原因就是圖片，
於是我在預覽頁面的地方增加一個檢查，
只要在前25行有找到圖片，
就只載入到那張圖片為止，
然後最多只載入25行。
程式碼實作
原本的程式碼長這樣
typescript
// @/blog/page.tsx
export default async function Page() {
const posts = await getPosts();
return (
<div className="all-posts">
{posts.map((post, id) => (
<Post key={id} post={post} />
))}
</div>
)
}
// @/components/post.tsx
export default function Post({ post }) {
return (
<PurePost post={post} ... />
)
}
// @/components/pure-post.tsx
export default function PurePost({ post, ...}) {
const html = parse(post);
return (
<article>
{html.join("")}
</article>
)
}我把<PurePost />增加一個布林參數preview，
判斷這次的渲染是不是首頁的文章預覽，
如果是就把<PurePost />裡面的html先放到genPreviewPost()做處理，
最後把/blog/page.tsx裡面的<Post />改成<PurePost preview={true} />就可以了。
typescript
// @/blog/page.tsx
export default async function Page() {
const posts = await getPosts();
return (
<div className="all-posts">
{posts.map((post, id) => (
<PurePost key={id} post={post} preview={true} ... />
))}
</div>
)
}
// @/components/pure-post.tsx
export default function PurePost({ post, ...}) {
const _html = parse(post);
const html = preivew ? genPreviewPost(_html) : _html;
return (
<article>
{html.join("")}
</article>
)
}genPreviewPost()的實作如下
typescript
export function genPreviewPost(html: string[]): string[] {
const isShort = html.slice(0, 26).every((value) => {
return value.search(/<img.*>+/) == -1;
});
if(isShort) return html.slice(0, 26);
for(let i = 0; i < 26; ++i) {
if(html[i].search(/<img.*>+/) != -1) {
return html.slice(0, i + 1);
}
}
return html.slice(0, 26);
}最後消毒一下，
之前會有這麼爛的實作是因為文章數量不多（就是偷懶）。
然後我是用typescript寫的，
找機會再把highlight.js的語法補上。
部落格軟體開發typescript