如何在侧边栏中添加带有链接的图像 - MediaWiki

Question

我可以通过这种方式将链接添加到 MediaWiki 侧边栏：

* some-url|url-text

但是如何在不修改核心或标准模板的情况下添加图像而不是文本？

我已阅读：http://www.mediawiki.org/wiki/Manual_talk:Interface/Sidebar#Images_in_the_navigation_bar

但这只是一个功能请求。

Answer 1

三种可能的方法：

1. 编写自定义皮肤，以任何您想要的方式处理侧边栏。
2. 使用钩子 SkinBuildSidebar 编写一个小扩展，以处理图像的一些自定义代码
3. 使用MediaWiki:Common.js 使用javascript修改侧边栏。

毫无疑问，我会选择 2。

edit：请注意，某些皮肤可能会忽略 SkinBuildSidebar 钩子。不过，只要您没有启用自定义皮肤，就应该没问题。

Answer 2

这是一个如何覆盖 SkinBuildSidebar 钩子的示例：

在 LocalSettings.php 文件中注册您的扩展

require_once( "$IP/extensions/my-extension.php" );

将你的函数挂在你的扩展文件（“my-extension.php”）中

$wgHooks['SkinBuildSidebar'][] = 'myExtension::mySidebar';

添加你的功能

class myExtension {
    static function mySidebar($skin, &$bar) {
// the index of the bar array are keywords that will appear as the heading of the submenu.
//the real value of these keywords are define at:Special:AllMessages
    $bar[ 'my-submenu-title-keyword' ] = '
    <ul style="text-align:center;">
        <li>
            <a href="myLink...">
                <img style="width:110px;" src="my-picture.jpg" />
            </a>
        </li>
    </ul>';
    return true;
    }
  }

在 $bar 数组中，将子菜单的标题作为字符串或消息的关键字（用于多种语言）作为索引，并在 Special:AllMessages 中定义与该关键字相关的消息

Answer 3

您可以使用 [[Mediawiki:Sidebar]] 和 [[Mediawiki:Vector.css]] 完全从 mediawiki 界面本身实现此目的

[[Mediawiki:Sidebar]]
* navigation
** mainpage|mainpage-description
** recentchanges-url|recentchanges
** randompage-url|randompage
** helppage|help
** https://www.google.co.in/|hi
** https://www.youtube.com/|hi1
* SEARCH
* TOOLBOX
* LANGUAGES

[[Mediawiki:Vector.css]]
/* CSS placed here will affect users of the Vector skin */
#p-navigation
{
border-image: url("http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg") 30 
round;
border-top: 25px solid black;   
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
#p-tb
{
border-image: url("http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg") 30 
round;
border-top: 25px solid black;   
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 2px solid black;
}
/* That will place a temporary campaign/launch/event/whatever image right down the 
main logo - pretty useful hun? nah  */

/* Make clickable text on links invisible. */
li#n-hi {
color:#f6f6f6;
visibility: visible;
font-size:0em;
}

#n-hi:hover ::after, #n-hi ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;

background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}

/* Every image need to have its own rule defined. */
#n-hi::after{
background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}

#n-hi:hover ::after {
background: url('http://farm3.static.flickr.com/2357/2230414856_45f9552c28.jpg');
}
#n-hi:hover ::after, #n-hi ::after{
background-repeat: no-repeat;
background-size: contain;
}

#mw-panel .portal .body li#n-hi {
font-size:0em;
padding:10px;
}

/* Make clickable text on links invisible. */
#n-hi1 {
color:#f6f6f6;
font-size:0em;
}

#n-hi1:hover ::after, #n-hi1 ::after {
content: '';
display:inline-block;
width: 48px;
height: 48px;

background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}

/* Every image need to have its own rule defined. */
#n-hi1::after{
background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}

#n-hi1:hover ::after {
background: url('https://www.gstatic.com/webp/gallery/1.jpg');
}
#n-hi1:hover ::after, #n-hi1 ::after{
background-repeat: no-repeat;
background-size: contain;
}

#mw-panel .portal .body li#n-hi1 {
font-size:0em;
padding:10px;
}