diff --git a/src/app/layout/layout-toolbar.component.ts b/src/app/layout/layout-toolbar.component.ts
index cd25ec790e..0ba3e474ae 100644
--- a/src/app/layout/layout-toolbar.component.ts
+++ b/src/app/layout/layout-toolbar.component.ts
@@ -2,9 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  Input,
   Output,
   inject,
+  input
 } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -43,9 +43,9 @@ import { WebsiteTheme } from './website-theme';
       mat-icon-button
       (click)="toggleMenu()"
     >
-      @if (menuOpen) {
+      @if (menuOpen()) {
       <mat-icon>menu_open</mat-icon>
-      } @if (!(menuOpen)) {
+      } @if (!(menuOpen())) {
       <mat-icon>menu</mat-icon>
       }
     </button>
@@ -70,7 +70,7 @@ import { WebsiteTheme } from './website-theme';
       class="mr-2"
       (click)="toggleTheme()"
     >
-      @if (theme === 'light') {
+      @if (theme() === 'light') {
       <mat-icon>light_mode</mat-icon>
       } @else {
       <mat-icon>dark_mode</mat-icon>
@@ -120,10 +120,10 @@ import { WebsiteTheme } from './website-theme';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class LayoutToolbarComponent {
-  @Input() menuOpen: boolean = true;
+  readonly menuOpen = input<boolean>(true);
   @Output() menuOpenChange = new EventEmitter<boolean>();
 
-  @Input() theme: WebsiteTheme = 'dark';
+  readonly theme = input<WebsiteTheme>('dark');
   @Output() themeChange = new EventEmitter<WebsiteTheme>();
 
   @Output() searchKeywordChange = new EventEmitter<string>();
@@ -151,10 +151,10 @@ export class LayoutToolbarComponent {
   protected suggestList = toSignal(this.suggestList$);
 
   protected toggleMenu() {
-    this.menuOpenChange.emit(!this.menuOpen);
+    this.menuOpenChange.emit(!this.menuOpen());
   }
 
   protected toggleTheme() {
-    this.themeChange.emit(this.theme === 'light' ? 'dark' : 'light');
+    this.themeChange.emit(this.theme() === 'light' ? 'dark' : 'light');
   }
 }
diff --git a/src/app/site-common/blog-post-subtitle.component.ts b/src/app/site-common/blog-post-subtitle.component.ts
index dcc36738c4..84c6b8d374 100644
--- a/src/app/site-common/blog-post-subtitle.component.ts
+++ b/src/app/site-common/blog-post-subtitle.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { MarkdownMeta } from 'site-utils';
@@ -8,18 +8,18 @@ import { SlugifyPipe } from './slugify.pipe';
 @Component({
     selector: 'app-blog-post-subtitle',
     template: `
-    @if (postMeta) {
+    @if (postMeta()) {
 
     <span class="blog-post-published">
       <mat-icon>date_range</mat-icon>
-      <span>{{ postMeta.date.slice(0, 10) }}</span>
+      <span>{{ postMeta().date.slice(0, 10) }}</span>
     </span>
 
-    @if ((postMeta.categories || []).length > 0) {
+    @if ((postMeta().categories || []).length > 0) {
 
     <span class="blog-post-categories">
       <mat-icon>folder_open</mat-icon>
-      @for (category of postMeta.categories; track category; let last = $last) {
+      @for (category of postMeta().categories; track category; let last = $last) {
 
       <a
         class="blog-post-category-link"
@@ -55,5 +55,5 @@ import { SlugifyPipe } from './slugify.pipe';
     imports: [MatIconModule, RouterLink, SlugifyPipe]
 })
 export class BlogPostSubtitleComponent {
-  @Input() postMeta?: MarkdownMeta | PostMeta;
+  readonly postMeta = input.required<MarkdownMeta | PostMeta>();
 }
diff --git a/src/app/site-common/liker-coin.component.ts b/src/app/site-common/liker-coin.component.ts
index 366b87ed51..8df4945eac 100644
--- a/src/app/site-common/liker-coin.component.ts
+++ b/src/app/site-common/liker-coin.component.ts
@@ -1,11 +1,11 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  Input,
   OnDestroy,
   OnInit,
   inject,
   signal,
+  input
 } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Subscription } from 'rxjs';
@@ -34,7 +34,7 @@ export class LikerCoinComponent implements OnInit, OnDestroy {
   private domSanitizer = inject(DomSanitizer);
   private platformService = inject(PlatformService);
 
-  @Input() likerId = '';
+  readonly likerId = input('');
 
   protected likerCoinSrc = signal<SafeResourceUrl>(
     this.domSanitizer.bypassSecurityTrustResourceUrl('')
diff --git a/src/app/site-common/pagination.component.ts b/src/app/site-common/pagination.component.ts
index 9045191a3a..4fe744a094 100644
--- a/src/app/site-common/pagination.component.ts
+++ b/src/app/site-common/pagination.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { RouterLink } from '@angular/router';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -6,91 +6,91 @@ import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'app-pagination',
-    template: `@if (currentPage > 1) {
+    template: `@if (currentPage() > 1) {
     <button
       mat-stroked-button
       class="pagination-button pagination-prev pagination-icon"
-      [routerLink]="[linkBase, currentPage - 1]"
+      [routerLink]="[linkBase(), currentPage() - 1]"
       matTooltip="上一頁"
     >
       <mat-icon class="!mx-0">navigate_before</mat-icon>
     </button>
-    } @if (currentPage > 1) {
+    } @if (currentPage() > 1) {
 
     <button
       role="button"
       aria-label="第一頁"
       mat-stroked-button
       class="pagination-button pagination-first"
-      [routerLink]="[linkBase, 1]"
+      [routerLink]="[linkBase(), 1]"
       matTooltip="第一頁"
     >
       1
     </button>
 
-    } @if (currentPage > 3) {
+    } @if (currentPage() > 3) {
     <mat-icon class="more-icon">more_horiz</mat-icon>
-    } @if (currentPage > 2) {
+    } @if (currentPage() > 2) {
 
     <button
       role="button"
-      [attr.aria-label]="'第 ' + (currentPage - 1) + ' 頁'"
+      [attr.aria-label]="'第 ' + (currentPage() - 1) + ' 頁'"
       mat-stroked-button
       class="pagination-button pagination-prev"
-      [routerLink]="[linkBase, currentPage - 1]"
-      [matTooltip]="'第 ' + (currentPage - 1) + ' 頁'"
+      [routerLink]="[linkBase(), currentPage() - 1]"
+      [matTooltip]="'第 ' + (currentPage() - 1) + ' 頁'"
     >
-      {{ currentPage - 1 }}
+      {{ currentPage() - 1 }}
     </button>
 
     }
 
     <button
       role="button"
-      [attr.aria-label]="'第 ' + currentPage + ' 頁'"
+      [attr.aria-label]="'第 ' + currentPage() + ' 頁'"
       mat-raised-button
       color="primary"
       class="pagination-button"
-      [matTooltip]="'第 ' + currentPage + ' 頁'"
+      [matTooltip]="'第 ' + currentPage() + ' 頁'"
     >
-      {{ currentPage }}
+      {{ currentPage() }}
     </button>
 
-    @if (currentPage < totalPage - 1) {
+    @if (currentPage() < totalPage() - 1) {
 
     <button
       role="button"
-      [attr.aria-label]="'第 ' + (currentPage + 1) + ' 頁'"
+      [attr.aria-label]="'第 ' + (currentPage() + 1) + ' 頁'"
       mat-stroked-button
       class="pagination-button pagination-next"
-      [routerLink]="[linkBase, currentPage + 1]"
-      [matTooltip]="'第 ' + (currentPage + 1) + ' 頁'"
+      [routerLink]="[linkBase(), currentPage() + 1]"
+      [matTooltip]="'第 ' + (currentPage() + 1) + ' 頁'"
     >
-      {{ currentPage + 1 }}
+      {{ currentPage() + 1 }}
     </button>
 
-    } @if (currentPage < totalPage - 2) {
+    } @if (currentPage() < totalPage() - 2) {
     <mat-icon class="more-icon">more_horiz</mat-icon>
-    } @if (currentPage < totalPage) {
+    } @if (currentPage() < totalPage()) {
 
     <button
       role="button"
       aria-label="最後一頁"
       mat-stroked-button
       class="pagination-button pagination-last"
-      [routerLink]="[linkBase, totalPage]"
+      [routerLink]="[linkBase(), totalPage()]"
       matTooltip="最後一頁"
     >
-      {{ totalPage }}
+      {{ totalPage() }}
     </button>
 
-    } @if (currentPage < totalPage) {
+    } @if (currentPage() < totalPage()) {
     <button
       role="button"
       aria-label="下一頁"
       mat-stroked-button
       class="pagination-button pagination-next pagination-icon"
-      [routerLink]="[linkBase, currentPage + 1]"
+      [routerLink]="[linkBase(), currentPage() + 1]"
       matTooltip="下一頁"
     >
       <mat-icon class="!mx-0">navigate_next</mat-icon>
@@ -129,7 +129,7 @@ import { MatButtonModule } from '@angular/material/button';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class PaginationComponent  {
-  @Input() linkBase = '/';
-  @Input() currentPage = 1;
-  @Input() totalPage = 1;
+  readonly linkBase = input('/');
+  readonly currentPage = input(1);
+  readonly totalPage = input(1);
 }