web開發中如何?皮膚的切換

在網站開發中，經常有皮膚或者主題切換的功能，比如discuz、wordpress等，只要選擇了哪個主題，然後就可以切換到對應的樣式中，請問背後的實現原理和邏輯是什麼，具體用代碼時怎麼實現的？（在google和百度上搜了一圈沒找打好的相關技術文章，來這裡找小夥伴們幫忙解答下疑惑。謝了）

回複內容：

在網站開發中，經常有皮膚或者主題切換的功能，比如discuz、wordpress等，只要選擇了哪個主題，然後就可以切換到對應的樣式中，請問背後的實現原理和邏輯是什麼，具體用代碼時怎麼實現的？（在google和百度上搜了一圈沒找打好的相關技術文章，來這裡找小夥伴們幫忙解答下疑惑。謝了）

有兩種

• 一種就是上邊說的，切換css，html結構不變。

• 第二種就是切換目錄，一般都是定義一個目錄為主題的根目錄，子目錄就是各種不同的主題，然後通過定義常量或者配置數組或者存到資料庫，然後切換不同的目錄名稱就可以達到切換主題的目的

具體實現代碼

換膚的實現一般是將顏色和背景相關的樣式抽取出來，放到單獨的樣式表。換膚的時候，轉場樣式表即可。樣式表的切換其實是非常簡單的，麻煩的是如何去規劃你的樣式表，當你把皮膚樣式抽取後，整個css樣式依然還非常清晰，邏輯合理，這就需要比較深厚的css重構功底。

最簡單的皮膚只要換個css就夠了，HTML頁面架構沒變，展現修改

複雜點的是對於HTML模板和CSS的共同替換

這兩個方式都很主流

實現都沒有什麼難度，無非就是你儲存一個系統對應的CSS或者HTML模板的路徑，請求時輸出出來即可

皮膚的切換，前提是你先有幾套可選擇的皮膚。

皮膚的話，一般指的都是同一個（或多個）HTML 頁面，只是 CSS 樣式不一樣。所以所謂多套皮膚，一般就是多套 CSS 樣式。比如：skin1.css/skin2.css/skin3.css 分別表示三套不一樣的皮膚。

當使用者進行切換時，因為要保持使用者此次所選擇的皮膚，那麼必須要有一個地方去記錄下所選擇的皮膚（因為下次訪問還要記得）。對於是使用 cookie 進行記錄，還是資料庫或者其他儲存介質，那自己選擇就可以了。

一般像這種使用者個人化定製類的資訊（當然，前提這種資訊是不重要的），如果你認為皮膚的選擇並不很重要，那麼可以選擇記錄到 cookie 中。就算使用者清理了 cookie，下次重新選擇就好了。當然如果你覺得要永久性記錄下本次的皮膚選擇，那選擇像資料庫這種存起來就可以了。

其實提前準備好幾套css檔案，用JavaScript切換link標籤的herf屬性，引入不同的css檔案就行，用cookie或者資料庫保持該使用者的皮膚所使用的css的ID

切換 css 肯定是必須的，這就是根本嘛。。但題主既然提瞭解決方案，我覺得還是有必要說細點

1.像 discuz、wordpress ，甚至更古老一點的 ecshop，皮膚就是很多個檔案夾，一個檔案夾一個皮膚，要加入新皮膚，直接在 themes（一般都叫這個名字） 這個檔案夾下面再加一個就是。到設定介面，配置皮膚的時候，就會載入一下 themes 下面的所有檔案夾，然後選一個，存入資料庫，非常傳統的搞法。

2.現在有些 webapp 的話，皮膚是 css 樣式的一種，選了後，把樣式資訊寫入 cookie 或者 localstorge，不過現在這麼乾的還是很少。。也不推薦。。

