hexo+yilia添加相册视屏功能

---

主要是添加相册和视频功能，参考Hexo-Github实现相册功能 ，csdn博客：Hexo+Github实现相册功能，我看到网上好多人都是按照这个模板来实现的。
效果图：

注：这个视频加载不出来应该是因为和视频链接有关系.

一、增加相册功能

1. 原理

两个github仓库，一个存放图片，一个存放hexo博客（当然你一个仓库两个分支也可以，我就是这样）。

2.修改代码

源代码到github去下：https://github.com/lawlite19/Blog-Back-Up

2.1 新建博客的photos页面

• 在博客的source文件夹下建立一个photos文件夹

• 将样式文件放到photos文件夹下，样式文件我都放到了github上：https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy

  ├─blog_photos_copy
  │      data.json
  │      index.ejs
  │      ins.css
  │      ins.js
  │      lazyload.min.js
  

• 修改ins.js文件，主要是里面的render函数

• 其中的url对应到你的github放图片的地址

var minSrc = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/lawlite19/blog-back-up/master/photos/' + data.link[i];

2.2 新建本地图片库

新建一个文件夹存放图片，我的是photos-source，新建目录photos，min_photos，同时把ImageProcess.py,ImageProcess.pyc， tool.py 这三个文件放到该目录下。

H:.photos-source
│  ImageProcess.py
│  ImageProcess.pyc
│  tool.py
│
├─blog_photos_copy
│      data.json
│      index.ejs
│      ins.css
│      ins.js
│      lazyload.min.js
│
├─min_photos
│      2014-11-16_鞠婧祎1.jpg
│
├─photos
│      2014-11-16_鞠婧祎1.jpg
│      data.json
│
└─__pycache__
        ImageProcess.cpython-37.pyc     

2.3 修改tool.py中的路径

修改这里的下面代码块的路径：

#路径换成自己的博客的图片文件夹的路径:H:\Hexo\source\photos
    with open("H:\\Hexo\\source\\photos\\data.json","w") as fp:
        json.dump(final_dict, fp)

注意：如果不是用两个仓库，可以注释git命令部分内容，然后需要自己先将图片上传到github上，要不然显示不了。

2.4 每次上传照片都需要运行python脚本

需要安装python环境，在命令行运行py tool.py命令。

2.5 开启相册功能

H:\Hexo\themes\yilia\_config.yml取消注册相册行。

menu:
  主页: /
  #随笔: /tags/随笔/
  #分类: /categories
  归档: /archives
  相册: /photos
  #标签: /tags

3.存在问题

众所周知，国内访问GitHub还有比较慢的，所以有时候图片会加载不出来。
替换方法：使用七牛云作为图库，存放图片，这种方式网上也很常见，可以自行修改。

二、添加（相册页的）视频功能

视频功能基于相册功能，相当于在其旁边添加一个导航栏，导航到相册页。

1、添加视频样式css

• 打开当前博客source\photos文件夹下的ins.css文件
• 加入如下内容

/* ====== video ===== */
 .video-container {
    z-index: 1;
    position: relative;
    padding-bottom: 56.25%;
    margin: 0 auto;
}
.video-container iframe, .video-container object, .video-container embed {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 7%;
    width: 85%;
    height: 85%;
    box-shadow: 0px 0px 20px 2px #888888;
}

2、添加视频

• 我这里添加的是优酷上面的视频
• 在当前博客source\photos文件夹下建立videos.ejs文件
• 内容如下：

---
layout: post
slug: "photos"
title: "相册"
noDate: "true"
comments: "true"
reward: "true"
open_in_new: false
---
<link rel="stylesheet" href="./ins.css">
<div class="photos-btn-wrap">	<a class="photos-btn" href="/photos">Photos</a>
	<a class="photos-btn active" href="/photos/videos.html">Videos</a>
</div>
<center>
    <h1>指弹_女儿情</h1>
</center>
<hr/>
<center>
    <div class="video-container">
        <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjUzMzY4OTM3Ng==" frameborder=0 allowfullscreen></iframe>
    </div>
</center>
<hr/>
<center>
    <h1>指弹_友谊地久天长</h1>
</center>
<hr/>
<center>
    <div class="video-container">
        <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ5MDExOTY2MA==" frameborder=0 allowfullscreen></iframe>
    </div>
</center>
<hr/>
<center>
    <h1>指弹_Always with me</h1>
</center>
<hr/>
<center>
    <div class="video-container">
        <iframe height="80%" width="80%" src="http://player.youku.com/embed/XMjQ4MDQyNTQ0MA==" frameborder=0 allowfullscreen></iframe>
    </div>
</center>

3、修改\Hexo\source\photos\index.ejs的相册的超链接

原来是<a class="photos-btn" href="#">Videos</a>，不修改是访问不了的。

---
layout: post
slug: "photos"
title: "相册"
noDate: "true"
comments: "false"
---
<link rel="stylesheet" href="./ins.css">
<div class="photos-btn-wrap">
	<a class="photos-btn active" href="javascript:void(0)">Photos</a>
    <a class="photos-btn" href="/photos/videos.html">Videos</a>
</div>

---

文章首发于：hexo+yilia添加相册视屏功能