iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 30
1
Modern Web

Angular 深入淺出三十天系列 第 30

[Angular 深入淺出三十天] Day 29 - Angular 小學堂(四之三)

好的,我們今天要開始套版了!!

首先先到 GitHub 上把我已經切好的版型下載下來。

不過為了避免有人不知道怎麼下載,容我先小小地說明一下:

點擊 GitHub 的連結開啟新的視窗之後,應該會看到以下畫面:

Imgur

然後點擊紅框中的 Clone or download 按鈕之後,會出現一個視窗:

Imgur

接著再點擊紅框中的 Download ZIP 按鈕之後就能夠成功下載。

下載完之後是個壓縮檔,記得要解壓縮噢!!

為方便後續分辨,之後都會稱這個下載下來的資料夾為 「素材」。


共用區塊套版

拿到素材之後,裡面的資料夾結構是:

  • index.html - 首頁不解釋。
  • pages/ - 這裡面是其他頁面的 HTML 檔。
  • assets/ - 這裡面是 CSS 與圖片檔。

首先我們先將素材裡 assets/ 底下的 images/ 整個資料夾搬到我們專案 src/ 底下的 assets/ 裡。這裡面是整個網站都會用到的圖片檔。

接著再打開素材裡 assets/css/ 底下的 common.css 檔,這裡面都是全站共用的樣式設定。一樣將裡面的設定全部複製貼上到我們專案 src/ 底下的 styles.css 裡。

然後打開素材裡的 index.html ,我們先把共用區塊的 HTML 複製到我們專案裡的 app.component.html 裡。

這邊要留意的是, index.html 是完整的 HTML 檔,但我們其實只需要先複製其中這兩個區塊的 HTML :

Imgur

複製貼上後,再把路由插座放在中間那塊各頁要自己處理的區塊,像這樣:

Imgur

完成後就可以來看一下畫面:

Imgur

可以看到大致上的樣式都有出來了,不過你會看到有些地方會跑版。而這部份是因為我有使用 Google Material Design 裡的 Icon 造成的。

這個問題只要我們在 index.html<head></head> 加上:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

等待畫面重整完應該就會正常了:

Imgur

不過雖然畫面是正常的,但我們還需要調整一下導覽列的連結:

Imgur

上圖中的連結需要用 routerLink 來處理一下:

<!-- 選單區域開始 -->
<nav class="desktop">
  <ul>
    <li><a [routerLink]="[path.home]">首頁</a></li>
    <li><a [routerLink]="[path.products]">甜點</a></li>
    <li><a [routerLink]="[path.login]">登入</a></li>
  </ul>
</nav>

<nav class="mobile">
  <i class="material-icons">menu</i>
  <ul>
    <li><a [routerLink]="[path.home]">首頁</a></li>
    <li><a [routerLink]="[path.products]">甜點</a></li>
    <li><a [routerLink]="[path.login]">登入</a></li>
  </ul>
</nav>
<!-- 選單區域結束 -->

<!-- 購物車icon區域開始 -->
<a [routerLink]="[path.cart]" class="cart">
  <i class="material-icons">shopping_cart</i>
</a>
<!-- 購物車icon區域結束 -->

處理完之後記得點看看是不是可以正常運作噢!

首頁套版

接下來換開啟 home.component.html 檔,一樣是素材裡的 index.html 檔,只不過這次換成另一個區塊:

Imgur

直接整塊複製貼上到 home.component.html 之後,再打開素材裡 assets/css/ 底下的 index.css 檔,這個檔裡的樣式設定都是給 HomeComponent 的 Temeplate 用的。

一樣全部複製貼到 home.component.css 檔裡,存檔後應該會發現編譯器會報錯:

Imgur

這是因為原本設定背景圖片的時候是使用相對路徑來連結圖片,不過在 Angular 裡要使用絕對路徑,所以我們只要把 ../ 都替換成 /assets/ 就可以了。

改完之後應該會看到圖片都會正常顯示:

