hexo-theme-chi主题更新小记

前言

　　Chi 主题的大体结构功能算是写完了，但是还有一些个性化的东西需要添加，所以以后有关于 Chi 主题更新的部分就都写在这里吧。但是由于是 Shaun 个性化定制的一些东西，所以如果不是大 Bug 或大优化的更新，一般就不进 Chi 主题仓库中了。

功能篇

1. 脚注提示功能

功能描述： 鼠标悬停在脚注上即可显示对应脚注内容。 Shaun 的脚注由于是采用 pandoc 渲染的，所以也是属于个性化定制，就不将这个功能放进 Chi 主题仓库中了。

解决方案： 还是利用 Bootstrap 的 tooltip 提示插件，具体实现代码如下：

$('a.footnote-ref').each(function (index, elem) {
    let post_id = $(this).parents('article').attr('id');
    let fn_href = $(this).attr('href');
    elem.setAttribute('data-toggle', 'tooltip');
    elem.setAttribute('data-html', 'true');
    elem.setAttribute('title', $("#" + post_id + " " + fn_href).html());
});

遍历脚注，先获取文章 id，再获取对应文章下的对应脚注内容，使用 tooltip 提示。

Bug 篇

1. 图片没居中

问题描述： 上次那篇翻译的文章有几张图片，在放置的时候发现图片没有居中，查看代码后发现居中样式没写，但由于其图片标签 <img> 是放在一个 <figure> 标签中，由于不确定是不是 pandoc 渲染的问题，所以就没将这个修正放进 Chi 主题仓库中了。

解决办法： 在 style.styl 文件中添加样式：

figure {
	text-align: center;
}

即可让图片居中。

动画篇

1. 鼠标跟随动画

　　其实一直都想把『奥日与黑暗森林』中的鼠标轨迹特效移植过来，但是苦于水平有限，一直没法做到，恰好 19 年 StackOverflow 的愚人节彩蛋中有个鼠标跟随动画很有意思，有好事者还专门将该彩蛋做了个脚本：Will there be an option to permanently keep this year's April Fools design active? 。查看代码，知道实现原理后，发现用 jQuery 和 CSS3 实现一个类似的效果也不算很难，于是 Shaun 就尝试做了一下，并简单的美化了一下，感觉效果还行，就加到自己的个性化主题上了。至于在 Chrome 中的小尾巴和 Firefox 中的卡顿现象，是 Shaun 故意的，因为 Shaun 觉得这个小尾巴很有意思，从这个动画看，Chrome 确实比 Firefox 要流畅一点。最终实现代码如下：

css 代码：

.cursor-trail--item {
    display: inline-block;
    line-height: 1px;
    position: fixed;
    pointer-events: none;
    touch-action: none;
    z-index: 9999999;
    will-change: transform;
    font-size: 10px;
    color: rgba(186, 227, 240, 0.1);
    text-shadow: 0 0 2px #6CC2F8;
    -webkit-animation: cursorTrail 0.9s ease;
    animation: cursorTrail 0.9s ease;
}

@keyframes cursorTrail {
    0% {
        opacity: 1;
    }

    20% {
        opacity: 0.5;
        transform: scale(5);
    }

    100% {
        opacity: 0;
        transform: translate3D(0, -20px, 0) scale(1) rotate(90deg);
    }
}

js 代码如下：

$(document).on('mousemove', function (e) {
    e.preventDefault();
    if (this.time && (Date.now() - this.time) < 16) return;
    this.time = Date.now();
    let trail_character = '•';
    let mouse_x = e.originalEvent.x || e.originalEvent.layerX || 0; 
    let mouse_y = e.originalEvent.y || e.originalEvent.layerY || 0;
    mouse_x = mouse_x + 20;
    mouse_y = mouse_y + 26;
    

    $('#cursor-trail').append(
        '<span class="cursor-trail--item" style="left:' 
        + mouse_x 
        + 'px;top:' 
        + mouse_y 
        + 'px;">' 
        + trail_character 
        + '</span>'
    );

    $('.cursor-trail--item').each(function () {
        let item = $(this);
        setTimeout(function () { 
            $(item).remove(); 
        }, 900);
    });
});

若不要小尾巴，则只需要将移除元素的时间改快一点就行了，除开上面的代码，还需要在 html 页面中添加一个元素 <span id="cursor-trail"></span> 。

2. 点击波纹

　　一次偶然的机会，看到一篇这样的文章：还原一个 Windows 10 Metro 布局。感觉其中的点击波纹动画很有意思，Shaun 决定把这个动画也放进自己的个性化主题中。至于代码就不贴了，毕竟就是上面文章提供的代码，只是用这个动画的时候发现了 Chrome 的一个问题，就是在进行模糊动画的时候会出现正方形的右边框和下边框，单个模糊不进行动画，不会有边框，进行动画但没模糊也不会有边框，两个同时一起就会出现问题，Firefox 没有这个问题，但 Firefox 存在另一个问题，就是鼠标快速连点的时候，鼠标跟随动画可能会出现问题。浏览器的问题 Shaun 暂时没法解决了，就先这样吧 ╮(╯▽╰)╭。虽然对 Chrome 为啥会出现这样的问题有些猜想，但还是不说出来丢人了，万一不是 Shaun 想的这样就尴尬了 ,,ԾㅂԾ,, 。

后记

有更新再继续更新吧。