Speed Up Octopress with InstantClick

原创于 2014-12-15 19:22:02 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Octopress 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何通过InstantClick库为Octopress博客系统实现页面间的即时加载效果，提升用户体验。具体步骤包括下载InstantClick.js文件、将其部署到Octopress的指定目录，并在_after_footer.html模板中加入必要的初始化脚本。

Step1: Download the .js package from : http://instantclick.io

Step2: Add the .js package to octopress/source/javascripts/instantclick.min.js

Step3: Add these two line of code in octopress/source/_includes/custom/after_footer.html

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

HAN-Kai

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

InstantClick – 快速响应！让你的网站与众不同

weixin_34233856的博客

02-13

273

　　尽管网络带宽不断增加，但网站并没有更快很多。这是因为最大的瓶颈在于页面加载的延迟。InstantClick 是一个很小的 JavaScript 库，大大加速你的网站响应速度。　　在访问者点击一个链接之前，鼠标会悬停在链接上面，这两个事件之间通常有200ms~300ms的间隔，InstantClick 利用这个时间间隔预加载页面。这样当你点击页面的时候，其实页面已经加载到本地了，呈现当然也就会很...

instantclick

易天海

12-17

459

http://instantclick.io/ https://github.com/dieulot/instantclick

参与评论您还未登录，请先登录后发表或查看评论

Octopress在页面和内容中加入代码、图片、带标题图片方法

HAN Kai

10-17

4408

1.在.markdown中插入代码 ``` [language] 目标代码 ``` 2.在.markdown中插入图片前提是已经创建了D:\octopress\source\images里面有对应的图像。在文章中用 {% img /images/pic_name.png %} 来引用即可。 3.在.markdown中插入带标题的图片前提是已经进行了带

Octopress重装或者多台电脑上并行写作同步

HAN Kai

10-16

2703

基本概念 Octopress的git仓库(repository)有两个分支，分别是master和source。 master存储的是博客网站本身，而source存储的是生成博客的源文件。 master的内容放在根目录的_deploy文件夹内，当你push源文件时会忽略，它使用的是rake deploy命令来更新的。重装如果本地已经配置过octopress，只是把octopre

Github Pages域名绑定

HAN Kai

10-17

2485

1. 首先在octopress/source目录下创建一个CNAME(官方手册上说要在master下创建，在source里创建后，deploy的时候会拷贝到_deploy(即master)目录下)，然后通过git bash用rake deploy发布到github，后面的操作，就与github pages无关了。CNAME文件没有格式后缀，里面的内容是自己的域名，如hk.com。 2. 然后

Octopress写blog时中文乱码问题

HAN Kai

10-16

2246

如果markdown文件有中文，是ANSI编码，那么在generate后，页面显示的就是乱码。解决方法很简单，只需要将markdown文件保存为：UTF-8无BOM格式编码格式就OK了。以Notepad++为例，如下图所示。其他可能的方法(在本机XP系统下测试都没有效果。。。) 1. 在环境变量中设置下面的键值对； LANG=zh_CN.UTF-8 LC

在Octopress上使用Disqus时，“We were unable to load Disqus..”

HAN Kai

10-16

2120

注册了Disqus，配置了自己的域名地址，short name也写了。到octopress里面: rake generate 之后，再 rake preview 一直是发布后，在网页上也是显示一样的结果。后来在这个blog上受到了启发:http://www.ducea.com/2012/11/12/disqus-comments-not-visibl

在Octopress中加入Latex支持

HAN Kai

01-09

2023

