文章目录
静态页面动态效果实现
发表日期:2014年09月05日  分类:网站搭建  标签:HtmlBuildWebsite

本文描述如何在Github pages静态页面环境下实现动态的效果。

首先说明使用URL访问一个页面的三种方式:

http://thebestofyouth.com/category.html
http://thebestofyouth.com/category.html?param=测试
http://thebestofyouth.com/category.html#param=测试

第二种是问号URL,表示给页面传递一个参数,参数名:param,参数值:测试
第三种是锚点URL,表示定位到页面的锚点位置,关于锚点:创建HTML锚点W3Cschool:HTML链接

,需要说明的是页面中如果不存在此锚点并不会发生异常或错误。

动态页面一般是与后台进行交互的页面,比如jsp、asp、php,即想要实现动态效果,需要后台的支持。
而对于Github pages页面,其是静态页面,如果想要实现动态效果这怎么办呢?

###1,使用问号URL访问方式:?param=测试### 使用JS解析参数的办法如下:

var pageHref = window.location.href;
var pIndex = pageHref.indexOf('?param=');
var param = pageHref.substring(pIndex + 7);

刷新当前页面的代码:

location.href = window.location.href;

需要修改参数或值,则修改问号后面的参数及值即可。

经实践测试,这种方式在Chrome、FireFox下使用正常。
但是在IE下实现不了预期的动态效果,提示:We didn’t receive a proper request from your browser.

###2,使用锚点URL访问方式:#param=测试### 这种是锚点方式,如何解析参数呢,依然是使用JS解析参数:

var pageHref = window.location.href;
var pIndex = pageHref.indexOf('#param=');
var param = pageHref.substring(pIndex + 7);

那刷新当前页面是是不是如上面的方式一样呢:

location.href = window.location.href;

答案是否,带锚点的URL使用如上方式刷新不了页面,且会出现异常效果,可参考:location.href跳转当前页面锚点的问题。出现了这样的问题如何解决呢,答案很简单,即在当前页面不使用刷新本页面的方式,而是采用主动方法调用实现动态效果,如下:

parseParse('http://thebestofyouth.com/category.html?param=项目');

function parseParse(lHref) {
  var pIndex = lHref.indexOf('#param=');
  var param = lHref.substring(pIndex + 7);
}

本博客使用此种方式实现文章分类、文章标签下文章列表的动态加载,代码文件:param.js,效果可点击本博客右侧文章分类或文章标签进行查看。

特别提示:
   Github pages环境下不可以使用jQuery的ajax函数,但可以使用getJSON函数,使用上面的方式并结合getJSON函数可以实现丰富的动态效果。

Github pages资源索引贴
发表日期:2014年08月26日  分类:网站搭建  标签:Github pagesBuildWebsite

收集搭建此博客过程中学习与参考的一些资源。

####说明####

1,因可知的原因,部分资源的访问网络不通,如需访问,请使用相应的解决方案,这里不做介绍;
2,一个Github账号只可以有一个用于对这个账号的pages展示master分支,而对于账号下的其他项目需要pages展示,则是gh-pages分支;

####目录####

Github pages官方资料
Github pages其他资料
Github pages中文化相关资源

阅读全文
Github pages网站索引贴
发表日期:2014年08月25日  分类:网站搭建  标签:Github pagesBuildWebsite

收集搭建此博客过程中学习与参考的一些资源。

####说明####

1,因可知的原因,部分资源的访问网络不通,如需访问,请使用相应的解决方案,这里不做介绍;

####目录####

Github pages优秀站点

阅读全文
Jekyll资源索引贴
发表日期:2014年08月24日  分类:网站搭建  标签:JekyllBuildWebsite

收集搭建此博客过程中学习与参考的一些资源。

####说明####

1,因可知的原因,部分资源的访问网络不通,如需访问,请使用相应的解决方案,这里不做介绍;
2,Github pages并非必须使用Jekyll用来搭建,而是使用Jekyll更便捷,当然直接使用Html可以达到同样的效果;
3,PortableJekyll,即Portable Jekyll for Windows,是一个在Windows环境下配置环境变量后开箱即用的绿色版Jekyll环境,Windows环境下极力推荐使用(省去手工下载配置以及各种环境不兼容、网络通的繁琐),包括Git、Ruby、Python、Jekyll依赖、CURL,其中Git及CURL非必须;

####目录####

Jekyll官方资料
Jekyll其他资料
PortableJekyll官方资料
PortableJekyll其他资料

阅读全文
Mardown资源索引贴
发表日期:2014年08月23日  分类:网站搭建  标签:MardownBuildWebsite

收集搭建此博客过程中学习与参考的一些资源。

####说明####

1,因可知的原因,部分资源的访问网络不通,如需访问,请使用相应的解决方案,这里不做介绍;

####目录####

Markdown官方资料
Markdown其他资料

阅读全文
友情链接
文章分类
文章标签