MENU

关于博客上配置的一些小功能汇总

很多时候在使用博客的过程中,遇到不少实用而且给力的小工具,这里统一进行记录整理。

1,鼠标指尖贯彻社会主义核心价值观。

之前在浏览某些站点的时候,就看到过人家的站点里鼠标点击之后会显示诸如"富强","民主","自由"之类的词汇,感觉很高大上额,今天心血来潮也给博客添加了这个功能,网上一找,原来竟是如此简单。

效果展示:

这里可以看到点击之后的核心主机价值观各字的颜色是不停变幻的,这个颜色随机的功能,也是许多介绍这个功能的博客里的代码所不具备的,我找到这个代码也是非常巧合的缘分,其间丢过,后来又费了大劲儿找回来,现在下边保存的就是了,再也不怕丢失了。

接下来就介绍一下这个用代码实现的鼠标点击特效的功能。

去到主题的根目录下找到footer.php,打开并添加下边的代码。添加位置如图所示
请输入图片描述
添加的代码内容如下:

代码

<script type="text/javascript">
/ 鼠标特效 /
var a_idx = 0;
jQuery(document).ready(function($) {

$("body").click(function(e) { 
    var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善"); 
    var $i = $("<span/>").text(a[a_idx]); 
    a_idx = (a_idx + 1) % a.length; 
    var x = e.pageX, 
    y = e.pageY; 
    $i.css({ 
        "z-index": 999999999999999999999999999999999999999999999999999999999999999999999, 
        "top": y - 20, 
        "left": x, 
        "position": "absolute", 
        "font-weight": "bold", 
        "color": "#ff6651" 
    }); 
    $("body").append($i); 
    $i.animate({ 
        "top": y - 180, 
        "opacity": 0 
    }, 
    1500, 
    function() { 
        $i.remove(); 
    }); 
}); 

});
</script>

2,更改鼠标样式。

之前在各种博客闲逛的时候,看见过一些变异了的鼠标样式,那时候还不知道鼠标样式这个词儿,而且感觉很多站点设置的鼠标样式并不好看,直到偶然间逛到闲鱼博客,看到了滑稽版的鼠标样式,让我瞬间觉得,这么一个有意思而又可爱的样式,,我也想要。

说干就干,就去百度怎么弄。最后参考了这篇文章:https://www.qcgzxw.cn/1385.html#

总结起来也就两步:

  • 1,上传鼠标样式文件到服务器。- 2,将上传的在style.css里边进行引用。

我就因为上传的鼠标样式的文件不对,导致一直失败,大家可以根据自己的喜好去下载鼠标样式,如果也想要我的这个,那么点击下边链接可以下载。

文件下载

此处内容需要评论回复后方可阅读

下载之后,上传到服务器的对应目录下。要保证可以通过连接下载到。

