为了练习自己的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..tar.gz -C /var/www/mediawiki/ --strip-components=

加上了--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

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

  1. 我的笔记文档版本控制系统-MediaWiki-安装/基本设置

    如果你一直想要一个可以进行版本控制的文档存储工具,那MediaWiki是一个不错的选择.也许,用版本控制来描述MediaWiki有点不妥,但它对于我来说就是如此了.我会将学习笔记都记录在MediaWi ...

  2. 我的笔记文档版本控制系统-MediaWiki-目录悬浮+隐藏

    13年11份把北京的工作辞了,出去从北到南找同学玩了二十多天,因为各种原因,回家(宁夏)找工作,想找一个Linux相关的工作,但涉及Linux的都是运维.支持一类,最后因为各种原因找了个做java的本 ...

  3. 获取文档版本版本值 滚动标识符 游标 控制查询如何执行 控制查询在哪些分片执行 boost加权

    映射mapping.json{ "book": { "_index": { "enabled": true }, "_id&quo ...

  4. word文档标题级别批量更改——批量降级与升级实例

    word文档标题级别批量更改——批量降级与升级实例   word文档标题级别批量更改——批量降级实例 2012年12月21日16:30:44 现有一个3级文档结构的word文档,如下图所示 先需要将上 ...

  5. MongoDB学习笔记——文档操作之查询

    查询文档 使用db.COLLECTION_NAME.findOne()可以查询所有满足条件的第一条数据 预发格式如下: db.COLLECTION_NAME.findOne(<query> ...

  6. MongoDB学习笔记——文档操作之增删改

    插入文档 使用db.COLLECTION_NAME.insert() 或 db.COLLECTION_NAME.save() 方法向集合中插入文档 db.users.insert( { user_id ...

  7. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  8. StyleCop学习笔记-文档规则

    文档规则: .SA1600:ElementsMustBeDocumented元素必须添加注释 .SA1601: PartialElementsMustBeDocumented Partial修饰的成员 ...

  9. 【swupdate文档 三】SWUpdate: 嵌入式系统的软件升级

    SWUpdate: 嵌入式系统的软件升级 概述 本项目被认为有助于从存储媒体或网络更新嵌入式系统.但是,它应该主要作为一个框架来考虑,在这个框架中可以方便地向应用程序添加更多的协议或安装程序(在SWU ...

随机推荐

  1. 321list,元组,range**数字是不可迭代的!

    一.list(列表) 列表是python中的基础数据类型之一,他是以[]括起来,每个元素以逗号隔开,而且他里面可以存放各种数据类型.列表相比于字符串,不仅可以储存不同的数据类型,而且可以储存大量数据, ...

  2. vmstat测试

    vmstat测试:场景:tar -zvcf 2_104.tar.gz ./* 打包压缩3GB+文件 [root@localhost opt]# vmstat 1 1000procs --------- ...

  3. codevs1217 借教室

    借教室(classroom.cpp/c/pas)[问题描述]在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室 ...

  4. sqlserver 函数里并返回一个表格数据拼接的字符串

    Create function [dbo].[GetChildWorkerExtension](     @ChildId int)returns nvarchar(100)asbegin       ...

  5. hdu 2018 母牛的故事(简单dp)

    母牛的故事 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  6. MYSQL中获取得最后一条记录的语句

    方法1:select max(id) from tablename 方法2:select last_insert_id(); 在MySQL中,使用auto_increment类型的id字段作为表的主键 ...

  7. 2018.5.28 PSOC第一枪:基于cypress的蓝牙开发

    Cypress-BLE 开发套件可以快速开发 物联网电子产品. PSOC编程特点: A 拖放各PSoC 组件到工作区中,以设计原理图B 完成各组件之间的布线,并配置GPIOC 使用所包含的组件API ...

  8. codeforces 627B B. Factory Repairs(线段树)

    B. Factory Repairs time limit per test 4 seconds memory limit per test 256 megabytes input standard ...

  9. 幻想乡三连A:五颜六色的幻想乡

    非常直接地构造 由于答案与生成树计数有关,所以一定要使用矩阵树定理,但这样就不能限制每种颜色的便使用的数量 我们构造$N^2$个关于$Ans_{x,y}$的方程,枚举将红色的边拆成$x$条,将蓝色的边 ...

  10. bzoj 2342: 双倍回文 回文自动机

    题目大意: 定义双倍回文串的左一半和右一半均是回文串的长度为4的倍数的回文串 求一个给定字符串中最长的双倍回文串的长度 题解: 我们知道可以简单地判定以某一点结尾的最长回文串 我们知道可以简单地判定以 ...