置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

萌娘百科:MoeSkin

贴贴♀百科,万娘皆可贴的百科全书!转载请标注来源页面的网页链接,并声明引自贴贴百科。内容不可商用。
(重定向自萌娘百科:Moeskin
跳到导航 跳到搜索

MoeSkin是由萌娘百科团队于2022年推出的全新wiki外观。

这次更新皮肤的计划旨在使页面布局陈旧的萌娘百科与时俱进,在保证美观的同时更替到最新的网页设计技术以及规范。

它将在之后作为萌娘百科主站的默认皮肤。不过旧版皮肤Vector不会被删除,它将被保留以供有需要的用户自行切换。

简介

由萌娘百科开发的猛男萌娘专属响应式MediaWiki皮肤☆

作者


兼容性

  • 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