文章目录
主要是添加相册和视频功能,参考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添加相册视屏功能