使用shake.js让你博客支持摇一摇
大家好,又到了随机文章的时间,请使用手机打开演示站点,然后像摇妹子一样摇晃手机,你会发现非常牛逼的事情,炫酷吧。该功能已经集成在Oconnor1.8中。本文主要讲解这货的原理。
首先需要下载shake.js,shake.js github地址,我们只需要里面的shake.js,然后引入。
添加“摇一摇”事件监听
window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake occurs
function shakeEventDidOccur () { //put your own code here etc.
if (confirm("Undo?")) { }
}
取消监听
window.removeEventListener('shake', shakeEventDidOccur, false);
随机文章实现方式
JS代码,当然在这之前需要进入shake.js脚本
window.addEventListener('shake', shakeEventDidOccur, false); //function to call when shake occurs
function shakeEventDidOccur () { jQuery.post(Bigfa.ajaxurl, {
action : 'random_post',
}, function(data) {
window.location.href = data;
});
}
下面的代码扔到functions.php中,如果你已经添加了上一篇随机文章的代码这里就不需要
wp_enqueue_script( 'key', true);
wp_localize_script('key', 'Bigfa', array(
"ajaxurl" => admin_url('admin-ajax.php')
));
add_action( 'wp_ajax_random_post', 'bigfa_random_post' );
add_action( 'wp_ajax_nopriv_random_post', 'bigfa_random_post' );
function bigfa_random_post() {
$posts = get_posts('post_type=post&orderby=rand&numberposts=1');
foreach($posts as $post) {
$link = get_permalink($post);
}
echo $link;
exit;
}
OK。just 摇 it。
浏览器和设备支持情况
iOS Safari 4.2.1 (and above)
Android 4.0.3 (default browser)
Opera Mobile (Android)
BlackBerry PlayBook 2.0
Firefox for Android
FirefoxOS Devices
使用shake.js让你博客支持摇一摇的更多相关文章
- 利用Sails.js+MongoDB开发博客系统
http://yoyoyohamapi.me/categories/利用Sails-js-MongoDB开发博客系统/ 利用Sails.js+MongoDB开发博客系统 Apr 14, 2016 利用 ...
- Node.js的开源博客系统Ghost搭建教程
准备工作 Node.js版本:0.10.x.0.12.x.4.2.x.安装步骤可参考:Node.js环境搭建 Ghost版本:0.7.4:中文集成版(33.6M),中文标准版(3.39M),英文原版( ...
- HelloDjango 第 09 篇:让博客支持 Markdown 语法和代码高亮
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了让博客文章具有良好的排版,显示更加丰富的格式,我们使用 Markdown 语法来书 ...
- 使用CSS/JS代码修改博客模板plus
之前对CSS/JavaScript了解还不深,只是把模板的CSS胡乱修改了几个属性.最近正好也在做一个网站的前端,学习了不少东西,再来改一改~ 上次最后之所以铩羽而归,是因为从CSS里找不到那些#和. ...
- 基于Vue+node.js的个人博客
前言 作为一个年轻的程序员,而且是作为一个未来的前端工程师,怎么能没有一个属于自己的博客呢,于是乎在暑假咸鱼了一个多月后开始了我的博客的编写. 技术栈 前端 vue.js+scss 因为当时没学vu ...
- hexo 博客支持PWA和压缩博文
目标网站 https://blog.rmiao.top/ PWA yarn add hexo-offline 然后在root config.yml里新增 # offline config passed ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- github+hexo+node.js搭建个人博客基本过程及遇到的问题
一,所需工具 1,github账号+Gitclient+配置SSH key 2,安装node.js. 3,安装Hexo. 当中,github pages是我们用来部署我们本地的博客到github上的. ...
- Typecho博客支持emoji表情设置
介绍 大家在typecho博客写文章时,很多人都喜欢使用emoji表情(比如这些图标)但是typecho的数据库类型默认不支持emoji编码,因为Emoji是一种在Unicode位于u1F601-u1 ...
随机推荐
- Git入门私房菜
昨天下午参考廖雪峰的博客和其他一些文章,简单了解了一下传说中的Git,发现常见用法入门还是挺容易上手的,在此做一些笔记,方便以后查阅和复习. Git安装 Linux sudo apt-get inst ...
- thinkphp中的__DIR__ __ROOT__ __APP__ __MODULE__ APP_PATH LIB_PATH MODULE_PATH 等是在哪里定义的?
为什么会产生这样的 路径 常量等 的 困扰? 是由于 在tp中, 使用了多种形式的常量导致的, 比如, 有php语言本身的 "魔术常量", 有 php函数, 比如dirname定义 ...
- bootstrap6 关于bs的使用总结
在同一行中也可以有多个过了行的 "行", 即列的"总宽度"超宽度12. 即实现堆叠display:block和水平排列float的自动控制, 在div的clas ...
- HDU 5887 Herbs Gathering(搜索求01背包)
http://acm.hdu.edu.cn/showproblem.php?pid=5887 题意: 容量很大的01背包. 思路: 因为这道题目背包容量比较大,所以用dp是行不通的.所以得用搜索来做, ...
- HDU 6092 Rikka with Subset(dp)
http://acm.hdu.edu.cn/showproblem.php?pid=6092 题意: 给出两个数组A和B,A数组一共可以有(1<<n)种不同的集合组合,B中则记录了每个数出 ...
- HDU 1083 Courses(二分图匹配模板)
http://acm.hdu.edu.cn/showproblem.php?pid=1083 题意:有p门课和n个学生,每个学生都选了若干门课,每门课都要找一个同学来表演,且一个同学只能表演一门课,判 ...
- UVa 1354 天平难题
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Python的替换函数——replace(),strip(),和re.sub()
在Python中常用的三个"替换"函数是strip(),replace()和re.sub(),下面来讲讲这三个函数的用法. 一.replace() 基本用法:对象.replace( ...
- MongoDB(课时24 全文索引)
3.6.3 全文索引 在一些信息管理平台上经常需要进行信息模糊查询,最早的时候是利用了某个字段上实现的模糊查询,但这个时候返回的信息并不会很准确,因为只能够查A字段或B字段,而在MongoDB里面实现 ...
- Jsp基础语法(由简入杂)
JSP基础语法 一,JSP简介 Jsp是一个简化的Servlet设计,是在服务器端执行,他实现了再Java中使用HTML标签. Jsp是一种动态网页技术标准也是JAVAEE的标准 二,常见动态网站开发 ...