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


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

绘制图标

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

擦除中间的图案,然后使用吸管吸取主颜色,绘制出图标后另存为full-32x32.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("https://cdn.jsdelivr.net/gh/muyulong/muyulong@V0.8/img/other/full@32x32.png");
  bottom: 90px;
  display: none;
}

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

注意事项

sakura-app.js这个文件里面貌似要加一行内容

另外,我发现只要做好 url 的拼接,大部分支持外链的视频都可以作为背景视频


菜鸡一个,啥也不会。