NexT主题插件hexo-next-photos

hexo-next-photos插件中文说明

hexo-next-photos

升级说明

  • 现在该插件支持图床链接
  • 升级此插件请认真阅读本文后进行升级,避免出现不必要的麻烦,若有问题请在下方留言,我会认真查看

插件效果

https://jygzyc.github.io/photos/

如何使用

安装

  • 执行 npm install hexo-next-photos --save 命令
  • 然后需要你去修改NexT主题模板,添加如下内容至文件。

body-end.swig

  • 如果之前安装了此插件,请删除 /source/_data/body-end.swig中如下代码
  • 若之前并没有安装过此插件,请确保该文件已被创建(无需添加内容)
1
2
3
{% if page.type ==='photos' %}
<script src="/js/photo.js"></script>
{% endif %}

styles.styl

  • 如果之前安装了此插件,请删除 /source/_data/styles.styl中如下代码
  • 若之前并没有安装过此插件,请确保该文件已被创建(无需添加内容)
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
43
44
45
46
47
48
49
50
51
52
//album style
.ImageGrid {
width: 100%;
max-width:1040px;
margin: 0 auto;
text-align: center;
column-count: 1;
column-gap: 0;
}
@media (min-width: 500px) {
.ImageGrid {
column-count: 2; // two columns on larger phones
}
.card {
break-inside: avoid;
box-sizing: border-box;
padding: 4px;
border-radius: 8px;
background-color: #ddd;
}
}
@media (min-width: 800px) {
.ImageGrid {
column-count: 3; // two columns on larger phones
}
.card {
break-inside: avoid;
box-sizing: border-box;
padding: 4px;
border-radius: 8px;
background-color: #ddd;
}

}
.card {
break-inside: avoid;
box-sizing: border-box;
margin: 0 auto;
padding: 4px;
border-radius: 8px;
background-color: #ddd;
}

.ImageInCard img {
padding: 0 0 0 0;
border-radius: 8px;
}
.TextInCard {
background-color: rgba(255, 255, 255, 0.8);
font-size: 70%;
border-radius: 8px;
}

_config.yml

  • 在你的博客根目录,找到 _config.yml 文件然后添加如下的配置项,并且配置相应的URL
  • 若之前安装过此插件,请重置config配置如下:
1
2
3
4
5
# hexo-next-photos
hexo_next_photos:
modes : figureBed # or repository
pictureUrl : # if repositry, please put your repos URL here
pictureDirPath: # the dir put your photos or linkList.txt file, default: Your blog path/pictureDir/

repos例子:

1
2
3
4
hexo_next_photos:
modes: repository
pictureUrl: https://dev.tencent.com/u/username/p/repos/git/raw/master/photos/ # photos url
pictureDirPath: photoDir # photo dir path is 'Your blog path/photoDir/'

图床例子:

1
2
3
4
5
# hexo-next-photos
hexo_next_photos:
modes : figureBed
pictureUrl :
pictureDirPath: testDir # your linkList file is 'Your blog path/testDir/linkList.txt'

next.yml

  • 方法一:在你的博客主题目录,找到 _config.yml 文件然后添加如下的配置项
  • 方法二(推荐):在/source/_data/目录下新建next.yml,并将主题配置文件的内容全部复制过来,然后再修改下列配置项(之前已经新建过next.yml的直接修改就可以了)
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
custom_file_path:
- #bodyEnd: source/_data/body-end.swig
+ bodyEnd: source/_data/body-end.swig
- #style: source/_data/styles.styl
+ style: source/_data/styles.styl
...

# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: https://theme-next.org/docs/third-party-services/
# You may need to install dependencies or set CDN URLs in `vendors`
# There are two different CDN providers by default:
# - jsDelivr (cdn.jsdelivr.net), works everywhere even in China
# - CDNJS (cdnjs.cloudflare.com), provided by cloudflare
# ---------------------------------------------------------------
- fancybox: false
+ fancybox: true
...
- lazyload: false
+ lazyload: true
...

vendors:
# FancyBox
# jquery: //cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
# fancybox: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js
# fancybox_css: //cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css
jquery:
fancybox: # choose a faster CDN
fancybox_css: # choose a faster CDN

# Lazyload
# lazyload: //cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js
# lazyload: //cdnjs.cloudflare.com/ajax/libs/lozad.js/1.9.0/lozad.min.js
lazyload: # choose a faster CDN

新建页面

  • 新建照片页面 hexo new page photos,新建 /source/photos/index.md, 添加如下代码:
1
2
3
4
5
---
title: Photos
type: photos
---
<div class="ImageGrid"></div>
  • 添加如下代码至主题配置文件(前面提到的next.yml
1
2
menu:
+ photos: /photos/ || fa fa-camera

linkList.txt文件(图床模式使用)

  • 新建linkList.txt文件在config指定的目录下,若没有指定,默认为pictureDir,填入图床中图片的链接,样例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
https://s1.ax1x.com/2020/05/21/YbueyT.jpg
https://s1.ax1x.com/2020/05/21/YbuZlV.jpg
https://s1.ax1x.com/2020/05/21/YbuVS0.jpg
https://s1.ax1x.com/2020/05/21/YbukYn.jpg
https://s1.ax1x.com/2020/05/21/YbuFFs.jpg
https://s1.ax1x.com/2020/05/21/YbuPoj.jpg
https://s1.ax1x.com/2020/05/21/YbuCwQ.jpg
https://s1.ax1x.com/2020/05/21/Ybu9eg.jpg
https://s1.ax1x.com/2020/05/21/YbuSOS.jpg
https://s1.ax1x.com/2020/05/21/Ybnzy8.jpg
https://s1.ax1x.com/2020/05/21/YbnxQf.jpg
https://s1.ax1x.com/2020/05/21/YbnvSP.jpg
https://s1.ax1x.com/2020/05/21/YbnXWt.jpg

放入照片(repos模式使用)

  • 新建 originPhotos 文件夹,放在博客根目录
  • 放入照片
1
2
3
4
5
6
7
8
9
10
blog  
└───node_modules/
└───scaffolds/
│ ...
│ _config.yml
└───oringinPhotos/
│ │ Put your photos here, please keep your photos names same as your URL photos names
| | ...
| package.json
| ...

这样,我们就可以使用插件了。

存在的问题

  • 图床模式下,图床的响应速度同图床本身有关,存在速度较慢的情况

致谢

hexo-tag-cloud