BootstrapMediaWiki 项目教程

BootstrapMediaWiki 项目教程

BootstrapMediaWiki A MediaWiki skin using Bootstrap 4 & FontAwesome 4 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapMediaWiki

1. 项目介绍

BootstrapMediaWiki 是一个基于 Bootstrap 4 和 FontAwesome 4 的 MediaWiki 皮肤。它利用 Bootstrap 框架的强大功能，为 MediaWiki 提供了一个现代化的用户界面。该项目旨在简化 MediaWiki 的定制化过程，使其更易于与现代前端技术集成。

2. 项目快速启动

安装步骤

1. 克隆仓库： 首先，将项目克隆到 MediaWiki 的 skins/ 目录中：

   git clone https://github.com/borkweb/BootstrapMediaWiki.git
   

2. 配置 LocalSettings.php： 在 LocalSettings.php 文件中设置默认皮肤：

   $wgDefaultSkin = 'bootstrapmediawiki';
   

   然后在文件底部添加以下代码：

   require_once( "$IP/skins/bootstrap-mediawiki/bootstrap-mediawiki.php" );
   

3. 创建必要页面： 启用皮肤后，您可能需要创建一些自定义页面，例如 Bootstrap:Footer、Bootstrap:TitleBar 等，以进一步定制您的 MediaWiki 站点。

自定义配置

您可以通过在 LocalSettings.php 文件中添加以下变量来进一步自定义皮肤：

• 导航栏类：

  $wgNavBarClasses = 'navbar-inverse';
  

• 短站点名称：

  $wgSitenameShort = 'Short name';
  

• 目录位置：

  $wgTOCLocation = 'sidebar';
  

• 自定义 CSS 文件：

  $wgSiteCSS = 'custom.css';
  

• 自定义 JS 文件：

  $wgSiteJS = 'custom.js';
  

3. 应用案例和最佳实践

应用案例

• EotL Wiki：一个实际使用 BootstrapMediaWiki 皮肤的 MediaWiki 站点，展示了如何通过该皮肤实现现代化的用户界面。

最佳实践

• 自定义导航栏：通过设置 $wgNavBarClasses 变量，可以轻松更改导航栏的外观，例如将其设置为黑色背景。
• 动态菜单：使用 Bootstrap:TitleBar 和 Bootstrap:Subnav 页面创建动态菜单，结合第三方扩展（如 DynamicPageList）实现更复杂的菜单结构。
• 自定义样式：通过 $wgSiteCSS 和 $wgSiteJS 变量，可以轻松引入自定义的 CSS 和 JS 文件，以满足特定的设计需求。

4. 典型生态项目

• Bootstrap 4：BootstrapMediaWiki 基于 Bootstrap 4 框架，提供了丰富的 UI 组件和样式。
• FontAwesome 4：项目还集成了 FontAwesome 4，提供了大量的图标资源。
• MediaWiki：作为 MediaWiki 的皮肤，BootstrapMediaWiki 与 MediaWiki 的核心功能紧密集成，提供了无缝的用户体验。

通过以上步骤和最佳实践，您可以快速启动并定制您的 MediaWiki 站点，使其具备现代化的外观和功能。

BootstrapMediaWiki A MediaWiki skin using Bootstrap 4 & FontAwesome 4 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapMediaWiki