owned this note   changed 2 years ago  
Published Linked with GitHub

設定背景與顯示名稱

設計理念

一般來說，若要製作設定可自訂化的設計，我們需要儲存使用者之前留下的設定，那便得用到Local Storage或是JSON檔案；但在這一篇章，我們主要目標放在將設定值渲染到畫面上，因此不對於資料儲存進行實作，但基於本篇的程式再搭配Local Storage概念，就可達到自訂化設計。

因此，讓我們先加入以下物件：

let DEFAULT_SETTING = {
  userName: "ZHAO-XIN, PAN",  // 改為自己的名字
  theme: "city",  // 改為想要的主題
};

如此一來，我們便能用以下程式取得設定值：

DEFAULT_SETTING.userName;
DEFAULT_SETTING.theme;

更新頁面上的名字：renderName()





function renderName(userName) {
    // 先取得HTML中存放名字的標籤
    // 將標籤內的文字改為userName(丟進來的參數)
}

更新背景主題：renderBackground()















function randerBackground() {
    // 設定背景圖片連結
    // 取得存放背景圖片的標籤(banner)
    // 設定標籤的css樣式：backgroundImage、backgroundPosition、backgroundSize、backgroundRepeat、backgroundAttachment
//  
}

// 補充：幫標籤添加css屬性
element.style.css屬性="css屬性值";
// css屬性同我們寫css時會用的屬性，只是當兩個單字間用"-"連接要把"-"刪掉並把第二個單字第一個字母改成大寫。
// 例：color屬性
element.style.color = "red";
// 例：background-position
element.style.backgroundPosition = "center";

getSetting()

這裡要取得我們目前所儲存的設定，設定可在localStorage尋找

function getSetting() {
  // 這裡是如果沒有在localStorage找到，就使用預設的設定
  if (!localStorage.getItem(KEY_SETTING)) {
    localStorage.setItem(KEY_SETTING,  JSON.stringify(DEFAULT_SETTING));
  }
  // 最後將得到的設定轉為JSON格式回傳
  return JSON.parse(localStorage.getItem(KEY_SETTING));
}

呼叫畫面更新函式：updateWindow()

呼叫前面所寫的兩個畫面更新函式。
邁向自訂化設定的一步：透過getSetting函式讀取資料，並將資料傳入兩個畫面更新函式。

Select a repo