Next -24- 添加相册系列 -4- 将本地相册信息部署到hexo
现在我们已经有了基础的photos框架，图像文件夹已经整理完毕，提取了信息放在了json文件，并且将图像上传到了七牛云图床，在hexo source文件夹内创建了相册对应index.md 和json文件。仅需要将这些串联起来，部署到hexo即可。
在next主题中存在为二级文件夹配置内容的文件，修改该文件，在具有二级文件夹结构的index.html中加入特定类
建立js文件向类中添加内容
内容为读取json文件得到的相册信息，这样便建立起了逐个页面的相册
同理在photos中加入特定类
建立js文件读取相册json文件并建立链接目录，即完成了整个相册的基础框架
之后的优化、美化便水到渠成了
建立相册
向二级目录的index.html加入类
在 Hexo/themes/next/layout/_partials/page文件夹中 修改page-header.swig文件，加入类别为
album_image_grid的div，并引用js文件，此时对应的二级文件夹内的index.html中便多了一个空div
<header> <{%- if theme.seo %}h2{% else %}h1{%- endif %} itemprop="name headline"> {{- page.title }} {{- post_edit(page.source) }} </{%- if theme.seo %}h2{% else %}h1{%- endif %}> <div> {%- if page.description %} <div>{{ page.description }}</div> {%- endif %} {%- if page.type == 'photography' %} <div> </div> <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script type="text/javascript" src="/photos/album.js"></script> {%- endif %} {% include '_partials/page/breadcrumb.swig' %} </div> </header> 复制代码建立album.js文件
在Hexo/themes/next/source/photos文件夹内建立相册js文件
album.js，写入如下内容：
console.log('album js Hello World') photo ={ page: 1, offset: 20, init: function () { var that = this; $.getJSON("readme.json", function (data) { that.render(that.page, data); //that.scroll(data); }); }, render: function (page, data) { var year = data["time"]["year"] var month = data["time"]["month"] var day = data["time"]["day"] var type = data["type"] var model = data["model"] var city = data["position"]['city'] var street = data["position"]['street'] var title = data["title"] var balabala = data["balabala"] var image_info_list = data["image_info"] console.log(image_info_list[0]["Image_Model"]) console.log(year) //var begin = (page - 1) * this.offset; //var end = page * this.offset; //if (begin >= data.length) return; var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = ""; $(".album_image_grid").append('<br>'); $(".album_image_grid").append('<br>'); for (var i = 0; i < image_info_list.length ; i++) { sub_image = image_info_list[i] nbsp = "        " href_str = "" image_model = sub_image["Image_Model"] //相机型号 if (image_model!="") { href_str = href_str+'相机：'+image_model+nbsp } EXIF_fnumber = sub_image["EXIF_FNumber"] //光圈 if (EXIF_fnumber!="") { href_str = href_str+' 光圈：' +EXIF_fnumber +nbsp } EXIF_FocalLength = sub_image["EXIF_FocalLength"] //焦距 if (EXIF_FocalLength!="") { href_str = href_str+' 焦距：' +EXIF_FocalLength +nbsp } EXIF_exposureMode = sub_image["EXIF_ExposureMode"] //曝光模式 if (EXIF_exposureMode!="") { href_str = href_str+' 曝光模式：' +EXIF_exposureMode +nbsp } EXIF_exposureTime = sub_image["EXIF_ExposureTime"] //曝光时间 if (EXIF_exposureTime!="") { href_str = href_str+' 曝光时间：' +EXIF_exposureTime +nbsp } EXIF_ISOSpeedRatings = sub_image["EXIF_ISOSpeedRatings"] //ISO if (EXIF_ISOSpeedRatings!="") { href_str = href_str+' ISO：' +EXIF_ISOSpeedRatings +nbsp } image_url = sub_image["url"] li += '<div style="width:100%">' + '<div>' + '<a data-fancybox="gallery" href="' + image_url + '?raw=true" data-caption="' + href_str +'">' + '<img src="' + image_url + '?raw=true"/>' + '</a>' + '<br>' + '</div>' + // '<div>' + imgName + '</div>' + '</div>' } $(".album_image_grid").append(li); //$(".album_image_grid").lazyload(); //this.minigrid(); }, } photo.init(); 复制代码此时访问某个二级目录的地址可以看到图像已经上线
建立相册目录
主题配置
在Hexo/themes/next/layout文件夹内，修改page.swig，在schedule的elif后面加入内容：
{% elif page.type === 'schedule' %} <div> </div> {% include '_scripts/pages/schedule.swig' %} {% elif page.type === 'photos' %} <div> </div> <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script> <script type="text/javascript" src="https://unpkg.com/minigrid@3.1.1/dist/minigrid.min.js"></script> <link rel="stylesheet" href="/photos/photos.css"> <script type="text/javascript" src="/photos/photo.js"></script> {% else %} {{ page.content }} {%- endif %} 复制代码在同文件夹内建立文件 photos.swig 写入内容
{% extends '_layout.swig' %} {% import '_macro/post-collapse.swig' as post_template with context %} {% import '_macro/sidebar.swig' as sidebar_template with context %} {% block title %}{{ __('title.photos') }}: {{ page.photos }} | {{ title }}{% endblock %} {% block content %} {#################} {### photos BLOCK ###} {#################} <div> <div> <div> <{%- if theme.seo %}h2{% else %}h1{%- endif %}> {{- page.photos }} <small>{{ __('title.photos') }}</small> </{%- if theme.seo %}h2{% else %}h1{%- endif %}> </div> {{ post_template.render(page.posts) }} </div> </div> {#####################} {### END photos BLOCK ###} {#####################} {% include '_partials/pagination.swig' %} {% endblock %} {{ page.date }} {% block sidebar %} {{ sidebar_template.render(false) }} {% endblock %} 复制代码建立photos.js文件
在Hexo/themes/next/source/photos文件夹内建立相册js文件
photos.js，写入如下内容：
console.log('Photos js Hello World') photo ={ init: function () { var that = this; $.getJSON("album.json", function (data) { that.render(that.page, data); //that.scroll(data); }); }, render: function (page, data) { var album_list = data['album']; var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = ""; var link_profix = "/photos/" for (var i = 0; i < album_list.length; i++) { album_info = album_list[i] dir_name = album_info["directory"] title = album_info["title"] /*console.log(album_info) imgNameWithPattern = data[i].split(' ')[1]; imgName = imgNameWithPattern.split('.')[0] imageSize = data[i].split(' ')[0]; imageX = imageSize.split('.')[0]; imageY = imageSize.split('.')[1];*/ li += '<div>' + '<a href="' +link_profix + dir_name + '/">' + title + '<br>' + '</a>' + // '<div>' + imgName + '</div>' + '</div>' } $(".album_link_list").append(li); //$(".ImageGrid").lazyload(); this.minigrid(); }, minigrid: function() { var grid = new Minigrid({ container: '.ImageGrid', item: '.card', gutter: 12 }); grid.mount(); $(window).resize(function() { grid.mount(); }); } } photo.init(); 复制代码此时便有了相册目录：
至此我们已经完成了相册的基础框架，美化等工作仅需在此基础上顺水推舟即可。
作者：为为为什么
链接：https://juejin.cn/post/7016622557135093796