博客第二次更新内容及其实现

本次则为第二次比较大的更新

• 添加了鼠标点击特效js代码
• 对站内添加代码进行优化
• 将博客内图片实现了点击预览、放大缩小、左右滑动切换图片等自适应特效
• 引入畅言云评论，实现双评论系统。
• 插入LATEX公式
  

  ---

1 鼠标点击特效

其中js特效的实现比较简单，实现博客内全局的点击特效，只需要在theme文件header或者footer等全局都会调用的php界面里插入代码即可，代码如下，鼠标点击文字可在a数组里进行更改，颜色代码可在color中进行修改，此处给出一个参考的颜色及其代码的对应表格：颜色代码对应表(由于此功能十分鸡肋已去除)

<script language="javascript" type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("章呈瑞的博客", "python", "java", "C++", "matlab", "php", "html" ,"kotlin", "javascrip", "css", "linux", "windows");
        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": "#ff99ff"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
			"opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

2 站内代码模块的调整

本站应用了CodeColorer插件实现了添加代码时的代码高亮功能。并在后台编辑器中通过pre预格式化进行调用，演示效果如上：

3 图片点击放大效果

本站通过使用ModuloBox Lite插件来实现该效果，安装该插件后，只需要将编辑器中图片地址链接到图片本身即可实现图片的幻灯片播放放大缩小等操作；并且可以在手机电脑等设备上自适应运行。此处给出站内以及站外两个demo来感受该插件的魅力。

demo1 壁纸网页调用插件实现壁纸的幻灯播放

演示站点如下：瑞羽云壁纸

demo2 站内直接调用插件实现站内图片的放大与轮播

演示效果如下：通过点击图片调用自身链接，链接到图片本身进入到预览界面，当同一界面出现多个图片时则会自动进入幻灯片预览界面，可以通过手指或鼠标左右滑动实现同页内图片的切换。

4 畅言云评的引入

通过调用畅言云评的接口实现评论，并支持qq登录，通过使用lite版本去除广告，代码如下，需要自行注册并添加域名白名单：

<!-- 代码1：放在页面需要展示的位置 -->
<!-- 如果您配置过sourceid，建议在div标签中配置sourceid、cid(分类id)，没有请忽略 -->

<div id="cyEmoji" role="cylabs" data-use="emoji"></div>
<!--PC和WAP自适应版-->
<div id="SOHUCS"></div>
<script type="text/javascript"> 
(function(){ 
var appid = 'cyvcfwaCI'; 
var conf = 'prod_0d8a994364a9a2d707537132ba613010'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) {
var head = document.getElementsByTagName('head')[0]||document.head||document.documentElement;
var script = document.createElement('script');
script.type = 'text/javascript';
script.charset = 'utf-8';
script.id = 'changyan_mobile_js';
script.src = 'https://cy-cdn.kuaizhan.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf;
head.appendChild(script);
} else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://cy-cdn.kuaizhan.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>

<!-- 代码2：用来读取评论框配置，此代码需放置在代码1之后。 -->
<!-- 如果当前页面有评论框，代码2请勿放置在评论框代码之前。 -->
<!-- 如果页面同时使用多个实验室项目，以下代码只需要引入一次，只配置上面的div标签即可 -->
<script type="text/javascript" charset="utf-8" src="https://cy-cdn.kuaizhan.com/js/??lib/jquery.js,changyan.labs.https.js?appid=cyvd4ftDU"></script>

5  插入latex公式的实现

本站采用了Mathjax-Latex by Kblog插件来实现插入latex公式，因为调用js需要耗费时间所以仅在需要调用mathjax时来调用，通过在后台设置调用地址进行调用，博客中的插入方式及预览demo如下，通过两个$符号或者latex与[/latex]包围latex代码即可实现：

使用前需要在文章前添加如下代码：

<link rel="dns-prefetch" href="//cdn.mathjax.org" /><script src="//cdn.bootcss.com/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>

$$E=mc^2$$

$$E=mc^2$$

$$U\left( {|\left\langle \phi \right. + |\left\langle \psi \right.} \right) = U\left( {\left\langle {|\phi } \right.} \right) + U\left( {\left\langle {|\psi } \right.} \right)$$

$$U\left( {|\left\langle \phi \right. + |\left\langle \psi \right.} \right) = U\left( {\left\langle {|\phi } \right.} \right) + U\left( {\left\langle {|\psi } \right.} \right)$$