Imgur

看起來好像還滿不錯的!!畫面都有正常顯示...等等!!這裡怎麼跑版了?:

Imgur

別緊張,這是因為我們還沒有處理到這個區塊。這一個區塊裡有一個 UI 元件是跟甜點那頁會一起共用的,還記得嗎?

接下來我們就先來處理一下這一塊。

首先先打開素材 assets/css 裡的 choice-item.css 檔,這裡面都是跟甜點共用的那塊區塊的樣式設定。我們將它全部複製之後,貼到我們專案裡的 product-item.component.css 裡。

接著先幫我找到這個設定:

Imgur

然後用以下的設定把它替換掉:

.choice-item .img-container {
  height: 315px;
}

.choice-item .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

這部分因為當初在切版的時候沒有發現 object-fit 這個設定,直到我在寫這篇文章的時候才發現,所以趕快請大家更改一下。

不過這個設定要很高的瀏覽器版本才有支援,所以要使用之前請特別留意。

接著再把 home.component.html 裡的這個區塊的程式碼複製貼到 product-item.component.html 裡:

Imgur

貼完之後,幫我把下圖中的 HTML:

Imgur

替換成:

<div class="img-container">
  <img src="assets/images/others/heather-schwartz-493946-unsplash.jpg" alt="">
</div>

再來我們到 home.module.tsimport ProductItemModule ,這樣才能夠在 home.component.html 裡使用我們做好的 ProductItemComponent :

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';

import { ProductItemModule } from '../shared/product-item/product-item.module';

@NgModule({
  imports: [
    CommonModule,
    HomeRoutingModule,
    ProductItemModule
  ],
  declarations: [HomeComponent]
})
export class HomeModule { }

最後則是到 home.component.html 裡把原本這一大串的程式碼:

Imgur

替換成:

<section class="today-choice">
  <app-product-item></app-product-item>
</section>

調整完之後來看一下畫面:

Imgur

很好,看來是成功了!不過目前只有一個商品,我們先用奇怪的方式處理,後面再來處理資料的部份:

<app-product-item *ngFor="let item of [1, 2, 3]"></app-product-item>

然後再到 home.component.css 裡加上:

app-product-item {
  display: inline-block;
}

app-product-item:nth-child(2) {
  margin: 0px 20px;
}

加完之後再來看一下畫面:

Imgur

Perfect!!

這樣我們首頁就完成基本的套版了,資料我們留到最後再來處理。


其他較簡單頁面的套版

完成首頁的套版之後,有幾頁比較簡單的如登入頁、購物車頁以及結帳成功頁也可以先套起來,基本上這幾頁所對應的素材檔案以及專案檔案是:

  • 登入頁
    • 素材
      • HTML : pages/ 裡的 login.html
      • CSS : assets/css/ 裡的 login.css
    • 專案
      • HTML : login.component.html
      • CSS : login.component.css
  • 購物車頁
    • 素材
      • HTML : pages/ 裡的 cart.html
      • CSS : assets/css/ 裡的 cart.css
    • 專案
      • HTML : cart.component.html
      • CSS : cart.component.css
  • 結帳成功
    • 素材
      • HTML : pages/ 裡的 checkout-success.html
      • CSS : assets/css/ 裡的 checkout-success.css
    • 專案
      • HTML : success.component.html
      • CSS : success.component.css

試著自己套套看吧,記得只要中間那塊而已噢!!

有任何問題的話,應該上面都有提到過,再仔細檢查看看!

如果還是不知道問題在哪裡的話,歡迎在底下留言給我!

套完之後應該會像這樣:

Imgur


那今天的套版就先到這裡囉,我們明天見!!


上一篇
[Angular 深入淺出三十天] Day 28 - Angular 小學堂(四之二)
下一篇
[Angular 深入淺出三十天] Day 30 - Angular 小學堂(四之四)
系列文
Angular 深入淺出三十天33

尚未有邦友留言

立即登入留言