# 設定背景與顯示名稱

<!-- - 設定背景與顯示名稱(JS):without setting
- name跟背景是寫死的 (用Js變數儲存，保留getSetting)
- 背景的CSS設定(ok)
- 保留存取設定(setting)的function，以及渲染(render)名稱、背景的function
- updateWindow()
- getSetting()
- renderName()
- renderBackground() -->
#### 設計理念
一般來說，若要製作設定可自訂化的設計，我們需要儲存使用者之前留下的設定，那便得用到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";

* 複習：[背景相關css設定](https://hackmd.io/K5SDDIabTtajE7nTi1Ep1A)
## getSetting()
:::info
這裡要取得我們目前所儲存的設定，設定可在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()
:::info
呼叫前面所寫的兩個畫面更新函式。
邁向自訂化設定的一步：透過getSetting函式讀取資料，並將資料傳入兩個畫面更新函式。
:::