幻跡百科:技術/前端與介面
出自幻跡百科
更多操作
本頁整理幻跡百科的 CSS、JavaScript、Gadget 與 Skin integration。
前端分層
Application UI
↓
MediaWiki Interface
↓
ResourceLoader / Gadget
↓
Citizen compatibility
Common.css
MediaWiki:Common.css 負責全站共通 Application UI。
主要內容包括：
- layout
- spacing
- responsive behavior
- reusable components
Citizen.css
MediaWiki:Citizen.css 負責 Citizen Skin 專屬 integration。
這一層處理第三方元件與 Citizen 的視覺及版面相容性。
JavaScript 架構
整體說明：
Bootstrap：
Bootstrap 依頁面實際存在的 component 載入對應 Gadget。
主要 Gadget
目前包括：
- `benwiki-ui-image-library`
- `benwiki-ui-image-picker`
- `benwiki-ui-disclosure`
- `benwiki-ui-ordered-multiple`
- `benwiki-ui-infobox-collection`
ResourceLoader 定義集中於：
TemplateStyles
領域或元件專屬 CSS 優先放在對應的 TemplateStyles 頁面。
例如：
修改位置
需要調整介面時，先依責任定位：
| 修改內容 | 位置 |
|---|---|
| 全站 Application layout | MediaWiki:Common.css |
| Citizen 相容性 | MediaWiki:Citizen.css |
| 共通 JavaScript 元件 | Gadget |
| 模板專屬外觀 | TemplateStyles |
| JavaScript 架構 | 幻跡百科:UI/JavaScript |