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

王朝学院·作者佚名  2016-05-27
窄屏简体版  字體:   |    |    |  超大  

我的笔记文档版本控制系统-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.xmlPostgreSQL:导出为 pg_restore :pg_dump --create -Fc -i yourwiki > yourwiki.db.dump图片和其它文件 (在images目录内)配置文件LocalSettings.php和AdminSettings.phpMediaWiki 的程序文件,包括所有的皮肤和扩展,特别是你修改和定制过的文件。上面引用自:

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

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航