更新了博客的主题

其实这份代码之前都写好了一部分,试运行在主站上,但是硬盘故障,这部分代码全部丢失了。无奈只有重新再写一遍了。

对样式的呈现做了些调整。

调整内容

页面局部刷新。

使用了pjax库,来实现局部刷新。

pjax is a jQuery plugin that uses ajax and pushState to deliver a fast browsing experience with real permalinks, page titles, and a working back button.

pjax works by grabbing html from your server via ajax and replacing the content of a container on your page with the ajax’d html. It then updates the browser’s current URL using pushState without reloading your page’s layout or any resources (JS, CSS), giving the appearance of a fast, full page load. But really it’s just ajax and pushState.

html部分
<!DOCTYPE html>
<html>
<head>
<!-- styles, scripts, etc -->
</head>
<body>
<h1>My Site</h1>
<div class="container" id="pjax-container">
Go to <a href="/page/2">next page</a>.
</div>
</body>
</html>
js部分
$(document).pjax('a', '#pjax-container')

添加顶部进度条

使用了Nprogress库。

>Slim progress bars for Ajax'y applications. Inspired by Google, YouTube, and Medium.
js部分
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end', function() { NProgress.done(); });

css使用了使用stylus重编译。

网站logo效果重绘

现在鼠标在上面滑动的时候,效果会重新绘制。 由于velocity库的缓存因素,导致实现此功能非常的麻烦。。。

配色的更改

这个看喜好慢慢改吧。

初衷

不是为了炫酷,只是为了提高相应速度,而不必要每次重新加载所有的资源来完成操作。pjax这个库和NProgress这两个库大概3年前的时候我用的比较多,在后台代码里判断是pjax请求则直接返还json,实现起来比这个完美的多。
但是没有办法,这个博客是个纯静态的,不可能实现后台代码那种判断复杂的处理,我也想过生成两份内容,一为html,一为json,当pajx访问则请求json,否则请求html。然后这样会导致一个bug就是前进后退的时候无法正确响应。
几番纠结之后才选择了这个折衷的方案,每次都只返回页面内容,然后从中提取出来有用的部分帖到框架内。

导致的问题

由于每次都不再加载js了,所有类似于

示例代码
$(document).ready(function() {
//xxx
}

以及其他需要异步执行的js,都无法正确执行了,修复这部分代码花费了比较多的时间。

版权说明

本页地址为 https://post.zz173.com/detail/TZGtzqR5FZ3T7jbWiFapUQ.html,本文作者为落月
本文采用 署名-相同方式共享 3.0 中国大陆许可协议 ,分享、演绎需署名且使用相同方式共享。转载请务必保留本页网址和作者信息,否则即为侵权。

– EOF –