主要的方法是采用MathJax 1.在source/_includes/custom/footer.html的第一行加入如下代码： MathJax.Hub.Config({ tex2jax: { inlineMath: [ ['$','$'], ["\$","\$"] ],

Octopress文章摘要显示和主页显示文章数量设定

HAN Kai

10-18

1670

文章摘要显示在md文件中的摘要部分加上。如下 --- layout: post title: "third test" date: 2013-10-17 21:12 comments: true categories: --- ##Test Context 前些日子，写作的时候总会因为排版而耽误时间，甚至因为排版而把写作的专注力转移到了貌似相关的排版上。诚然，一个好的排版，会让读者有良

利用SeeTheStats显示Google Analytics结果

HAN Kai

10-21

1367

目前Google Analytics本身是不支持直接把统计数据公开到别的网页上的。利用Octopress和Github Pages时，想要将GA的结果显示在页面上，就可以利用SeeTheStats。 SeeTheStats 是一个使用 Google Analytics API 开发的第三方服务，它能让 Google Analytics 用户可以公开自己网站或者博客的 Google Anal

github添加SSH keys

HAN Kai

10-17

1297

使用gitclone命令从github上同步github上的代码库时，如果使用SSH链接（如我自己的esesgrid项目：git@github.com:hmilycc/esesgrid.git），而你的SSH key没有添加到github帐号设置中，系统会报下面的错误： Permission denied (publickey). fatal: Could not read from remo

Octopress添加Flickr侧边栏、在文章中引用Flickr照片

HAN Kai

10-20

1186

1.注册Flickr帐户，并在帐户里设置自己的Flickr网址。(这个网址与octopress的网址无关) 2. 新建 source/_includes/custom/asides/flickr.html，代码： {% if site.flickr_user %} My Flickr /* Images are wrapped in divs classed "flickr_ba

解决windows下，rake preview后出现“TCPServer Error: Address already in use” 错误

HAN Kai

11-26

1142

在Git Bash下rake preview之后，出现了“TCPServer Error: Address already in use” 错误，打开浏览器输入;http://localhost:4000/后，显示 “ 浏览器无法连接到 localhost:4000 ” 这是因为4000端口被其他程序占用了，需要把占用端口的其他程序干掉。解决方法：进入 cmd输入： netsta

Octopress自定义404页面

HAN Kai

10-20

1042

关于自定义页面在https://help.github.com/articles/custom-404-pages里有说明。只需要在source根目录下创建一个自定义的404.html文件即可，需要注意的是，必须是404.html，而不能是404.markdown。如下： D:\octopress\source\404.html.(把YOURURL和YOUREMAIL换成自己的信息即可)

Octopress添加tags的问题

HAN Kai

10-24

873

网上有许多说明，如（为octopress添加tag Cloud）可以为Octopress加上tags，提交第1个post加上1个新的tag没有问题，但是当提交第2个post加上1个新的tag的时候。就会出现如下错误在http://jeffli.me/blog/2013/06/17/add-tags-and-tag-cloud-support-to-octopress/找到了答案。这

Python全栈开发源码包：Pandas数据分析Matplotlib可视化FastAPI接口与Excel自动化办公

06-19

Python 全栈开发实战源码包，含四类可运行示例，附 sample 数据，解压即可使用。【包含模块】 1. Pandas 数据分析：批量合并 CSV、去重、导出 Excel 2. Matplotlib 可视化：销售趋势折线图与产品汇总统计 3. openpyxl 自动化：自动生成带折线图的 Excel 周报 4. FastAPI Web 接口：健康检查与销售数据 REST 查询【使用方法】 1. 安装依赖：pip install -r requirements.txt 2. 一键演示：python run_all_demos.py 3. 启动 API：uvicorn module_04_fastapi_demo:app --host 127.0.0.1 --port 8000 4. 接口文档：浏览器打开 http://127.0.0.1:8000/docs 【目录说明】 data/ 示例 CSV 数据 | output/ 运行输出 | README.md 详细说明【环境要求】Python 3.8+，支持 Windows / macOS / Linux

设计工作室 DWG 图纸乱码？下载设计专用字体库.rar

06-19

解决CAD图纸文字变问号、文字变乱码，欢迎下载！

顶刊复现配电网两阶段鲁棒故障恢复研究（Matlab代码实现)

06-19

内容概要：本资源聚焦于配电网在发生故障后的两阶段鲁棒恢复研究，旨在提升电力系统在不确定性条件下的恢复能力与运行可靠性。研究采用两阶段优化方法，第一阶段进行预恢复决策，如网络重构、分布式电源出力调整等，以最小化预期损失；第二阶段则针对实际发生的故障场景实施校正控制，利用鲁棒优化理论应对负荷波动、新能源出力不确定性等因素，确保恢复方案的可行性与强健性。资源提供了完整的Matlab代码实现，复现了相关顶刊研究成果，便于使用者深入理解模型构建、算法求解及仿真分析全过程。; 适合人群：具备电力系统分析、优化理论基础及Matlab编程能力的研究生、科研人员及电力行业工程师。; 使用场景及目标：① 学习并掌握配电网故障恢复的先进优化方法，特别是两阶段鲁棒优化模型的构建与应用；② 复现和验证顶刊论文中的算法，为自身科研工作提供技术参考和代码基础；③ 将所学方法拓展应用于微电网、主动配电网等新型电力系统的可靠性评估与优化调度研究。; 阅读建议：学习者应结合提供的Matlab代码，仔细研读模型的数学公式与求解逻辑，重点关注不确定性建模、两阶段决策变量的设定以及鲁棒对等转换技巧。建议在掌握基础案例后，尝试修改参数或引入新的约束条件进行扩展研究，以深化理解并提升创新能力。

易语言源码易语言D2D物理效果源码