关于hexo-Sakura主题中播放按钮的一点改进

这是一篇早期的教程文章，里面的内容可能已经过时或废弃，请注意甄别。

发现hexo-Sakura主题中首页的右下角有一个播放按钮。

png
点击按钮之后就可以播放一个视频，看着这个按钮我总觉得少点什么，于是我决定给它加一个全屏功能。

绘制图标

首先打开一个像素绘图软件，这里我用的是ArtCursors，为了能够绘制出和原版一样风格的按钮，我载入了原版的图标
png

擦除中间的图案，然后使用吸管吸取主颜色，绘制出图标后另存为full-32x32.png备用

png

主题修改

JavaScript功能

打开Sakura主题根目录，打开source\js,新建一个fullscreenElement.js文件，代码如下

//从网上随便抄了点代码改了改
function $(Nid){
 return document.getElementById(Nid);
}
    // 进入全屏：
    function entryFullScreen() {
        var docE = document.documentElement;
        if (docE.requestFullScreen) {
            docE.requestFullScreen();
        } else if (docE.mozRequestFullScreen) {
            docE.mozRequestFullScreen();
        } else if (docE.webkitRequestFullScreen) {
            docE.webkitRequestFullScreen();
        }
    }
    // 退出全屏
    function exitFullScreen() {
        var docE = document;
        if (docE.exitFullscreen) {
            docE.exitFullscreen();
        } else if (docE.mozCancelFullScreen) {
            docE.mozCancelFullScreen();
        } else if (docE.webkitCancelFullScreen) {
            docE.webkitCancelFullScreen();
        }
    }
    /*全屏操作的主要方法和属性
    * 1.requestFullScreen():开启全屏显示
    *   不同浏览器需要添加不同的前缀
    *   chrome:webkit   firefox:moz   ie:ms   opera:o
    * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
    * 3.fullScreenElement:是否是全屏状态，也只能使用document进行判断*/
    window.onload=function(){
        var div=document.querySelector("div");
        /*添加按钮的点击事件*/
        /*判断是否是全屏状态*/
        document.querySelector("#video-full").onclick=function(){
            var fullscreenElement =
                document.fullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement;
            if (fullscreenElement == null) {
                entryFullScreen();
            } else {
                exitFullScreen();
            }
        }
    }

ejs布局

找到layout\_partial\headertop.ejs这个文件，在id为video-container这个div中添加一个新的按钮，代码如下

<div id="video-full">
</div>
<script type="text/javascript" src="/js/fullscreenElement.js"></script>

css样式

打开source\css\style.css，为这个全屏按钮添加样式，代码如下

#video-full {
    background-image:url('cdn.muyulong.top/image/[email protected]');
    bottom:90px;
    display:none
}

如果你不想把css变得一团糟，那么关于播放功能的部分大概在1100行左右;-）

注意事项

sakura-app.js这个文件里面貌似要加一行内容
png
另外，我发现只要做好url的拼接，大部分支持外链的视频都可以作为背景视频
png

png