如何在侧边栏中添加带链接的图像 - 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。

编辑：请注意，某些皮肤可能会忽略SkinBuildSidebar挂钩。只要您没有启用自定义皮肤，您应该没问题。

Answer 2

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

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

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

将您的功能挂钩到您的扩展程序文件中（＆＃34; my-extension.php＆＃34;）

$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;
}