站内的 Box.net 外链网盘

hack
移动设备上继续阅读
目录
  1. 第一步
  2. 第二步
  3. 第三步

MD，想这个标题想了我十几分钟，最后还是写了这傻不拉唧的标题，哎，谁让我没文学细胞呢。

Box.net 这个网盘大家应该不是很陌生，曾经风靡一时的网盘，它漂亮的 WEB2.0 界面非常吸引我，只可惜好景不常，就被伟大的“功夫王”给XXOO了。后来 Box 也重新注册了一个新的域名 boxcn.net ，专门给国人使用，但是用着boxcn心里总感觉和 box 原版的有点区别，于是很长一段时间都没有再去box。直到前段时间，在林木木的博客中看到了一篇文章，用jQuery读取 Box 文件的外链，于是我好奇的输入 box.net ，发现可以访问了，“功夫王”居然把 box 给释放了。

前话就这些了，下面进入主题，首先大家看看这个页面，这个就是读取 box 文件外链做的展示页面，其制作方法大家请看林木木写的《制作 Box.net 文件外链展示页面》，我这里要做的就是把这个页面嵌套到博客中来，效果大家点击导航栏中的“网盘”。是不是很炫啊？呵呵，下面开始教大家做这个效果。

第一步

添加Highslide JS如果你博客安装了Highslide4WP或Auto Highslide的话，那么就不需要再添加Highslide JS了，只需要修改一下这个插件的代码即可。

分别编辑插件下的highslide4wp.php或auto-highslide.php文件，找到：hs.outlineType = "rounded-white";在下面加入一行：hs.wrapperClassName = "draggable-header";再找到：highslide/highslide-with-html.packed.js修改成：highslide/highslide-full.packed.js再把highslide-full.packed.js上传至插件中的highslide目录下，highslide-with-html.packed.js文件可以删除了。

以上是安装了Highslide4WP或Auto Highslide的修改方法，没有安装这两个插件的朋友可以按照如下方法进行。

首先下载Highslide JS，把highslide文件夹中除了highslide.css、graphics文件夹、highslide-full.packed.js三个，其他的都删除，然后把highslide上传至某处地方，一般是wp-content/plugins下。

再打开主题中的头部文件header.php，插入如下代码：<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />其中那三个路径的地方，一定要写正确。

还是建议使用上面两个插件，推荐Auto Highslide。

第二步

导航栏中添加网盘的超链接 不同主题的添加方法不同，下面以我的主题iNove为例，打开主题下templates/header.php文件，找到： <ul id="menus"></ul>在这个id为menus的无序列表中，插入一个 li ：`

  • <php _e(‘网盘’, ‘inove’); ?>
    • ``这样，你的导航栏中就多了一个“网盘”的选项。

    第三步

    添加iframe效果,在你的Query应用js文件中，添加如下代码： 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $("#navigation .mybox").click(function() {
        return hs.htmlExpand(this, {
            objectType: 'iframe',//打开类型，这个不管
            align: 'center',//打开位置，默认居中就可以了
            headingText: '网盘',//窗口标题
            width: 670,//打开时的宽度
            height: 460,//打开时的高度
            minWidth: 680//最小宽度
        })
    });

    PS：其他的参数大家可以参考Highslide JS API Reference，比如最小高度等等。怎么应用jQuery就不说了，已经讲过很多次，实在不会的可以去问Google老师。

    到这里这个效果就做完了，有什么不懂的大家回复交流。