我想創建一個靜態主頁來向訪問我部落格的人介紹我自己。

新增靜態主頁

在 src/app/pages 下建立 home.page.ts。

import { Component } from '@angular/core';

@Component({
 selector: 'app-home',
 standalone: true,
 template: `
   <h1>Home</h1>
   <section class="introduction">
       <p>Hello. My name is Connie and I am an Angular GDE from Hong Kong.</p>
       <p>I am a passionate software engineer and content creator who is constantly learning about the latest web technology to level up my skills.</p>
       <p>When I am not working, I love to exercise, learn foreign languages, and create content to show the new features and best practices of the <span class="framework">Angular</span> framework.</p>
   </section>
   <section class="tech">
       <p>Current Technical Stack<p>
       <ul>
           <li>Angular</li>
           <li>Vue</li>
           <li>NestJS</li>
           <li>HTMX (I love using it when I don't want to use any frontend framework.)</li>
           <li>PostgreSQL</li>
       </ul>
   </section>
 `,
})
export default class HomeComponent {}

在 HomeComponent 元件中，我在 HTML 範本中介紹了自己以及我目前熟悉的的技術。

Redirect index page to the home page

In the index page, change the route metadata to route / to /home

將索引頁 (index page) 導航到主頁 (home page)

在索引頁面中，將路由從 / 到 /home

import { RouteMeta } from '@analogjs/router';

export const routeMeta: RouteMeta = {
 redirectTo: '/home',
 pathMatch: 'full',
};

啟動博客

cd ironman2024-analog-blog 
npm i 
npm run dev

導航至 http://localhost:5173

該應用程式顯示主頁 (Home) 而不是部落格頁面 (Blog)。

參考：

• https://analogjs.org/docs/getting-started