我的笔记文档版本控制系统-MediaWiki-回到顶部/链接放大/升级

为了练习自己的JS、CSS基本功，这些天和MediaWiki干上了！^_^

下面是我的MediaWiki新添加的功能：

• 回到顶部
• 链接放大
• MediaWiki升级

回到顶部

回到顶部是很多网站的基本功能，只要网页向下滚动一定位移，回到顶部按钮就会出现在相对浏览器的固定位置。下面是我在MediaWiki中添加的回到顶部功能。

PS：在博客园中，也有回到顶部功能，但是它是固定死的，操作并不方便，您可以添加自己的回到顶部按钮，方法与下面类似，只是在JS代码中需要引入jquery，其代码如下：

<script id="jquery_182" type="text/javascript" class="library" src="http://files.cnblogs.com/snowsolf/jquery.js"></script>
<script type="text/javascript">
var snowId = document.getElementById("footer");
var solfId = document.createElement("a");
solfId.setAttribute("id","gotop");
snowId.appendChild(solfId);

function goTop()
{
$(window).scroll(function(e) {
if($(window).scrollTop()>200)
$("#gotop").fadeIn(100);
else
$("#gotop").fadeOut(100);
});
};
$(function(){
$("#gotop").click(function(e) {
$('body,html').animate({scrollTop:0},100);
});
$("#gotop").mouseover(function(e) {$(this).css("background","url(http://images.cnblogs.com/cnblogs_com/snowsolf/497956/o_backtop.gif) no-repeat 0px -100px");
});
$("#gotop").mouseout(function(e) {$(this).css("background","url(http://images.cnblogs.com/cnblogs_com/snowsolf/497956/o_backtop.gif) no-repeat 0px 0px");
});
goTop();
});
</script>

原理就是在页面中找一个元素，然后在这个元素的父元素中插入“回到顶部”元素。CSS代码同下，如果你想将原页面中的固定回到页面按钮隐藏，则CSS代码如下：

a[href="#top"]{
    display:none;
}

一般网站中都会有footer元素，你在footer元素中插入你想要的元素（回到顶部），然后对这个元素进行操作。

JS代码

在ID为footer的元素中插入a：

var snowId = document.getElementById("footer");
var solfId = document.createElement("a");
solfId.setAttribute("id","gotop");
solfId.setAttribute("title","回到顶部");
snowId.appendChild(solfId);
 
function goTop(){
    $(window).scroll(function(e) {
//若滚动条离顶部大于200元素
    if($(window).scrollTop()>200)
    $("#gotop").fadeIn(100);//以1秒的间隔渐显id=gotop的元素
    else
    $("#gotop").fadeOut(100);//以1秒的间隔渐隐id=gotop的元素
    });
};
$(function(){
    //点击回到顶部的元素
    $("#gotop").click(function(e) {
        //以1秒的间隔返回顶部
        $('body,html').animate({scrollTop:0},100);
    });
    $("#gotop").mouseover(function(e) {
        $(this).css("background","url(/images/backtop.gif) no-repeat 0px -100px");
    });
    $("#gotop").mouseout(function(e) {
        $(this).css("background","url(/images/backtop.gif) no-repeat 0px 0px");
    });
    goTop();//实现回到顶部元素的渐显与渐隐
});

CSS代码

#gotop{
    display:none;
    width:55px;
    height:55px;
    position:fixed;
    right:20px;
    bottom:20px;
    background:url(/images/backtop.gif) no-repeat 0px 0px;
}

 您也可以更换自己喜欢的回到顶部图片。

链接放大

链接放大就是将页面中的所有链接在鼠标移动到其上时字体变大。

CSS代码

[href]:hover{
    font-size: 125%;
}

 代码很简单，但是也有问题，如logo图片也变动了，看着不好看。

解决logo移动问题：

#p-logo{
    width:135px; height:135px;
}
#p-logo a:link,a:visited{
    background:url(/mediawiki/skins/common/images/mediawiki_v.png) no-repeat;
}

MediaWiki升级

MediaWiki升级可以分两中方法进行升级，一种是在原有的MediaWiki上进行升级，另一种是搬迁升级。

备份

首先，在升级您的MediaWiki之前先备份好现有的MediaWiki。

虽然升级程序经过良好的测试，也比较可靠，但是仍然是有可能出问题的。所以在运行升级程序之前，请务必做一次完整的备份。其中得包括相关数据库和相关文件：

• 数据库里面和 wiki 相关的内容。建议在导出SQL的同时也导出为XML，以策万全。
  • MySQL:
    • 导出为SQL： mysqldump --all-databases > file.txt
    • 导出为XML： mysqldump --all-databases --xml > file.xml
  • PostgreSQL:
    • 导出为 pg_restore ： pg_dump --create -Fc -i yourwiki > yourwiki.db.dump
• 图片和其它文件 (在 images 目录内)
• 配置文件 LocalSettings.php 和 AdminSettings.php
• MediaWiki 的程序文件，包括所有的皮肤和扩展，特别是你修改和定制过的文件。

上面引用自：

http://www.mediawiki.org/wiki/Manual:Upgrading/zh-hans

想获取更多关于升级信息，可以点击上面链接地址。

备份数据库

mysqldump -u root -p my_wiki >my_wiki_201403250842.sql

导入数据库

mysql -u root -p my_wiki < my_wiki_201403250842.sql

备份MediaWiki程序

我的是直接将mediawiki目录打包，先进入/var/www/目录，打包mediawiki目录：

tar zvcf mediawiki.tar.gz mediawiki/

源码升级

解压

我的MediaWiki原版本是1.20.2，升级到1.22.4，MediaWiki原目录在/var/www/mediawiki下，直接将新版本的MediaWiki解压到/var/www/mediawiki/目录：

sudo tar xvfz mediawiki-1.22.4.tar.gz -C /var/www/mediawiki/ --strip-components=1

加上了--strip-components=1会直接解压在/var/www/mediawiki/目录下，如果不加--strip-components=1，会在/var/www/mediawiki/下自动创建一个mediawiki-1.22.4的目录并解压在该目录下。

升级

进入MediaWiki主目录中的maintenance目录，运行如下文件：

php update.php

升级后有些插件未必可用，如果您某些插件是您的必须，最好做好调查在升级。

搬迁升级

搬迁升级时MediaWiki的版本未必会升级，只是将甲处的MediaWiki搬迁到乙处。

 数据迁移

您可能需要对以下目录或文件进行迁移：

• images目录搬迁
• skin目录搬迁
• extensions目录搬迁（未必可用）
• LocalSettings.php文件搬迁
• 将老MediaWiki的数据库导入

升级

进入MediaWiki主目录中的maintenance目录，运行如下文件：

php update.php

如源码升级一样，升级后有些插件未必可用，如果您某些插件是您的必须，最好做好调查在升级。

更多设置

更多关于我的MediaWiki安装、设置可以参考下面两篇博文：

安装、基本设置：

http://www.cnblogs.com/snowsolf/p/MediaWiki.html

 悬浮目录+隐藏：

http://www.cnblogs.com/snowsolf/p/MediaWiki-catalogue.html