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

萌娘百科:MoeSkin

萌娘百科,万物皆可萌的百科全书!转载请标注来源页面的网页链接,并声明引自萌娘百科。内容不可商用。
(重定向自萌娘百科: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