hexo-yilia添加视频照片功能


阅读数: 次   

hexo+yilia添加相册视屏功能

效果图：
mV0P56.jpg

一、增加相册功能

1. 原理

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

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

    1
    2
    3
    4
    5
    6
    ├─blog_photos_copy
    │      data.json
    │      index.ejs
    │      ins.css
    │      ins.js
    │      lazyload.min.js

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

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

1
2
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];

注意：本路径是不是你github保存路径，而是下载路径

进入你github放图片的目录下点击Download

1
被红色框框住的地址

2.2 新建本地图片库

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
H:
.photos
│	data.json
│   index.ejs
│   ins.css
│   ins.js
│   lazyload.min.js
│
|---photos-source
│		ImageProcess.py
│		ImageProcess.pyc
│		tool.py
│
├		─min_photos
│      		2014-11-16_鞠婧祎1.jpg
│
├		─photos
│      		2014-11-16_鞠婧祎1.jpg
│      		data.json
│
└		─__pycache__
        	ImageProcess.cpython-37.pyc

2.3 修改tool.py中的路径

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

1
2
3
#路径换成自己的博客的图片文件夹的路径: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取消注册相册行。

1
2
3
4
5
6
7
menu:
  主页: /
  #随笔: /tags/随笔/
  #分类: /categories
  归档: /archives
  相册: /photos
  #标签: /tags

3.存在问题

如果你上面操作都没有问题，那么你就会发现点开图片可以显示，缩略图不显示。

首先，去下载“empty.png” 这里这里
直接右键另存，保存为“empty.png”。名字也要一样。
在你博客的本地仓库source下新建一个文件夹命名为assets,再在assets下新建一个文件夹命名为img。最后把empty.png放到img里面。我的结果如下：

4.如果缩略图还是出不来

网页显示以下错误

img

那你可以试试这个方法

⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇ ⬇

打开你的ins.js,找到这段代码

img

根据选中路径来保存empty.png图片。

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

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

1、添加视频样式css

  • 打开当前博客source\photos文件夹下的ins.css文件
  • 加入如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* ====== 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文件
  • 内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
---
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>，不修改是访问不了的。

1
2
3
4
5
6
7
8
9
10
11
12
---
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>
赏

感谢支持!

微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

正因为没有翅膀，<br>人们才会寻找飞翔的方法。