然后在主题根目录下的style.css文件开头添加如下代码:

  1. / 鼠标样式 开始/
  2. / 普通指针样式/
  3. body {
  4. cursor: url(http://www.eryajf.net/啦啦啦), default;
  5. }
  6. / 链接指针样式/
  7. a:hover{cursor:url(http://www.eryajf.net/啦啦啦), pointer;}
  8. / 鼠标样式 结束/

注意:要将url改成你自己的域名以及你的鼠标样式文件所放的位置。

然后再去浏览器里边刷新,应该就可以了。

如果,并不可以。那么尝试清除浏览器缓存,以及重启nginx,等,将缓存释放,再去尝试。

如果,还不行,那么参考一下:WordPress解决修改style.css不生效问题三步走!这篇文章。

以上,就实现了如本站的鼠标样式啦。

当然还有更简单的方式,就是使用插件(Unique Cursor),但是插件里边的有太low了,所以就不推荐了哈。

3,关于右侧侧边栏的3D标签云。

有时候逛别人的站点,看到旁边的标签要么是3D的,要么是地图的,很是酷炫,一般效果如下图:

终于在逛小文博客(原文)的时候看到,原来有一款很不错的汉化插件可以直接实现,那还说什么呢,直接来呗。

先放出下载链接:

文件下载

此处内容需要评论回复后方可阅读

使用起来也非常简单,安装并启用,然后在外观---》小工具处就可以看到这款工具了。

可以自定义其中的宽高以及一些其他简单配置,基本上都是比较简单的。

4,配置博客有评论微信通知。

这个功能就简直不要太赞了,也是下午在逛闲鱼博客(原文)的时候看到的功能,当然这个是别人写好的,咱们直接拿过来用的一个功能。

功能了解

首先,要完成这个WordPress有新评论微信提醒管理员的功能,需要用到这个叫 Server酱 的东西。

Server酱是什么?

「Server酱」,英文名「ServerChan」,是一款「程序员」和「服务器」之间的通信软件。

说人话?就是从服务器推报警和日志到手机的工具。

开通并使用上它,只需要一分钟:

  • 登入:用 GitHub 账号登入网站,就能获得一个 SCKEY (在「发送消息」页面)- 绑定:点击「微信推送」,扫码关注同时即可完成绑定- 发消息:往 http://sc.ftqq.com/SCKEY.send 发 GET 请求,就可以在微信里收到消息啦

当然,官方还有一大堆解释,闲鱼就懒得发了,了解那么多也没什么卵用,简单知道,能用就行了,呵呵。

功能部署

其实上面已经把方法简单说了一下,事实上部署起来也就是那么简单......这里还是完整梳理一遍。

1,注册 GitHub 账号(有了就跳过这步)。

2,用 GitHub 账号登入网站,就能获得一个 SCKEY (在「发送消息」页面)

3,绑定「Server酱」:点击「微信推送」,扫码关注同时即可完成绑定。

4,将获取的 SCKEY ,替换代码中的"你的 SCKEY ",添加到function.php,保存即可。(代码来自网络,作者不清,知道的可以告知)

  1. //评论微信推送
  2. function sc_send($comment_id)
  3. {
  4. $text = '博客上有一条新的评论';
  5. $comment = get_comment($comment_id);
  6. $desp = $comment->comment_content;
  7. $key = '你的SCKEY';
  8. $postdata = http_build_query(
  9. array(
  10. 'text' => $text,
  11. 'desp' => $desp
  12. )
  13. );
  14. $opts = array('http' =>
  15. array(
  16. 'method' => 'POST',
  17. 'header' => 'Content-type: application/x-www-form-urlencoded',
  18. 'content' => $postdata
  19. )
  20. );
  21. $context = stream_context_create($opts);
  22. return $result = file_get_contents('http://sc.ftqq.com/'.$key.'.send', false, $context);
  23. }
  24. add_action('comment_post', 'sc_send', 19, 2);

这里就配置成功啦,现在就可以去进行一下测试咯。

试验。

我在留言板上做一下留言,然后去微信看看效果。

ok,大功告成,感谢server酱,感谢闲鱼哥!

5,如何将404页面对接到腾讯公益。

之前在不少地方看过404的腾讯公益界面,对于我们这样一个小人物,如果将自己的博客404也变成这样一个公益界面,或许能出一份小力,也是莫大的功德。

其实设置的方法倒是非常简单的。

首先去到自己博客主题的根目录中。找到404.php,先备份一下,然后将下边的内容进行替换。

  1. cp 404.php 404.phpbak
  2. vim 404.php #添加如下代码
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <meta charset="utf-8">
  7. <meta name="description" content="二丫讲梵 导航的 404 错误页面,当您看到这个页面,表示您的访问出错,这个错误是您打开的页面不存在,请确认您输入的地址是正确的!虽然你访问的页面找不回来了,但>是我们可以一起寻找失踪宝贝!" />
  8. <meta name="keywords" content="404,404 错误页面,二丫讲梵 导航,一起寻找失踪宝贝,404 公益计划" />
  9. <title>404 - 对不起,您查找的页面不存在 _ 一起寻找失踪宝贝 _boke112 导航</title>
  10. </head>
  11. <body>
  12. <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="/" homePageName="点此返回 二丫讲梵首页"></script>
  13. </body>
  14. </html>

其中的一些文字,你可以根据自己的需求进行一些小调整。

效果如下图:


未完待续。。。

0:00