2023年政策修订增补工作正在进行中,欢迎参与!
  • Moegirl.ICU:萌娘百科流亡社群 581077156(QQ),欢迎对萌娘百科运营感到失望的编辑者加入
  • Moegirl.ICU:账号认领正在试运行,有意者请参照账号认领流程

萌娘百科:MoeSkin

萌娘百科,萬物皆可萌的百科全書!轉載請標註來源頁面的網頁連結,並聲明引自萌娘百科。內容不可商用。
跳至導覽 跳至搜尋

MoeSkin是由萌娘百科團隊於2022年推出的全新wiki外觀。

這次更新皮膚的計劃旨在使頁面佈局陳舊的萌娘百科與時俱進,在保證美觀的同時更替到最新的網頁設計技術以及規範。

它將在之後作為萌娘百科主站的默認皮膚。不過舊版皮膚Vector不會被刪除,它將被保留以供有需要的用戶自行切換。

簡介

⧼moeskin-desc⧽

作者


兼容性

  • Firefox, Chrome, Safari, Opera, Microsoft Edge 以及其他主流瀏覽器的最新5個版本
  • 您需要允許瀏覽器運行 JavaScript 以使用 MoeSkin
  • IE 瀏覽器不受到萌娘百科官方支持

系統訊息

由 MoeSkin 定義的會對用戶界面造成影響的系統訊息。

MediaWiki:Moeskin-topbar

全局頂部導航欄,導航連結

MediaWiki:Moeskin-topbar

語法示例
* 頁面名稱
* 頁面名稱|顯示名稱
* |無連結的按鈕
* 這樣做連結依舊會顯示內容|
* 一級菜單
** 這是二級菜單
** 將作為一級菜單
** 的下拉菜單
*** 從2.2.0開始,子節點可以無限套娃
**** 但是建議保持在三級以內
* |以下是特殊用法,僅在children內有意義
** <li class="my-class-name" title="Hello, world" data-accesskey="x">將以上DOM屬性傳遞到連結上(注意:只有部分屬性會被傳遞)</li>
** <li data-raw>該LI元素所有內容被解析為HTML後,直接嵌入下拉菜單</li>
  • 這個系統訊息不支持語言對應的子頁面,請直接建立為根頁面
  • 您可以在顯示名稱處使用{{int:}}魔術字

MediaWiki:Moeskin-topbanner

頁頂橫幅

MediaWiki:Moeskin-topbanner

用於置頂公告和運營活動

MediaWiki:Moeskin-sitenotice

側邊欄公告欄

MediaWiki:Moeskin-sitenotice / MediaWiki:Moeskin-anonnotice

MediaWiki:Moeskin-footer-top

全局底部導航欄,上半部分

MediaWiki:Moeskin-footer-top

MediaWiki:Moeskin-footer-copyright

全局底部導航欄,下半部分

MediaWiki:Moeskin-footer-copyright

皮膚樣式表

僅對MoeSkin生效的全站CSS

MediaWiki:Gadget-moeskin-styles.css MediaWiki:Moeskin.css(不推薦使用)

皮膚腳本

僅對MoeSkin生效的全站JS

MediaWiki:Moeskin.js

自定義

自定義主題

MoeSkin 採用 CSS3 原生的 CSS變量 在全局根元素(:root)上定義了皮膚所使用了調色板,您可以通過修改全局CSS變量輕鬆定義主題配色。

預設調色板
:root {
    --theme-accent-color: rgb(37, 180, 73);
    --theme-accent-color--rgb: 37, 180, 73;
    --theme-secondary-color: rgb(24, 127, 245);
    --theme-secondary-color--rgb: 24, 127, 245;
    --theme-text-color: rgb(44, 62, 80);
    --theme-text-color--rgb: 44, 62, 80;
    --theme-success-color: rgb(35, 165, 94);
    --theme-info-color: rgb(122, 157, 255);
    --theme-warn-color: rgb(255, 180, 4);
    --theme-danger-color: rgb(255, 114, 114);
    --theme-empty-color: rgb(185, 185, 185);
    --theme-link-color: rgb(63, 81, 181);
    --theme-accent-link-color: rgb(255, 255, 255);
    --theme-background-color: rgb(248, 248, 248);
    --theme-border-color: rgb(220, 220, 231);
    --theme-button-color: rgb(37, 180, 73);
    --theme-button-color--hover: #2bd155;
    --theme-button-color--active: #219e40;
    --theme-card-border-radius: 0.5rem;
    --theme-card-background-color: rgba(255, 255, 255);
    --theme-card-background-color--rgb: 255, 255, 255;
    --theme-card-box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
    --theme-card-box-shadow--hover: 0 0 0.85rem rgba(0, 0, 0, 0.2);
    --theme-card-border-color: rgb(220, 220, 231);
    --theme-header-background-color: rgb(255, 255, 255);
    --theme-header-box-shadow-color: rgb(220, 220, 231);
    --theme-footer-top-color: rgb(251, 251, 252);
    --theme-footer-bottom-color: #e7e7ed;
    --theme-toolbar-background-color: rgb(225, 240, 230);
    --theme-input-background-color: rgb(245, 245, 245);
    --theme-input-border-color: rgb(222, 222, 222);
    --theme-input-border-color--hover: #e1e1e1;
    --theme-list-item-background-color: rgb(255, 255, 255);
    --theme-list-item-background-color--hover: rgba(24, 160, 88, 0.16);
}

Breakpoints

預設調色板
/** Breakpoints */
// Minimum body width
$breakpoint-screen-minimum: 370px
// General smartphones
$breakpoint-screen-small: 576px
// General tablets
$breakpoint-screen-middle: 768px
// Laptops and small desktops
$breakpoint-screen-large: 992px
// Large desktops
$breakpoint-screen-exlarge: 1200px

相關專題及文檔

技術使用

  • Backend: PHP + MediaWiki
  • JavaScript Framework: Vue3 + TypeScript + Vite
  • CSS Precompiler: Sass
  • Template Engine: Pug.js
  • Package Manager: pnpm + composer
  • Icon Set: FontAwesome v5 Free
  • UI Library: Naive UI