前言
現在不論是手機應用程式、網頁幾乎都有所謂深淺模式,先不論省不省電或是好不好看,有了切換的功能就是很酷,使用者可以依自己喜好挑選自己習慣的模式,這篇內容因為有點太簡單,所以我就只有一個章節了~
教學開始~
這次用的套件是這個,安裝的方式非常簡單,輸入下列指令就完成了
1
| npm install hexo-next-darkmode
|
設置的方式則是到 theme 內的_config.yml
,貼上以下指令就完成了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
darkmode_js: enable: true bottom: '64px' right: 'unset' left: '32px' time: '0.5s' mixColor: 'transparent' backgroundColor: 'transparent' buttonColorDark: '#100f2c' buttonColorLight: '#fff' isActivated: false saveInCookies: true label: '🌓' autoMatchOsTheme: true libUrl:
|
如果想要設定固定的背景或按鈕顏色的話可以修改 backgroundColor、buttonColorDark、buttonColorLight 後的色碼,例如說 backgroundColor: "#FFD9E6"
,推薦給有少女心的各位
猛男粉紅💪
結語
完成啦!深淺切換的功能很簡單吧~如果有問題或者發現我有哪裡講錯,歡迎大家到底下留言區跟我討論喔~
其他功能
側邊欄
- 基礎配置 (關於、標籤、分類、歸檔、搜尋、頭像、個人相關連結)
- 切換語言
頁底
utterances 留言板
Google
Analytics 統計網站資訊
日 / 夜模式 ✅
live2d 角色(就是網頁右下角那隻可愛的狗狗)
SEO:搜尋引擎最佳化 (Search Engine
Optimization)
剩下的一些小工具
自訂網域