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添加相冊視屏功能