Focus Matters 是志在改善 Matters 使用體驗的使用者樣式。
- 擴大頁面內容大小
- 隱藏內容頁的導航欄與側邊欄
- 優化頁面元素視覺平衡與統一
- 加入暗色模式 (Dark Mode)
Focus Matters 可於桌面端與移動端設備，以 User Style (推薦)、User Script 或 User CSS 的方式使用。
- 於瀏覽器中安裝支持 User Stylus / User CSS 的插件或擴展程序，如:
- 按此安裝使用者樣式。
請注意在移動端上，所有平臺的 Chrome 和 iOS 上的 Firefox 都無法使用 Focus Matters。
- 使用可以安裝插件或擴展程序的瀏覽器，如：
- 於瀏覽器中安裝支持 User Stylus / User CSS 的插件或擴展程序，如:
- 按此安裝使用者樣式。
注意：
- Firefox Preview 尚未支持 User Style 或 User Script。
- Firefox Android 亦尚未支持暗色模式 (Dark Mode) 跟隨系統改變的功能。
iOS 安裝可能會過於複雜，使用者亦可在 Matters 的文章內找到圖文教程。
- 使用 iOS 內建的「捷徑」應用程式製作捷徑。
- 從左邊的「App > Safari」加入動作「在網頁上執行 JavaScript」
- 複製 User Script 的內容取代原本的預設程式碼
- 根據喜好調整「options」變數中的設定，詳細見代碼中的註釋，或 iOS 使用
- 點擊上方的「新捷徑」(或捷徑名稱) 旁的按鈕
- 為捷徑命名並開啟「在共享工作表中顯示」，再將分享表單類型設為只有「Safari 網頁」
- 建立完成，使用 Safari 瀏覽 Matters 時可以在共享工作表中開啟捷徑，詳細見下方 iOS 使用
- 安裝支持 User Script 或 User CSS 的插件或擴展程序，如：
- User Script:
- User CSS:
- 安裝相應 User Script 或 User CSS
- User Script
- 安裝後根據喜好調整「options」變數中的設定，詳細見代碼中的註釋，或 iOS 使用
- User CSS:
- User Script
安裝後，如下圖所示點開 Stylus 的圖示，點擊 Focus Matters 的齒輪按鈕進入選項，
並按需開關或選擇：
- 擴大內容：
- 專注內容
- 仿製原本
- 關閉
- 暗色模式
- 視覺優化
在專注內容模式下的內容頁，把滑鼠置於左側空白位置喚出導航欄； 而置於右側喚出側邊欄。
如下圖所示：
注意：
- 擴大內容區域的功能目前只在桌面端生效，平板端和手機端均尚未可用。
與桌面端使用的方法相同，而圖示會藏在角落的選單裡面。
建立捷徑後，使用 Safari 瀏覽 Matters 時可以在共享工作表中開啟捷徑，Focus Matters 隨即生效。
這個捷徑會下載 Focus Matters 的 4 個 User CSS 檔案，並隨後根據使用者的選項和當前網址自動開關樣式。推薦使用者在同一標籤頁裡面瀏覽 Matters，不要刷新或關閉這個標籤頁。因為開啟新的標籤頁需要再次開啟捷徑，而刷新會使樣式失效，兩者都需要再次下載檔案，會比較耗費數據流量。
使用者如需更改選項，請回到「捷徑」應用程式中更改「options」變數，再次開啟捷徑。在 Focus Matters 已生效的頁面中再次開啟捷徑，腳本會自動避免再次下載檔案，只會更改選項，因此請放心使用。
var options = {
/* 擴大內容
選項: "focusMatters": 專注內容, "mockOriginal": 仿製原版, "off": 關閉 */
"layout": "off",
/* 暗色模式
選項: "on": 開啓, "auto": 跟隨系統, "off": 關閉 */
"darkMode": "on",
/* 視覺優化
選項: "on": 開啓, "off": 關閉 */
"optimize": "on"
};
如註釋所示，目前「options」變數中包含三個選項，各自有不同可用的值，包括：
- "layout"，設定是否擴大內容區域及其模式，其可用值為：
- "focusMatters": 專注內容模式, "mockOriginal": 仿製原版模式, "off": 關閉
- "darkMode"，設定是否開啟暗色模式，其可用值為：
- "on": 開啓, "auto": 跟隨系統, "off": 關閉
- "optimize"，設定是否開啟視覺優化，其可用值為：
- "on": 開啓, "off": 關閉
- 在平板下擴大內容
- 嘗試在手機下擴大內容
歡迎在 Issues 提出問題和建議， 也歡迎提出 Pull Requests。
本項目使用語義化版本。