Hex Jsd Svelte

練習 JavaScript 題目篇 - 新手 JS 地下城的紀錄

Need a Svelte website built?

想要熟練的唯一方法，就是大量的練習。
所以這個地方就用來紀錄練習以及解題的過程，讓自己可以累積更多的經驗
這次使用之前一直想嘗試的新東西，譬如使用 display:grid 來當成主要的排版方式，以及使用 SCSS 來撰寫 style，然後使用 vite 當成打包工具

這個可以好好的紀錄一下，為何程式碼最終會是現在這個樣子
首先重構做了這幾件事情：
1. 一個是將原本重複 9 次的 card-body 縮減到一次，
2. 原本的 card-title 使用 arr.slice(1) 來產生，slice() 的用途是指定陣列裡面開始處理的位置，由於裡面寫了 1，所以會從 2 開始處理（因為 0 被跳過）
3. 增加一個函式表達式用來產生 card-content 的內容，
4. 2 跟 3 都搭配 {#each} 來產生出重複使用的內容
我也是後來才發現原來 {#each} 裡面還可以再包 {#each}

想把首頁改成完成的列表，所以會處理到 route 的東西，所以來記錄一下截止目前為止 Svelte 的 route 要如何設定
目前 Svelte 沒有內建 route 管理，但是 SvelteKit 裡面有（使用 +page)
如果不用 SvelteKit 的話，那就要使用 svelte-routing 這個套件來處理
當然用純的也可以，只是需要做的前置作業就會比較多一點
- 建立要使用的 .html 檔案，譬如要連結到 A.html 就建立一個對應的，放的位置無所謂，但我自己會放到 pages
- 在 A.html 裡面加入要使用的 Svelte component
- 在 index.html 裡面建立 <a> 到 A.html
- main.js 也會需要做對應的修改，比較簡單的方式是將會使用的到的 component 都 import 到這個檔案，然後根據不同的頁面寫不同的參數
- 或是用一個簡單的判斷也可以
- 不過後來想想，比較符合 Svelte 的做法應該是寫一個 component，放入 index.html 裡面的內容，然後用這個 component 來處理
後來選擇的處理方式比較土炮一點，就是不同的 html 搭配一個 js，可能之後會再用 SvelteKit 設定 route，但現在就先不花太多時間在這個上面了
因為是當時想的方法行不通，主要是 Svelte 的架構，由於一個 html 一定會使用一個 js 來引入，所以如果有第二個 html 就一定需要一個對應的 js，除非是使用套件或是改用 SvelteKit，不然這應該是目前唯一解

Nav.svelte 那邊之前一直會出現網址重複的情況，預設的 index.html 是九九乘法，第一次點擊到時鐘沒有問題，但是當再次點擊九九乘法表的時候網址就會出現問題
後來發現是我其實可以不用在 Nav 裡面去指定絕對路徑（<a href="./src/pages/01.html>），可能是因為其實這兩頁都在同一個資料夾底下，多加前面那一個 . 反而會讓路徑指到錯誤的地方去
這個問題不大就是了，但沒有用 route 的話就是會需要多一點時間來排除
原本想說自己來刻那個時鐘，但是我發現裡面那個刻度有點太難了，偷吃步用圖片好了
不過寫好的 code 就不刪掉了

上個星期在處理完樣式推送 Clock 的時候發現一個情況，就是點擊 Nav 的時鐘頁面後還是出現九九乘法表，我猜測可能是 Compile 時並不會分開去處理不同頁面的 JS，而是統一由單一的 JS 檔案來處理（也就是 index.html 裡面載入的那一支），由於我使用的方式並不是官方建議的做法（因為官方建議用 SveletKit），所以才會導致無論如何都只會吐九九乘法表的內容
看起來最終還是要用 SvelteKit 來處理 route，所以之後的開發會從這邊繼續