我希望每個頁面都有自己的標題。

/home -> About Connie
/blog -> Blog Archive
/blog/[slug] -> 如果 slug 是 2022-12-25-my-first-blog，則頁面標題將變為 "My First Blog"。

Define the title of Home and Blog static page

Open pages/home.page.ts and add a routeMeta object.

定義主頁面 (Home) 和部落頁面 (Blog Archive) 的標題

開啟 pages/home.page.ts 並新增一個 routeMeta 物件。

export const routeMeta: RouteMeta = {
   title: 'About Connie',
};

如果我輸入 http://localhost:5173，文件標籤將顯示 "About Connie"。

開啟 pages/blog/index.page.ts 並新增一個 routeMeta 物件。

export const routeMeta: RouteMeta = {
   title: 'Blog Archive',
};

如果我輸入 http://localhost:5173/blog，文件標籤將顯示 "Blog Archive"。

定義部落格文章頁面的動態標題

開啟 pages/blog/[slug].page.ts 並新增一個 routeMeta 物件。

export const routeMeta: RouteMeta = {
 title: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
   const urlParts = state.url.split('/');
   const lastPathParts = urlParts[urlParts.length - 1].split('-');
   return new TitleCasePipe().transform(lastPathParts.splice(3).join(' '));
 }
}

標題取決於 state.url 的值。如果 state.url 是 /blog/2022-12-27-my-first-post，我希望文件標題變成 "My First Post"。

const urlParts = state.url.split('/');

urlParts 變成 [‘blog’, ‘2022-12-27-my-first-post’]

const lastPathParts = urlParts[urlParts.length - 1].split('-');

lastPathParts 變成 [‘2022’, ‘12’, ’27’, ‘my’, ‘first’, ‘post’]

new TitleCasePipe().transform(lastPathParts.splice(3).join(' '));

lastPathParts.splice(3).join(' ') 連接陣列並產生 "my first post"。 TitleCasePipe pipe 將 "my first post" 轉換為 "My First Post"。

如果我在瀏覽器中輸入http://localhost:5173/blog/2022-12-27-my-first-post，文件標籤將顯示
"My First Post"。

參考：

• Route Meta Tag: https://analogjs.org/docs/features/routing/metadata